PROD-1069 settings page desktop styling - master

package.json

@@ -11,6 +11,7 @@
         "react": "^17.0.2",
         "react-dom": "^17.0.2",
         "react-gtm-module": "^2.0.11",
+        "react-responsive-modal": "^6.2.0",
         "react-router-dom": "^6.2.1",
         "react-scripts": "5.0.0",
         "react-toastify": "^8.2.0",

src/config/constants.ts

@@ -0,0 +1 @@
+export const SETTINGS_TITLE: string = 'Profile Settings'

src/config/index.ts

@@ -1 +1,2 @@
+export * from './constants'
 export * from './environments'

src/header/Header.module.scss

@@ -28,4 +28,8 @@
     @include xl {
         grid-template-columns: $left-col-width-xl 1fr auto;
     }
+
+    @include xxl {
+        grid-template-columns: $left-col-width-xl 1fr auto;
+    }
 }

src/header/utility-selectors/UtilitySelector/ProfileSelector/ProfileSelector.tsx

@@ -1,5 +1,6 @@
 import { FC, useContext } from 'react'
 
+import { SETTINGS_TITLE } from '../../../../config'
 import { profileContext, ProfileContextData } from '../../../../lib'
 import '../../../../lib/styles/index.scss'
 
@@ -23,7 +24,7 @@ const ProfileSelector: FC<{}> = () => {
     return (
         <div className={styles['profile-selector']}>
             {!isLoggedIn && <ProfileNotLoggedIn />}
-            {isLoggedIn && <ProfileLoggedIn />}
+            {isLoggedIn && <ProfileLoggedIn settingsTitle={SETTINGS_TITLE} />}
         </div>
     )
 }

src/header/utility-selectors/UtilitySelector/ProfileSelector/profile-logged-in/ProfileLoggedIn.tsx

@@ -2,45 +2,73 @@ import { Dispatch, FC, SetStateAction, useContext, useState } from 'react'
 
 import {
     Avatar,
+    ComponentVisible,
     IconOutline,
     logInfo,
     profileContext,
     ProfileContextData,
+    useHideClickOutside,
 } from '../../../../../lib'
 
 import { ProfilePanel } from './profile-panel'
 import styles from './ProfileLoggedIn.module.scss'
 
