New menu

src/pages/homepage/components/SettingsButton.tsx

@@ -1,9 +1,19 @@
-import { Button, Menu, MultiSelect, NavLink, Switch } from '@mantine/core';
+import {
+	ActionIcon,
+	Button,
+	Group,
+	Menu,
+	MultiSelect,
+	Stack,
+	Text,
+	Tooltip,
+} from '@mantine/core';
 import { runWakeCommand, useCommonHooks, useQueryAPI } from 'hooks';
 import { useEffect, useState } from 'react';
-import { FiMenu, FiMonitor, FiShuffle } from 'react-icons/fi';
+import { FaDice } from 'react-icons/fa';
+import { FiMenu, FiMonitor, FiSettings, FiShuffle } from 'react-icons/fi';
 import { useNavigate } from 'react-router-dom';
-import { buttonClasses, menuClasses, navLinkClasses, selectClasses } from 'styles';
+import { actionIconClasses, buttonClasses, menuClasses, selectClasses } from 'styles';
 
 function SettingsButton() {
 	const { data, isFetched } = useQueryAPI({ endpoint: 'api/appCategories' });
@@ -31,65 +41,143 @@ function SettingsButton() {
 			setCategories(list);
 		}
 	}, [data, isFetched]);
-
 	return (
-		<Menu withinPortal={false} withArrow shadow='md' position='top'>
+		<Menu
+			classNames={menuClasses}
+			withinPortal={false}
+			withArrow
+			shadow='md'
+			position='top'
+		>
 			<Menu.Target>
 				<Button className={buttonClasses.settingsButton} classNames={buttonClasses}>
 					<FiMenu />
 				</Button>
 			</Menu.Target>
-			<Menu.Dropdown className={menuClasses.dropdown}>
+			<Menu.Dropdown>
-				<NavLink
+				<Stack gap={0} display={'flex'} pb={'1rem'} pt={'2rem'} align='center'>
-					label='Settings'
+					<Tooltip label='Settings' color={theme.primaryColor} withArrow>
-					component='a'
+						<FiSettings
-					className={navLinkClasses.defaultNavLink}
+							size={20}
-					classNames={navLinkClasses}
 							onClick={() => navigate(`/${import.meta.env.VITE_BASE_URL}/settings`)}
-				/>
+							style={{
-				<NavLink
+								cursor: 'pointer',
-					label='Quick Actions'
+								position: 'absolute',
-					className={navLinkClasses.defaultNavLink}
+								top: '.5rem',
-					classNames={navLinkClasses}
+								right: '.5rem',
-				>
-					<NavLink
-						label='Wake Dakota'
-						leftSection={<FiMonitor />}
-						onClick={() => runWakeCommand()}
-						className={navLinkClasses.defaultNavLink}
-						classNames={navLinkClasses}
-					/>
-					<NavLink
-						label='Shuffle Themes'
-						leftSection={
-							<Switch
-								labelPosition='left'
-								checked={currentTheme === 'random'}
-								onChange={(e) => {
-									setCurrentTheme(e.target.checked ? 'random' : theme.name);
 							}}
-								color={theme.primaryColor}
 						/>
-						}
+					</Tooltip>
-						onClick={() => {}}
+					<Group w={'100%'} align='center' justify='center'>
-						className={navLinkClasses.defaultNavLink}
+						<Stack
-						classNames={navLinkClasses}
+							gap={0}
-					/>
+							align='center'
-					<NavLink
+							style={{
-						label='Random Theme'
+								width: '40%',
-						leftSection={<FiShuffle />}
+								height: '150px',
+								backgroundColor: `${theme.primaryColor}22`,
+								borderRadius: '10px',
+							}}
+						>
+							<Menu.Label>Wake on LAN</Menu.Label>
+							<Button
+								classNames={buttonClasses}
+								className={buttonClasses.wakeButton}
+								onClick={() => runWakeCommand()}
+							>
+								<Stack gap={0} align='center'>
+									<FiMonitor size={40} />
+									<Text m={0} p={0}>
+										Dakota
+									</Text>
+								</Stack>
+							</Button>
+						</Stack>
+						<Stack
+							gap={0}
+							align='center'
+							style={{
+								width: '40%',
+								height: '150px',
+								backgroundColor: `${theme.primaryColor}22`,
+								borderRadius: '10px',
+							}}
+						>
+							<Menu.Label pb={'1rem'}>Themes</Menu.Label>
+							<Group pb={'1rem'}>
+								<Tooltip label='Shuffle Themes' color={theme.primaryColor} withArrow>
+									<ActionIcon
+										className={actionIconClasses.menuActions}
+										classNames={actionIconClasses}
+										style={{
+											backgroundColor:
+												currentTheme === 'random'
+													? `${theme.primaryColor}88`
+													: 'transparent',
+											color:
+												currentTheme === 'random'
+													? theme.accentColor
+													: theme.primaryColor,
+										}}
+										onClick={() => {
+											setCurrentTheme(currentTheme === 'random' ? theme.name : 'random');
+										}}
+									>
+										<FiShuffle />
+									</ActionIcon>
+								</Tooltip>
+								<Tooltip label='Random Theme' color={theme.primaryColor} withArrow>
+									<ActionIcon
+										className={actionIconClasses.menuActions}
+										classNames={actionIconClasses}
+										style={{
+											backgroundColor: 'transparent',
+											color: theme.primaryColor,
+										}}
 										onClick={() => {
 											handleThemeChange(allThemes, true);
 										}}
-						className={navLinkClasses.defaultNavLink}
+									>
-						classNames={navLinkClasses}
+										<FaDice />
+									</ActionIcon>
+								</Tooltip>
+							</Group>
+							<Text fw={'bold'} fz={20}>
+								Currently:{' '}
+							</Text>
+							{theme.name}
+						</Stack>
+					</Group>
+					<Menu.Divider
+						w={'85%'}
+						m={'.75rem'}
+						style={{ borderColor: theme.accentColor }}
 					/>
-				</NavLink>
+					<Stack
+						gap={0}
+						justify='center'
+						align='center'
+						style={{
+							width: '85%',
+							height: '110px',
+							backgroundColor: `${theme.primaryColor}22`,
+							borderRadius: '10px',
+						}}
+					>
+						<Menu.Label>Filters</Menu.Label>
+						<Group justify='center' w={'100%'}>
 							<MultiSelect
-					label='App Filter'
+								w={'45%'}
+								label='Apps'
 								data={categories ?? []}
+								placeholder={
+									appFilter.length > 0
+										? appFilter.length === 1
+											? appFilter[0]
+											: `${appFilter.length} apps selected`
+										: 'No apps selected'
+								}
 								defaultValue={appFilter}
-					withCheckIcon={false}
 								onChange={(data: any) => {
 									setAppFilter(data);
 								}}
@@ -97,16 +185,26 @@ function SettingsButton() {
 								comboboxProps={{ withinPortal: false }}
 							/>
 							<MultiSelect
-					label='Bookmark Filter'
+								w={'45%'}
+								label='Bookmarks'
 								data={categories ?? []}
+								placeholder={
+									bookmarkFilter.length > 0
+										? bookmarkFilter.length === 1
+											? bookmarkFilter[0]
+											: `${bookmarkFilter.length} bookmarks selected`
+										: 'No bookmarks selected'
+								}
 								defaultValue={bookmarkFilter}
-					withCheckIcon={false}
 								onChange={(data: any) => {
 									setBookmarkFilter(data);
 								}}
 								classNames={selectClasses}
 								comboboxProps={{ withinPortal: false }}
 							/>
+						</Group>
+					</Stack>
+				</Stack>
 			</Menu.Dropdown>
 		</Menu>
 	);

src/styles/ActionIcon.module.css

@@ -35,3 +35,24 @@
         }
     }
 }
