Merge pull request #387 from topcoder-platform/PROD-1529_page-footer

PROD-1529 page footer -> qa

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

@@ -16,13 +16,12 @@
     grid-template-columns: 78px 1fr auto;
 
     @include ltemd {
-        height: $header-height-md;
         grid-template-columns: $header-height 1fr $header-height;
         align-items: center;
     }
 
     @include ltesm {
-        height: $header-height-sm;
+        height: $header-height;
     }
 }
 

src-ts/header/tool-selectors/tool-selectors-narrow/ToolSelectorsNarrow.module.scss

@@ -26,13 +26,5 @@
         z-index: 100;
         background-color: $black-100;
         padding: $pad-xxl;
-
-        @include ltemd {
-            top: $header-height-md;
-        }
-
-        @include ltesm {
-            top: $header-height-sm;
-        }
     }
 }

src-ts/index.ts

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

src-ts/lib/content-layout/ContentLayout.module.scss

@@ -1,24 +1,25 @@
 @import '../styles/';
 
 .content {
-    @include content-height;
     padding-top: 0;
-    position: relative;
+    padding-bottom: $pad-lg;
+    
+    flex: 99 1 auto;
+    display: flex;
 
     .content-outer {
         max-width: $xxl-min;
         @include pagePaddings;
         margin: 0 auto;
-        height: 100%;
-
+        width: 100%;
+        display: flex;
         .content-inner {
             margin: 0 auto;
             flex: 1;
             max-width: $xxl-min;
             display: flex;
             flex-direction: column;
             overflow: auto;
-            min-height: 100%;
 
             .page-header {
                 display: flex;
@@ -35,4 +36,3 @@
         }
     }
 }
-

src-ts/lib/form/Form.tsx

@@ -68,7 +68,7 @@ const Form: <ValueType extends any, RequestType extends any>(props: FormProps<Va
 
         async function onSubmitAsync(event: FormEvent<HTMLFormElement>): Promise<void> {
             const values: RequestType = props.requestGenerator(formDef.inputs)
-            formOnSubmitAsync<RequestType>(event, formDef.inputs, props.formDef.shortName || 'data', values, props.save, props.onSuccess)
+            formOnSubmitAsync<RequestType>(event, formDef, values, props.save, props.onSuccess)
                 .then(() => {
                     setFormKey(Date.now())
                     formOnReset(formDef.inputs, props.formValues)

src-ts/lib/form/form-definition.model.ts

@@ -6,6 +6,7 @@ export interface FormDefinition {
     readonly inputs: ReadonlyArray<FormInputModel>
     readonly shortName?: string
     readonly subtitle?: string
+    readonly successMessage?: string
     readonly tabIndexStart?: number
     readonly title?: string
 }

src-ts/lib/form/form-functions/form.functions.ts

@@ -1,6 +1,7 @@
 import { ChangeEvent, FormEvent } from 'react'
 import { toast } from 'react-toastify'
 
+import { FormDefinition } from '../form-definition.model'
 import { FormInputModel } from '../form-input.model'
 
 export function getInputElement(formElements: HTMLFormControlsCollection, fieldName: string): HTMLInputElement {
@@ -49,15 +50,16 @@ export function onReset(inputs: ReadonlyArray<FormInputModel>, formValue?: any):
 
 export async function onSubmitAsync<T>(
     event: FormEvent<HTMLFormElement>,
-    inputs: ReadonlyArray<FormInputModel>,
-    formName: string,
+    formDef: FormDefinition,
     formValue: T,
     save: (value: T) => Promise<void>,
     onSuccess?: () => void,
 ): Promise<void> {
 
     event.preventDefault()
 
+    const { inputs, shortName, successMessage }: FormDefinition = formDef
+
     // get the dirty fields before we validate b/c validation marks them dirty on submit
     const dirty: FormInputModel | undefined = inputs.find(fieldDef => !!fieldDef.dirty)
 
@@ -79,7 +81,10 @@ export async function onSubmitAsync<T>(
 
     return savePromise
         .then(() => {
-            toast.success(`Your ${formName} has been saved.`)
+            const safeSuccessMessage: string = !!successMessage
+                ? successMessage as string
+                : `Your ${shortName || 'data'} has been saved.`
+            toast.success(safeSuccessMessage)
             onSuccess?.()
         })
         .catch(error => {

src-ts/lib/form/form-inputs/form-input-row/FormInputRow.module.scss

@@ -1,10 +1,12 @@
 @import '../../../../lib/styles';
 
-h4 {
-    border-top: $border-xs solid $black-10;
-
-    &.input-title-0 {
-        border: none;
+.row-wrap {
+    h4 {
+        border-top: $border-xs solid $black-10;
+    
+        &.input-title-0 {
+            border: none;
+        }
     }
 }