Update buttons layout in Guide Menu with TV layout (#492)

src/assets/css/guide-menu.styl

@@ -3,6 +3,22 @@
         display: flex;
         flex-direction: row;
         gap: 12px;
+
+        body[data-media-type=tv] & {
+            flex-direction: column;
+
+            button {
+                margin-bottom: 0 !important;
+            }
+        }
+
+        body:not([data-media-type=tv]) & {
+            button {
+                span {
+                    display: none;
+                }
+            }
+        }
     }
 
     &[data-is-playing="true"] {

src/modules/ui/guide-menu.ts

@@ -28,6 +28,7 @@ export class GuideMenu {
 
         closeApp: AppInterface && createButton({
             icon: BxIcon.POWER,
+            label: t('close-app'),
             title: t('close-app'),
             style: ButtonStyle.FULL_WIDTH | ButtonStyle.FOCUSABLE | ButtonStyle.DANGER,
             onClick: e => {
@@ -41,6 +42,7 @@ export class GuideMenu {
 
         reloadPage: createButton({
             icon: BxIcon.REFRESH,
+            label: t('reload-page'),
             title: t('reload-page'),
             style: ButtonStyle.FULL_WIDTH | ButtonStyle.FOCUSABLE,
             onClick: e => {
@@ -57,6 +59,7 @@ export class GuideMenu {
 
         backToHome: createButton({
             icon: BxIcon.HOME,
+            label: t('back-to-home'),
             title: t('back-to-home'),
             style: ButtonStyle.FULL_WIDTH | ButtonStyle.FOCUSABLE,
             onClick: e => {

src/utils/true-achievements.ts

@@ -13,6 +13,7 @@ export class TrueAchievements {
     }) as HTMLAnchorElement;
 
     static $button = createButton({
+        label: t('true-achievements'),
         title: t('true-achievements'),
         icon: BxIcon.TRUE_ACHIEVEMENTS,
         style: ButtonStyle.FOCUSABLE | ButtonStyle.FULL_WIDTH,