diff --git a/.eslintrc.json b/.eslintrc.json index ce1264429..4cc5d234d 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -38,7 +38,8 @@ "@typescript-eslint/no-unused-vars": [ "error", { "ignoreRestSiblings": true } - ] + ], + "linebreak-style": ["error", "unix"] }, "overrides": [ { diff --git a/.pre-commit-config.yaml b/.pre-commit-config.yaml index 00c383dd8..301168c79 100644 --- a/.pre-commit-config.yaml +++ b/.pre-commit-config.yaml @@ -14,12 +14,13 @@ repos: - id: prettier exclude_types: [markdown, yaml] - repo: https://github.com/thibaudcolas/pre-commit-stylelint - rev: v14.4.0 + rev: v16.9.0 hooks: - id: stylelint args: [--fix] additional_dependencies: # stylelint itself needs to be here when using additional_dependencies. - - stylelint@14.14.0 - - stylelint-config-standard@29.0.0 + - stylelint@16.9.0 + - stylelint-config-standard@36.0.1 - stylelint-config-rational-order@0.1.2 + - stylelint-order@6.0.4 diff --git a/.prettierignore b/.prettierignore index 4e4d0d191..dd63420a9 100644 --- a/.prettierignore +++ b/.prettierignore @@ -1,4 +1,3 @@ -**/*.css **/.git **/node_modules **/*.hbs diff --git a/.stylelintrc b/.stylelintrc index f508abfe6..0936d49d1 100644 --- a/.stylelintrc +++ b/.stylelintrc @@ -23,8 +23,6 @@ ], "font-weight-notation": "numeric", "import-notation": "string", - "linebreaks": "unix", - "max-line-length": [80, { "ignore": "non-comments" }], "number-max-precision": 3, "selector-class-pattern": [ "^((?!\\-).)*$", @@ -36,9 +34,6 @@ ], "selector-no-vendor-prefix": null, "selector-pseudo-element-colon-notation": "double", - "value-list-comma-newline-after": "always-multi-line", - "value-list-comma-space-after": "always-single-line", - "value-list-comma-space-before": "never", "property-no-vendor-prefix": [ true, { "ignoreProperties": ["background-clip"] } diff --git a/apps/cyberstorm-remix/app/communities/communities.tsx b/apps/cyberstorm-remix/app/communities/communities.tsx index 6c1e52141..56414343a 100644 --- a/apps/cyberstorm-remix/app/communities/communities.tsx +++ b/apps/cyberstorm-remix/app/communities/communities.tsx @@ -137,7 +137,7 @@ export default function CommunitiesPage() { csTextStyles={["fontWeightBold", "lineHeightAuto", "fontSizeS"]} >
- Search + setSearchValue(e.target.value)} value={searchValue} @@ -146,15 +146,17 @@ export default function CommunitiesPage() { leftIcon={} csColor="cyber-green" rootClasses={searchAndOrderStyles.searchInput} + id="communitiesSearchInput" />
- Sort by +
@@ -169,38 +171,9 @@ export default function CommunitiesPage() { ); } -function comparePackageCount(a: Community, b: Community) { - if (a.total_package_count < b.total_package_count) { - return 1; - } - if (a.total_package_count > b.total_package_count) { - return -1; - } - return 0; -} - function CommunitiesList(props: { communitiesData: Communities }) { const { communitiesData } = props; - const topDogs: Community[] = []; - communitiesData.results.reduce((prevCommunity, currentCommunity) => { - if (topDogs.length > 4) { - topDogs.sort(comparePackageCount); - const lastDog = topDogs.at(-1); - if ( - (lastDog ? lastDog.total_package_count : 0) < - currentCommunity.total_package_count - ) { - topDogs.pop(); - topDogs.push(currentCommunity); - } - } else { - topDogs.push(currentCommunity); - } - return topDogs; - }, topDogs); - const flatDogs = topDogs.map((community) => community.identifier); - if (communitiesData.results.length > 0) { return (
@@ -208,7 +181,7 @@ function CommunitiesList(props: { communitiesData: Communities }) { 1000} isNew={ new Date(community.datetime_created).getTime() > new Date().getTime() - 1000 * 60 * 60 * 336 diff --git a/apps/cyberstorm-remix/app/root.tsx b/apps/cyberstorm-remix/app/root.tsx index 275f97145..110aef93f 100644 --- a/apps/cyberstorm-remix/app/root.tsx +++ b/apps/cyberstorm-remix/app/root.tsx @@ -17,7 +17,11 @@ import { import { Footer } from "@thunderstore/cyberstorm/src/components/Footer/Footer"; import { Provider as RadixTooltip } from "@radix-ui/react-tooltip"; -import { Navigation } from "cyberstorm/navigation/Navigation"; +import { + MobileNavigationMenu, + MobileUserPopoverContent, + Navigation, +} from "cyberstorm/navigation/Navigation"; import { LinkLibrary } from "cyberstorm/utils/LinkLibrary"; import { AdContainer, LinkingProvider } from "@thunderstore/cyberstorm"; import { DapperTs } from "@thunderstore/dapper-ts"; @@ -29,10 +33,12 @@ import { getPublicEnvVariables, publicEnvVariables, } from "cyberstorm/security/publicEnvVariables"; -import { useEffect, useRef } from "react"; +import { useEffect, useRef, useState } from "react"; import { useHydrated } from "remix-utils/use-hydrated"; import Toast from "@thunderstore/cyberstorm/src/components/Toast"; import { SessionProvider } from "@thunderstore/ts-api-react"; +import { CurrentUser } from "@thunderstore/dapper/types"; +import { getDapper } from "cyberstorm/dapper/sessionUtils"; // REMIX TODO: https://remix.run/docs/en/main/route/links // export const links: LinksFunction = () => [{ rel: "stylesheet", href: styles }]; @@ -128,6 +134,22 @@ function Root() { ? false : true; + const isHydrated = useHydrated(); + const startsHydrated = useRef(isHydrated); + const [currentUser, setCurrentUser] = useState(); + + useEffect(() => { + if (!startsHydrated.current && isHydrated) return; + const fetchAndSetUser = async () => { + const dapper = await getDapper(true); + const fetchedUser = await dapper.getCurrentUser(); + if (fetchedUser?.username) { + setCurrentUser(fetchedUser); + } + }; + fetchAndSetUser(); + }, []); + return ( @@ -173,7 +195,16 @@ function Root() {
{/* REMIX TODO: For whatever reason the Navigation seems to cause suspense boundary errors. Couldn't find a reason why */} - + + + {!startsHydrated.current && isHydrated && currentUser ? ( + + ) : ( + + )}
diff --git a/apps/cyberstorm-remix/cyberstorm/navigation/DesktopLoginPopover.tsx b/apps/cyberstorm-remix/cyberstorm/navigation/DesktopLoginPopover.tsx index 872dda94f..c4d9823c9 100644 --- a/apps/cyberstorm-remix/cyberstorm/navigation/DesktopLoginPopover.tsx +++ b/apps/cyberstorm-remix/cyberstorm/navigation/DesktopLoginPopover.tsx @@ -1,8 +1,18 @@ import styles from "./Navigation.module.css"; -import { Modal, NewButton, NewIcon } from "@thunderstore/cyberstorm"; -import { LoginList } from "./LoginList"; +import { + Heading, + Modal, + NewButton, + NewIcon, + NewLink, + NewText, +} from "@thunderstore/cyberstorm"; import { faArrowRightToBracket } from "@fortawesome/free-solid-svg-icons"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +import { OverwolfLogo } from "@thunderstore/cyberstorm/src/svg/svg"; +import { classnames } from "@thunderstore/cyberstorm/src/utils/utils"; +import { buildAuthLoginUrl } from "cyberstorm/utils/ThunderstoreAuth"; +import { faDiscord, faGithub } from "@fortawesome/free-brands-svg-icons"; export function DesktopLoginPopover() { return ( @@ -27,7 +37,98 @@ export function DesktopLoginPopover() { } > - +
+ + + + + + + + + + + Log in to Thunderstore + +
+ + + + + Connect with Discord + + + + + + Connect with Github + + + + + + Connect with Overwolf + +
+ + By logging in and accessing the site you agree to{" "} + + Terms and Conditions + {" "} + and{" "} + + Privacy Policy + + +
); } diff --git a/apps/cyberstorm-remix/cyberstorm/navigation/DevelopersDropDown.module.css b/apps/cyberstorm-remix/cyberstorm/navigation/DevelopersDropDown.module.css index 50f68cd9b..cf4cb83bc 100644 --- a/apps/cyberstorm-remix/cyberstorm/navigation/DevelopersDropDown.module.css +++ b/apps/cyberstorm-remix/cyberstorm/navigation/DevelopersDropDown.module.css @@ -4,6 +4,10 @@ justify-content: space-between; } +.focus:not([data-highlighted]) a svg { + color: var(--color-tertiary); +} + .root { min-width: 14rem; } diff --git a/apps/cyberstorm-remix/cyberstorm/navigation/DevelopersDropDown.tsx b/apps/cyberstorm-remix/cyberstorm/navigation/DevelopersDropDown.tsx index b62199532..e3a2c8c6d 100644 --- a/apps/cyberstorm-remix/cyberstorm/navigation/DevelopersDropDown.tsx +++ b/apps/cyberstorm-remix/cyberstorm/navigation/DevelopersDropDown.tsx @@ -24,7 +24,7 @@ export function DevelopersDropDown() { } csVariant="default" - csColor="surface" + csColor="surface-alpha" rootClasses={styles.root} > @@ -67,7 +67,7 @@ export function DevelopersDropDown() { Markdown Preview - + Github - + diff --git a/apps/cyberstorm-remix/cyberstorm/navigation/MobileUserPopoverContent.tsx b/apps/cyberstorm-remix/cyberstorm/navigation/MobileUserPopoverContent.tsx deleted file mode 100644 index d1ec9d957..000000000 --- a/apps/cyberstorm-remix/cyberstorm/navigation/MobileUserPopoverContent.tsx +++ /dev/null @@ -1,102 +0,0 @@ -import { faLongArrowLeft } from "@fortawesome/free-solid-svg-icons"; -import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; - -import styles from "./Navigation.module.css"; -import { - Avatar, - Menu, - NewIcon, - NewLink, - NewText, -} from "@thunderstore/cyberstorm"; -import { AvatarButton } from "@thunderstore/cyberstorm/src/components/Avatar/AvatarButton"; -import { CurrentUser } from "@thunderstore/dapper/types"; - -import { faSignOut, faUsers, faCog } from "@fortawesome/free-solid-svg-icons"; - -import { LoginList } from "./LoginList"; - -export function MobileUserPopoverContent(props: { user: CurrentUser }) { - const { user } = props; - const avatar = user.connections.find((c) => c.avatar !== null)?.avatar; - - return ( - - - Account -
- } - controls={ - - } - > - {user.username ? ( -
-
- - - {user.username} - -
- - - - - Settings - - - - - - Teams - - - - - - Log Out - -
- ) : ( - - )} - - ); -} diff --git a/apps/cyberstorm-remix/cyberstorm/navigation/Navigation.module.css b/apps/cyberstorm-remix/cyberstorm/navigation/Navigation.module.css index a105b35e0..56d026bed 100644 --- a/apps/cyberstorm-remix/cyberstorm/navigation/Navigation.module.css +++ b/apps/cyberstorm-remix/cyberstorm/navigation/Navigation.module.css @@ -15,7 +15,6 @@ height: var(--header-height); padding: 0 var(--space--12); background: var(--body-bg-color-a); - background-color: rgb(16 16 40 / 0.85); box-shadow: 0 1px 10px 0 var(--body-bg-color); backdrop-filter: blur(10px); } @@ -43,8 +42,12 @@ display: flex; gap: var(--space--16); align-items: center; +} - --dropdown-item-color: var(--color-primary) !important; +.dropDownItem[data-highlighted] svg, +.dropDownItem[data-highlighted], +.dropDownItem { + color: var(--color-primary); } .dropDownUserInfo { @@ -63,11 +66,6 @@ display: none; } -.mobileNavItemIconWrapper { - height: 1.75rem; - background: transparent; -} - .mobileNavMenuDevelopersButton { display: flex; gap: 1rem; @@ -75,9 +73,7 @@ align-self: stretch; justify-content: space-between; padding: 1rem; - color: #f5f5f6; - font-weight: 400; - font-size: 0.875rem; + color: var(--color-primary); background: transparent; } @@ -90,12 +86,20 @@ flex-direction: column; flex-grow: 1; align-items: center; - color: #9c9cc4; + color: var(--color-tertiary); font-weight: 400; font-size: 0.75rem; line-height: 1.2rem; } +button.mobileNavItem { + background: transparent; +} + +.mobileNavItemIcon { + height: 1.375rem; +} + .accountPopoverItem { display: flex; gap: 1rem; @@ -137,6 +141,8 @@ .TSLoginLogo { width: 3.12rem; height: 2.79rem; + color: currentcolor; + fill: currentcolor; } .loginTitle { @@ -151,6 +157,15 @@ max-width: 300px; } +.loginListMobile { + display: flex; + flex-direction: column; + gap: 2rem; + align-items: center; + + /* justify-content: center; */ +} + .loginLinkList { display: flex; flex-direction: column; @@ -168,6 +183,16 @@ color: #f5f5f6; } +.loginLinkMobile { + display: flex; + flex: 1 0 0; + gap: 1rem; + align-items: center; + padding: 0.75rem 1rem; + border-radius: 0.5rem; + color: #f5f5f6; +} + .loginLinkDiscord { background: #5865f2; } @@ -186,7 +211,15 @@ --text-color: #8683be; } -@media (max-width: 63.5rem) { +.mobileMenu { + display: none; +} + +@media (width <= 63.5rem) { + .mobileMenu { + display: flex; + } + .desktopNavRoot { display: none; } @@ -201,7 +234,7 @@ justify-content: space-evenly; width: 100%; padding: 0.5rem 1.5rem 0.25rem; - background: rgb(16 16 40 / 0.85); + background: var(--body-bg-color-a); backdrop-filter: blur(10px); } } diff --git a/apps/cyberstorm-remix/cyberstorm/navigation/Navigation.tsx b/apps/cyberstorm-remix/cyberstorm/navigation/Navigation.tsx index 2d6771553..6b83666b7 100644 --- a/apps/cyberstorm-remix/cyberstorm/navigation/Navigation.tsx +++ b/apps/cyberstorm-remix/cyberstorm/navigation/Navigation.tsx @@ -3,45 +3,40 @@ import { faGamepad, faLongArrowLeft, faCaretRight, + faXmark, } from "@fortawesome/free-solid-svg-icons"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import styles from "./Navigation.module.css"; import { - CyberstormLink, Menu, LinkButton, NewLink, NewIcon, + Avatar, + NewText, + Heading, } from "@thunderstore/cyberstorm"; -import { ThunderstoreLogo } from "@thunderstore/cyberstorm/src/svg/svg"; -import { useEffect, useRef, useState } from "react"; +import { + OverwolfLogo, + ThunderstoreLogo, +} from "@thunderstore/cyberstorm/src/svg/svg"; import { DevelopersDropDown } from "./DevelopersDropDown"; import { DesktopUserDropdown } from "./DesktopUserDropdown"; import { DesktopLoginPopover } from "./DesktopLoginPopover"; -import { MobileUserPopoverContent } from "./MobileUserPopoverContent"; -import { emptyUser } from "@thunderstore/dapper-ts/src/methods/currentUser"; import { CurrentUser } from "@thunderstore/dapper/types"; -import { getDapper } from "cyberstorm/dapper/sessionUtils"; -import { useHydrated } from "remix-utils/use-hydrated"; -export function Navigation() { - const isHydrated = useHydrated(); - const startsHydrated = useRef(isHydrated); - const [currentUser, setCurrentUser] = useState(); +import { faSignOut } from "@fortawesome/free-solid-svg-icons"; +import { faDiscord, faGithub } from "@fortawesome/free-brands-svg-icons"; - useEffect(() => { - if (!startsHydrated.current && isHydrated) return; - const fetchAndSetUser = async () => { - const dapper = await getDapper(true); - const fetchedUser = await dapper.getCurrentUser(); - if (fetchedUser?.username) { - setCurrentUser(fetchedUser); - } - }; - fetchAndSetUser(); - }, []); +import { classnames } from "@thunderstore/cyberstorm/src/utils/utils"; +import { buildAuthLoginUrl } from "cyberstorm/utils/ThunderstoreAuth"; +export function Navigation(props: { + hydrationCheck: boolean; + currentUser?: CurrentUser; +}) { + const { hydrationCheck, currentUser } = props; return ( <>
@@ -62,7 +57,7 @@ export function Navigation() { primitiveType="cyberstormLink" linkId="Communities" csSize="l" - csColor="surface" + csColor="surface-alpha" csVariant="tertiary" > Communities @@ -81,7 +76,7 @@ export function Navigation() { > Get App - {!startsHydrated.current && isHydrated && currentUser ? ( + {hydrationCheck && currentUser ? ( ) : ( @@ -90,146 +85,369 @@ export function Navigation() {
+ + ); +} + +export function MobileNavigationMenu() { + return ( + + + + + + } + rootClasses={styles.mobileMenu} + > +
+ + + } controls={ } > -
- - + + ); +} + +export function MobileUserPopoverContent(props: { user?: CurrentUser }) { + const { user } = props; + const avatar = user?.connections.find((c) => c.avatar !== null)?.avatar; + + return ( + + + + + + } + > + {user && user.username ? ( +
+
+ + - + {user.username} + +
+ {/* + + + + Settings + + + + + + Teams + */} + + + - Browse - + Log Out +
- {!startsHydrated.current && isHydrated && currentUser ? ( - - ) : ( - - )} - - + ) : ( +
+ + + + + + + + + + + Log in to Thunderstore + +
+ + + + + Connect with Discord + + + + + + Connect with Github + + + + + + Connect with Overwolf + +
+ + By logging in and accessing the site you agree to{" "} + + Terms and Conditions + {" "} + and{" "} + + Privacy Policy + + +
+ )} + ); } diff --git a/packages/cyberstorm/src/components/Avatar/Avatar.module.css b/packages/cyberstorm/src/components/Avatar/Avatar.module.css index 0975c9f59..1c5a1ecbe 100644 --- a/packages/cyberstorm/src/components/Avatar/Avatar.module.css +++ b/packages/cyberstorm/src/components/Avatar/Avatar.module.css @@ -43,7 +43,7 @@ } .verySmoll { - --size: 1.75rem; + --size: 1.375rem; } .small { diff --git a/packages/cyberstorm/src/components/Avatar/Avatar.tsx b/packages/cyberstorm/src/components/Avatar/Avatar.tsx index 21d998893..79772b21c 100644 --- a/packages/cyberstorm/src/components/Avatar/Avatar.tsx +++ b/packages/cyberstorm/src/components/Avatar/Avatar.tsx @@ -1,9 +1,12 @@ +import { NewIcon } from "../.."; import { classnames } from "../../utils/utils"; import styles from "./Avatar.module.css"; +import { faUser } from "@fortawesome/free-solid-svg-icons"; +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; export interface AvatarProps { src?: string | null; - size?: "small" | "medium" | "large"; + size?: "verySmoll" | "small" | "medium" | "large"; username: string | null; } @@ -13,27 +16,38 @@ export interface AvatarProps { export function Avatar(props: AvatarProps) { const { src, size = "medium", username } = props; - return ( -
- {src ? ( - - ) : ( -
- {username ? username.charAt(0).toUpperCase() : "U"} -
- )} -
- ); + if (username) { + return ( +
+ {src ? ( + + ) : ( +
+ {username ? username.charAt(0).toUpperCase() : "U"} +
+ )} +
+ ); + } else { + return ( +
+ + + +
+ ); + } } Avatar.displayName = "Avatar"; const getSize = (scheme: AvatarProps["size"] = "medium") => { return { + verySmoll: styles.verySmoll, small: styles.small, medium: styles.medium, large: styles.large, diff --git a/packages/cyberstorm/src/components/Footer/Footer.module.css b/packages/cyberstorm/src/components/Footer/Footer.module.css index 8ed46b1fa..87b701794 100644 --- a/packages/cyberstorm/src/components/Footer/Footer.module.css +++ b/packages/cyberstorm/src/components/Footer/Footer.module.css @@ -4,7 +4,7 @@ --border: var(--space--px) solid #27275d; } -@media (max-width: 63.5rem) { +@media (width <= 63.5rem) { .item { padding-right: 1.5rem; padding-left: 1.5rem; @@ -39,7 +39,11 @@ z-index: -1; height: 100%; max-height: 24rem; - background-image: linear-gradient(165deg, hsl(276deg 39% 38% / 0) 60%, hsl(276deg 39% 38%) 100%); + background-image: linear-gradient( + 165deg, + hsl(276deg 39% 38% / 0) 60%, + hsl(276deg 39% 38%) 100% + ); background-repeat: no-repeat; background-position: 100% 100%; content: "\0020"; @@ -68,10 +72,15 @@ .footnoteCopyright { color: rgb(197 194 255 / 0.6) !important; + text-align: center; } .footnoteInner { display: flex; + flex-direction: column; + gap: 1.5rem; + align-items: center; + align-self: stretch; justify-content: center; width: 100%; max-width: 80rem; @@ -150,14 +159,19 @@ border-radius: var(--border-radius--8); } -@media (min-width: calc(63.5rem + 1px)) { +.footerPagesLinks { + display: flex; + gap: var(--gap--32); +} + +@media (width >= calc(63.5rem + 1px)) { .logoAndLinks { flex-direction: row; justify-content: space-between; } } -@media (min-width: calc(63.5rem + 1px)) { +@media (width >= calc(63.5rem + 1px)) { .main { flex-direction: row; } @@ -211,7 +225,8 @@ } .footnoteInner { - justify-content: flex-end; + flex-direction: row; + justify-content: space-between; } .ad { @@ -219,7 +234,7 @@ } } -@media (max-width: 23.25rem) { +@media (width <= 23.25rem) { .nav { flex-flow: wrap; justify-content: flex-start; diff --git a/packages/cyberstorm/src/components/Footer/Footer.tsx b/packages/cyberstorm/src/components/Footer/Footer.tsx index 86e923472..e0cbedf50 100644 --- a/packages/cyberstorm/src/components/Footer/Footer.tsx +++ b/packages/cyberstorm/src/components/Footer/Footer.tsx @@ -34,7 +34,7 @@ export function Footer() { rootClasses={styles.iconLink} aria-label="Invite link to Thunderstores Discord server" > - + @@ -45,7 +45,7 @@ export function Footer() { rootClasses={styles.iconLink} aria-label="Link to Thunderstores Github" > - + @@ -183,6 +183,23 @@ export function Footer() {
+ + + Contact Us + + + Privacy Policy + +
- Thunderstore development is made possible with ads. - - - - Thanks + Thunderstore development is made possible with ads. Please consider + making an exception to your adblock. diff --git a/packages/cyberstorm/src/newComponents/DropDown/DropDown.module.css b/packages/cyberstorm/src/newComponents/DropDown/DropDown.module.css index d54a94156..61c8e8b70 100644 --- a/packages/cyberstorm/src/newComponents/DropDown/DropDown.module.css +++ b/packages/cyberstorm/src/newComponents/DropDown/DropDown.module.css @@ -51,7 +51,10 @@ padding: var(--space--12) var(--space--16); overflow: hidden; color: var(--dropdown-item-color, var(--dropdown-color)); - background-color: var(--dropdown-item-background-color, var(--dropdown-background-color)); + background-color: var( + --dropdown-item-background-color, + var(--dropdown-background-color) + ); outline: none; --dropdown-item-color: var(--color-tertiary); @@ -61,37 +64,46 @@ .dropdownItem[data-highlighted] { z-index: 999; - background-color: var(--dropdown-item-highlighted-background-color, var(--color-primary)); + color: var(--dropdown-item-highlighted-color, var(--color-primary)); + background-color: var( + --dropdown-item-highlighted-background-color, + var(--color-primary) + ); } .dropdownItem[data-variant="default"] { --dropdown-item-color: var(--color-8); --dropdown-item-background-color: var(--color-2); + --dropdown-item-highlighted-color: var(--color-2); --dropdown-item-highlighted-background-color: var(--color-6); } .dropdownItem[data-variant="primary"] { --dropdown-item-color: var(--color-primary); --dropdown-item-background-color: var(--color-secondary); - --dropdown-item-highlighted-background-color: var(--color-tertiary); + --dropdown-item-highlighted-color: var(--color-secondary); + --dropdown-item-highlighted-background-color: var(--color-primary); } .dropdownItem[data-variant="secondary"] { --dropdown-item-color: var(--color-secondary); --dropdown-item-background-color: var(--color-primary); - --dropdown-item-highlighted-background-color: var(--color-tertiary); + --dropdown-item-highlighted-color: var(--color-primary); + --dropdown-item-highlighted-background-color: var(--color-secondary); } .dropdownItem[data-variant="tertiary"] { --dropdown-item-color: var(--color-tertiary); --dropdown-item-background-color: var(--color-accent); - --dropdown-item-highlighted-background-color: var(--color-accent); + --dropdown-item-highlighted-color: var(--color-accent); + --dropdown-item-highlighted-background-color: var(--color-tertiary); } .dropdownItem[data-variant="accent"] { --dropdown-item-color: var(--color-accent); --dropdown-item-background-color: var(--color-tertiary); - --dropdown-item-highlighted-background-color: var(--color-secondary); + --dropdown-item-highlighted-color: var(--color-tertiary); + --dropdown-item-highlighted-background-color: var(--color-accent); } .divider { diff --git a/packages/cyberstorm/src/newComponents/Menu/Menu.module.css b/packages/cyberstorm/src/newComponents/Menu/Menu.module.css index d6ca52bd4..84cbadacf 100644 --- a/packages/cyberstorm/src/newComponents/Menu/Menu.module.css +++ b/packages/cyberstorm/src/newComponents/Menu/Menu.module.css @@ -1,20 +1,50 @@ .menuRoot { - width: 80%; + z-index: 1; + display: flex; + width: 100%; height: 100%; + background: transparent; + + transform: translateX(-100%); + transition: transform var(--animation-length-s), + display var(--animation-length-s) allow-discrete; + + &:popover-open { + transform: none; + + @starting-style { + & { + transform: translateX(-100%); + } + } + } +} + +.menuRoot::backdrop { + backdrop-filter: blur(10px); } .menuWrapper { - display: flex; + display: none; flex-direction: column; gap: 2rem; - align-items: flex-start; - width: 100%; + width: 80%; height: 100%; padding: 1.5rem; padding-top: 7rem; background: #15152d; } +.menuRoot:popover-open > .menuWrapper { + display: flex; +} + +.fakeBackdrop { + width: 20%; + height: 100%; + background: transparent; +} + .menuCloseButton { position: absolute; top: 1rem; diff --git a/packages/cyberstorm/src/newComponents/Menu/Menu.tsx b/packages/cyberstorm/src/newComponents/Menu/Menu.tsx index 6a8972321..c2aa46636 100644 --- a/packages/cyberstorm/src/newComponents/Menu/Menu.tsx +++ b/packages/cyberstorm/src/newComponents/Menu/Menu.tsx @@ -8,15 +8,18 @@ import { FramePopoverProps, Frame, } from "../../primitiveComponents/Frame/Frame"; +import { classnames } from "../../utils/utils"; interface Props extends Omit { - trigger: ReactNode; + trigger?: ReactNode; controls?: ReactNode; } // TODO: Add storybook story // TODO: Add support for color, size and text systems export function Menu(props: Props) { + const { rootClasses } = props; + return ( <> {props.trigger} @@ -25,28 +28,40 @@ export function Menu(props: Props) { popoverId={props.popoverId} csColor="pink" csSize="m" - rootClasses={styles.menuRoot} - wrapperClasses={styles.menuWrapper} + rootClasses={classnames(styles.menuRoot, rootClasses)} + noWrapper + popoverMode="manual" > - {props.controls ? ( - props.controls - ) : ( - - - - - - )} - - {props.children} +
+ {props.controls ? ( + props.controls + ) : ( + + + + + + )} + {props.children} +
+