-
Notifications
You must be signed in to change notification settings - Fork 5
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Fix faulty session issues and login styles
- Loading branch information
Showing
30 changed files
with
1,265 additions
and
709 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
30 changes: 20 additions & 10 deletions
30
apps/cyberstorm-remix/cyberstorm/navigation/DesktopLoginPopover.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,23 +1,33 @@ | ||
| import styles from "./Navigation.module.css"; | ||
| import { Modal } from "@thunderstore/cyberstorm"; | ||
| import { AvatarButton } from "@thunderstore/cyberstorm/src/components/Avatar/AvatarButton"; | ||
| import { Modal, NewButton, NewIcon } from "@thunderstore/cyberstorm"; | ||
| import { LoginList } from "./LoginList"; | ||
| import { faArrowRightToBracket } from "@fortawesome/free-solid-svg-icons"; | ||
| import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; | ||
|
|
||
| export function DesktopLoginPopover() { | ||
| return ( | ||
| <Modal | ||
| popoverId={"navAccount"} | ||
| trigger={ | ||
| <AvatarButton | ||
| size="small" | ||
| popovertarget="navAccount" | ||
| popovertargetaction="open" | ||
| /> | ||
| <NewButton | ||
| csVariant="primary" | ||
| csColor="purple" | ||
| csSize="l" | ||
| rootClasses={styles.loginButton} | ||
| {...{ | ||
| popovertarget: "navAccount", | ||
| popovertargetaction: "open", | ||
| }} | ||
| csTextStyles={["fontSizeS", "fontWeightBold", "lineHeightAuto"]} | ||
| > | ||
| <NewIcon csMode="inline" noWrapper> | ||
| <FontAwesomeIcon icon={faArrowRightToBracket} /> | ||
| </NewIcon> | ||
| Log In | ||
| </NewButton> | ||
| } | ||
| > | ||
| <nav className={styles.mobileNavPopoverList}> | ||
| <LoginList /> | ||
| </nav> | ||
| <LoginList /> | ||
| </Modal> | ||
| ); | ||
| } |
153 changes: 77 additions & 76 deletions
153
apps/cyberstorm-remix/cyberstorm/navigation/DesktopUserDropdown.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,96 +1,97 @@ | ||
| import { faSignOut, faUsers, faCog } from "@fortawesome/free-solid-svg-icons"; | ||
| import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; | ||
| import * as RadixDropDown from "@radix-ui/react-dropdown-menu"; | ||
|
|
||
| import styles from "./Navigation.module.css"; | ||
| import dropdownStyles from "../../../../packages/cyberstorm/src/newComponents/DropDown/DropDown.module.css"; | ||
| import { | ||
| Avatar, | ||
| DropDownDivider, | ||
| DropDownItem, | ||
| CyberstormLink, | ||
| DropDown, | ||
| NewDropDown, | ||
| NewText, | ||
| NewDropDownItem, | ||
| NewDropDownDivider, | ||
| NewLink, | ||
| NewIcon, | ||
| } from "@thunderstore/cyberstorm"; | ||
| import { DropDownLink } from "@thunderstore/cyberstorm/src/components/DropDown/DropDownLink"; | ||
| import { emptyUser } from "@thunderstore/dapper-ts/src/methods/currentUser"; | ||
| import { CurrentUser } from "@thunderstore/dapper/types"; | ||
| import { getDapper } from "cyberstorm/dapper/sessionUtils"; | ||
| import { useState, useEffect } from "react"; | ||
| import { AvatarButton } from "@thunderstore/cyberstorm/src/components/Avatar/AvatarButton"; | ||
| import { DesktopLoginPopover } from "./DesktopLoginPopover"; | ||
| import { classnames } from "@thunderstore/cyberstorm/src/utils/utils"; | ||
|
|
||
| export function DesktopUserDropdown() { | ||
| const [user, setUser] = useState<CurrentUser>(emptyUser); | ||
| const avatar = user.connections.find((c) => c.avatar !== null)?.avatar; | ||
|
|
||
| useEffect(() => { | ||
| const fetchAndSetUser = async () => { | ||
| const dapper = await getDapper(true); | ||
| const fetchedUser = await dapper.getCurrentUser(); | ||
| setUser(fetchedUser); | ||
| }; | ||
| fetchAndSetUser(); | ||
| }, []); | ||
| export function DesktopUserDropdown(props: { user: CurrentUser }) { | ||
| const { user } = props; | ||
|
|
||
| if (!user.username) { | ||
| return <DesktopLoginPopover />; | ||
| } | ||
| const avatar = user.connections.find((c) => c.avatar !== null)?.avatar; | ||
|
|
||
| // REMIX TODO: Turn this into a popover | ||
| return ( | ||
| <DropDown | ||
| <NewDropDown | ||
| contentAlignment="end" | ||
| trigger={ | ||
| <AvatarButton src={avatar} username={user.username} size="small" /> | ||
| } | ||
| content={[ | ||
| <RadixDropDown.Item key="user"> | ||
| <div className={styles.dropDownUserInfo}> | ||
| <Avatar src={avatar} username={user.username} size="small" /> | ||
| <div className={styles.dropdownUserInfoDetails}> | ||
| <div className={styles.dropdownUserInfoDetails_userName}> | ||
| {user.username} | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </RadixDropDown.Item>, | ||
|
|
||
| <DropDownDivider key="divider-first" />, | ||
|
|
||
| <CyberstormLink linkId="Settings" key="settings"> | ||
| <DropDownItem | ||
| content={ | ||
| <DropDownLink | ||
| leftIcon={<FontAwesomeIcon icon={faCog} />} | ||
| label="Settings" | ||
| /> | ||
| } | ||
| /> | ||
| </CyberstormLink>, | ||
|
|
||
| <CyberstormLink linkId="Teams" key="teams"> | ||
| <DropDownItem | ||
| content={ | ||
| <DropDownLink | ||
| leftIcon={<FontAwesomeIcon icon={faUsers} />} | ||
| label="Teams" | ||
| /> | ||
| } | ||
| /> | ||
| </CyberstormLink>, | ||
|
|
||
| <DropDownDivider key="divider-second" />, | ||
|
|
||
| <a href="/logout" key="logout"> | ||
| <DropDownItem | ||
| content={ | ||
| <DropDownLink | ||
| leftIcon={<FontAwesomeIcon icon={faSignOut} />} | ||
| label="Log Out" | ||
| /> | ||
| } | ||
| /> | ||
| </a>, | ||
| ]} | ||
| /> | ||
| csVariant="default" | ||
| csColor="surface" | ||
| > | ||
| <NewDropDownItem rootClasses={styles.dropDownUserInfo}> | ||
| <Avatar src={avatar} username={user.username} size="small" /> | ||
| <NewText rootClasses={styles.dropdownUserInfoDetails}> | ||
| {user.username} | ||
| </NewText> | ||
| </NewDropDownItem> | ||
| <NewDropDownDivider csVariant="default" csColor="surface" /> | ||
| <NewDropDownItem asChild> | ||
| <NewLink | ||
| primitiveType="cyberstormLink" | ||
| linkId="Settings" | ||
| csVariant="default" | ||
| csColor="surface" | ||
| rootClasses={classnames( | ||
| dropdownStyles.dropdownItem, | ||
| styles.dropDownItem | ||
| )} | ||
| csTextStyles={["fontSizeS", "fontWeightRegular"]} | ||
| > | ||
| <NewIcon csMode="inline" noWrapper csVariant="tertiary"> | ||
| <FontAwesomeIcon icon={faCog} /> | ||
| </NewIcon> | ||
| Settings | ||
| </NewLink> | ||
| </NewDropDownItem> | ||
| <NewDropDownItem asChild> | ||
| <NewLink | ||
| primitiveType="cyberstormLink" | ||
| linkId="Teams" | ||
| csVariant="default" | ||
| csColor="surface" | ||
| rootClasses={classnames( | ||
| dropdownStyles.dropdownItem, | ||
| styles.dropDownItem | ||
| )} | ||
| csTextStyles={["fontSizeS", "fontWeightRegular"]} | ||
| > | ||
| <NewIcon csMode="inline" noWrapper csVariant="tertiary"> | ||
| <FontAwesomeIcon icon={faUsers} /> | ||
| </NewIcon> | ||
| Teams | ||
| </NewLink> | ||
| </NewDropDownItem> | ||
| <NewDropDownItem asChild> | ||
| <NewLink | ||
| primitiveType="link" | ||
| href="/logout" | ||
| csVariant="default" | ||
| csColor="surface" | ||
| rootClasses={classnames( | ||
| dropdownStyles.dropdownItem, | ||
| styles.dropDownItem | ||
| )} | ||
| csTextStyles={["fontSizeS", "fontWeightRegular"]} | ||
| > | ||
| <NewIcon csMode="inline" noWrapper csVariant="tertiary"> | ||
| <FontAwesomeIcon icon={faSignOut} /> | ||
| </NewIcon> | ||
| Log Out | ||
| </NewLink> | ||
| </NewDropDownItem> | ||
| </NewDropDown> | ||
| ); | ||
| } |
Oops, something went wrong.