+
+.menuActions {
+    &.root {
+        transition: all .1s ease;
+        width: 40px;
+        height: 30px;
+        border-radius: 10px;
+        border: none;
+        .icon {
+            font-size: 24px;
+        }
+        .loader {
+            display: none;
+        }
+        :hover {
+            background-color: var(--color-text-pri) !important;
+            color: var(--color-text-acc) !important;
+            transition: all .1s ease;
+        }
+    }
+}

src/styles/Button.module.css

@@ -34,6 +34,29 @@
     }
 }
 
+.wakeButton{
+	&.root {
+        font-size: 1em;
+        font-weight:500;
+        margin: 10px;
+        width:108px;
+        height:96px;
+        line-height: 3rem;
+        text-align: center;
+        text-transform: uppercase;
+        border-radius: 1em;
+        color: var(--color-text-acc);
+        background-color: var(--color-background);
+        border: solid 2px var(--color-text-pri);
+        transition: all .2s ease;
+        &:hover {
+            color: var(--color-background);
+            background-color: var(--color-text-pri);
+            border: solid 2px var(--color-text-acc);
+        }
+    }
+}
+
 .tableButton {
     &.root {
         &.loader{

src/styles/Menu.module.css

@@ -1,5 +1,6 @@
 .dropdown {
     color: var(--color-text-pri);
+    width: 500px !important;
 }
 .item {
     &:hover {
@@ -7,3 +8,6 @@
         color: var(--color-background)
     }
 }
+.label {
+    color: var(--color-text-pri) !important;
+}

src/styles/Select.module.css

@@ -10,30 +10,48 @@
     &:focus {
         border-color: var(--color-text-pri) !important;
     }
+    display: flex !important;
+    overflow: clip !important;
+    height: 36px !important;
 }
 
 .options {
     .option {
-        color: black !important;
+        color: var(--color-text-pri) !important;
         font-size: 14px !important;
         /* applies styles to selected item */
         &[data-checked] {
-            background-color: gray !important;
+            background-color: var(--color-text-acc) !important;
-            color: white !important;
+            color: var(--color-text-pri) !important;
             &:hover {
-                background-color: black !important;
+                background-color: var(--color-text-acc) !important;
-                color: white !important;
+                color: var(--color-background) !important;
             }
         }
 
         /* applies styles to hovered item (with mouse or keyboard) */
         &:hover {
-            background-color: black !important;
+            background-color: var(--color-text-acc) !important;
-            color: white !important;
+            color: var(--color-text-pri) !important;
         }
     }
 }
 
 .dropdown {
-    background-color: white !important;
+    background-color: var(--color-background) !important;
+}
+
+.pillsList {
+    .pill {
+        display: none !important;
+    }
+}
+
+.placeholder {
+    color: white !important;
+}
+
+.root {
+
+    width: 180px !important;
 }