From 56fd147875f47a1bfd2c9f5e3b3c8be6bd24cef0 Mon Sep 17 00:00:00 2001
From: Beautiful Mim <156966699+beautifulmim@users.noreply.github.com>
Date: Fri, 6 Sep 2024 16:40:36 -0400
Subject: [PATCH] Update switches layout (#695)

* Hide mumble section and notifications for non fleet pilots

* Update switches layout
---
 .../app/src/components/blocks/SwitchSquare.astro   | 14 +++++++++++---
 frontend/app/src/pages/account.astro               |  2 +-
 2 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/frontend/app/src/components/blocks/SwitchSquare.astro b/frontend/app/src/components/blocks/SwitchSquare.astro
index 35d9d7bb..b8283e57 100644
--- a/frontend/app/src/components/blocks/SwitchSquare.astro
+++ b/frontend/app/src/components/blocks/SwitchSquare.astro
@@ -1,4 +1,5 @@
 ---
+import Flexblock from '@components/compositions/Flexblock.astro';
 import FluidFixed from '@components/compositions/FluidFixed.astro';
 import TextGroup from '@components/blocks/TextGroup.astro';
 
@@ -20,9 +21,12 @@ const {
 <label class="[ switch ][ w-full ]">
     <FluidFixed width='46px' breakpoint='80%' class="[ items-center ]">
         <div class="[ w-full ]">
-            <TextGroup title={label}>
-                {description}
-            </TextGroup>
+            <Flexblock gap='0'>
+                {label &&
+                    <span class="[ text-[var(--highlight)] ]">{label}</span>
+                }
+                <small {...attributes}>{description}</small>
+            </Flexblock>
         </div>
 
         <div>
@@ -91,6 +95,10 @@ const {
         [disabled] + .slider {
             filter: saturate(50%);
         }
+
+        small {
+            font-weight: 400;
+        }
     }
 
     .switch svg {
diff --git a/frontend/app/src/pages/account.astro b/frontend/app/src/pages/account.astro
index beb1e081..4c44c9e4 100644
--- a/frontend/app/src/pages/account.astro
+++ b/frontend/app/src/pages/account.astro
@@ -262,7 +262,7 @@ const page_title = t('account.page_title');
                                     }
                                 }`}
                             >
-                                <TextGroup title={t('unregister_account')}>
+                                <TextGroup title={t('unregister_account')} gap='0'>
                                     {t('unregister_account_description')}
                                 </TextGroup>
                                 <Button