-const ProfileLoggedIn: FC<{}> = () => {
+interface ProfileLoggedInProps {
+    settingsTitle: string
+}
+
+const ProfileLoggedIn: FC<ProfileLoggedInProps> = (props: ProfileLoggedInProps) => {
 
     const { profile }: ProfileContextData = useContext(profileContext)
     const [profilePanelOpen, setProfilePanelOpen]: [boolean, Dispatch<SetStateAction<boolean>>] = useState<boolean>(false)
 
+    const {
+        isComponentVisible,
+        ref,
+        setIsComponentVisible,
+    }: ComponentVisible = useHideClickOutside(false)
+
     if (!profile) {
         logInfo('tried to render the logged in profile w/out a profile')
         return <></>
     }
 
     function toggleProfilePanel(): void {
-        setProfilePanelOpen(!profilePanelOpen)
+        const toggleTo: boolean = !profilePanelOpen
+        setProfilePanelOpen(toggleTo)
+        setIsComponentVisible(toggleTo)
+    }
+
+    if (!isComponentVisible && profilePanelOpen) {
+        setProfilePanelOpen(isComponentVisible)
     }
 
     return (
         <>
-            <div className={styles['profile-avatar']} onClick={() => toggleProfilePanel()} >
+            <div
+                className={styles['profile-avatar']}
+                onClick={toggleProfilePanel}
+            >
                 <Avatar
                     firstName={profile.firstName}
                     lastName={profile.lastName}
                     handle={profile.handle}
                     photoUrl={profile.photoURL}
+                    size='sm'
                 />
                 {profilePanelOpen && (
                     <div className={styles.overlay}>
                         <IconOutline.XIcon />
                     </div>
                 )}
             </div>
-            {profilePanelOpen && <ProfilePanel toggleProfilePanel={toggleProfilePanel} />}
+            {profilePanelOpen && (
+                <ProfilePanel
+                    refObject={ref}
+                    settingsTitle={props.settingsTitle}
+                    toggleProfilePanel={toggleProfilePanel}
+                />
+            )}
         </>
     )
 }

src/header/utility-selectors/UtilitySelector/ProfileSelector/profile-logged-in/profile-panel/ProfilePanel.tsx

@@ -1,4 +1,4 @@
-import { FC, useContext } from 'react'
+import { FC, MutableRefObject, useContext } from 'react'
 import { Link } from 'react-router-dom'
 
 import {
@@ -12,32 +12,35 @@ import {
 import styles from './ProfilePanel.module.scss'
 
 interface ProfilePanelProps {
+    refObject: MutableRefObject<any>
+    settingsTitle: string
     toggleProfilePanel: () => void
 }
 
 const ProfilePanel: FC<ProfilePanelProps> = (props: ProfilePanelProps) => {
 
     const { profile }: ProfileContextData = useContext(profileContext)
-    const { getPath  }: RouteContextData = useContext(routeContext)
+    const { getPath }: RouteContextData = useContext(routeContext)
 
     if (!profile) {
         // this should never happen
         return <></>
     }
 
-    const settingsTitle: string = 'Settings'
-
     return (
-        <div className={styles['profile-panel']}>
+        <div
+            className={styles['profile-panel']}
+            ref={props.refObject}
+        >
             <div className={styles.handle}>
                 {profile.handle}
             </div>
             <Link
                 className={styles.profile}
                 onClick={() => props.toggleProfilePanel()}
-                to={getPath(settingsTitle)}
+                to={getPath(props.settingsTitle)}
             >
-                {settingsTitle}
+                {props.settingsTitle}
             </Link>
             <a href={authUrlLogout} className={styles.logout}>
                 Log Out

src/lib/avatar/Avatar.module.scss

@@ -1,19 +1,41 @@
 @import '../../lib/styles';
 
-$avatar-size: 32px;
+$avatar-size-sm: 32px;
+$border-size-sm: $border;
+$avatar-size-xl: 120px;
+$border-size-xl: $pad-xs;
 
 .avatar-container {
     overflow: hidden;
     background-color: $tc-white;
     border-radius: 50%;
-    height: 36px;
+
+    &.sm {
+        height: calc($avatar-size-sm + 2 * $border-size-sm);
+        width: calc($avatar-size-sm + 2 * $border-size-sm);
+    }
+
+    &.xl {
+        height: calc($avatar-size-xl + 2 * $border-size-xl);
+        width: calc($avatar-size-xl + 2 * $border-size-xl);
+    }
 
     .avatar {
-        height: $avatar-size;
-        width: $avatar-size;
         background-color: $tc-white;
         border-radius: 50%;
-        border: 2px solid $tc-white;
+        border: solid $tc-white;
+
+        &.sm {
+            border-width: $border-size-sm;
+            height: $avatar-size-sm;
+            width: $avatar-size-sm;
+        }
+
+        &.xl {
+            border-width: $border-size-xl;
+            height: $avatar-size-xl;
+            width: $avatar-size-xl;
+        }
     }
 
     .avatar-letters {
@@ -24,6 +46,14 @@ $avatar-size: 32px;
         color: $tc-white;
         background-color: $blue-100;
         @include font-weight-medium;
-        @extend .medium-subtitle;
+
+        &.sm {
+            @extend .medium-subtitle;
+        }
+
+        &.xl {
+            @extend h1;
+            padding: 0;
+        }
     }
 }

src/lib/avatar/Avatar.tsx

@@ -4,10 +4,12 @@ import { FC } from 'react'
 import styles from './Avatar.module.scss'
 
 interface AvatarProps {
+    containerClass?: string
     firstName?: string
     handle?: string
     lastName?: string
     photoUrl?: string
+    size: 'sm' | 'xl'
 }
 
 const Avatar: FC<AvatarProps> = (props: AvatarProps) => {
@@ -19,17 +21,21 @@ const Avatar: FC<AvatarProps> = (props: AvatarProps) => {
 
     const avatarElement: JSX.Element = !!props.photoUrl
         ? (
-            <img src={props.photoUrl} alt={`${props.handle} avatar`} className={styles.avatar} />
+            <img
+                alt={`${props.handle} avatar`}
+                className={classNames(styles.avatar, styles[props.size])}
+                src={props.photoUrl}
+            />
         )
         : (
-            <span className={classNames(styles.avatar, styles['avatar-letters'])}>
+            <span className={classNames(styles.avatar, styles['avatar-letters'], styles[props.size])}>
                 {props.firstName?.charAt(0)}
                 {props.lastName?.charAt(0)}
             </span>
         )
 
     return (
-        <div className={styles['avatar-container']}>
+        <div className={classNames(styles['avatar-container'], styles[props.size], props.containerClass)}>
             {avatarElement}
         </div>
     )

src/lib/button/Button.module.scss

@@ -13,7 +13,7 @@
     line-height: 24px;
 
     &:focus {
-        outline: 2px solid $turq-140;
+        outline: $border solid $turq-140;
     }
 
     &.button-sm {
@@ -98,6 +98,43 @@
         }
     }
 
+    &.link {
+        margin: 0;
+        padding: 0;
+        display: flex;
+        align-items: center;
+        font-size: 16px;
+        color: $turq-160;
+        background-color: $tc-white;
+        border: none;
+        outline: none;
+        border-radius: 0;
+
+        &:focus {
+            outline: $border solid $turq-140;
+        }
+
+        &:hover {
+            color: $turq-120;
+        }
+
+        &:active {
+            color: $turq-180;
+        }
+
+        &.disabled {
+            color: $black-60;
+            background-color: $tc-white;
+            border-color: $black-5;
+        }
+
+        svg {
+            margin-left: $pad-xs;
+            height: $pad-lg;
+            width: $pad-lg;
+        }
+    }
+
     &.text {
         border-color: transparent;
     }

src/lib/button/Button.tsx

@@ -2,10 +2,12 @@ import classNames from 'classnames'
 import { FC } from 'react'
 import { Link } from 'react-router-dom'
 
+import { IconOutline } from '../svgs'
+
 import styles from './Button.module.scss'
 
 export type ButtonSize = 'sm' | 'md' | 'lg' | 'xl'
-export type ButtonStyle = 'primary' | 'secondary' | 'tertiary' | 'text'
+export type ButtonStyle = 'link' | 'primary' | 'secondary' | 'tertiary' | 'text'
 export type ButtonType = 'button' | 'submit'
 
 export interface ButtonProps {
@@ -61,6 +63,7 @@ const Button: FC<ButtonProps> = (props: ButtonProps) => {
             type={props.type || 'button'}
         >
             {props.label}
+            {props.buttonStyle === 'link' && <IconOutline.ArrowRightIcon />}
         </button>
     )
 }

src/lib/card/Card.module.scss

@@ -0,0 +1,21 @@
+@import '../styles';
+
+.card {
+    padding: $pad-lg $pad-lg $pad-xxxxl $pad-lg;
+    border: solid $border-xs $black-10;
+    border-radius: $pad-sm;
+
+    .card-title {
+        @include font-weight-semi-bold;
+        @include font-barlow;
+        text-transform: uppercase;
+        display: flex;
+        justify-content: space-between;
+        margin-bottom: $pad-xl;
+
+        svg {
+            height: $pad-xl;
+            width: $pad-xl;
+        }
+    }
+}

src/lib/button/Buttons.test.tsx → src/lib/card/Card.test.tsx

@@ -1,6 +1,6 @@
 import '@testing-library/jest-dom'
 
-describe('<Button />', () => {
+describe('<Card />', () => {
 
     test('it should render the content', () => { })
 })