feat(settings): add headers for all setting categories

mathiazom · Apr 17, 2024 · 8dd8c0a · 8dd8c0a
1 parent 7aa02af
commit 8dd8c0a
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 3 deletions.
diff --git a/src/components/modals/Settings/CalendarFeed.tsx b/src/components/modals/Settings/CalendarFeed.tsx
@@ -36,9 +36,10 @@ export default function CalendarFeed() {
                 </Typography>
                 <Typography
                     variant="body2"
-                    style={{
+                    sx={{
                         color: theme.palette.grey[600],
                         fontSize: 14,
+                        mb: 1,
                     }}
                 >
                     Kopier denne lenken inn i din kalenderapp for å automatisk synkronisere dine bookinger og planlagte

diff --git a/src/components/modals/Settings/PushNotifications.tsx b/src/components/modals/Settings/PushNotifications.tsx
@@ -77,6 +77,9 @@ const PushNotifications = () => {
     return (
         <>
             <FormGroup>
+                <Typography variant="h6" sx={{ fontSize: 18, mb: 1 }}>
+                    Push-varsler
+                </Typography>
                 <FormLabel disabled={!isWebPushSupported || subscriptionIsLoading}>
                     <Box sx={{ display: "flex", alignItems: "center", gap: 1, pb: 1 }}>
                         <Vibration />
@@ -85,7 +88,7 @@ const PushNotifications = () => {
                                 userSelect: "none",
                             }}
                         >
-                            Push-varsler for booking
+                            Bookinger og venneforespørsler
                         </Typography>
                         <Box
                             sx={{

diff --git a/src/components/modals/Settings/Settings.tsx b/src/components/modals/Settings/Settings.tsx
@@ -193,13 +193,16 @@ export default function Settings({
             </Box>
             <Box sx={{ display: "flex", flexDirection: "column", gap: "1rem" }}>
                 <Memberships chainProfiles={chainProfiles} chainConfigs={chainConfigs} />
-                <Divider sx={{ my: 1 }} />
+                <Divider sx={{ mt: 1 }} />
                 <PushNotifications />
                 <FormGroup>
                     <Divider orientation="horizontal" />
                     {features && features.classReminderNotifications && (
                         <>
                             <FormGroup sx={{ py: 2 }}>
+                                <Typography variant="h6" sx={{ fontSize: 18, mb: 1 }}>
+                                    Slack
+                                </Typography>
                                 <FormLabel>
                                     <Box sx={{ display: "flex", alignItems: "center", gap: 1, pb: 1 }}>
                                         <NotificationsActiveRoundedIcon />