Fix issues with login modal (#1188)

thunderstore-io · Aug 28, 2024 · babce0e · babce0e
1 parent 8da5874
commit babce0e
Show file tree

Hide file tree

Showing 4 changed files with 50 additions and 25 deletions.
diff --git a/apps/cyberstorm-remix/cyberstorm/navigation/DesktopLoginPopover.tsx b/apps/cyberstorm-remix/cyberstorm/navigation/DesktopLoginPopover.tsx
@@ -2,9 +2,10 @@ import { faXmark } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 import styles from "./Navigation.module.css";
-import { Popover, Icon } from "@thunderstore/cyberstorm";
+import { Popover } from "@thunderstore/cyberstorm";
 import { AvatarButton } from "@thunderstore/cyberstorm/src/components/Avatar/AvatarButton";
-import { Loginlist } from "./LoginList";
+import * as Button from "@thunderstore/cyberstorm/src/components/Button/index";
+import { LoginList } from "./LoginList";
 
 export function DesktopLoginPopover() {
   return (
@@ -20,19 +21,21 @@ export function DesktopLoginPopover() {
         />
       }
     >
-      <button
+      <Button.Root
         {...{
           popovertarget: "navAccount",
           popovertargetaction: "close",
         }}
+        colorScheme="transparentTertiary"
         className={styles.navAccountPopoverCloseButton}
+        tooltipText="Close"
       >
-        <Icon inline noWrapper>
+        <Button.ButtonIcon>
           <FontAwesomeIcon icon={faXmark} />
-        </Icon>
-      </button>
+        </Button.ButtonIcon>
+      </Button.Root>
       <nav className={styles.mobileNavPopoverList}>
-        <Loginlist />
+        <LoginList />
       </nav>
     </Popover>
   );

diff --git a/apps/cyberstorm-remix/cyberstorm/navigation/LoginList.tsx b/apps/cyberstorm-remix/cyberstorm/navigation/LoginList.tsx
@@ -2,15 +2,15 @@ import { faDiscord, faGithub } from "@fortawesome/free-brands-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 import styles from "./Navigation.module.css";
-import { Icon } from "@thunderstore/cyberstorm";
+import { CyberstormLink, Icon } from "@thunderstore/cyberstorm";
 import {
   OverwolfLogo,
   ThunderstoreLogo,
 } from "@thunderstore/cyberstorm/src/svg/svg";
 import { classnames } from "@thunderstore/cyberstorm/src/utils/utils";
 import { buildAuthLoginUrl } from "cyberstorm/utils/ThunderstoreAuth";
 
-export function Loginlist() {
+export function LoginList() {
   return (
     <div className={styles.loginList}>
       <Icon wrapperClasses={styles.TSLoginLogo}>
@@ -22,7 +22,7 @@ export function Loginlist() {
           className={classnames(styles.loginLink, styles.loginLinkDiscord)}
           href={buildAuthLoginUrl({ type: "discord" })}
         >
-          <Icon inline>
+          <Icon wrapperClasses={styles.fixed}>
             <FontAwesomeIcon icon={faDiscord} />
           </Icon>
           Connect with Discord
@@ -31,7 +31,7 @@ export function Loginlist() {
           className={classnames(styles.loginLink, styles.loginLinkGithub)}
           href={buildAuthLoginUrl({ type: "github" })}
         >
-          <Icon inline>
+          <Icon wrapperClasses={styles.fixed}>
             <FontAwesomeIcon icon={faGithub} />
           </Icon>
           Connect with Github
@@ -40,12 +40,20 @@ export function Loginlist() {
           className={classnames(styles.loginLink, styles.loginLinkOverwolf)}
           href={buildAuthLoginUrl({ type: "overwolf" })}
         >
-          <Icon inline noWrapper>
+          <Icon wrapperClasses={styles.fixed}>
             <OverwolfLogo />
           </Icon>
           Connect with Overwolf
         </a>
       </div>
+      <p className={styles.loginLegalText}>
+        By logging in and accessing the site you agree to{" "}
+        <CyberstormLink linkId="TermsOfService">
+          Terms and Conditions
+        </CyberstormLink>{" "}
+        and{" "}
+        <CyberstormLink linkId="PrivacyPolicy">Privacy Policy</CyberstormLink>
+      </p>
     </div>
   );
 }
diff --git a/apps/cyberstorm-remix/cyberstorm/navigation/MobileUserPopoverContent.tsx b/apps/cyberstorm-remix/cyberstorm/navigation/MobileUserPopoverContent.tsx
@@ -14,7 +14,7 @@ import { CurrentUser } from "@thunderstore/dapper/types";
 import { faSignOut, faUsers, faCog } from "@fortawesome/free-solid-svg-icons";
 
 import { DropDownLink } from "@thunderstore/cyberstorm/src/components/DropDown/DropDownLink";
-import { Loginlist } from "./LoginList";
+import { LoginList } from "./LoginList";
 
 export function MobileUserPopoverContent(props: { user: CurrentUser }) {
   const { user } = props;
@@ -94,7 +94,7 @@ export function MobileUserPopoverContent(props: { user: CurrentUser }) {
               </a>,
             ]
           ) : (
-            <Loginlist />
+            <LoginList />
           )}
         </nav>
       </Popover>

diff --git a/apps/cyberstorm-remix/cyberstorm/navigation/Navigation.module.css b/apps/cyberstorm-remix/cyberstorm/navigation/Navigation.module.css
@@ -176,21 +176,12 @@
   position: absolute;
   top: 1rem;
   right: 1rem;
-  display: flex;
-  align-items: center;
-  justify-content: center;
   width: 2.75rem;
   height: 2.75rem;
-  color: #635a9f;
-  font-weight: 900;
-  font-size: 1rem;
-  background: transparent;
 }
 
 .popoverCloseButtonIcon {
-  color: #635a9f;
-  font-weight: 900;
-  font-size: 1rem;
+  color: var(--color-border--highlight);
 }
 
 .TSLoginLogo {
@@ -205,7 +196,7 @@
 .loginTitle {
   color: #f5f5f6;
   font-weight: 700;
-  font-size: 1.5rem;
+  font-size: 1.25rem;
   text-align: center;
 }
 
@@ -214,6 +205,7 @@
   flex-direction: column;
   gap: 2rem;
   align-items: center;
+  max-width: 300px;
 }
 
 .loginLinkList {
@@ -258,6 +250,11 @@
   transform: translate(-50%, -50%);
 }
 
+.navAccountPopoverRoot::backdrop {
+  background: rgba(0 0 0 / 0.6);
+  backdrop-filter: blur(10px);
+}
+
 .navAccountPopoverWrapper {
   display: flex;
   flex-direction: column;
@@ -283,6 +280,18 @@
   font-size: 1rem;
 }
 
+.loginLegalText {
+  color: #8683be;
+  font-weight: var(--font-weight-medium);
+  font-size: var(--font-size--s);
+  line-height: var(--line-height--s);
+  text-align: center;
+}
+
+.loginLegalText > a {
+  color: var(--color-text--tertiary);
+}
+
 @media (max-width: 63.5rem) {
   .desktopNavRoot {
     display: none;
@@ -302,3 +311,8 @@
     backdrop-filter: blur(10px);
   }
 }
+
+.fixed {
+  block-size: 1em;
+  inline-size: 1em;
+}