From 964a73cc4f32ac955989ab6096cf45200ac76e6c Mon Sep 17 00:00:00 2001
From: Kevin Wu <kevinwu098@gmail.com>
Date: Mon, 11 Dec 2023 08:41:06 -0800
Subject: [PATCH] feat: add tooltip explaining preview mode

---
 .../src/components/Header/SettingsMenu.tsx        | 15 ++++++++++-----
 1 file changed, 10 insertions(+), 5 deletions(-)

diff --git a/apps/antalmanac/src/components/Header/SettingsMenu.tsx b/apps/antalmanac/src/components/Header/SettingsMenu.tsx
index 9ce5d725e..c8a66bcdf 100644
--- a/apps/antalmanac/src/components/Header/SettingsMenu.tsx
+++ b/apps/antalmanac/src/components/Header/SettingsMenu.tsx
@@ -1,8 +1,8 @@
 import { useCallback, useState } from 'react';
 import { Box, Button, ButtonGroup, Drawer, IconButton, Switch, Typography, useMediaQuery } from '@material-ui/core';
-import { Divider, Stack } from '@mui/material';
+import { Divider, Stack, Tooltip } from '@mui/material';
 import { CSSProperties } from '@material-ui/core/styles/withStyles';
-import { Close, DarkMode, LightMode, Settings, SettingsBrightness } from '@mui/icons-material';
+import { Close, DarkMode, Help, LightMode, Settings, SettingsBrightness } from '@mui/icons-material';
 
 import { usePreviewStore, useThemeStore, useTimeFormatStore } from '$stores/SettingsStore';
 
@@ -146,9 +146,14 @@ function ExperimentalMenu() {
     return (
         <Stack sx={{ padding: '1rem 1rem 0 1rem', width: '100%', display: 'flex' }} alignItems="middle">
             <Box display="flex" justifyContent="space-between" width={1}>
-                <Typography variant="h6" style={{ display: 'flex', alignItems: 'center', alignContent: 'center' }}>
-                    Preview Mode
-                </Typography>
+                <Box display="flex" alignItems="center" style={{ gap: 4 }}>
+                    <Typography variant="h6" style={{ display: 'flex', alignItems: 'center', alignContent: 'center' }}>
+                        Preview Mode
+                    </Typography>
+                    <Tooltip title={<Typography>Hover over courses to preview them in your calendar!</Typography>}>
+                        <Help />
+                    </Tooltip>
+                </Box>
                 <Switch color="primary" value={previewMode} checked={previewMode} onChange={handlePreviewChange} />
             </Box>
         </Stack>