feat(dashboard): refresh and polish stats header (#25)

* feat: nav links

* feat: add logo

* feat: new login button

* fix: improve header accessibility

* refactor: rename css vars to more standard names

* feat: refresh date selector

* feat: refresh stats header

* fix: tweak header nav gap

* fix: remove footer

dashboard/app/components/icons/banner-transparent.tsx

@@ -0,0 +1,28 @@
+export const BannerLogo = (props: React.SVGProps<SVGSVGElement>) => {
+	return (
+		<svg
+			xmlns="http://www.w3.org/2000/svg"
+			width="144"
+			height="30"
+			fill="none"
+			{...props}
+		>
+			<title>Medama Logo</title>
+			<g clipPath="url(#a)">
+				<path
+					fill="#17CD8C"
+					d="M18.713 29.8096c.2156.1232.46.187.7082.1849.2332.0014.4629-.0565.6676-.1683l9.4878-5.1331c.9837-.5381 1.5698-1.4497 1.5698-2.4353v-5.699c-.004-.1754-.0543-.3467-.1459-.4964s-.2211-.2726-.3755-.356l-.4993-.3014-.024-.0167c.319-.2465.5786-.5617.7594-.9221.1808-.3604.2784-.7568.2853-1.16V7.60172c-.0032-.17472-.0524-.34549-.1427-.49514-.0902-.14965-.2183-.27288-.3713-.3573l-2.5203-1.54216c-.2083-.12093-.444-.18662-.6848-.19083-.2408-.00421-.4786.05321-.691.16679l-2.8975 1.5662V2.58693c-.0031-.17567-.053-.34733-.1447-.49721-.0917-.14988-.2218-.27252-.3768-.35523L20.797.190477c-.2084-.1206462-.4442-.18601293-.685-.1898965-.2408-.00388359-.4786.0538458-.6908.1677085L1.5699 9.80771C.588018 10.3477 0 11.2574 0 12.243v5.7045c.00381191.1755.0540791.3469.14568.4966.091601.1497.221261.2725.37577.3558l2.52034 1.5441c.20876.1196.44443.1844.68501.1883.24058.0038.47822-.0533.69073-.1662l3.42456-1.8491v4.1642c.00342.1758.05372.3476.14572.4974.092.1499.22235.2725.37758.3551l2.52031 1.544c.2151.1243.4598.1882.7082.1849.2329.0006.4623-.0566.6676-.1664l3.4097-1.8491v4.1568c.0035.1755.0536.347.1452.4969.0917.1498.2215.2725.3763.3555l2.5203 1.5533ZM2.7108 13.787c0-.9246.55473-1.7677 1.47929-2.2726L21.128 2.36688v4.3898c0 .84689-.4716 1.63646-1.2704 2.15051L9.41383 14.5507c-.06842.037-.13314.0758-.19785.1165L2.7108 18.1749V13.787Zm7.8421 4.7337c0-.8524.4771-1.6475 1.2944-2.1597l10.4308-5.6361c.0721-.0389.1405-.0814.209-.1239l5.9707-3.22672v4.38792c0 .9246-.5547 1.7678-1.4792 2.2726l-.0296.0166c-.0723.0231-.1422.0528-.209.0888l-9.4896 5.135c-.0869.0462-.1701.098-.2515.1516l-6.4423 3.4819-.0037-4.388Zm7.8236 4.7412c0-.8321.4549-1.6088 1.2296-2.1228l8.8369-4.7744v4.3639c0 .9245-.5547 1.7677-1.4792 2.2725l-8.5929 4.6487.0056-4.3879Z"
+				/>
+			</g>
+			<path
+				fill="#FCFCFC"
+				d="m55.688 24-.024-11.136-5.52 9.216h-1.392l-5.52-9.072V24h-2.976V7.2h2.568l6.672 11.136L56.048 7.2h2.568L58.64 24h-2.952Zm18.5299-6.336c0 .208-.016.504-.048.888h-10.056c.176.944.632 1.696 1.368 2.256.752.544 1.68.816 2.784.816 1.408 0 2.568-.464 3.48-1.392l1.608 1.848c-.576.688-1.304 1.208-2.184 1.56-.88.352-1.872.528-2.976.528-1.408 0-2.648-.28-3.72-.84-1.072-.56-1.904-1.336-2.496-2.328-.576-1.008-.864-2.144-.864-3.408 0-1.248.28-2.368.84-3.36.576-1.008 1.368-1.792 2.376-2.352 1.008-.56 2.144-.84 3.408-.84 1.248 0 2.36.28 3.336.84.992.544 1.76 1.32 2.304 2.328.56.992.84 2.144.84 3.456Zm-6.48-4.224c-.96 0-1.776.288-2.448.864-.656.56-1.056 1.312-1.2 2.256h7.272c-.128-.928-.52-1.68-1.176-2.256-.656-.576-1.472-.864-2.448-.864Zm21.1937-7.248V24h-2.88v-1.656c-.496.608-1.112 1.064-1.848 1.368-.72.304-1.52.456-2.4.456-1.232 0-2.344-.272-3.336-.816-.976-.544-1.744-1.312-2.304-2.304-.56-1.008-.84-2.16-.84-3.456 0-1.296.28-2.44.84-3.432.56-.992 1.328-1.76 2.304-2.304.992-.544 2.104-.816 3.336-.816.848 0 1.624.144 2.328.432.704.288 1.304.72 1.8 1.296V6.192h3ZM82.1636 21.6c.72 0 1.368-.16 1.944-.48.576-.336 1.032-.808 1.368-1.416.336-.608.504-1.312.504-2.112s-.168-1.504-.504-2.112c-.336-.608-.792-1.072-1.368-1.392-.576-.336-1.224-.504-1.944-.504s-1.368.168-1.944.504c-.576.32-1.032.784-1.368 1.392-.336.608-.504 1.312-.504 2.112s.168 1.504.504 2.112c.336.608.792 1.08 1.368 1.416.576.32 1.224.48 1.944.48Zm14.8685-10.56c1.888 0 3.3279.456 4.3199 1.368 1.008.896 1.512 2.256 1.512 4.08V24h-2.832v-1.56c-.3679.56-.8959.992-1.5839 1.296-.672.288-1.488.432-2.448.432s-1.8-.16-2.52-.48c-.72-.336-1.28-.792-1.68-1.368-.384-.592-.576-1.256-.576-1.992 0-1.152.424-2.072 1.272-2.76.864-.704 2.216-1.056 4.056-1.056h3.312v-.192c0-.896-.272-1.584-.816-2.064-.528-.48-1.32-.72-2.376-.72-.72 0-1.432.112-2.136.336-.688.224-1.272.536-1.752.936l-1.176-2.184c.672-.512 1.48-.904 2.424-1.176.944-.272 1.944-.408 3-.408Zm-.408 10.944c.752 0 1.416-.168 1.992-.504.592-.352 1.008-.848 1.248-1.488v-1.488h-3.096c-1.728 0-2.592.568-2.592 1.704 0 .544.216.976.648 1.296.432.32 1.032.48 1.8.48ZM122.17 11.04c1.616 0 2.896.472 3.84 1.416.944.928 1.416 2.328 1.416 4.2V24h-3v-6.96c0-1.12-.248-1.96-.744-2.52-.496-.576-1.208-.864-2.136-.864-1.008 0-1.816.336-2.424 1.008-.608.656-.912 1.6-.912 2.832V24h-3v-6.96c0-1.12-.248-1.96-.744-2.52-.496-.576-1.208-.864-2.136-.864-1.024 0-1.84.328-2.448.984-.592.656-.888 1.608-.888 2.856V24h-3V11.184h2.856v1.632c.48-.576 1.08-1.016 1.8-1.32.72-.304 1.52-.456 2.4-.456.96 0 1.808.184 2.544.552.752.352 1.344.88 1.776 1.584.528-.672 1.208-1.192 2.04-1.56.832-.384 1.752-.576 2.76-.576Zm13.266 0c1.888 0 3.328.456 4.32 1.368 1.008.896 1.512 2.256 1.512 4.08V24h-2.832v-1.56c-.368.56-.896.992-1.584 1.296-.672.288-1.488.432-2.448.432s-1.8-.16-2.52-.48c-.72-.336-1.28-.792-1.68-1.368-.384-.592-.576-1.256-.576-1.992 0-1.152.424-2.072 1.272-2.76.864-.704 2.216-1.056 4.056-1.056h3.312v-.192c0-.896-.272-1.584-.816-2.064-.528-.48-1.32-.72-2.376-.72-.72 0-1.432.112-2.136.336-.688.224-1.272.536-1.752.936l-1.176-2.184c.672-.512 1.48-.904 2.424-1.176.944-.272 1.944-.408 3-.408Zm-.408 10.944c.752 0 1.416-.168 1.992-.504.592-.352 1.008-.848 1.248-1.488v-1.488h-3.096c-1.728 0-2.592.568-2.592 1.704 0 .544.216.976.648 1.296.432.32 1.032.48 1.8.48Z"
+			/>
+			<defs>
+				<clipPath id="a">
+					<path fill="#fff" d="M0 0h31.1483v30H0z" />
+				</clipPath>
+			</defs>
+		</svg>
+	);
+};

dashboard/app/components/icons/settings.tsx

@@ -0,0 +1,11 @@
+export const IconSettings = () => {
+	return (
+		<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none">
+			<title>Settings Icon</title>
+			<path
+				fill="#FCFCFC"
+				d="M13.4333 8.46001v-.77336c-.0035-.04804.0057-.09613.0268-.13945.0211-.04331.0532-.08032.0932-.10721L15.64 6.05998l-2.1667-3.68664-2.22 1.15332c-.0391.02421-.0841.03702-.13.03702-.046 0-.091-.01281-.13-.03702-.1895-.12146-.3853-.23273-.5867-.33334-.0402-.02161-.0742-.05319-.0987-.09171-.0245-.03852-.0387-.08271-.0413-.1283L10.1333.473312H5.85991L5.72658 2.97331c-.00255.04559-.01676.08978-.04127.1283-.02452.03852-.05851.0701-.09873.09171-.20134.10061-.39717.21188-.58667.33334-.03904.02421-.08406.03702-.13.03702-.04594 0-.09096-.01281-.13-.03702L2.51989 2.37334.35321 6.05998l2.11335 1.38001c.03996.02689.07211.0639.09318.10721.02108.04332.03033.09141.02682.13945v.77336c.00284.04795-.00671.09584-.02773.13903-.02101.0432-.05279.08026-.09227.10763L.379878 10.0867l2.166682 3.6799L4.76657 12.62c.03904-.0242.08407-.037.13-.037.04594 0 .09096.0128.13.037.18799.1239.38398.2353.58668.3333.04116.0222.07576.0549.10033.0946.02457.0398.03825.0853.03967.1321l.13333 2.4933h4.27332l.1334-2.4933c.0014-.0468.0151-.0923.0396-.1321.0246-.0397.0592-.0724.1004-.0946.2027-.098.3987-.2094.5867-.3333.039-.0242.084-.037.13-.037.0459 0 .0909.0128.13.037l2.22 1.1466 2.1667-3.6799L13.58 8.70667c-.0445-.02406-.0815-.05968-.1074-.10311-.0258-.04343-.0394-.09303-.0393-.14355ZM7.99993 10.46c-.47656.0013-.94279-.1389-1.33959-.4028-.39679-.26397-.70629-.63975-.88927-1.07978-.18299-.44003-.23121-.9245-.13856-1.39197.09265-.46746.322-.8969.65898-1.23388.33698-.33698.76642-.56633 1.2339-.65898.46747-.09265.95192-.04443 1.39195.13855.44004.18298.81585.49249 1.07979.88928.26397.3968.40417.863.40277 1.33956.0018.31629-.059.62985-.1788.92257-.1198.29272-.29633.55885-.51937.78312-.22304.22428-.48821.40223-.78026.52373-.29206.1214-.60524.1839-.92154.1839V10.46Z"
+			/>
+		</svg>
+	);
+};

dashboard/app/components/layout/AppShell.tsx

@@ -1,4 +1,3 @@
-import { Footer } from './Footer';
 import { Header } from './Header';
 
 interface AppShellProps {
@@ -10,7 +9,6 @@ export const AppShell = ({ children }: AppShellProps) => {
 		<>
 			<Header />
 			{children}
-			<Footer />
 		</>
 	);
 };

dashboard/app/components/layout/Header.module.css

@@ -1,19 +1,52 @@
 .header {
 	color: var(--me-color-text-light);
 	background-color: var(--me-color-bg-dark);
+	border-bottom: 1px solid var(--me-color-border-dark);
 }
 
 .inner {
 	height: 72px;
 	width: 100%;
 	max-width: 1440px;
-	margin-left: auto;
-	margin-right: auto;
+	margin: 0 auto;
 	padding: 0 120px;
 }
 
-.text {
-	font-size: rem(24px);
-	font-weight: 600;
+.button {
+	display: flex;
+	align-items: center;
+	height: 40px;
+	padding: 0 16px;
+	font-size: 14px;
 	color: var(--me-color-text-light);
+	border: 1px solid var(--me-color-border-dark);
+	border-radius: 8px;
+	transition: background-color 0.05s;
+
+	&:hover {
+		background-color: var(--me-color-bg-grey-blue);
+	}
+}
+
+.link {
+	position: relative;
+	font-size: 14px;
+	font-weight: 400;
+	color: var(--me-color-text-light);
+
+	&[data-active="true"] {
+		font-weight: 600;
+	}
+
+	&[data-active="true"]::after {
+		content: "";
+		position: absolute;
+		bottom: -20px;
+		left: 50%;
+		transform: translateX(-50%);
+		width: 60%;
+		height: 2px;
+		border-bottom: 2px solid var(--me-color-logo-green);
+		border-radius: 8px;
+	}
 }

dashboard/app/components/layout/Header.tsx

@@ -1,69 +1,90 @@
-import { Box, Button, Group, SimpleGrid, Text } from '@mantine/core';
-import { NavLink, useLocation, useRouteLoaderData } from '@remix-run/react';
+import { Flex, Group, SimpleGrid, Text, UnstyledButton } from '@mantine/core';
+import { Link, useLocation, useRouteLoaderData } from '@remix-run/react';
 
 import classes from './Header.module.css';
+import { BannerLogo } from '@/components/icons/banner-transparent';
+import { IconSettings } from '@/components/icons/settings';
 
 interface HeaderNavLinkProps {
 	label: string;
 	to: string;
 }
 
+interface LoginButtonProps {
+	isLoggedIn: boolean;
+}
+
 interface RootLoaderData {
 	isLoggedIn: boolean;
 }
 
 const HeaderNavLink = ({ label, to }: HeaderNavLinkProps) => {
 	const { pathname } = useLocation();
+	const active = to === '/' ? pathname === to : pathname.startsWith(to);
 
 	return (
 		<Text
-			component={NavLink}
+			component={Link}
 			to={to}
 			className={classes.link}
-			data-active={pathname.startsWith(to)}
+			data-active={active}
+			role="link"
+			aria-current={active ? 'page' : undefined}
+			tabIndex={0}
 		>
 			{label}
 		</Text>
 	);
 };
 
+const LoginButton = ({ isLoggedIn }: LoginButtonProps) => {
+	const linkTo = isLoggedIn ? '/logout' : '/login';
+	const ariaLabel = isLoggedIn ? 'Log out' : 'Log in';
+	const buttonLabel = isLoggedIn ? (
+		<Group gap="xs">
+			<IconSettings aria-hidden="true" />
+			<span>Log Out</span>
+		</Group>
+	) : (
+		'Log In'
+	);
+
+	return (
+		<UnstyledButton
+			className={classes.button}
+			component={Link}
+			to={linkTo}
+			aria-label={ariaLabel}
+		>
+			{buttonLabel}
+		</UnstyledButton>
+	);
+};
+
 export const Header = () => {
 	const data = useRouteLoaderData<RootLoaderData>('root');
 	const isLoggedIn = Boolean(data?.isLoggedIn);
 
 	return (
-		<Box component="header" className={classes.header}>
+		<header className={classes.header}>
 			<SimpleGrid cols={isLoggedIn ? 3 : 2} className={classes.inner}>
-				<Group className={classes.text}>Medama</Group>
+				<Flex align="center">
+					<BannerLogo aria-label="Banner logo" />
+				</Flex>
 				{isLoggedIn && (
-					<Group justify="center">
+					<Group
+						justify="center"
+						role="navigation"
+						aria-label="Main navigation"
+					>
 						<HeaderNavLink label="Dashboard" to="/" />
 						<HeaderNavLink label="Settings" to="/settings" />
 					</Group>
 				)}
 				<Group justify="flex-end">
-					{isLoggedIn ? (
-						<Button
-							component={NavLink}
-							to="/logout"
-							color="gray"
-							variant="light"
-						>
-							Logout
-						</Button>
-					) : (
-						<Button
-							component={NavLink}
-							reloadDocument
-							to="/login"
-							color="gray"
-							variant="light"
-						>
-							Login
-						</Button>
-					)}
+					<LoginButton isLoggedIn={isLoggedIn} />
 				</Group>
 			</SimpleGrid>
-		</Box>
+		</header>
 	);
 };

dashboard/app/components/stats/DateSelector.module.css

@@ -0,0 +1,45 @@
+.target {
+	width: 192px;
+	height: 40px;
+	padding: 0 16px;
+	color: var(--me-color-text-light);
+	background-color: var(--me-color-bg-grey-blue);
+	border: 1px solid var(--me-color-bg-grey-blue);
+	border-radius: 8px;
+}
+
+.target:hover,
+.option:hover {
+	background-color: var(--me-color-bg-grey-blue-dark);
+}
+
+.dropdown {
+	color: var(--me-color-text-light);
+	background-color: var(--me-color-bg-grey-blue);
+	border: 0;
+	border-radius: 8px;
+	padding: 0;
+}
+
+.option {
+	padding: 8px 16px;
+	border-radius: 0px;
+	border-bottom: 1px solid transparent;
+
+	&:first-child {
+		border-radius: 8px 8px 0 0;
+	}
+
+	&:last-child {
+		border-radius: 0 0 8px 8px;
+	}
+
+	&[data-combobox-active="true"] {
+		color: var(--me-color-logo-green);
+		font-weight: 600;
+	}
+
+	&[data-group-end="true"] {
+		border-bottom-color: var(--me-color-text-grey);
+	}
+}