[UI/UX] Fix some visual issues related to logs, dialogs, and RTL layo…

…ut (#3207) Fix some visual issues related to logs, dialogs, and RTL layout
Heroic-Games-Launcher · Nov 21, 2023 · 32e16d4 · 32e16d4
1 parent b95abc8
commit 32e16d4
Show file tree

Hide file tree

Showing 6 changed files with 28 additions and 6 deletions.
diff --git a/src/frontend/components/UI/Sidebar/index.scss b/src/frontend/components/UI/Sidebar/index.scss
@@ -209,6 +209,12 @@
   padding: var(--space-2xs) 0;
 }
 
+.isRTL .Sidebar.collapsed .SidebarItemWithSubmenu:hover .SidebarSubmenu,
+.isRTL .Sidebar.collapsed .SidebarItemWithSubmenu:focus-within .SidebarSubmenu {
+  right: var(--sidebar-width);
+  left: auto;
+}
+
 .Sidebar.collapsed .SidebarItemWithSubmenu:hover .SidebarSubmenu.settings,
 .Sidebar.collapsed
   .SidebarItemWithSubmenu:focus-within

diff --git a/src/frontend/index.scss b/src/frontend/index.scss
@@ -75,6 +75,11 @@ body {
   background: var(--accent);
 }
 
+::-webkit-scrollbar-corner,
+::-webkit-resizer {
+  background: var(--gradient-body-background, var(--body-background));
+}
+
 .simple-keyboard {
   position: absolute;
   z-index: 10;

diff --git a/src/frontend/screens/Game/GamePage/index.scss b/src/frontend/screens/Game/GamePage/index.scss
@@ -143,7 +143,7 @@
     }
   }
 
-  .isRTL {
+  &.isRTL {
     .gameTools {
       right: auto !important;
       left: 0px;
@@ -156,6 +156,10 @@
       left: auto !important;
       right: 1rem;
     }
+    .backButton {
+      left: auto !important;
+      right: 12px;
+    }
   }
 
   .gameConfig {

diff --git a/src/frontend/screens/Library/components/InstallModal/index.scss b/src/frontend/screens/Library/components/InstallModal/index.scss
@@ -1,8 +1,10 @@
 .InstallModal__dialog {
-  width: 38vw;
-  height: fit-content;
+  width: 700px;
+  min-height: fit-content;
   min-width: fit-content;
-  max-height: 95vh;
+  max-width: 80vw;
+  height: 90vh;
+  max-height: 1000px;
 }
 
 .InstallModal__dialog > .anticheatInfo {

diff --git a/src/frontend/screens/Settings/sections/LogSettings/index.css b/src/frontend/screens/Settings/sections/LogSettings/index.css
@@ -8,11 +8,12 @@
   grid-template-rows: 1fr;
   column-gap: 0.5rem;
   height: 25em;
+  width: 100%;
 
   .log-buttongroup {
     display: flex;
     flex-direction: column;
-    width: 150px;
+    width: 180px;
     gap: 1rem;
     overflow-y: auto;
     overflow-x: hidden;

diff --git a/src/frontend/state/GlobalState.tsx b/src/frontend/state/GlobalState.tsx
@@ -790,9 +790,13 @@ class GlobalState extends PureComponent<Props> {
       libraryStatus,
       sidebarCollapsed,
       hideChangelogsOnStartup,
-      lastChangelogShown
+      lastChangelogShown,
+      language
     } = this.state
 
+    const isRTL = RTL_LANGUAGES.includes(language)
+    document.body.classList.toggle('isRTL', isRTL)
+
     storage.setItem('updates', JSON.stringify(gameUpdates))
     storage.setItem('sidebar_collapsed', JSON.stringify(sidebarCollapsed))
     storage.setItem('hide_changelogs', JSON.stringify(hideChangelogsOnStartup))