fixing some alignment

ls1intum · Sep 25, 2024 · 01e343a · 01e343a
1 parent c529946
commit 01e343a
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 19 deletions.
diff --git a/client/src/utilities/NavigationLayout/NavigationLayout.tsx b/client/src/utilities/NavigationLayout/NavigationLayout.tsx
@@ -8,22 +8,19 @@ import {
   Menu,
   MenuTarget,
   Select,
-  Switch,
+  Stack,
   Text,
   rem,
-  useMantineColorScheme,
 } from '@mantine/core'
 import {
   IconAppsFilled,
   IconDeviceDesktop,
   IconLogout,
   IconMail,
-  IconMoonStars,
   IconNews,
   IconSchool,
   IconSelector,
   IconStairs,
-  IconSun,
   IconUsers,
 } from '@tabler/icons-react'
 import type Keycloak from 'keycloak-js'
@@ -239,9 +236,9 @@ export const NavigationLayout = ({ keycloak, children }: NavigationLayoutProps):
                 size='xl'
                 mt='md'
                 style={{
-                  padding: '6px 6px',
+                  padding: '8px 8px',
                   borderRadius: '8px',
-                  height: '4rem',
+                  height: '4.5rem',
                   width: '100%',
                 }}
               />
@@ -252,16 +249,20 @@ export const NavigationLayout = ({ keycloak, children }: NavigationLayoutProps):
               <AppearanceSelector />
 
               <Menu.Divider />
-              <Menu.Item
-                variant='outline'
-                color='red'
-                leftSection={<IconLogout size={18} />}
-                onClick={() => {
-                  void keycloak.logout({ redirectUri: window.location.origin + '/management' })
-                }}
-              >
-                Logout
-              </Menu.Item>
+              <Stack gap='xs' style={{ padding: '8px' }}>
+                <Menu.Item
+                  variant='outline'
+                  color='red'
+                  onClick={() => {
+                    void keycloak.logout({ redirectUri: window.location.origin + '/management' })
+                  }}
+                >
+                  <div style={{ display: 'flex', alignItems: 'center' }}>
+                    <IconLogout size={18} style={{ marginRight: '8px' }} />
+                    <Text fz='sm'>Logout</Text>
+                  </div>
+                </Menu.Item>
+              </Stack>
             </Menu.Dropdown>
           </Menu>
         </AppShell.Section>

diff --git a/client/src/utilities/NavigationLayout/components/AppearanceSelector.tsx b/client/src/utilities/NavigationLayout/components/AppearanceSelector.tsx
@@ -1,4 +1,4 @@
-import { MantineColorScheme, Radio, Stack, useMantineColorScheme } from '@mantine/core'
+import { MantineColorScheme, Radio, Stack, Text, useMantineColorScheme } from '@mantine/core'
 import { IconDeviceDesktop, IconMoon, IconSun } from '@tabler/icons-react'
 import * as styles from './AppearanceSelector.module.scss'
 
@@ -9,11 +9,16 @@ interface AppearanceRadioCardProps {
 }
 
 const AppearanceRadioCard = ({ value, icon, label }: AppearanceRadioCardProps) => (
-  <Radio.Card radius='md' style={{ border: 'none', padding: '8px' }} className={styles.root} value={value}>
+  <Radio.Card
+    radius='md'
+    style={{ border: 'none', padding: '8px' }}
+    className={styles.root}
+    value={value}
+  >
     <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
       <div style={{ display: 'flex', alignItems: 'center' }}>
         {icon}
-        {label}
+        <Text fz='sm'>{label}</Text>
       </div>
       <Radio.Indicator />
     </div>