Merge branch 'PROD-1515_sorting' into PROD-1943_css-refactor

Author: brooketopcoder

src-ts/App.tsx

@@ -3,7 +3,7 @@ import { Routes } from 'react-router-dom'
 import { toast, ToastContainer } from 'react-toastify'
 
 import { Header } from './header'
-import { ProfileProvider, routeContext, RouteContextData } from './lib'
+import { routeContext, RouteContextData } from './lib'
 
 const App: FC<{}> = () => {
 
@@ -13,7 +13,7 @@ const App: FC<{}> = () => {
         .map(route => getRouteElement(route))
 
     return (
-        <ProfileProvider>
+        <>
             <Header />
             <Routes>
                 {routeElements}
@@ -29,7 +29,7 @@ const App: FC<{}> = () => {
                 draggable
                 pauseOnHover
             />
-        </ProfileProvider>
+        </>
     )
 }
 

src-ts/config/constants.ts

@@ -2,3 +2,11 @@ export enum ToolTitle {
     settings = 'Account Settings',
     work = 'Work',
 }
+
+export enum FooterSocialConfig {
+    facebook = 'https://www.facebook.com/topcoder',
+    youtube = 'https://www.youtube.com/channel/UCFv29ANLT2FQmtvS9DRixNA',
+    linkedin = 'https://www.linkedin.com/company/topcoder',
+    twitter = 'https://twitter.com/topcoder',
+    instagram = 'https://www.instagram.com/topcoder',
+}

src-ts/header/Header.module.scss

@@ -19,4 +19,9 @@
         grid-template-columns: $header-height 1fr $header-height;
         align-items: center;
     }
-}
+}
+
+.subheader {
+    width: 100%;
+    position: relative;
+}

src-ts/header/Header.tsx

@@ -14,6 +14,7 @@ const Header: FC<{}> = () => {
                 <ToolSelectors isWide={true} />
                 <UtilitySelectors />
             </header>
+            <div id='page-subheader-portal-el' className={styles.subheader}></div>
         </div>
     )
 }

src-ts/header/tool-selectors/tool-selectors-narrow/tool-selector-narrow/ToolSelectorNarrow.module.scss

@@ -13,7 +13,7 @@
         border-top: 1px solid $black-60;
         padding: $pad-lg 0;
         color: $tc-white;
-        @include font-weight-medium;
+        font-weight: $font-weight-medium;
         background-color: $black-100;
 
         svg {

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

@@ -1,6 +1,6 @@
 import classNames from 'classnames'
-import { FC, MutableRefObject, useContext } from 'react'
-import { Link, NavigateFunction, useNavigate } from 'react-router-dom'
+import { FC, useContext } from 'react'
+import { NavigateFunction, useNavigate } from 'react-router-dom'
 
 import {
     authUrlLogout,
@@ -37,9 +37,7 @@ const ProfilePanel: FC<ProfilePanelProps> = (props: ProfilePanelProps) => {
     const name: string = `${profile.firstName} ${profile.lastName?.substring(0, 1)}${!!profile.lastName ? '.' : undefined}`
 
     return (
-        <div
-            className={styles['profile-panel']}
-        >
+        <div className={styles['profile-panel']}>
             <div className={styles['arrow-tip']}>
                 <TooltipArrowIcon />
             </div>

src-ts/index.ts

@@ -1,5 +1,19 @@
 export { default as AppNextGen } from './App'
 export { EnvironmentConfig } from './config'
-export { logInitialize, ProfileProvider, RouteProvider } from './lib'
+export {
+     Breadcrumb,
+     ChallengeMetadataName,
+     ContactSupportModal,
+     logInitialize,
+     OrderContractModal,
+     PageFooter,
+     PrivacyPolicyModal,
+     ProfileProvider,
+     RouteProvider,
+     TabsNavbar,
+     TermsModal,
+     workContext,
+     WorkStatusItem,
+} from './lib'
 export * from './utils'
 export * from './tools'

src-ts/lib/avatar/Avatar.module.scss

@@ -50,7 +50,7 @@ $border-size-xl: $pad-xs;
         align-items: center;
         color: $tc-white;
         background-color: $blue-100;
-        @include font-weight-medium;
+        font-weight: $font-weight-medium;
 
         &.sm {
             @extend .medium-subtitle;

src/components/Breadcrumb/style.scss renamed to src-ts/lib/breadcrumb/Breadcrumb.module.scss

@@ -1,38 +1,56 @@
-@import "styles/include";
+@import '../styles/includes';
+@import '../styles/typography';
+
+.breadcrumb-wrap {
+    width: 100%;
+    background: $black-5;
+}
 
 .breadcrumb {
-    padding: 12px 24px;
-    background: $grey-bg;
+    padding: $pad-md 0;
+    max-width: $xxl-min;
+    margin: 0 auto;
+    @include pagePaddings;
+
     ol {
         display: flex;
+
         > li {
             display: inline-flex;
             align-items: center;
             padding: 0;
+
             a {
                 @extend .overline;
                 display: block;
-                padding: 12px;
-                color: $gray-80;
+                padding: $pad-md;
+                color: $black-80;
                 cursor: pointer;
             }
+
+            &:first-child a {
+                padding-left: 0;
+            }
+
             &:not(:last-child)::after {
                 content: '';
-                display:inline-block;
-                width: 8px;
-                height: 8px;
+                display: inline-block;
+                width: $pad-sm;
+                height: $pad-sm;
                 border-style: solid;
-                border-width: 1px 1px 0 0;
+                border-width: $border-xs $border-xs 0 0;
                 border-color: $black-60;
-                transform:rotate(45deg)
+                transform: rotate(45deg)
             }
+
             &:last-child a:last-child {
                 pointer-events: none;
             }
+
             &:last-child,
             &:hover {
                 a {
-                    color: $grey-text;
+                    color: $black-100;
                 }
             }
         }

src-ts/lib/breadcrumb/Breadcrumb.tsx

@@ -0,0 +1,35 @@
+import { FC } from 'react'
+import { createPortal } from 'react-dom'
+
+import { BreadcrumbItem, BreadcrumbItemModel } from './breadcrumb-item'
+import styles from './Breadcrumb.module.scss'
+
+interface BreadcrumbProps {
+    items: Array<BreadcrumbItemModel>
+}
+
+const Breadcrumb: FC<BreadcrumbProps> = (props: BreadcrumbProps) => {
+    const portalRootEl: HTMLElement|null = document.getElementById('page-subheader-portal-el')
+
+    if (!portalRootEl) {
+        return <></>
+    }
+
+    return createPortal((
+        <div className={styles['breadcrumb-wrap']}>
+            <nav className={styles.breadcrumb}>
+                <ol>
+                    {props.items.map((item, index) =>
+                        <BreadcrumbItem
+                            index={index + 1}
+                            item={item}
+                            key={index}
+                        />
+                    )}
+                </ol>
+            </nav>
+        </div>
+    ), portalRootEl)
+}
+
+export default Breadcrumb