Merge pull request #127 from mathiazom/settings-labels

Improve Settings UX
mathiazom · Apr 17, 2024 · 3964ce7 · 3964ce7
2 parents a649569 + 0fb2579
commit 3964ce7
Show file tree

Hide file tree

Showing 4 changed files with 51 additions and 11 deletions.
diff --git a/src/components/modals/Settings/CalendarFeed.tsx b/src/components/modals/Settings/CalendarFeed.tsx
@@ -1,7 +1,7 @@
 import { Check } from "@mui/icons-material";
 import CalendarMonthRoundedIcon from "@mui/icons-material/CalendarMonthRounded";
 import ContentCopyIcon from "@mui/icons-material/ContentCopy";
-import { Box, Checkbox, FormControlLabel, FormGroup, FormLabel, Typography } from "@mui/material";
+import { Box, Checkbox, FormControlLabel, FormGroup, FormLabel, Typography, useTheme } from "@mui/material";
 import IconButton from "@mui/material/IconButton";
 import InputAdornment from "@mui/material/InputAdornment";
 import TextField from "@mui/material/TextField";
@@ -20,6 +20,7 @@ export default function CalendarFeed() {
     const [isCopiedToClipboard, isSupported, copyToClipboard] = useCopyToClipboard(userCalendarFeedUrl || "", {
         successDuration: 3000,
     });
+    const theme = useTheme();
 
     return (
         <Box
@@ -30,10 +31,23 @@ export default function CalendarFeed() {
                 gap: "1rem",
             }}
         >
-            <Box sx={{ display: "flex", gap: "0.5rem", alignItems: "center" }}>
-                <CalendarMonthRoundedIcon fontSize={"small"} />
-                <Typography variant="overline" component="h2">
-                    Kalender
+            <Box>
+                <Box sx={{ display: "flex", alignItems: "center", gap: 1.5, pb: 1 }}>
+                    <CalendarMonthRoundedIcon fontSize={"small"} />
+                    <Typography variant="h6" sx={{ fontSize: 18 }}>
+                        Kalender
+                    </Typography>
+                </Box>
+                <Typography
+                    variant="body2"
+                    sx={{
+                        color: theme.palette.grey[600],
+                        fontSize: 14,
+                        mb: 1,
+                    }}
+                >
+                    Kopier denne lenken inn i din kalenderapp for å automatisk synkronisere dine bookinger og planlagte
+                    timer til din digitale kalender
                 </Typography>
             </Box>
             <FormGroup sx={{ gap: "0.75rem" }}>

diff --git a/src/components/modals/Settings/PushNotifications.tsx b/src/components/modals/Settings/PushNotifications.tsx
@@ -77,15 +77,20 @@ const PushNotifications = () => {
     return (
         <>
             <FormGroup>
+                <Box sx={{ display: "flex", alignItems: "center", gap: 1.5, pb: 1 }}>
+                    <Vibration fontSize={"small"} />
+                    <Typography variant="h6" sx={{ fontSize: 18 }}>
+                        Push-varsler
+                    </Typography>
+                </Box>
                 <FormLabel disabled={!isWebPushSupported || subscriptionIsLoading}>
                     <Box sx={{ display: "flex", alignItems: "center", gap: 1, pb: 1 }}>
-                        <Vibration />
                         <Typography
                             sx={{
                                 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
@@ -1,5 +1,4 @@
 import { SettingsRounded } from "@mui/icons-material";
-import NotificationsActiveRoundedIcon from "@mui/icons-material/NotificationsActiveRounded";
 import {
     Box,
     CircularProgress,
@@ -10,15 +9,18 @@ import {
     MenuItem,
     Select,
     styled,
+    SvgIcon,
     Switch as MaterialUISwitch,
     TextField,
     Typography,
+    useTheme,
 } from "@mui/material";
 import React, { useEffect, useState } from "react";
 
 import CalendarFeed from "@/components/modals/Settings/CalendarFeed";
 import Memberships from "@/components/modals/Settings/Memberships/Memberships";
 import PushNotifications from "@/components/modals/Settings/PushNotifications";
+import SlackSvgIcon from "@/components/utils/SlackSvgIcon";
 import { DEFAULT_REMINDER_HOURS, MAX_REMINDER_HOURS, MIN_REMINDER_HOURS } from "@/lib/consts";
 import { usePreferences } from "@/lib/hooks/usePreferences";
 import { ChainIdentifier, ChainProfile } from "@/types/chain";
@@ -57,6 +59,8 @@ export default function Settings({
     chainConfigs: Record<ChainIdentifier, ChainConfig>;
     features: Features | undefined;
 }) {
+    const theme = useTheme();
+
     const { preferences, putPreferences } = usePreferences();
     const [notificationsConfigLoading, setNotificationsConfigLoading] = useState<boolean>(false);
     const [reminderActive, setReminderActive] = useState(preferences?.notifications?.reminderHoursBefore != null);
@@ -193,16 +197,23 @@ 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 }}>
+                                <Box sx={{ display: "flex", alignItems: "center", gap: 1.5, pb: 1 }}>
+                                    <SvgIcon fontSize={"small"} sx={{ color: theme.palette.primary.contrastText }}>
+                                        <SlackSvgIcon />
+                                    </SvgIcon>
+                                    <Typography variant="h6" sx={{ fontSize: 18 }}>
+                                        Slack
+                                    </Typography>
+                                </Box>
                                 <FormLabel>
                                     <Box sx={{ display: "flex", alignItems: "center", gap: 1, pb: 1 }}>
-                                        <NotificationsActiveRoundedIcon />
                                         <Typography
                                             sx={{
                                                 userSelect: "none",
@@ -229,7 +240,7 @@ export default function Settings({
                                         </Box>
                                     </Box>
                                 </FormLabel>
-                                <Box sx={{ display: "flex", gap: 0.5, alignItems: "center", ml: "33px", pb: 1 }}>
+                                <Box sx={{ display: "flex", gap: 0.5, alignItems: "center", pb: 1 }}>
                                     <FormControl>
                                         <TextField
                                             disabled={!reminderActive || reminderHoursBefore == null}

diff --git a/src/components/utils/SlackSvgIcon.tsx b/src/components/utils/SlackSvgIcon.tsx
@@ -0,0 +1,10 @@
+import React from "react";
+
+export default function SlackSvgIcon() {
+    return (
+        <svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+            <title>Slack</title>
+            <path d="M5.042 15.165a2.528 2.528 0 0 1-2.52 2.523A2.528 2.528 0 0 1 0 15.165a2.527 2.527 0 0 1 2.522-2.52h2.52v2.52zM6.313 15.165a2.527 2.527 0 0 1 2.521-2.52 2.527 2.527 0 0 1 2.521 2.52v6.313A2.528 2.528 0 0 1 8.834 24a2.528 2.528 0 0 1-2.521-2.522v-6.313zM8.834 5.042a2.528 2.528 0 0 1-2.521-2.52A2.528 2.528 0 0 1 8.834 0a2.528 2.528 0 0 1 2.521 2.522v2.52H8.834zM8.834 6.313a2.528 2.528 0 0 1 2.521 2.521 2.528 2.528 0 0 1-2.521 2.521H2.522A2.528 2.528 0 0 1 0 8.834a2.528 2.528 0 0 1 2.522-2.521h6.312zM18.956 8.834a2.528 2.528 0 0 1 2.522-2.521A2.528 2.528 0 0 1 24 8.834a2.528 2.528 0 0 1-2.522 2.521h-2.522V8.834zM17.688 8.834a2.528 2.528 0 0 1-2.523 2.521 2.527 2.527 0 0 1-2.52-2.521V2.522A2.527 2.527 0 0 1 15.165 0a2.528 2.528 0 0 1 2.523 2.522v6.312zM15.165 18.956a2.528 2.528 0 0 1 2.523 2.522A2.528 2.528 0 0 1 15.165 24a2.527 2.527 0 0 1-2.52-2.522v-2.522h2.52zM15.165 17.688a2.527 2.527 0 0 1-2.52-2.523 2.526 2.526 0 0 1 2.52-2.52h6.313A2.527 2.527 0 0 1 24 15.165a2.528 2.528 0 0 1-2.522 2.523h-6.313z" />
+        </svg>
+    );
+}