From 7f45469caecc08511ebc9afb91501d51c6c183ff Mon Sep 17 00:00:00 2001 From: Brooke Date: Tue, 28 Jun 2022 14:25:29 -0700 Subject: [PATCH 1/4] PROD-2195 #comment configure react-scripts to allow files from outside of the /src directory; linting config for es; remove all references to mfe-header; remove the styleName feature; fix lint issues; convert all imports to relative; convert all SVGs to react components; #time 6h --- config-overrides.js | 3 + package.json | 11 +- public/index.html | 1 + src-ts/config/constants.ts | 8 - src-ts/declarations.d.ts | 2 - src-ts/index.ts | 5 + src-ts/index.tsx | 10 +- src-ts/lib/breadcrumb/Breadcrumb.module.scss | 8 +- src-ts/lib/breadcrumb/Breadcrumb.tsx | 1 - src-ts/lib/functions/xhr-functions/index.ts | 1 + .../functions/xhr-functions/xhr.functions.ts | 5 + src-ts/lib/index.ts | 3 + .../OrderContractModal.tsx | 1 + .../PrivacyPolicyModal.module.scss | 1 + .../modals/terms-modal/TermsModal.module.scss | 1 + src-ts/lib/modals/terms-modal/TermsModal.tsx | 4 +- src-ts/lib/page-footer/PageFooter.tsx | 11 +- .../profile-context-data.model.ts | 1 + .../profile-functions/profile.functions.ts | 6 - .../lib/profile-provider/profile.context.tsx | 1 + .../lib/profile-provider/profile.provider.tsx | 1 + src-ts/lib/social-links/SocialLink.tsx | 41 --- src-ts/lib/social-links/facebook/Facebook.tsx | 16 + src-ts/lib/social-links/facebook/index.ts | 1 + src-ts/lib/social-links/index.ts | 6 +- .../lib/social-links/instagram/Instagram.tsx | 16 + src-ts/lib/social-links/instagram/index.ts | 1 + .../lib/social-links/linked-in/LinkedIn.tsx | 16 + src-ts/lib/social-links/linked-in/index.ts | 1 + .../social-links/social-link/SocialLink.tsx | 22 ++ src-ts/lib/social-links/social-link/index.ts | 1 + src-ts/lib/social-links/twitter/Twitter.tsx | 16 + src-ts/lib/social-links/twitter/index.ts | 1 + src-ts/lib/social-links/youtube/Youtube.tsx | 16 + src-ts/lib/social-links/youtube/index.ts | 1 + src-ts/lib/styles/_reset.scss | 1 - src-ts/lib/svgs/index.ts | 4 +- src-ts/lib/table/Table.tsx | 22 +- .../WorkDetailSolutions.tsx | 14 +- .../work/work-table/work-table.config.tsx | 6 +- src/App.jsx | 30 +- src/IntakeForm.jsx | 61 ++-- src/actions/autoSave.js | 2 +- src/actions/challenge.js | 2 +- src/actions/profile.js | 46 --- src/actions/work.js | 4 +- src/autoSaveBeforeLogin.js | 10 +- .../FeaturedWorkTypeBanner/styles.module.scss | 2 +- .../WebsiteDesignBannerLegacy/index.js | 21 +- .../styles.module.scss | 2 +- src/components/Button/index.jsx | 12 +- src/components/Button/styles.module.scss | 7 +- .../FormElements/FormField/index.jsx | 32 +- .../FormElements/FormField/styles.module.scss | 10 +- .../FormElements/FormInputCheckbox/index.jsx | 10 +- .../FormInputCheckbox/styles.module.scss | 5 +- .../FormElements/FormInputText/index.jsx | 4 +- .../FormInputText/styles.module.scss | 4 +- .../FormElements/FormInputTextArea/index.jsx | 5 +- .../FormInputTextArea/styles.module.scss | 8 +- src/components/HelpBanner/index.jsx | 17 +- src/components/HelpBanner/styles.module.scss | 2 +- src/components/HelpIcon/index.jsx | 8 +- src/components/HelpIcon/styles.module.scss | 4 +- src/components/Layout/index.jsx | 2 +- src/components/LoadingIndicator/index.jsx | 4 +- src/components/LoadingSpinner/index.jsx | 8 +- .../LoadingSpinner/styles.module.scss | 6 +- src/components/Modal/PolicyContent/index.jsx | 40 +-- .../Modal/PolicyContent/styles.module.scss | 2 +- src/components/Modal/index.jsx | 18 +- src/components/Modal/styles.module.scss | 2 +- src/components/Page/index.jsx | 4 +- src/components/Page/styles.module.scss | 6 +- src/components/PageContent/index.jsx | 6 +- src/components/PageContent/styles.module.scss | 7 +- src/components/PageDivider/index.jsx | 5 +- .../PageElements/PageFoot/index.jsx | 4 +- .../PageElements/PageFoot/styles.module.scss | 9 +- src/components/PageElements/PageH2/index.jsx | 4 +- .../PageElements/PageH2/styles.module.scss | 4 +- src/components/PageElements/PageH3/index.jsx | 4 +- .../PageElements/PageH3/styles.module.scss | 4 +- src/components/PageElements/PageP/index.jsx | 5 +- .../PageElements/PageP/styles.module.scss | 2 +- src/components/PageElements/PageRow/index.jsx | 12 +- .../PageElements/PageRow/styles.module.scss | 23 +- src/components/PageElements/PageUl/index.jsx | 5 +- .../PageElements/PageUl/styles.module.scss | 4 +- src/components/PageListInput/index.jsx | 15 +- .../PageListInput/styles.module.scss | 6 +- src/components/Progress/index.jsx | 26 +- src/components/Progress/styles.module.scss | 13 +- src/components/ProgressDonutChart/index.jsx | 6 +- .../ProgressDonutChart/styles.module.scss | 5 +- src/components/ProgressPopup/index.jsx | 20 +- .../ProgressPopup/styles.module.scss | 10 +- src/components/RadioButton/index.jsx | 18 +- src/components/RadioButton/styles.module.scss | 4 +- src/components/ReactSelect/index.jsx | 10 +- src/components/ServicePrice/index.jsx | 24 +- .../ServicePrice/styles.module.scss | 2 +- src/components/Slider/index.jsx | 2 +- src/components/Slider/styles.module.scss | 4 +- src/components/Slider/styles.scss | 4 +- src/constants/index.js | 20 +- src/constants/styles.module.scss | 6 +- src/hoc/withAuthentication/actions/index.js | 22 -- src/hoc/withAuthentication/index.js | 69 ----- src/hoc/withAuthentication/reducers/index.js | 48 --- src/hoc/withAuthentication/selectors/index.js | 7 - src/hoc/withAuthentication/thunks/index.js | 29 -- src/index.jsx | 61 ++++ src/reducers/autoSave.js | 2 +- src/reducers/challenge.js | 2 +- src/reducers/form.js | 3 +- src/reducers/index.js | 3 +- src/reducers/myWork.js | 2 +- src/reducers/profile.js | 6 +- src/reducers/progress.js | 6 +- src/reducers/work.js | 2 +- src/root.component.jsx | 61 ---- .../components/BasicInfoFormLegacy/index.jsx | 56 ++-- .../BasicInfoFormLegacy/styles.module.scss | 4 +- .../components/DeviceTypes/index.jsx | 33 +- .../components/DeviceTypes/styles.module.scss | 4 +- src/routes/BasicInfoLegacy/index.jsx | 12 +- src/routes/BasicInfoLegacy/styles.module.scss | 4 +- .../components/BrandingForm/index.jsx | 136 +++++---- .../BrandingForm/styles.module.scss | 6 +- .../components/ColorOptions/index.jsx | 23 +- .../ColorOptions/styles.module.scss | 17 +- .../components/FontOptions/index.jsx | 19 +- .../components/FontOptions/styles.module.scss | 2 +- src/routes/BrandingLegacy/index.jsx | 49 +-- src/routes/BrandingLegacy/styles.module.scss | 4 +- src/routes/Forum/index.jsx | 4 +- src/routes/Forum/styles.module.scss | 4 +- src/routes/Home/index.jsx | 53 ++-- src/routes/Home/styles.module.scss | 11 +- src/routes/LoginPrompt/index.jsx | 41 +-- src/routes/LoginPrompt/styles.module.scss | 3 +- .../components/PageDetailsForm/index.jsx | 51 ++-- .../PageDetailsForm/styles.module.scss | 4 +- src/routes/PageDetailsLegacy/index.jsx | 41 +-- .../PageDetailsLegacy/styles.module.scss | 4 +- src/routes/Products/DataAdvisory/index.jsx | 12 +- src/routes/Products/DataExploration/index.jsx | 10 +- src/routes/Products/FindMeData/index.jsx | 10 +- src/routes/Products/WebsiteDesign/index.jsx | 10 +- .../Products/components/BasicInfo/index.jsx | 66 ++-- .../components/BasicInfo/styles.module.scss | 2 +- .../components/BasicInfoForm/index.jsx | 188 ++++++------ .../BasicInfoForm/styles.module.scss | 12 +- .../components/StyleOptions/index.jsx | 28 +- .../StyleOptions/styles.module.scss | 13 +- .../components/StyleOptionsModal/index.jsx | 28 +- .../StyleOptionsModal/styles.module.scss | 17 +- .../Review/components/PaymentForm/index.jsx | 10 +- .../components/PaymentForm/styles.module.scss | 2 +- src/routes/Review/index.jsx | 84 +++--- src/routes/Review/styles.module.scss | 6 +- .../components/ReviewTableLegacy/index.jsx | 44 +-- .../ReviewTableLegacy/styles.module.scss | 5 +- src/routes/ReviewLegacy/index.jsx | 44 ++- src/routes/ReviewLegacy/styles.module.scss | 2 +- src/routes/SelectWorkType/index.jsx | 27 +- src/routes/SelectWorkType/styles.module.scss | 2 +- src/routes/ThankYou/index.jsx | 26 +- src/routes/ThankYou/styles.module.scss | 4 +- src/routes/UnderMaintenance/index.jsx | 15 +- .../UnderMaintenance/styles.module.scss | 2 +- .../components/WebsitePurposeForm/index.jsx | 72 +++-- .../WebsitePurposeForm/styles.module.scss | 2 +- src/routes/WebsitePurposeLegacy/index.jsx | 42 +-- .../WebsitePurposeLegacy/styles.module.scss | 2 +- src/routes/WorkItems/index.jsx | 86 +++--- src/routes/WorkItems/styles.module.scss | 2 +- src/services/challenge.js | 44 ++- src/services/form.js | 7 +- src/services/payment.js | 8 +- src/services/requestInterceptor.js | 41 --- src/services/work.js | 38 +-- src/store.js | 2 - src/styles/main.module.scss | 2 +- src/thunks/profile.js | 21 -- src/topcoder-mfe-customer-work.js | 2 +- src/utils/products/WebDesignLegacy/index.js | 2 +- src/utils/products/index.js | 2 + src/utils/work.js | 6 +- start-ssl.sh | 3 +- webpack.config.js | 1 - yarn.lock | 281 +++--------------- 193 files changed, 1446 insertions(+), 1777 deletions(-) create mode 100644 config-overrides.js delete mode 100644 src-ts/lib/social-links/SocialLink.tsx create mode 100644 src-ts/lib/social-links/facebook/Facebook.tsx create mode 100644 src-ts/lib/social-links/facebook/index.ts create mode 100644 src-ts/lib/social-links/instagram/Instagram.tsx create mode 100644 src-ts/lib/social-links/instagram/index.ts create mode 100644 src-ts/lib/social-links/linked-in/LinkedIn.tsx create mode 100644 src-ts/lib/social-links/linked-in/index.ts create mode 100644 src-ts/lib/social-links/social-link/SocialLink.tsx create mode 100644 src-ts/lib/social-links/social-link/index.ts create mode 100644 src-ts/lib/social-links/twitter/Twitter.tsx create mode 100644 src-ts/lib/social-links/twitter/index.ts create mode 100644 src-ts/lib/social-links/youtube/Youtube.tsx create mode 100644 src-ts/lib/social-links/youtube/index.ts delete mode 100644 src/actions/profile.js delete mode 100644 src/hoc/withAuthentication/actions/index.js delete mode 100644 src/hoc/withAuthentication/index.js delete mode 100644 src/hoc/withAuthentication/reducers/index.js delete mode 100644 src/hoc/withAuthentication/selectors/index.js delete mode 100644 src/hoc/withAuthentication/thunks/index.js create mode 100644 src/index.jsx delete mode 100644 src/root.component.jsx delete mode 100644 src/services/requestInterceptor.js delete mode 100644 src/thunks/profile.js diff --git a/config-overrides.js b/config-overrides.js new file mode 100644 index 000000000..75f62850f --- /dev/null +++ b/config-overrides.js @@ -0,0 +1,3 @@ +const { removeModuleScopePlugin } = require('customize-cra') + +module.exports = removeModuleScopePlugin() diff --git a/package.json b/package.json index c07ef512c..0f6c2e2bf 100644 --- a/package.json +++ b/package.json @@ -10,8 +10,10 @@ "build:dev": "sh build-dev.sh", "build:prod": "sh build-prod.sh", "eject": "react-scripts eject", - "lint": "tslint src-ts/**/*.{ts,tsx}", - "lint:fix": "tslint src-ts/**/*.{ts,tsx} --fix", + "lint": "tslint 'src-ts/**/*.{ts,tsx}'", + "lint:fix": "tslint 'src-ts/**/*.{ts,tsx}' --fix", + "eslint": "eslint 'src/**/*.{js,jsx}'", + "eslint:fix": "eslint 'src/**/*.{js,jsx}' --fix", "test": "react-scripts test", "test:no-watch": "npm test -- --watchAll=false" }, @@ -87,8 +89,10 @@ "concurrently": "^5.0.1", "config": "^3.3.6", "cross-env": "^7.0.2", - "eslint": "^6.7.2", + "customize-cra": "^1.0.0", + "eslint": "^8.18.0", "eslint-config-prettier": "^6.7.0", + "eslint-config-react-app": "^7.0.1", "eslint-config-react-important-stuff": "^2.0.0", "eslint-plugin-prettier": "^3.1.1", "file-loader": "^6.2.0", @@ -99,6 +103,7 @@ "postcss-scss": "^3.0.2", "prettier": "^2.0.4", "pretty-quick": "^2.0.1", + "react-app-rewired": "^2.2.1", "resolve-url-loader": "^3.1.2", "sass": "^1.48.0", "sass-loader": "^10.0.5", diff --git a/public/index.html b/public/index.html index 3376e76cd..1468259f8 100644 --- a/public/index.html +++ b/public/index.html @@ -8,6 +8,7 @@ + diff --git a/src-ts/config/constants.ts b/src-ts/config/constants.ts index a9932ef44..f52749e6c 100644 --- a/src-ts/config/constants.ts +++ b/src-ts/config/constants.ts @@ -2,11 +2,3 @@ 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', -} diff --git a/src-ts/declarations.d.ts b/src-ts/declarations.d.ts index 80aa8817c..81c5ad039 100644 --- a/src-ts/declarations.d.ts +++ b/src-ts/declarations.d.ts @@ -19,6 +19,4 @@ declare module '*.svg' { export default src } -declare module '@topcoder/mfe-header' - declare module 'tc-auth-lib' diff --git a/src-ts/index.ts b/src-ts/index.ts index d9293e825..fb83a6956 100644 --- a/src-ts/index.ts +++ b/src-ts/index.ts @@ -10,10 +10,15 @@ export { OrderContractModal, PageFooter, PrivacyPolicyModal, + profileContext, ProfileProvider, RouteProvider, TabsNavbar, TermsModal, + xhrGetAsync, + xhrGetBlobAsync, + xhrPatchAsync, + xhrPostAsync, } from './lib' export * from './tools' export * from './utils' diff --git a/src-ts/index.tsx b/src-ts/index.tsx index 98b14b623..d88bbfd4e 100644 --- a/src-ts/index.tsx +++ b/src-ts/index.tsx @@ -3,19 +3,23 @@ import ReactDOM from 'react-dom' import { BrowserRouter } from 'react-router-dom' import { default as App } from './App' -import { EnvironmentConfig } from './config' import './index.scss' import { RouteProvider } from './lib' import reportWebVitals from './reportWebVitals' -import { ToolsRoutes } from './tools' +import { + routeRootLoggedIn, + routeRootLoggedOut, + ToolsRoutes, +} from './tools' import { UtilsRoutes } from './utils' ReactDOM.render( diff --git a/src-ts/lib/breadcrumb/Breadcrumb.module.scss b/src-ts/lib/breadcrumb/Breadcrumb.module.scss index 14a89c8f7..3d5a55160 100644 --- a/src-ts/lib/breadcrumb/Breadcrumb.module.scss +++ b/src-ts/lib/breadcrumb/Breadcrumb.module.scss @@ -14,6 +14,9 @@ ol { display: flex; + padding-left: 0px; + margin: 0; + &.hidden-mobile { @include ltemd { display: none; @@ -26,7 +29,7 @@ } } - > li { + >li { display: inline-flex; align-items: center; padding: 0; @@ -37,6 +40,7 @@ padding: $pad-md; color: $black-80; cursor: pointer; + &.elipsis { color: $turq-160; } @@ -69,4 +73,4 @@ } } } -} +} \ No newline at end of file diff --git a/src-ts/lib/breadcrumb/Breadcrumb.tsx b/src-ts/lib/breadcrumb/Breadcrumb.tsx index e8c4639e0..0d62b89df 100644 --- a/src-ts/lib/breadcrumb/Breadcrumb.tsx +++ b/src-ts/lib/breadcrumb/Breadcrumb.tsx @@ -51,7 +51,6 @@ const Breadcrumb: FC = (props: BreadcrumbProps) => { }} /> - ) } diff --git a/src-ts/lib/functions/xhr-functions/index.ts b/src-ts/lib/functions/xhr-functions/index.ts index 64eb70a25..42e673410 100644 --- a/src-ts/lib/functions/xhr-functions/index.ts +++ b/src-ts/lib/functions/xhr-functions/index.ts @@ -1,6 +1,7 @@ export { deleteAsync as xhrDeleteAsync, getAsync as xhrGetAsync, + getBlobAsync as xhrGetBlobAsync, patchAsync as xhrPatchAsync, postAsync as xhrPostAsync, putAsync as xhrPutAsync, diff --git a/src-ts/lib/functions/xhr-functions/xhr.functions.ts b/src-ts/lib/functions/xhr-functions/xhr.functions.ts index 33aeb5ad5..3c15f2a5d 100644 --- a/src-ts/lib/functions/xhr-functions/xhr.functions.ts +++ b/src-ts/lib/functions/xhr-functions/xhr.functions.ts @@ -38,6 +38,11 @@ export async function getAsync(url: string): Promise { return output.data } +export async function getBlobAsync(url: string): Promise { + const output: AxiosResponse = await xhrInstance.get(url, { responseType: 'blob' }) + return output.data +} + export async function patchAsync(url: string, data: T): Promise { const output: AxiosResponse = await xhrInstance.patch(url, data) return output.data diff --git a/src-ts/lib/index.ts b/src-ts/lib/index.ts index b835778cd..6ae9572e0 100644 --- a/src-ts/lib/index.ts +++ b/src-ts/lib/index.ts @@ -19,6 +19,9 @@ export { useOnHoverElement, xhrDeleteAsync, xhrGetAsync, + xhrGetBlobAsync, + xhrPatchAsync, + xhrPostAsync, } from './functions' export * from './loading-spinner' export * from './modals' diff --git a/src-ts/lib/modals/order-contract-modal/OrderContractModal.tsx b/src-ts/lib/modals/order-contract-modal/OrderContractModal.tsx index fa0a263a5..d0bcc5203 100644 --- a/src-ts/lib/modals/order-contract-modal/OrderContractModal.tsx +++ b/src-ts/lib/modals/order-contract-modal/OrderContractModal.tsx @@ -27,6 +27,7 @@ const OrderContractModal: FC = ({ isOpen, onClose }: OrderCo target='_blank' className={styles.topCoderLink} href='https://www.topcoder.com/' + rel='noreferrer' > https://www.topcoder.com/{' '} {' '} diff --git a/src-ts/lib/modals/privacy-policy-modal/PrivacyPolicyModal.module.scss b/src-ts/lib/modals/privacy-policy-modal/PrivacyPolicyModal.module.scss index b6a902cde..37dd6272f 100644 --- a/src-ts/lib/modals/privacy-policy-modal/PrivacyPolicyModal.module.scss +++ b/src-ts/lib/modals/privacy-policy-modal/PrivacyPolicyModal.module.scss @@ -5,6 +5,7 @@ ol { padding: 0; + list-style: none; } h4 { diff --git a/src-ts/lib/modals/terms-modal/TermsModal.module.scss b/src-ts/lib/modals/terms-modal/TermsModal.module.scss index 265a692c0..1b2ffb43b 100644 --- a/src-ts/lib/modals/terms-modal/TermsModal.module.scss +++ b/src-ts/lib/modals/terms-modal/TermsModal.module.scss @@ -5,6 +5,7 @@ ol { padding: 0; + list-style: none; } h4 { diff --git a/src-ts/lib/modals/terms-modal/TermsModal.tsx b/src-ts/lib/modals/terms-modal/TermsModal.tsx index 65cbc0b4c..69083ab1d 100644 --- a/src-ts/lib/modals/terms-modal/TermsModal.tsx +++ b/src-ts/lib/modals/terms-modal/TermsModal.tsx @@ -25,7 +25,7 @@ const TermsModal: FC = ({ isOpen, onClose }: TermsModal) => ( This User Agreement (the "Agreement") is a contract between you (referred to herein as "User") and Topcoder LLC. ("Topcoder") and applies to User's use and viewing of - + {' '} topcoder.com @@ -59,7 +59,7 @@ const TermsModal: FC = ({ isOpen, onClose }: TermsModal) => (
  • User agrees to comply with all terms of the Topcoder Privacy Policy available at - + {' '} https://www.topcoder.com/policy/privacy-policy/ diff --git a/src-ts/lib/page-footer/PageFooter.tsx b/src-ts/lib/page-footer/PageFooter.tsx index b8090bae1..c90c5d4f4 100644 --- a/src-ts/lib/page-footer/PageFooter.tsx +++ b/src-ts/lib/page-footer/PageFooter.tsx @@ -1,9 +1,8 @@ import { Dispatch, FC, MouseEvent, SetStateAction, useState } from 'react' -import { FooterSocialConfig } from '../../config' import { ContactSupportModal, OrderContractModal, PrivacyPolicyModal, TermsModal } from '../modals' import { ProfileProvider } from '../profile-provider' -import { SocialLink, SocialLinkIcons } from '../social-links' +import { Facebook, Instagram, LinkedIn, Twitter, Youtube } from '../social-links' import styles from './PageFooter.module.scss' @@ -71,9 +70,11 @@ const PageFooter: FC<{}> = () => {
    - {Object.entries(FooterSocialConfig).map(([platform, url]: [string, string]) => ( - - ))} + + + + +
    diff --git a/src-ts/lib/profile-provider/profile-context-data.model.ts b/src-ts/lib/profile-provider/profile-context-data.model.ts index bb2efa3b4..2cd45ee18 100644 --- a/src-ts/lib/profile-provider/profile-context-data.model.ts +++ b/src-ts/lib/profile-provider/profile-context-data.model.ts @@ -4,6 +4,7 @@ import { UserProfile } from './user-profile.model' export interface ProfileContextData { changePassword: (userId: number, request: ChangePasswordRequest) => Promise initialized: boolean + isLoggedIn: boolean profile?: UserProfile updateProfile: (updatedProfileContext: ProfileContextData) => Promise } diff --git a/src-ts/lib/profile-provider/profile-functions/profile.functions.ts b/src-ts/lib/profile-provider/profile-functions/profile.functions.ts index c4a531fe3..b6056a4d1 100644 --- a/src-ts/lib/profile-provider/profile-functions/profile.functions.ts +++ b/src-ts/lib/profile-provider/profile-functions/profile.functions.ts @@ -1,6 +1,3 @@ -// tslint:disable-next-line: no-implicit-dependencies // TODO: create types -import { updateUserProfile } from '@topcoder/mfe-header' - import { tokenGetAsync } from '../../functions/token-functions' import { EditNameRequest } from '../edit-name-request.model' import { UserProfile } from '../user-profile.model' @@ -14,7 +11,4 @@ export async function getAsync(handle?: string): Promise { return profileStorePatchName(handle, profile) - .then(result => { - updateUserProfile(result.firstName, result.lastName) - }) } diff --git a/src-ts/lib/profile-provider/profile.context.tsx b/src-ts/lib/profile-provider/profile.context.tsx index bf4261f23..d61f6c3c2 100644 --- a/src-ts/lib/profile-provider/profile.context.tsx +++ b/src-ts/lib/profile-provider/profile.context.tsx @@ -5,6 +5,7 @@ import { ProfileContextData } from './profile-context-data.model' export const defaultProfileContextData: ProfileContextData = { changePassword: () => Promise.resolve(), initialized: false, + isLoggedIn: false, updateProfile: () => Promise.resolve(undefined), } diff --git a/src-ts/lib/profile-provider/profile.provider.tsx b/src-ts/lib/profile-provider/profile.provider.tsx index 85d58c0b4..60e32e24c 100644 --- a/src-ts/lib/profile-provider/profile.provider.tsx +++ b/src-ts/lib/profile-provider/profile.provider.tsx @@ -47,6 +47,7 @@ export const ProfileProvider: FC<{ children: ReactNode }> = ({ children }: { chi const contextData: ProfileContextData = { changePassword, initialized: true, + isLoggedIn: !!profile, profile, updateProfile, } diff --git a/src-ts/lib/social-links/SocialLink.tsx b/src-ts/lib/social-links/SocialLink.tsx deleted file mode 100644 index fb4d4f048..000000000 --- a/src-ts/lib/social-links/SocialLink.tsx +++ /dev/null @@ -1,41 +0,0 @@ -import { FC } from 'react' - -import { - SocialIconFacebook, - SocialIconInstagram, - SocialIconLinkedin, - SocialIconTwitter, - SocialIconYoutube, -} from '../svgs' - -export const SocialLinkIcons: object = { - facebook: SocialIconFacebook, - instagram: SocialIconInstagram, - linkedin: SocialIconLinkedin, - twitter: SocialIconTwitter, - youtube: SocialIconYoutube, -} - -interface SocialLinkProps { - icon: keyof typeof SocialLinkIcons - url: string -} - -const SocialLink: FC = ({ - icon, - url, -}: SocialLinkProps) => { - const Icon: FC = SocialLinkIcons[icon] - - if (!Icon) { - return <> - } - - return ( - - - - ) -} - -export default SocialLink diff --git a/src-ts/lib/social-links/facebook/Facebook.tsx b/src-ts/lib/social-links/facebook/Facebook.tsx new file mode 100644 index 000000000..e8b78ab0a --- /dev/null +++ b/src-ts/lib/social-links/facebook/Facebook.tsx @@ -0,0 +1,16 @@ +import { FC } from 'react' + +import { SocialIconFacebook } from '../../svgs' +import { SocialLink } from '../social-link' + +const Facebook: FC<{}> = () => { + + return ( + + ) +} + +export default Facebook diff --git a/src-ts/lib/social-links/facebook/index.ts b/src-ts/lib/social-links/facebook/index.ts new file mode 100644 index 000000000..30a4b2461 --- /dev/null +++ b/src-ts/lib/social-links/facebook/index.ts @@ -0,0 +1 @@ +export { default as Facebook } from './Facebook' diff --git a/src-ts/lib/social-links/index.ts b/src-ts/lib/social-links/index.ts index 0d2af740c..175f6f5bf 100644 --- a/src-ts/lib/social-links/index.ts +++ b/src-ts/lib/social-links/index.ts @@ -1 +1,5 @@ -export { default as SocialLink, SocialLinkIcons } from './SocialLink' +export * from './facebook' +export * from './instagram' +export * from './linked-in' +export * from './twitter' +export * from './youtube' diff --git a/src-ts/lib/social-links/instagram/Instagram.tsx b/src-ts/lib/social-links/instagram/Instagram.tsx new file mode 100644 index 000000000..a7481ff8f --- /dev/null +++ b/src-ts/lib/social-links/instagram/Instagram.tsx @@ -0,0 +1,16 @@ +import { FC } from 'react' + +import { SocialIconInstagram } from '../../svgs' +import { SocialLink } from '../social-link' + +const Instagram: FC<{}> = () => { + + return ( + + ) +} + +export default Instagram diff --git a/src-ts/lib/social-links/instagram/index.ts b/src-ts/lib/social-links/instagram/index.ts new file mode 100644 index 000000000..96f094097 --- /dev/null +++ b/src-ts/lib/social-links/instagram/index.ts @@ -0,0 +1 @@ +export { default as Instagram } from './Instagram' diff --git a/src-ts/lib/social-links/linked-in/LinkedIn.tsx b/src-ts/lib/social-links/linked-in/LinkedIn.tsx new file mode 100644 index 000000000..343c4a5cf --- /dev/null +++ b/src-ts/lib/social-links/linked-in/LinkedIn.tsx @@ -0,0 +1,16 @@ +import { FC } from 'react' + +import { SocialIconLinkedIn } from '../../svgs' +import { SocialLink } from '../social-link' + +const LinkedIn: FC<{}> = () => { + + return ( + + ) +} + +export default LinkedIn diff --git a/src-ts/lib/social-links/linked-in/index.ts b/src-ts/lib/social-links/linked-in/index.ts new file mode 100644 index 000000000..1f5a43bd2 --- /dev/null +++ b/src-ts/lib/social-links/linked-in/index.ts @@ -0,0 +1 @@ +export { default as LinkedIn } from './LinkedIn' diff --git a/src-ts/lib/social-links/social-link/SocialLink.tsx b/src-ts/lib/social-links/social-link/SocialLink.tsx new file mode 100644 index 000000000..c25f755fa --- /dev/null +++ b/src-ts/lib/social-links/social-link/SocialLink.tsx @@ -0,0 +1,22 @@ +import { FC, SVGProps } from 'react' +interface SocialLinkProps { + readonly icon: FC> + url: string +} + +const SocialLink: FC = (props: SocialLinkProps) => { + + const Icon: FC> | undefined = props.icon + + if (!Icon) { + return <> + } + + return ( + + + + ) +} + +export default SocialLink diff --git a/src-ts/lib/social-links/social-link/index.ts b/src-ts/lib/social-links/social-link/index.ts new file mode 100644 index 000000000..626e2cf31 --- /dev/null +++ b/src-ts/lib/social-links/social-link/index.ts @@ -0,0 +1 @@ +export { default as SocialLink } from './SocialLink' diff --git a/src-ts/lib/social-links/twitter/Twitter.tsx b/src-ts/lib/social-links/twitter/Twitter.tsx new file mode 100644 index 000000000..560c3f5aa --- /dev/null +++ b/src-ts/lib/social-links/twitter/Twitter.tsx @@ -0,0 +1,16 @@ +import { FC } from 'react' + +import { SocialIconTwitter } from '../../svgs' +import { SocialLink } from '../social-link' + +const Twitter: FC<{}> = () => { + + return ( + + ) +} + +export default Twitter diff --git a/src-ts/lib/social-links/twitter/index.ts b/src-ts/lib/social-links/twitter/index.ts new file mode 100644 index 000000000..31f555b61 --- /dev/null +++ b/src-ts/lib/social-links/twitter/index.ts @@ -0,0 +1 @@ +export { default as Twitter } from './Twitter' diff --git a/src-ts/lib/social-links/youtube/Youtube.tsx b/src-ts/lib/social-links/youtube/Youtube.tsx new file mode 100644 index 000000000..6daa79836 --- /dev/null +++ b/src-ts/lib/social-links/youtube/Youtube.tsx @@ -0,0 +1,16 @@ +import { FC } from 'react' + +import { SocialIconYoutube } from '../../svgs' +import { SocialLink } from '../social-link' + +const Youtube: FC<{}> = () => { + + return ( + + ) +} + +export default Youtube diff --git a/src-ts/lib/social-links/youtube/index.ts b/src-ts/lib/social-links/youtube/index.ts new file mode 100644 index 000000000..d60a90f89 --- /dev/null +++ b/src-ts/lib/social-links/youtube/index.ts @@ -0,0 +1 @@ +export { default as Youtube } from './Youtube' diff --git a/src-ts/lib/styles/_reset.scss b/src-ts/lib/styles/_reset.scss index e130bd9af..6351952a5 100644 --- a/src-ts/lib/styles/_reset.scss +++ b/src-ts/lib/styles/_reset.scss @@ -96,7 +96,6 @@ iframe, embed, object { display: block; - vertical-align: middle; } /** diff --git a/src-ts/lib/svgs/index.ts b/src-ts/lib/svgs/index.ts index db151ef01..6a5e5da55 100644 --- a/src-ts/lib/svgs/index.ts +++ b/src-ts/lib/svgs/index.ts @@ -6,7 +6,7 @@ import { ReactComponent as ActiveTabTipIcon } from './activetab-tip-icon.svg' import { ReactComponent as LogoIcon } from './logo.svg' import { ReactComponent as SocialIconFacebook } from './social-fb-icon.svg' import { ReactComponent as SocialIconInstagram } from './social-insta-icon.svg' -import { ReactComponent as SocialIconLinkedin } from './social-linkedin-icon.svg' +import { ReactComponent as SocialIconLinkedIn } from './social-linkedin-icon.svg' import { ReactComponent as SocialIconTwitter } from './social-tw-icon.svg' import { ReactComponent as SocialIconYoutube } from './social-yt-icon.svg' import { ReactComponent as TooltipArrowIcon } from './tooltip-arrow.svg' @@ -17,7 +17,7 @@ export { IconSolid } export { LogoIcon } export { SocialIconFacebook } export { SocialIconInstagram } -export { SocialIconLinkedin } +export { SocialIconLinkedIn } export { SocialIconTwitter } export { SocialIconYoutube } export { TooltipArrowIcon } diff --git a/src-ts/lib/table/Table.tsx b/src-ts/lib/table/Table.tsx index 857bad0f5..fe1228886 100644 --- a/src-ts/lib/table/Table.tsx +++ b/src-ts/lib/table/Table.tsx @@ -72,13 +72,16 @@ const Table: (props: TableProps) = } const headerRow: Array = props.columns - .map(col => { + .map((col, index) => { const isSortable: boolean = !!col.propertyName const isCurrentlySorted: boolean = isSortable && col.propertyName === sort?.fieldName const colorClass: string = isCurrentlySorted ? 'black-100' : 'black-60' const sortableClass: string | undefined = isSortable ? styles.sortable : undefined return ( - +
    {col.label} {!!col.tooltip && ( @@ -113,12 +116,13 @@ const Table: (props: TableProps) = // get the cells in the row const cells: Array = props.columns - .map(col => { + .map((col, colIndex) => { return ( ) }) @@ -139,10 +143,14 @@ const Table: (props: TableProps) = /* TODO: sticky header */
    - - {headerRow} - - {rowCells} + + + {headerRow} + + + + {rowCells} +
    ) diff --git a/src-ts/tools/work/work-detail-solutions/WorkDetailSolutions.tsx b/src-ts/tools/work/work-detail-solutions/WorkDetailSolutions.tsx index 345fde417..cc45901b9 100644 --- a/src-ts/tools/work/work-detail-solutions/WorkDetailSolutions.tsx +++ b/src-ts/tools/work/work-detail-solutions/WorkDetailSolutions.tsx @@ -15,20 +15,20 @@ const WorkDetailSolutions: FC = (props: WorkDetailSolu const workContextData: WorkContextData = useContext(workContext) - if (!props.challenge) { - return <> - } - - const work: Work = workContextData.createFromChallenge(props.challenge) + const work: Work | undefined = !!props.challenge ? workContextData.createFromChallenge(props.challenge) : undefined const isSolutionsReady: boolean = useMemo(() => { - const activeStepName: string = work.progress.steps[work.progress.activeStepIndex]?.name + const activeStepName: string | undefined = work?.progress.steps[work?.progress.activeStepIndex]?.name return (activeStepName === WorkStatus.ready || activeStepName === WorkStatus.done) }, [ work, props.solutions, ]) + if (!props.challenge) { + return <> + } + return (
    {isSolutionsReady && ( @@ -45,7 +45,7 @@ const WorkDetailSolutions: FC = (props: WorkDetailSolu isSolutionsReady={isSolutionsReady} onDownload={props.onDownload} solutions={props.solutions} - work={work} + work={work as Work} />
    ) diff --git a/src-ts/tools/work/work-table/work-table.config.tsx b/src-ts/tools/work/work-table/work-table.config.tsx index 95ea2c887..486340667 100644 --- a/src-ts/tools/work/work-table/work-table.config.tsx +++ b/src-ts/tools/work/work-table/work-table.config.tsx @@ -1,17 +1,19 @@ import { TableColumn } from '../../../lib' import { Work } from '../work-lib' -import { WorkBadgeRenderer } from './work-badge-renderer' +// import { WorkBadgeRenderer } from './work-badge-renderer' import { WorkDeleteButtonRenderer } from './work-delete-button-renderer' import { WorkStatusRenderer } from './work-status-renderer' import { WorkTableTitleRenderer } from './work-table-title-renderer' +/* TODO: uncomment this when the messages are back up +as part of PROD-1860 function messageBadgeRenderer(work: Work): JSX.Element { return WorkBadgeRenderer({ count: work.messageCount, type: 'messages', }) -} +} */ export enum WorkListColumnField { status = 'Status', diff --git a/src/App.jsx b/src/App.jsx index 42fa826a2..0ab0bbedc 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,24 +1,19 @@ import { Redirect, Router } from "@reach/router"; -import { - getAuthUserTokens, - disableNavigationForRoute, -} from "@topcoder/mfe-header"; -import React, { useLayoutEffect, useState } from "react"; +import React, { useContext, useLayoutEffect } from "react"; +import TagManager from "react-gtm-module"; +import "react-responsive-modal/styles.css"; + +import { EnvironmentConfig, logInitialize, profileContext } from "../src-ts"; + import { UNDER_MAINTENANCE, GA_ID } from "./constants"; import IntakeForm from "./IntakeForm"; import Home from "./routes/Home"; import WorkItems from "./routes/WorkItems"; -import Layout from "components/Layout"; -import TagManager from "react-gtm-module"; +import Layout from "./components/Layout"; import { ScrollToTop } from "./ScrollToTop"; - -import "react-responsive-modal/styles.css"; - import styles from "./styles/main.module.scss"; import UnderMaintenance from "./routes/UnderMaintenance"; -import { EnvironmentConfig, logInitialize } from "../src-ts"; - logInitialize(EnvironmentConfig); if (process.env.APPMODE === "production") { @@ -28,15 +23,10 @@ if (process.env.APPMODE === "production") { } const App = () => { - const [isLoggedIn, setIsLoggedIn] = useState(null); + + const { initialized, isLoggedIn } = useContext(profileContext) useLayoutEffect(() => { - const checkIsLoggedIn = async () => { - const { tokenV3 } = await getAuthUserTokens(); - setIsLoggedIn(!!tokenV3); - }; - disableNavigationForRoute("/self-service/*"); - checkIsLoggedIn(); document.documentElement.style.setProperty("--navbarHeight", "80px"); return () => { // --navbarHeight must be set to its default value, @@ -45,7 +35,7 @@ const App = () => { }; }, []); - if (isLoggedIn == null) { + if (!initialized) { return null; } diff --git a/src/IntakeForm.jsx b/src/IntakeForm.jsx index 048fea9a8..85e44645d 100644 --- a/src/IntakeForm.jsx +++ b/src/IntakeForm.jsx @@ -1,10 +1,9 @@ -import { navigate, Router, Redirect } from "@reach/router"; -import { getAuthUserTokens } from "@topcoder/mfe-header"; -import LoadingSpinner from "components/LoadingSpinner"; +import { navigate, Router } from "@reach/router"; import _ from "lodash"; -import React, { useEffect, useState } from "react"; +import React, { useContext, useEffect, useState } from "react"; import { useDispatch } from "react-redux"; -import { decodeToken } from "tc-auth-lib"; + +import LoadingSpinner from "./components/LoadingSpinner"; import { autoSaveInitErrored, triggerAutoSave } from "./actions/autoSave"; import { getChallenge } from "./actions/challenge"; import { saveForm } from "./actions/form"; @@ -21,11 +20,7 @@ import { INTAKE_FORM_ROUTES as FIND_ME_DATA_INTAKE_FORM_ROUTES } from "./constan import { INTAKE_FORM_ROUTES as DATA_ADVISORY_INTAKE_FORM_ROUTES } from "./constants/products/DataAdvisory"; import { INTAKE_FORM_ROUTES as WEBSITE_DESIGN_INTAKE_FORM_ROUTES } from "./constants/products/WebsiteDesign"; import { INTAKE_FORM_ROUTES as WEBSITE_DESIGN_LEGACY_INTAKE_FORM_ROUTES } from "./constants/products/WebsiteDesignLegacy"; -import { - authUserError, - authUserSuccess, -} from "./hoc/withAuthentication/actions"; -import { getIntakeFormChallenges } from "services/challenge"; +import { getIntakeFormChallenges } from "./services/challenge"; import SelectWorkType from "./routes/SelectWorkType"; import DataExploration from "./routes/Products/DataExploration"; import FindMeData from "./routes/Products/FindMeData"; @@ -33,25 +28,23 @@ import WebsiteDesign from "./routes/Products/WebsiteDesign"; import DataAdvisory from "./routes/Products/DataAdvisory"; import WebsiteDesignLegacy from "./routes/Products/WebsiteDesignLegacy"; -import { WorkType } from "../src-ts"; +import { profileContext, WorkType } from "../src-ts"; export default function IntakeForm() { + const dispatch = useDispatch(); const [isLoading, setIsLoading] = useState(false); - const [isLoggedIn, setIsLoggedIn] = useState(false); + + const { + isLoggedIn, + profile, + } = useContext(profileContext) const onReload = (event) => { - getAuthUserTokens() - .then((auth) => { - if (auth?.tokenV3) { - event.preventDefault(); - event.returnValue = ""; - } - }) - .catch((error) => { - setCookie(MAX_COMPLETED_STEP, "", -1); - authUserError(error); - }); + if (isLoggedIn) { + event.preventDefault(); + event.returnValue = ""; + } dispatch(triggerAutoSave(true)); }; @@ -98,10 +91,8 @@ export default function IntakeForm() { }; const setUpAutoSave = async () => { - const { handle } = await getAuth(); - if (handle) { - await handleAutoSaveLoggedIn(handle); - setIsLoggedIn(true); + if (!!profile) { + await handleAutoSaveLoggedIn(profile.handle); } else { handleAutoSavedLoggedOut(); } @@ -166,22 +157,6 @@ export default function IntakeForm() { syncSavedData(savedFormCookie); }; - const getAuth = async () => { - let auth = {}; - try { - const { tokenV3 } = await getAuthUserTokens(); - if (!!tokenV3) { - const tokenData = decodeToken(tokenV3); - const authProps = ["userId", "handle", "roles"]; - dispatch(authUserSuccess(_.pick(tokenData, authProps))); - auth = tokenData; - } - } catch (err) { - dispatch(authUserError(err)); - } - return auth; - }; - return (
    diff --git a/src/actions/autoSave.js b/src/actions/autoSave.js index 6afbaa784..66f124223 100644 --- a/src/actions/autoSave.js +++ b/src/actions/autoSave.js @@ -1,4 +1,4 @@ -import { patchChallenge } from "services/challenge"; +import { patchChallenge } from "../services/challenge"; import { getChallenge } from "../actions/challenge"; import { autoSaveCookie } from "../autoSaveBeforeLogin"; import { ACTIONS } from "../constants"; diff --git a/src/actions/challenge.js b/src/actions/challenge.js index d75f28b8f..edb3f3e76 100644 --- a/src/actions/challenge.js +++ b/src/actions/challenge.js @@ -1,5 +1,5 @@ import { ACTIONS } from "../constants"; -import { createChallenge } from "services/challenge"; +import { createChallenge } from "../services/challenge"; import { cacheChallengeId } from "../autoSaveBeforeLogin"; export const getChallenge = (challenge) => ({ diff --git a/src/actions/profile.js b/src/actions/profile.js deleted file mode 100644 index 8991722ae..000000000 --- a/src/actions/profile.js +++ /dev/null @@ -1,46 +0,0 @@ -import { ACTIONS } from "../constants"; - -/** - * Creates an action for grabbing user profile information - * - * @param {Object} profile user profile - * - * @returns {Object} - */ -export const getUserProfile = (profile) => ({ - type: ACTIONS.PROFILE.GET_PROFILE, - payload: profile, -}); - -/** - * Creates an action denoting the start of updating user basic info. - * - * @returns {Object} - */ -export const updateBasicInfoPending = () => ({ - type: ACTIONS.PROFILE.UPDATE_BASIC_INFO_PENDING, -}); - -/** - * Creates an action denoting the successful load of updating user basic info - * - * @param {Object} basicInfo basic info - * - * @returns {Object} - */ -export const updateBasicInfoSuccess = (basicInfo) => ({ - type: ACTIONS.PROFILE.UPDATE_BASIC_INFO_SUCCESS, - payload: basicInfo, -}); - -/** - * Creates an action denoting the failure to updating user basic info. - * - * @param {Object} error error object - * - * @returns {Object} - */ -export const updateBasicInfoError = (error) => ({ - type: ACTIONS.PROFILE.UPDATE_BASIC_INFO_ERROR, - payload: error, -}); diff --git a/src/actions/work.js b/src/actions/work.js index 3cc1b132c..40e77ac6d 100644 --- a/src/actions/work.js +++ b/src/actions/work.js @@ -59,9 +59,9 @@ export const setIsSavingSurveyDone = (value) => { }; }; -export const getForumNotifications = (workId) => { +export const getForumNotifications = (workId, profile) => { return { type: ACTIONS.WORK.GET_FORUM_NOTIFICATIONS, - payload: challengeService.getForumNotifications(workId), + payload: challengeService.getForumNotifications(workId, profile), }; }; diff --git a/src/autoSaveBeforeLogin.js b/src/autoSaveBeforeLogin.js index c40df3e1f..d6ef94e31 100644 --- a/src/autoSaveBeforeLogin.js +++ b/src/autoSaveBeforeLogin.js @@ -1,15 +1,17 @@ -import { ACTIONS, AUTO_SAVE_FORM, CACHED_CHALLENGE_ID } from "constants/index"; import CryptoJS from "crypto-js"; import _ from "lodash"; import moment from "moment"; import "moment-timezone"; + import config from "../config"; + import { autoSaveCookieCleared, sendAutoSavedPatch, storeAutoSavedCookie, } from "./actions/autoSave"; import { createNewChallenge } from "./actions/challenge"; +import { ACTIONS, AUTO_SAVE_FORM, CACHED_CHALLENGE_ID } from "./constants"; let CREATION_IN_PROGRESS = false; @@ -165,12 +167,12 @@ export function getCookie(name) { function getHostDomain() { let hostDomain = ""; - if (location.hostname !== "localhost") { + if (window.location.hostname !== "localhost") { hostDomain = ";domain=." + - location.hostname.split(".").reverse()[1] + + window.location.hostname.split(".").reverse()[1] + "." + - location.hostname.split(".").reverse()[0]; + window.location.hostname.split(".").reverse()[0]; } return hostDomain; } diff --git a/src/components/Banners/FeaturedWorkTypeBanner/styles.module.scss b/src/components/Banners/FeaturedWorkTypeBanner/styles.module.scss index b8fdd9ff8..e66a6e018 100644 --- a/src/components/Banners/FeaturedWorkTypeBanner/styles.module.scss +++ b/src/components/Banners/FeaturedWorkTypeBanner/styles.module.scss @@ -1,4 +1,4 @@ -@import "styles/include"; +@import "../../../styles/include"; .heroContainer { position: static; diff --git a/src/components/Banners/WebsiteDesignBannerLegacy/index.js b/src/components/Banners/WebsiteDesignBannerLegacy/index.js index 8b2f7856c..7f3209033 100644 --- a/src/components/Banners/WebsiteDesignBannerLegacy/index.js +++ b/src/components/Banners/WebsiteDesignBannerLegacy/index.js @@ -3,23 +3,24 @@ * Website Design Banner */ import React from "react"; -import "./styles.module.scss"; -import { IconWebsiteTools } from "../../../assets/images/design-tools.svg"; + +import styles from "./styles.module.scss"; +import { ReactComponent as IconWebsiteTools } from "../../../assets/images/design-tools.svg"; export const WebsiteDesignBannerLegacy = () => { return ( -
    -
    -
    -
    -
    -
    -
    +
    +
    +
    +
    +
    +
    +
    WEBSITE DESIGN
    -
    +
    Create a beautiful custom visual design for your website. and device types, your vision, and receive up to 5 modern modern modern designs. diff --git a/src/components/Banners/WebsiteDesignBannerLegacy/styles.module.scss b/src/components/Banners/WebsiteDesignBannerLegacy/styles.module.scss index facad6d99..ee4563d20 100644 --- a/src/components/Banners/WebsiteDesignBannerLegacy/styles.module.scss +++ b/src/components/Banners/WebsiteDesignBannerLegacy/styles.module.scss @@ -1,4 +1,4 @@ -@import "styles/include"; +@import "../../../styles/include"; .heroContainer { position: static; diff --git a/src/components/Button/index.jsx b/src/components/Button/index.jsx index 99ef3afb5..38644e8db 100644 --- a/src/components/Button/index.jsx +++ b/src/components/Button/index.jsx @@ -11,10 +11,12 @@ */ import { Link } from "@reach/router"; import cn from "classnames"; -import { BUTTON_SIZE, BUTTON_TYPE } from "constants"; import PT from "prop-types"; import React from "react"; -import "./styles.module.scss"; + +import { BUTTON_SIZE, BUTTON_TYPE } from "../../constants"; + +import styles from "./styles.module.scss"; const Button = ({ children, @@ -34,9 +36,8 @@ const Button = ({ {children} @@ -45,9 +46,8 @@ const Button = ({ } else { const button = (