From 1ede734957dee4335de5c6059cdfa9ba8793c6d4 Mon Sep 17 00:00:00 2001 From: Carey P Gumaer Date: Tue, 1 Oct 2024 10:26:50 -0400 Subject: [PATCH] updated header (#1622) * update logged out view * Clean up MIT logo links * use Link component * search icon and nav menu button opacity on hover * user menu style * get rid of text based mit learn logo and replace with SVG * fix vertical alignment * adjust minimum height of mui toolbar to fit design, adjust search icon hitbox * fix height of usermenu container * fix nav drawer top padding * fix header shadow * remove manual width of user menu popover and anchor it to the left side of the trigger * add hover underline to user menu popover links * mobile styling fixes * fix footer tests --- .../public/images/mit-learn-logo.svg | 11 +- ..._std_cmyk_black.svg => mit-logo-black.svg} | 0 ...ogo-transparent.svg => mit-logo-color.svg} | 0 .../public/images/mit-logo-learn-white.svg | 18 +++ .../public/images/mit-logo-transparent2.svg | 17 -- .../public/images/mit-logo-transparent3.svg | 17 -- .../public/images/mit-logo-transparent4.svg | 35 ----- .../public/images/mit-logo-transparent5.jpg | Bin 8081 -> 0 bytes .../public/images/mit-logo-transparent5.png | Bin 564 -> 0 bytes .../public/images/mit-logo-transparent5.svg | 17 -- .../public/images/mit-logo-white.svg | 14 ++ .../page-components/Footer/Footer.test.tsx | 13 +- .../src/page-components/Footer/Footer.tsx | 7 +- .../src/page-components/Header/Header.tsx | 81 ++++++---- .../src/page-components/Header/MenuButton.tsx | 17 +- .../src/page-components/Header/UserMenu.tsx | 146 ++++++++++++++---- .../MITLogoLink/MITLogoLink.tsx | 36 +++++ .../src/components/Banner/Banner.stories.tsx | 4 +- .../src/components/NavDrawer/NavDrawer.tsx | 2 +- .../src/components/ThemeProvider/colors.ts | 1 + frontends/ol-components/src/types/theme.d.ts | 1 + .../src/components/MITLogoLink.tsx | 26 ---- .../ol-utilities/src/components/index.ts | 1 - frontends/ol-utilities/src/index.ts | 1 - 24 files changed, 263 insertions(+), 202 deletions(-) rename frontends/mit-learn/public/images/{mit_logo_std_cmyk_black.svg => mit-logo-black.svg} (100%) rename frontends/mit-learn/public/images/{mit-logo-transparent.svg => mit-logo-color.svg} (100%) create mode 100644 frontends/mit-learn/public/images/mit-logo-learn-white.svg delete mode 100644 frontends/mit-learn/public/images/mit-logo-transparent2.svg delete mode 100644 frontends/mit-learn/public/images/mit-logo-transparent3.svg delete mode 100644 frontends/mit-learn/public/images/mit-logo-transparent4.svg delete mode 100644 frontends/mit-learn/public/images/mit-logo-transparent5.jpg delete mode 100644 frontends/mit-learn/public/images/mit-logo-transparent5.png delete mode 100644 frontends/mit-learn/public/images/mit-logo-transparent5.svg create mode 100644 frontends/mit-learn/public/images/mit-logo-white.svg create mode 100644 frontends/mit-learn/src/page-components/MITLogoLink/MITLogoLink.tsx delete mode 100644 frontends/ol-utilities/src/components/MITLogoLink.tsx delete mode 100644 frontends/ol-utilities/src/components/index.ts diff --git a/frontends/mit-learn/public/images/mit-learn-logo.svg b/frontends/mit-learn/public/images/mit-learn-logo.svg index 548d70485f..0069f62884 100644 --- a/frontends/mit-learn/public/images/mit-learn-logo.svg +++ b/frontends/mit-learn/public/images/mit-learn-logo.svg @@ -1,8 +1,5 @@ - - - - - - - + + diff --git a/frontends/mit-learn/public/images/mit_logo_std_cmyk_black.svg b/frontends/mit-learn/public/images/mit-logo-black.svg similarity index 100% rename from frontends/mit-learn/public/images/mit_logo_std_cmyk_black.svg rename to frontends/mit-learn/public/images/mit-logo-black.svg diff --git a/frontends/mit-learn/public/images/mit-logo-transparent.svg b/frontends/mit-learn/public/images/mit-logo-color.svg similarity index 100% rename from frontends/mit-learn/public/images/mit-logo-transparent.svg rename to frontends/mit-learn/public/images/mit-logo-color.svg diff --git a/frontends/mit-learn/public/images/mit-logo-learn-white.svg b/frontends/mit-learn/public/images/mit-logo-learn-white.svg new file mode 100644 index 0000000000..c46990cc9a --- /dev/null +++ b/frontends/mit-learn/public/images/mit-logo-learn-white.svg @@ -0,0 +1,18 @@ + + + + + + + + diff --git a/frontends/mit-learn/public/images/mit-logo-transparent2.svg b/frontends/mit-learn/public/images/mit-logo-transparent2.svg deleted file mode 100644 index 67da18b013..0000000000 --- a/frontends/mit-learn/public/images/mit-logo-transparent2.svg +++ /dev/null @@ -1,17 +0,0 @@ - - - - -logo2 - - - - - - - diff --git a/frontends/mit-learn/public/images/mit-logo-transparent3.svg b/frontends/mit-learn/public/images/mit-logo-transparent3.svg deleted file mode 100644 index 67da18b013..0000000000 --- a/frontends/mit-learn/public/images/mit-logo-transparent3.svg +++ /dev/null @@ -1,17 +0,0 @@ - - - - -logo2 - - - - - - - diff --git a/frontends/mit-learn/public/images/mit-logo-transparent4.svg b/frontends/mit-learn/public/images/mit-logo-transparent4.svg deleted file mode 100644 index 7fd59c879c..0000000000 --- a/frontends/mit-learn/public/images/mit-logo-transparent4.svg +++ /dev/null @@ -1,35 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - diff --git a/frontends/mit-learn/public/images/mit-logo-transparent5.jpg b/frontends/mit-learn/public/images/mit-logo-transparent5.jpg deleted file mode 100644 index fca614d62b24449e712425c50d04dac2f0a10d13..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 8081 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 diff --git a/frontends/mit-learn/public/images/mit-logo-transparent5.png b/frontends/mit-learn/public/images/mit-logo-transparent5.png deleted file mode 100644 index 91a9f6ab32f36ade8737aba2baa5f09b60e71d3b..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 564 zcmeAS@N?(olHy`uVBq!ia0y~yVAKV&=W#Ft$pDcxn}JkpfKP}kkfss%|NsBaokov< zrpuND`2{mDF|+Us2nq?yD=MoR7@C@yJ2<(zdw2y#KmGROfQYaXP$6TIx4Vm65to8C zkR9Xc;uunK>+MZ - - - -logo2 - - - - - - - diff --git a/frontends/mit-learn/public/images/mit-logo-white.svg b/frontends/mit-learn/public/images/mit-logo-white.svg new file mode 100644 index 0000000000..5b0774426b --- /dev/null +++ b/frontends/mit-learn/public/images/mit-logo-white.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + diff --git a/frontends/mit-learn/src/page-components/Footer/Footer.test.tsx b/frontends/mit-learn/src/page-components/Footer/Footer.test.tsx index 09f2b25324..0f9ee8d05f 100644 --- a/frontends/mit-learn/src/page-components/Footer/Footer.test.tsx +++ b/frontends/mit-learn/src/page-components/Footer/Footer.test.tsx @@ -3,18 +3,23 @@ import Footer from "./Footer" import React from "react" import { ThemeProvider } from "ol-components" import * as urls from "@/common/urls" +import { MemoryRouter } from "react-router" describe("Footer", () => { test("Renders the appropriate text and links", async () => { - render(
, { - wrapper: ThemeProvider, - }) + render( + + +
+ + , + ) interface Links { [key: string]: string } const expectedLinks: Links = { // key is blank here because the link is an image - "": "https://mit.edu/", + "": "https://www.mit.edu/", Home: urls.HOME, "About Us": urls.ABOUT, Accessibility: urls.ACCESSIBILITY, diff --git a/frontends/mit-learn/src/page-components/Footer/Footer.tsx b/frontends/mit-learn/src/page-components/Footer/Footer.tsx index bcabe9704d..d399ade81a 100644 --- a/frontends/mit-learn/src/page-components/Footer/Footer.tsx +++ b/frontends/mit-learn/src/page-components/Footer/Footer.tsx @@ -1,7 +1,7 @@ import { Container, styled } from "ol-components" -import { MITLogoLink } from "ol-utilities" import * as urls from "@/common/urls" import React, { FunctionComponent } from "react" +import MITLogoLink from "../MITLogoLink/MITLogoLink" const PUBLIC_URL = APP_SETTINGS.PUBLIC_URL const HOME_URL = `${PUBLIC_URL}/` @@ -147,10 +147,7 @@ const Footer: FunctionComponent = () => { - + Massachusetts Institute of Technology
diff --git a/frontends/mit-learn/src/page-components/Header/Header.tsx b/frontends/mit-learn/src/page-components/Header/Header.tsx index a0756c3d86..64a6d81fa5 100644 --- a/frontends/mit-learn/src/page-components/Header/Header.tsx +++ b/frontends/mit-learn/src/page-components/Header/Header.tsx @@ -3,7 +3,6 @@ import type { NavData } from "ol-components" import { styled, AppBar, - Divider, NavDrawer, Toolbar, ClickAwayListener, @@ -23,7 +22,7 @@ import { RiPriceTag3Line, RiAwardLine, } from "@remixicon/react" -import { MITLogoLink, useToggle } from "ol-utilities" +import { useToggle } from "ol-utilities" import UserMenu from "./UserMenu" import { MenuButton } from "./MenuButton" import { @@ -41,18 +40,24 @@ import { SEARCH_LEARNING_MATERIAL, } from "@/common/urls" import { useUserMe } from "api/hooks/user" +import MITLogoLink from "../MITLogoLink/MITLogoLink" const Bar = styled(AppBar)(({ theme }) => ({ - height: "60px", - padding: "0 8px", - borderBottom: `1px solid ${theme.custom.colors.lightGray2}`, - backgroundColor: theme.custom.colors.white, - color: theme.custom.colors.darkGray1, + padding: "16px 8px", + borderBottom: `4px solid ${theme.custom.colors.darkGray2}`, + backgroundColor: theme.custom.colors.navGray, display: "flex", + justifyContent: "space-between", flexDirection: "column", - boxShadow: "0 2px 10px rgba(120 169 197 / 15%)", + boxShadow: "0px 3px 35px 0px rgba(23, 30, 42, 0.50)", + ".MuiToolbar-root": { + minHeight: "auto", + }, [theme.breakpoints.down("sm")]: { + height: "60px", padding: "0", + borderBottom: `1px solid ${theme.custom.colors.darkGray2}`, + boxShadow: "0px -2px 20px 0px rgba(0, 0, 0, 0.05)", }, })) @@ -83,45 +88,54 @@ const StyledToolbar = styled(Toolbar)({ flex: 1, }) -const LogoLink = styled(MITLogoLink)(({ theme }) => ({ - display: "flex", - border: "none", +const StyledMITLogoLink = styled(MITLogoLink)(({ theme }) => ({ img: { - width: 109, - height: 40, + height: "24px", [theme.breakpoints.down("sm")]: { - marginLeft: "16px", + height: "16px", }, }, })) -const LeftDivider = styled(Divider)({ - margin: "0 24px", - height: "24px", - alignSelf: "auto", +const Spacer = styled.div({ + flex: "1", }) -const RightDivider = styled(Divider)(({ theme }) => ({ - margin: "0 32px", - height: "24px", - alignSelf: "auto", +const LeftSpacer = styled.div(({ theme }) => ({ + width: "24px", [theme.breakpoints.down("sm")]: { - margin: "0 16px", + width: "16px", }, })) -const Spacer = styled.div` - flex: 1; -` +const StyledSearchButton = styled(ActionButtonLink)(({ theme }) => ({ + width: "auto", + height: "auto", + padding: "4px 16px", + "&:hover": { + svg: { + opacity: 1, + }, + }, + [theme.breakpoints.down("sm")]: { + padding: "0", + }, +})) const StyledSearchIcon = styled(RiSearch2Line)(({ theme }) => ({ - color: theme.custom.colors.darkGray2, + width: "24px", + height: "24px", + color: theme.custom.colors.white, + opacity: 0.5, margin: "4px 0", + [theme.breakpoints.down("sm")]: { + opacity: 1, + }, })) const SearchButton: FunctionComponent = () => { return ( - { aria-label="Search" > - + ) } @@ -142,7 +156,6 @@ const LoggedOutView: FunctionComponent = () => { - @@ -153,7 +166,6 @@ const LoggedInView: FunctionComponent = () => { return ( - ) @@ -265,8 +277,8 @@ const Header: FunctionComponent = () => { - - + + { - + + diff --git a/frontends/mit-learn/src/page-components/Header/MenuButton.tsx b/frontends/mit-learn/src/page-components/Header/MenuButton.tsx index 99218234c8..add3d730a7 100644 --- a/frontends/mit-learn/src/page-components/Header/MenuButton.tsx +++ b/frontends/mit-learn/src/page-components/Header/MenuButton.tsx @@ -12,7 +12,6 @@ const CloseMenuIcon = styled(RiCloseLargeLine)(({ theme }) => ({ const MenuButtonText = styled.div(({ theme }) => ({ alignSelf: "center", - color: theme.custom.colors.darkGray2, paddingLeft: "16px", textTransform: "none", [theme.breakpoints.down("sm")]: { @@ -23,12 +22,11 @@ const MenuButtonText = styled.div(({ theme }) => ({ const MenuButtonInner = styled.div({ display: "flex", - padding: "8px 0", alignItems: "flex-start", }) const StyledMenuButton = styled.button(({ theme }) => ({ - padding: "0", + padding: "8px 16px", background: "transparent", "&:hover:not(:disabled)": { background: "transparent", @@ -38,10 +36,21 @@ const StyledMenuButton = styled.button(({ theme }) => ({ display: "inline-flex", justifyContent: "center", alignItems: "center", - color: theme.palette.text.primary, + color: theme.custom.colors.white, transition: `background ${theme.transitions.duration.short}ms`, cursor: "pointer", borderStyle: "none", + opacity: 0.5, + svg: { + color: theme.custom.colors.white, + }, + [theme.breakpoints.down("sm")]: { + padding: "4px 0", + opacity: 1, + }, + "&:hover": { + opacity: 1, + }, })) interface MenuButtonProps { diff --git a/frontends/mit-learn/src/page-components/Header/UserMenu.tsx b/frontends/mit-learn/src/page-components/Header/UserMenu.tsx index a90add21c0..6a54459cd6 100644 --- a/frontends/mit-learn/src/page-components/Header/UserMenu.tsx +++ b/frontends/mit-learn/src/page-components/Header/UserMenu.tsx @@ -1,5 +1,11 @@ import React, { useState } from "react" -import { ActionButtonLink, ButtonLink, SimpleMenu, styled } from "ol-components" +import { + ActionButtonLink, + ButtonLink, + SimpleMenu, + styled, + theme, +} from "ol-components" import type { MenuOverrideProps, SimpleMenuItem } from "ol-components" import * as urls from "@/common/urls" import { @@ -9,25 +15,40 @@ import { } from "@remixicon/react" import { useUserMe, User } from "api/hooks/user" import { useLocation } from "react-router" +import MITLogoLink from "../MITLogoLink/MITLogoLink" const FlexContainer = styled.div({ display: "flex", alignItems: "center", }) -const UserMenuContainer = styled.button({ +const UserMenuContainer = styled.button(({ theme }) => ({ display: "flex", alignItems: "center", cursor: "pointer", background: "none", - color: "inherit", - border: "none", - padding: "0", + color: theme.custom.colors.white, + height: "40px", + border: `1px solid ${theme.custom.colors.silverGrayDark}`, + borderRadius: "4px", + padding: "2px 8px", + gap: "8px", font: "inherit", -}) + margin: "0 16px", + opacity: 0.75, + "&:hover": { + opacity: 1, + }, + [theme.breakpoints.down("sm")]: { + border: "none", + opacity: 1, + gap: "2px", + padding: "4px 0", + margin: "0px 24px", + }, +})) const LoginButtonContainer = styled(FlexContainer)(({ theme }) => ({ - paddingLeft: "24px", "&:hover": { textDecoration: "none", }, @@ -50,10 +71,20 @@ const LoginButtonContainer = styled(FlexContainer)(({ theme }) => ({ }, })) -const UserIcon = styled(RiAccountCircleFill)(({ theme }) => ({ +const DesktopLoginButton = styled(ButtonLink)({ + height: "40px", + padding: "18px 12px", + margin: "0 16px", +}) + +const MobileLoginButton = styled(ActionButtonLink)({ width: "24px", height: "24px", - color: theme.custom.colors.black, + margin: "0 24px", +}) + +const UserIcon = styled(RiAccountCircleFill)(({ theme }) => ({ + color: theme.custom.colors.white, })) type UserMenuItem = SimpleMenuItem & { @@ -61,8 +92,7 @@ type UserMenuItem = SimpleMenuItem & { } const UserNameContainer = styled.span(({ theme }) => ({ - color: theme.custom.colors.darkGray2, - padding: "0 12px", + color: theme.custom.colors.white, [theme.breakpoints.down("sm")]: { display: "none", }, @@ -77,11 +107,32 @@ const UserMenuChevron: React.FC<{ open: boolean }> = ({ open }) => { return open ? : } +const StyledMITLogoLink = styled(MITLogoLink)(({ theme }) => ({ + width: "64px", + height: "32px", + marginLeft: "16px", + [theme.breakpoints.down("sm")]: { + width: "48px", + height: "24px", + marginLeft: "0", + }, +})) + type DeviceType = "mobile" | "desktop" type UserMenuProps = { variant?: DeviceType } +const MITHomeLink: React.FC = () => { + return ( + + ) +} + const UserMenu: React.FC = ({ variant }) => { const [visible, setVisible] = useState(false) const location = useLocation() @@ -95,6 +146,12 @@ const UserMenu: React.FC = ({ variant }) => { }) const items: UserMenuItem[] = [ + { + label: "Home", + key: "home", + allow: true, + href: urls.HOME, + }, { label: "Dashboard", key: "dashboard", @@ -117,47 +174,73 @@ const UserMenu: React.FC = ({ variant }) => { ] const menuOverrideProps: MenuOverrideProps = { - anchorOrigin: { horizontal: "right", vertical: "bottom" }, - transformOrigin: { horizontal: "right", vertical: "top" }, + anchorOrigin: { horizontal: "left", vertical: "bottom" }, + transformOrigin: { horizontal: "left", vertical: "top" }, + slotProps: { + paper: { + sx: { + borderRadius: "0px 0px 5px 5px", + backgroundColor: theme.custom.colors.darkGray1, + padding: "0 16px", + ".MuiMenu-list": { + padding: "8px 0", + ".MuiMenuItem-root": { + backgroundColor: theme.custom.colors.darkGray1, + color: theme.custom.colors.white, + padding: "8px 0", + "&:hover": { + textDecoration: "underline", + }, + }, + }, + ...theme.typography.body2, + }, + }, + }, } if (user?.is_authenticated) { return ( - allow) - .map(({ allow, ...item }) => item)} - trigger={ - - - - {user?.is_authenticated ? : ""} - - } - /> + <> + allow) + .map(({ allow, ...item }) => item)} + trigger={ + + + + {user?.is_authenticated ? : ""} + + } + /> + + ) } else { return ( {variant === "desktop" ? ( - Log In - + + ) : ( "" )} {variant === "mobile" ? ( - = ({ variant }) => { aria-label="Log in" > - + + ) : ( "" diff --git a/frontends/mit-learn/src/page-components/MITLogoLink/MITLogoLink.tsx b/frontends/mit-learn/src/page-components/MITLogoLink/MITLogoLink.tsx new file mode 100644 index 0000000000..45c4e872c0 --- /dev/null +++ b/frontends/mit-learn/src/page-components/MITLogoLink/MITLogoLink.tsx @@ -0,0 +1,36 @@ +import { Link, styled } from "ol-components" +import React from "react" + +const PUBLIC_URL = APP_SETTINGS.PUBLIC_URL +const MIT_LEARN_HOME_URL = `${PUBLIC_URL}/` + +const MIT_LOGO_URL = `${PUBLIC_URL}/static/images/mit-logo-black.svg` + +const StyledLink = styled(Link)({ + display: "flex", + alignItems: "center", + justifyContent: "center", +}) + +interface Props { + href?: string + src?: string + className?: string + target?: string +} + +const MITLogoLink: React.FC = ({ href, src, className, target }) => ( + + MIT Logo + +) + +export default MITLogoLink diff --git a/frontends/ol-components/src/components/Banner/Banner.stories.tsx b/frontends/ol-components/src/components/Banner/Banner.stories.tsx index 77521fdd20..e56690ae39 100644 --- a/frontends/ol-components/src/components/Banner/Banner.stories.tsx +++ b/frontends/ol-components/src/components/Banner/Banner.stories.tsx @@ -48,7 +48,7 @@ export const logoBanner: Story = { @@ -66,7 +66,7 @@ export const logoBannerWithExtras: Story = { diff --git a/frontends/ol-components/src/components/NavDrawer/NavDrawer.tsx b/frontends/ol-components/src/components/NavDrawer/NavDrawer.tsx index 95d711dd49..1f5208bea3 100644 --- a/frontends/ol-components/src/components/NavDrawer/NavDrawer.tsx +++ b/frontends/ol-components/src/components/NavDrawer/NavDrawer.tsx @@ -3,7 +3,7 @@ import styled from "@emotion/styled" import React, { ReactElement } from "react" const DrawerContent = styled.div(({ theme }) => ({ - paddingTop: "60px", + paddingTop: "72px", width: "366px", height: "100%", background: theme.custom.colors.white, diff --git a/frontends/ol-components/src/components/ThemeProvider/colors.ts b/frontends/ol-components/src/components/ThemeProvider/colors.ts index 47b876a8a3..0c0ae91037 100644 --- a/frontends/ol-components/src/components/ThemeProvider/colors.ts +++ b/frontends/ol-components/src/components/ThemeProvider/colors.ts @@ -10,6 +10,7 @@ const colors = { silverGrayLight: "#B8C2CC", lightGray2: "#DDE1E6", lightGray1: "#F3F4F8", + navGray: "#303337", darkPink: "#750062", pink: "#FF14F0", lightPink: "#FFB3FF", diff --git a/frontends/ol-components/src/types/theme.d.ts b/frontends/ol-components/src/types/theme.d.ts index e971ffe9af..21986bf478 100644 --- a/frontends/ol-components/src/types/theme.d.ts +++ b/frontends/ol-components/src/types/theme.d.ts @@ -24,6 +24,7 @@ interface CustomTheme { silverGrayLight: string lightGray2: string lightGray1: string + navGray: string darkPink: string pink: string lightPink: string diff --git a/frontends/ol-utilities/src/components/MITLogoLink.tsx b/frontends/ol-utilities/src/components/MITLogoLink.tsx deleted file mode 100644 index c232e78170..0000000000 --- a/frontends/ol-utilities/src/components/MITLogoLink.tsx +++ /dev/null @@ -1,26 +0,0 @@ -import React from "react" - -const PUBLIC_URL = APP_SETTINGS.PUBLIC_URL -const HOME_URL = `${PUBLIC_URL}/` - -const MIT_LOGO_URL = `${PUBLIC_URL}/static/images/mit-logo-learn.svg` - -interface Props { - href?: string - src?: string - className?: string -} - -const MITLogoLink: React.FC = ({ href, src, className }) => ( - - MIT Logo - -) - -export default MITLogoLink diff --git a/frontends/ol-utilities/src/components/index.ts b/frontends/ol-utilities/src/components/index.ts deleted file mode 100644 index 1281be3867..0000000000 --- a/frontends/ol-utilities/src/components/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as MITLogoLink } from "./MITLogoLink" diff --git a/frontends/ol-utilities/src/index.ts b/frontends/ol-utilities/src/index.ts index a0497c81cc..c46078b796 100644 --- a/frontends/ol-utilities/src/index.ts +++ b/frontends/ol-utilities/src/index.ts @@ -1,7 +1,6 @@ // eslint-disable-next-line @typescript-eslint/triple-slash-reference /// -export * from "./components" export * from "./styles" export * from "./date/format"