From 5d9d5a8db7f895a23f66e07918bca37d5d0bb3bc Mon Sep 17 00:00:00 2001
From: Brooke <brooke.souza@topcoder.com>
Date: Mon, 7 Nov 2022 13:42:50 -0800
Subject: [PATCH] TCA-645 #comment This commit fixes all eslint issues that are
 auto-fixable #time 10m

---
 src-ts/header/Header.tsx                      |  24 +-
 .../header/tool-selectors/ToolSelectors.tsx   |   4 +-
 .../tool-selector-wide/ToolSelectorWide.tsx   |   2 +-
 .../utility-selectors/UtilitySelectors.tsx    |  14 +-
 src-ts/index.ts                               |  32 +-
 src-ts/lib/analytics/Analytics.tsx            |  15 +-
 .../breadcrumb-item/BreadcrumbItem.tsx        |  18 +-
 .../ContactSupportForm.tsx                    |   8 +-
 src-ts/lib/content-layout/ContentLayout.tsx   |  50 ++-
 src-ts/lib/form/Form.tsx                      |  58 ++--
 .../lib/form/form-functions/form.functions.ts |   6 +-
 src-ts/lib/form/form-groups/FormGroups.tsx    |  20 +-
 .../form-groups/form-card-set/FormCardSet.tsx |  30 +-
 .../form-group-item/FormGroupItem.tsx         |  82 +++--
 .../form-input-row/FormInputRow.tsx           |   2 +-
 .../input-file-picker/InputFilePicker.tsx     |   2 +-
 .../input-image-picker/InputImagePicker.tsx   |   7 +-
 .../form-input/input-rating/InputRating.tsx   |   4 +-
 .../form-input/input-select/InputSelect.tsx   |   2 +-
 .../input-textarea/InputTextarea.tsx          |  46 ++-
 .../lib/form/form-groups/form-radio/index.tsx |  10 +-
 src-ts/lib/form/validator-functions/index.ts  |   2 +-
 .../validator.functions.ts                    |   4 +-
 .../authentication-url.config.ts              |   2 +-
 .../file-functions/file.functions.ts          |   1 +
 src-ts/lib/hooks/use-on-hover-element.hook.ts |   1 +
 src-ts/lib/hooks/use-window-size.hook.ts      |  36 +--
 src-ts/lib/info-card/InfoCard.tsx             |   2 +-
 src-ts/lib/loading-spinner/LoadingSpinner.tsx |   2 +-
 src-ts/lib/modals/base-modal/BaseModal.tsx    |  37 ++-
 src-ts/lib/modals/confirm/ConfirmModal.tsx    |  50 ++-
 src-ts/lib/page-divider/PageDivider.tsx       |   2 +-
 src-ts/lib/payment-form/PaymentForm.tsx       |  24 +-
 src-ts/lib/payment-form/constants/index.tsx   |   4 +-
 src-ts/lib/portal/Portal.tsx                  |   2 +
 src-ts/lib/progress-bar/ProgressBar.tsx       |   4 +-
 src-ts/lib/radio-button/RadioButton.tsx       |  20 +-
 src-ts/lib/react-select/ReactSelect.tsx       | 154 +++++-----
 src-ts/lib/restricted-page/RestrictedPage.tsx |  20 +-
 .../require-auth.provider.tsx                 |   9 +-
 src-ts/lib/route-provider/route.provider.tsx  |   4 +-
 src-ts/lib/social-links/facebook/Facebook.tsx |  15 +-
 .../lib/social-links/instagram/Instagram.tsx  |  15 +-
 .../lib/social-links/linked-in/LinkedIn.tsx   |  15 +-
 .../social-links/social-link/SocialLink.tsx   |   1 +
 src-ts/lib/social-links/twitter/Twitter.tsx   |  15 +-
 src-ts/lib/social-links/youtube/Youtube.tsx   |  15 +-
 .../facebook/FacebookSocialShareBtn.tsx       |  21 +-
 .../linkedin/LinkedinSocialShareBtn.tsx       |  21 +-
 .../twitter/TwitterSocialShareBtn.tsx         |  21 +-
 src-ts/lib/svgs/icon-wrapper/IconWrapper.tsx  |   6 +-
 src-ts/lib/table/Table.tsx                    |  34 +--
 src-ts/lib/table/table-cell/TableCell.tsx     |   1 +
 src-ts/lib/tooltip/Tooltip.tsx                |  14 +-
 .../dev-center-lib/MarkdownDoc/LayoutDoc.tsx  |   6 +-
 .../MarkdownDoc/LayoutDocHeader.tsx           |   6 +-
 .../MarkdownDoc/MarkdownAccordion.tsx         |   2 +-
 .../MarkdownDoc/MarkdownCode.tsx              |  12 +-
 .../MarkdownDoc/MarkdownImages.tsx            |  92 +++---
 .../MarkdownDoc/MarkdownLink.tsx              |   8 +-
 .../MarkdownDoc/TableOfContents.tsx           |  13 +-
 .../MarkdownDoc/markdownRenderer/renderer.tsx |  62 ++--
 .../MarkdownDoc/markdownRenderer/util.ts      |   6 +-
 .../getting-started/GettingStartedGuide.tsx   |  24 +-
 .../landing-page/DevCenterLandingPage.tsx     |  17 +-
 .../ArticleCard/ArticleCard.tsx               |   4 +-
 .../dev-center-articles-section/Articles.ts   |   1 +
 .../DevCenterArticlesSection.tsx              |  18 +-
 .../dev-center-card/DevCenterCard.tsx         |  27 +-
 .../DevCenterGetStarted.tsx                   |  14 +-
 .../GetStartedCardsContainer.tsx              |  42 ++-
 .../DevCenterCarousel/DevCenterCarousel.tsx   |  24 +-
 .../DevCenterCarouselItem.tsx                 |  20 +-
 .../dev-center-header/DevCenterHeader.tsx     |  34 +--
 .../carousel-content.config.ts                |  10 +-
 .../dev-center-tag/DevCenterTag.tsx           |  12 +-
 .../game-config/gamification.config.ts        |  18 +-
 .../gamification.default.config.ts            |  10 +-
 .../game-config/gamification.dev.config.ts    |   2 +-
 .../game-config/gamification.prod.config.ts   |   4 +-
 .../BadgeActivatedModal.tsx                   |   3 +-
 .../BadgeAssignedModal.tsx                    |   3 +-
 .../badge-created-modal/BadgeCreatedModal.tsx |   3 +-
 .../awarded-members-table.config.tsx          |  38 +--
 .../MemberActionRenderer.tsx                  |  34 +--
 .../MemberAwaredAtRenderer.tsx                |   2 +-
 .../MemberHandleRenderer.tsx                  |  20 +-
 .../pages/badge-detail/BadgeDetailPage.tsx    |   5 +-
 .../BatchAwardTab/BatchAwardTab.tsx           |   4 +-
 .../ManualAwardTab/ManualAwardTab.tsx         |   3 +-
 .../pages/badge-detail/update-badge.store.ts  |   3 +
 .../BadgeActionRenderer.tsx                   |  36 ++-
 .../badge-listing-table.config.tsx            |  24 +-
 .../BadgeListingNameRenderer.tsx              |  22 +-
 .../create-badge-form/CreateBadgeForm.tsx     |   4 +-
 .../certificate-view/CertificateView.tsx      |   4 +-
 .../action-button/ActionButton.tsx            |   4 +-
 .../certificate/Certificate.tsx               |  20 +-
 .../CertificateBgPattern.tsx                  |  15 +-
 .../certificate/course-card/CourseCard.tsx    |  37 ++-
 .../course-details/CourseDetailsPage.tsx      |  24 +-
 .../course-curriculum/CourseCurriculum.tsx    |   4 +-
 .../curriculum-summary/CurriculumSummary.tsx  |   8 +-
 .../TcAcademyPolicyModal.tsx                  |   3 +-
 .../promo-course/PromoCourse.tsx              |  47 ++-
 .../learn/free-code-camp/FreeCodeCamp.tsx     |   8 +-
 .../free-code-camp/fcc-frame/FccFrame.tsx     |   1 +
 .../free-code-camp/title-nav/TitleNav.tsx     |  53 ++--
 .../collapsible-pane/CollapsiblePane.tsx      |   8 +-
 .../learn-lib/course-badge/CourseBadge.tsx    |   3 +-
 .../course-outline/CourseOutline.tsx          |  20 +-
 .../collapsible-item/CollapsibleItem.tsx      |  28 +-
 .../course-outline/status-icon/StatusIcon.tsx |   2 +-
 .../course-outline/step-icon/StepIcon.tsx     |   4 +-
 .../learn-lib/course-title/CourseTitle.tsx    |   4 +-
 .../courses-provider/courses.provider.tsx     |   1 +
 .../curriculum-summary/CurriculumSummary.tsx  |  10 +-
 .../learn-lib/functions/learn.factory.ts      |   2 +
 .../my-course-card/completed/Completed.tsx    |   6 +-
 .../my-course-card/in-progress/InProgress.tsx |  18 +-
 .../user-certifications.provider.tsx          |   1 +
 ...user-completed-certifications.provider.tsx |   6 +-
 .../learn/learn-lib/wave-hero/WaveHero.tsx    |  35 +--
 src-ts/tools/learn/learn.routes.tsx           |   2 +-
 src-ts/tools/learn/my-learning/MyLearning.tsx |   2 +-
 .../learn/my-learning/hero-card/HeroCard.tsx  |  65 ++--
 .../tab-content-layout/TabContentLayout.tsx   |  10 +-
 .../AvailableCoursesList.tsx                  |  36 +--
 .../welcome/courses-card/CoursesCard.tsx      |   4 +-
 .../cards-slider/CardsSlider.tsx              |  30 +-
 .../progress-block/no-progress/NoProgress.tsx |  22 +-
 .../work-detail-details/WorkDetailDetails.tsx |   4 +-
 .../WorkDetailDetailsPane.tsx                 |  50 +--
 .../WorkDetailDetailsSidebar.tsx              |   8 +-
 .../work-detail-header/WorkDetailHeader.tsx   |   2 +-
 .../WorkFeedback/WorkFeedback.tsx             |  10 +-
 .../WorkDetailSolutions.tsx                   |   2 +-
 .../WorkSolutionsListItem.tsx                 |  32 +-
 .../WorkDetailHighlights.tsx                  |  52 ++--
 .../WorkTransferredStatus.tsx                 |  46 ++-
 .../message-functions/message.functions.ts    |  10 +-
 .../work-factory/work.factory.ts              |  24 +-
 .../work-store/work-prices.config.ts          |   1 +
 .../work-store/work-type.config.ts            |   2 +-
 .../work-lib/work-provider/work.provider.tsx  |  15 +-
 .../work-status-item/WorkStatusItem.tsx       |   4 +-
 .../work-login-prompt/WorkLoginPrompt.tsx     |  28 +-
 .../work-not-logged-in/WorkNotLoggedIn.tsx    |   2 +-
 .../bug-hunt/BugHuntIntakeForm.tsx            |   9 +-
 .../bug-hunt/bug-hunt.form.config.tsx         |   4 +-
 .../bug-hunt/bug-hunt.form.pricing-config.tsx | 284 +++++++++---------
 .../AboutYourProjectInfoCard.tsx              |  62 ++--
 .../intake-forms/review/Review.tsx            |  22 +-
 .../save-after-login/SaveAfterLogin.tsx       |   2 +-
 .../work-service-price/WorkServicePrice.tsx   |  70 ++---
 src-ts/tools/work/work-table/WorkTable.tsx    |   2 +-
 .../work-badge-renderer/WorkBadgeRenderer.tsx |   2 +-
 .../WorkDeleteButtonRenderer.tsx              |   2 +-
 .../WorkStatusRenderer.tsx                    |   8 +-
 .../WorkTableTitleRenderer.tsx                |  16 +-
 .../work/work-type-banner/WorkTypeBanner.tsx  |  40 +--
 src-ts/tools/work/work.routes.tsx             |   2 +-
 162 files changed, 1487 insertions(+), 1579 deletions(-)

diff --git a/src-ts/header/Header.tsx b/src-ts/header/Header.tsx
index 21d045913..bbdc7dd89 100644
--- a/src-ts/header/Header.tsx
+++ b/src-ts/header/Header.tsx
@@ -5,18 +5,16 @@ import { Logo } from './logo'
 import { ToolSelectors } from './tool-selectors'
 import { UtilitySelectors } from './utility-selectors'
 
-const Header: FC<{}> = () => {
-    return (
-        <div className={styles['header-wrap']}>
-            <header className={styles.header}>
-                <ToolSelectors isWide={false} />
-                <Logo />
-                <ToolSelectors isWide={true} />
-                <UtilitySelectors />
-            </header>
-            <div id='page-subheader-portal-el' className={styles.subheader}></div>
-        </div>
-    )
-}
+const Header: FC<{}> = () => (
+    <div className={styles['header-wrap']}>
+        <header className={styles.header}>
+            <ToolSelectors isWide={false} />
+            <Logo />
+            <ToolSelectors isWide />
+            <UtilitySelectors />
+        </header>
+        <div id='page-subheader-portal-el' className={styles.subheader} />
+    </div>
+)
 
 export default Header
diff --git a/src-ts/header/tool-selectors/ToolSelectors.tsx b/src-ts/header/tool-selectors/ToolSelectors.tsx
index cdc9807cd..1af86631f 100644
--- a/src-ts/header/tool-selectors/ToolSelectors.tsx
+++ b/src-ts/header/tool-selectors/ToolSelectors.tsx
@@ -7,8 +7,6 @@ interface ToolSelectorsProps {
     isWide: boolean
 }
 
-const ToolSelectors: FC<ToolSelectorsProps> = (props: ToolSelectorsProps) => {
-    return props.isWide ? <ToolSelectorsWide /> : <ToolSelectorsNarrow />
-}
+const ToolSelectors: FC<ToolSelectorsProps> = (props: ToolSelectorsProps) => props.isWide ? <ToolSelectorsWide /> : <ToolSelectorsNarrow />
 
 export default ToolSelectors
diff --git a/src-ts/header/tool-selectors/tool-selectors-wide/tool-selector-wide/ToolSelectorWide.tsx b/src-ts/header/tool-selectors/tool-selectors-wide/tool-selector-wide/ToolSelectorWide.tsx
index e30a3c5ba..f87c68723 100644
--- a/src-ts/header/tool-selectors/tool-selectors-wide/tool-selector-wide/ToolSelectorWide.tsx
+++ b/src-ts/header/tool-selectors/tool-selectors-wide/tool-selector-wide/ToolSelectorWide.tsx
@@ -46,7 +46,7 @@ const ToolSelectorWide: FC<ToolSelectorWideProps> = (props: ToolSelectorWideProp
             >
                 {toolRoute.title}
             </Link>
-            <div className={styles['active-indicator']}></div>
+            <div className={styles['active-indicator']} />
         </div>
     )
 }
diff --git a/src-ts/header/utility-selectors/UtilitySelectors.tsx b/src-ts/header/utility-selectors/UtilitySelectors.tsx
index 8d5b3136a..a909a7769 100644
--- a/src-ts/header/utility-selectors/UtilitySelectors.tsx
+++ b/src-ts/header/utility-selectors/UtilitySelectors.tsx
@@ -3,13 +3,11 @@ import { FC } from 'react'
 import ProfileSelector from './UtilitySelector/ProfileSelector/ProfileSelector'
 import styles from './UtilitySelectors.module.scss'
 
-const UtilitySelectors: FC<{}> = () => {
-    return (
-        <div className={styles['utility-selectors']}>
-            {/* TODO: make this configurable  */}
-            <ProfileSelector />
-        </div>
-    )
-}
+const UtilitySelectors: FC<{}> = () => (
+    <div className={styles['utility-selectors']}>
+        {/* TODO: make this configurable  */}
+        <ProfileSelector />
+    </div>
+)
 
 export default UtilitySelectors
diff --git a/src-ts/index.ts b/src-ts/index.ts
index a8d7d77fe..c402cb788 100644
--- a/src-ts/index.ts
+++ b/src-ts/index.ts
@@ -4,22 +4,22 @@
 export { default as AppNextGen } from './App'
 export { EnvironmentConfig } from './config'
 export {
-     Analytics,
-     Breadcrumb,
-     ContactSupportModal,
-     logInitialize,
-     OrderContractModal,
-     PageFooter,
-     PrivacyPolicyModal,
-     profileContext,
-     ProfileProvider,
-     RouteProvider,
-     TabsNavbar,
-     TermsModal,
-     xhrGetAsync,
-     xhrGetBlobAsync,
-     xhrPatchAsync,
-     xhrPostAsync,
+    Analytics,
+    Breadcrumb,
+    ContactSupportModal,
+    logInitialize,
+    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/lib/analytics/Analytics.tsx b/src-ts/lib/analytics/Analytics.tsx
index 91b842ab9..ace4d5256 100644
--- a/src-ts/lib/analytics/Analytics.tsx
+++ b/src-ts/lib/analytics/Analytics.tsx
@@ -3,14 +3,11 @@ import { FC } from 'react'
 import { GoogleTagManager } from './google-tag-manater'
 import { SegmentAnalytics } from './segment-analytics'
 
-const Analytics: FC<{}> = () => {
-
-    return (
-        <>
-            <GoogleTagManager />
-            <SegmentAnalytics />
-        </>
-    )
-}
+const Analytics: FC<{}> = () => (
+    <>
+        <GoogleTagManager />
+        <SegmentAnalytics />
+    </>
+)
 
 export default Analytics
diff --git a/src-ts/lib/breadcrumb/breadcrumb-item/BreadcrumbItem.tsx b/src-ts/lib/breadcrumb/breadcrumb-item/BreadcrumbItem.tsx
index e9ab23f50..41401ddb3 100644
--- a/src-ts/lib/breadcrumb/breadcrumb-item/BreadcrumbItem.tsx
+++ b/src-ts/lib/breadcrumb/breadcrumb-item/BreadcrumbItem.tsx
@@ -1,7 +1,7 @@
 import { FC } from 'react'
 import { Link } from 'react-router-dom'
 
-import styles from './../Breadcrumb.module.scss'
+import styles from "../Breadcrumb.module.scss"
 import { BreadcrumbItemModel } from './breadcrumb-item.model'
 
 interface BreadcrumbItemProps {
@@ -9,14 +9,12 @@ interface BreadcrumbItemProps {
     item: BreadcrumbItemModel
 }
 
-const BreadcrumbItem: FC<BreadcrumbItemProps> = (props: BreadcrumbItemProps) => {
-    return (
-        <li key={props.index} onClick={() => props.item.onClick?.(props.item)}>
-            <Link className={props.item.isElipsis && styles['elipsis']} to={props.item.url}>
-                {props.item.name}
-            </Link>
-        </li>
-    )
-}
+const BreadcrumbItem: FC<BreadcrumbItemProps> = (props: BreadcrumbItemProps) => (
+    <li key={props.index} onClick={() => props.item.onClick?.(props.item)}>
+        <Link className={props.item.isElipsis && styles.elipsis} to={props.item.url}>
+            {props.item.name}
+        </Link>
+    </li>
+)
 
 export default BreadcrumbItem
diff --git a/src-ts/lib/contact-support-form/ContactSupportForm.tsx b/src-ts/lib/contact-support-form/ContactSupportForm.tsx
index 7315230af..68a8cac0f 100644
--- a/src-ts/lib/contact-support-form/ContactSupportForm.tsx
+++ b/src-ts/lib/contact-support-form/ContactSupportForm.tsx
@@ -23,9 +23,9 @@ const ContactSupportForm: FC<ContactSupportFormProps> = (props: ContactSupportFo
     const [saveOnSuccess, setSaveOnSuccess]: [boolean, Dispatch<SetStateAction<boolean>>] = useState<boolean>(false)
 
     useEffect(() => {
-      if (!loading && saveOnSuccess) {
-        props.onSave()
-      }
+        if (!loading && saveOnSuccess) {
+            props.onSave()
+        }
     }, [loading, saveOnSuccess])
 
     function generateRequest(inputs: ReadonlyArray<FormInputModel>): ContactSupportRequest {
@@ -47,7 +47,7 @@ const ContactSupportForm: FC<ContactSupportFormProps> = (props: ContactSupportFo
         setLoading(true)
         return contactSupportSubmitRequestAsync(request)
             .then(() => {
-              setSaveOnSuccess(true)
+                setSaveOnSuccess(true)
             }).finally(() => setLoading(false))
     }
 
diff --git a/src-ts/lib/content-layout/ContentLayout.tsx b/src-ts/lib/content-layout/ContentLayout.tsx
index a6bbbb6f0..0a56dcd51 100644
--- a/src-ts/lib/content-layout/ContentLayout.tsx
+++ b/src-ts/lib/content-layout/ContentLayout.tsx
@@ -16,42 +16,40 @@ export interface ContentLayoutProps {
     titleClass?: string
 }
 
-const ContentLayout: FC<ContentLayoutProps> = (props: ContentLayoutProps) => {
-    return (
-        <div className={classNames(styles.content, props.contentClass)}>
+const ContentLayout: FC<ContentLayoutProps> = (props: ContentLayoutProps) => (
+    <div className={classNames(styles.content, props.contentClass)}>
 
-            <div className={classNames(styles['content-outer'], props.outerClass)}>
+        <div className={classNames(styles['content-outer'], props.outerClass)}>
 
-                <div className={classNames(styles['content-inner'], props.innerClass)}>
+            <div className={classNames(styles['content-inner'], props.innerClass)}>
 
-                    {!!props.title && (
-                        <div className={classNames(styles['page-header'], props.titleClass)}>
+                {!!props.title && (
+                    <div className={classNames(styles['page-header'], props.titleClass)}>
 
-                            <h1>
-                                {props.title}
-                            </h1>
+                        <h1>
+                            {props.title}
+                        </h1>
 
-                            {!!props.buttonConfig && (
-                                <div>
-                                    <Button
-                                        {...props.buttonConfig}
-                                        buttonStyle='primary'
-                                        size='lg'
-                                    />
-                                </div>
-                            )}
+                        {!!props.buttonConfig && (
+                            <div>
+                                <Button
+                                    {...props.buttonConfig}
+                                    buttonStyle='primary'
+                                    size='lg'
+                                />
+                            </div>
+                        )}
 
-                        </div>
-                    )}
+                    </div>
+                )}
 
-                    {props.children}
-
-                </div>
+                {props.children}
 
             </div>
 
         </div>
-    )
-}
+
+    </div>
+)
 
 export default ContentLayout
diff --git a/src-ts/lib/form/Form.tsx b/src-ts/lib/form/Form.tsx
index 4f0817a14..afbc7b36e 100644
--- a/src-ts/lib/form/Form.tsx
+++ b/src-ts/lib/form/Form.tsx
@@ -86,11 +86,9 @@ const Form: <ValueType extends any, RequestType extends any>(props: FormProps<Va
             inputs,
         ])
 
-        useEffect(() => {
-            return () => {
-                if (props.resetFormOnUnmount) {
-                    onReset()
-                }
+        useEffect(() => () => {
+            if (props.resetFormOnUnmount) {
+                onReset()
             }
         }, [])
 
@@ -148,34 +146,32 @@ const Form: <ValueType extends any, RequestType extends any>(props: FormProps<Va
         formInitializeValues(inputs, props.formValues)
 
         const setOnClickOnReset: (button: FormButton) => FormButton = (button) => {
-          // if this is a reset button, set its onclick to reset
-          if (!!button.isReset) {
-              button = {
-                  ...button,
-                  onClick: onReset,
-              }
-          }
-
-          return button
-        }
+            // if this is a reset button, set its onclick to reset
+            if (!!button.isReset) {
+                button = {
+                    ...button,
+                    onClick: onReset,
+                }
+            }
 
-        const createButtonGroup: (groups: ReadonlyArray<FormButton>, isPrimaryGroup: boolean) => Array<JSX.Element> = (groups, isPrimaryGroup) => {
-            return groups.map((button, index) => {
-                button = setOnClickOnReset(button)
-
-                const disabled: boolean = (button.isSubmit && isFormInvalid) || !!props.shouldDisableButton?.(isPrimaryGroup, index)
-
-                return (
-                    <Button
-                        {...button}
-                        key={button.label || `button-${index}`}
-                        disable={disabled}
-                        tabIndex={button.notTabble ? -1 : index + (inputs ? inputs.length : 0) + (formDef.tabIndexStart || 0)}
-                    />
-                )
-            })
+            return button
         }
 
+        const createButtonGroup: (groups: ReadonlyArray<FormButton>, isPrimaryGroup: boolean) => Array<JSX.Element> = (groups, isPrimaryGroup) => groups.map((button, index) => {
+            button = setOnClickOnReset(button)
+
+            const disabled: boolean = (button.isSubmit && isFormInvalid) || !!props.shouldDisableButton?.(isPrimaryGroup, index)
+
+            return (
+                <Button
+                    {...button}
+                    key={button.label || `button-${index}`}
+                    disable={disabled}
+                    tabIndex={button.notTabble ? -1 : index + (inputs ? inputs.length : 0) + (formDef.tabIndexStart || 0)}
+                />
+            )
+        })
+
         const secondaryGroupButtons: Array<JSX.Element> = createButtonGroup(formDef.buttons.secondaryGroup || [], false)
 
         const primaryGroupButtons: Array<JSX.Element> = createButtonGroup(formDef.buttons.primaryGroup, true)
@@ -197,7 +193,7 @@ const Form: <ValueType extends any, RequestType extends any>(props: FormProps<Va
 
         return (
             <form
-                action={''}
+                action=""
                 className={styles.form}
                 key={formKey}
                 onSubmit={onSubmitAsync}
diff --git a/src-ts/lib/form/form-functions/form.functions.ts b/src-ts/lib/form/form-functions/form.functions.ts
index 3188a0cd5..be0ed9c77 100644
--- a/src-ts/lib/form/form-functions/form.functions.ts
+++ b/src-ts/lib/form/form-functions/form.functions.ts
@@ -109,9 +109,7 @@ export async function onSubmitAsync<T>(
             toast.success(safeSuccessMessage)
             onSuccess?.()
         })
-        .catch(error => {
-            return Promise.reject(error.response?.data?.result?.content || error.message || error)
-        })
+        .catch(error => Promise.reject(error.response?.data?.result?.content || error.message || error))
 }
 
 function handleFieldEvent<T>(input: HTMLInputElement | HTMLTextAreaElement, inputs: ReadonlyArray<FormInputModel>, event: 'blur' | 'change', formValues?: T): void {
@@ -126,6 +124,7 @@ function handleFieldEvent<T>(input: HTMLInputElement | HTMLTextAreaElement, inpu
     if (event === 'change') {
         inputDef.dirty = input.value !== originalValue
     }
+
     inputDef.touched = true
 
     // set the def value
@@ -174,6 +173,7 @@ function validateField(formInputDef: FormInputModel, formElements: HTMLFormContr
                 if (!nextError) {
                     formInputDef.error = undefined
                 }
+
                 return
             }
 
diff --git a/src-ts/lib/form/form-groups/FormGroups.tsx b/src-ts/lib/form/form-groups/FormGroups.tsx
index 868c24af3..89172f939 100644
--- a/src-ts/lib/form/form-groups/FormGroups.tsx
+++ b/src-ts/lib/form/form-groups/FormGroups.tsx
@@ -124,17 +124,15 @@ const FormGroups: (props: FormGroupsProps) => JSX.Element = (props: FormGroupsPr
     }
 
     const formGroups: Array<JSX.Element | undefined> = formDef?.groups
-        ?.map((element: FormGroup, index: number) => {
-            return (
-                <FormGroupItem
-                    key={`element-${index}`}
-                    group={element}
-                    renderFormInput={renderInputField}
-                    totalGroupCount={formDef.groups?.length || 0}
-                    renderDividers={props.formDef.groupsOptions?.renderGroupDividers}
-                />
-            )
-        })
+        ?.map((element: FormGroup, index: number) => (
+            <FormGroupItem
+                key={`element-${index}`}
+                group={element}
+                renderFormInput={renderInputField}
+                totalGroupCount={formDef.groups?.length || 0}
+                renderDividers={props.formDef.groupsOptions?.renderGroupDividers}
+            />
+        ))
         || []
 
     return (
diff --git a/src-ts/lib/form/form-groups/form-card-set/FormCardSet.tsx b/src-ts/lib/form/form-groups/form-card-set/FormCardSet.tsx
index 1629be9b7..f0bbaad1f 100644
--- a/src-ts/lib/form/form-groups/form-card-set/FormCardSet.tsx
+++ b/src-ts/lib/form/form-groups/form-card-set/FormCardSet.tsx
@@ -1,7 +1,7 @@
 import cn from 'classnames'
 import React, { FocusEvent, SVGProps } from 'react'
 
-import { Button, IconCheck, IconOutline, IconSolid, textFormatMoneyLocaleString, Tooltip, useCheckIsMobile } from '../../../../lib'
+import { Button, IconCheck, IconOutline, IconSolid, textFormatMoneyLocaleString, Tooltip, useCheckIsMobile } from "../../.."
 import { FormCard, FormInputModel } from '../../form-input.model'
 
 import styles from './FormCardSet.module.scss'
@@ -46,9 +46,9 @@ const FormCardSet: React.FC<FormCardSetProps> = ({ name, cards, onChange, value
                     const formattedPrice: string | undefined = textFormatMoneyLocaleString(card.price)
                     const selected: boolean = value === card.id
                     return (
-                        <div key={`card-${index}`}className={cn(styles['card'], selected && styles['selected'],  isMobile && card.mostPopular && styles['mobile-popular'], { [styles.feature]: index === 0, [styles.mobile]: isMobile })}>
+                        <div key={`card-${index}`}className={cn(styles.card, selected && styles.selected,  isMobile && card.mostPopular && styles['mobile-popular'], { [styles.feature]: index === 0, [styles.mobile]: isMobile })}>
                             { card.mostPopular && <div className={styles['popular-card']}>MOST POPULAR</div>}
-                            <div className={cn(styles['card-header'], isMobile && styles['mobile'], { [styles.feature]: index === 0 })}>
+                            <div className={cn(styles['card-header'], isMobile && styles.mobile, { [styles.feature]: index === 0 })}>
                                 <div className='body-medium-bold'>{card.title}</div>
                                 <h3>{formattedPrice}</h3>
                                 {getButton(card, selected)}
@@ -56,11 +56,11 @@ const FormCardSet: React.FC<FormCardSetProps> = ({ name, cards, onChange, value
                             {card.sections.map((section, sectionIndex: number) => (
                                 <div key={`section-${sectionIndex}`} className={cn(styles['card-section'], { [styles.mobile]: isMobile, [styles.feature]: index === 0})}>
                                     {section.rows.map((row, rowIndex: number) => (
-                                        <div className={styles['row']}>
-                                            <div className={styles['row-divider']}></div>
+                                        <div className={styles.row}>
+                                            <div className={styles['row-divider']} />
                                             <div key={`row-${rowIndex}`} className={styles['card-row']}>
                                                 { ((isMobile) || (index === 0)) && (
-                                                    <span className={cn(styles['card-row-col'], styles['mobile'], styles['feature-name'])}>
+                                                    <span className={cn(styles['card-row-col'], styles.mobile, styles['feature-name'])}>
                                                         {row.icon && iconFromName(row.icon)}
                                                         {row.label ?
                                                             <span className={cn('overline', styles.label)}>{row.label}</span> :
@@ -68,20 +68,18 @@ const FormCardSet: React.FC<FormCardSetProps> = ({ name, cards, onChange, value
                                                         }
                                                         {row.infoIcon && (
                                                             <Tooltip
-                                                              content={row.tooltipText}
-                                                              trigger={<IconSolid.InformationCircleIcon className={styles['info-icon']} width={16} height={16} />}
+                                                                content={row.tooltipText}
+                                                                trigger={<IconSolid.InformationCircleIcon className={styles['info-icon']} width={16} height={16} />}
                                                             />
                                                         )}
                                                     </span>
                                                 )}
-                                                {(
-                                                    <span className={cn(styles['card-row-col'], styles['center'])}>
-                                                        { row.valueIcon ?
-                                                            <IconOutline.CheckIcon width={18} height={16} /> :
-                                                            <span className='body-main'>{row.text}</span>
-                                                        }
-                                                    </span>
-                                                )}
+                                                <span className={cn(styles['card-row-col'], styles.center)}>
+                                                    { row.valueIcon ?
+                                                        <IconOutline.CheckIcon width={18} height={16} /> :
+                                                        <span className='body-main'>{row.text}</span>
+                                                    }
+                                                </span>
                                             </div>
                                         </div>
                                     ))}
diff --git a/src-ts/lib/form/form-groups/form-group-item/FormGroupItem.tsx b/src-ts/lib/form/form-groups/form-group-item/FormGroupItem.tsx
index 3b8840156..8f290ddaf 100644
--- a/src-ts/lib/form/form-groups/form-group-item/FormGroupItem.tsx
+++ b/src-ts/lib/form/form-groups/form-group-item/FormGroupItem.tsx
@@ -24,52 +24,48 @@ interface ItemRowProps {
     title?: string,
 }
 
-const TwoColumnItem: React.FC<ItemRowProps> = ({ element, formInputs, hasMultipleGroups, instructions, isMultiFieldGroup, title, renderDividers }: ItemRowProps) => {
-    return (
-        <>
-            <div className={cn(styles['form-group-item'], !isMultiFieldGroup && styles['single-field'])}>
-                {
-                    isMultiFieldGroup && (
-                        <div className={styles['left']}>
-                            <h3 className={styles['title']}>
-                                {title}
-                            </h3>
-                            <div className={styles['group-item-instructions']} dangerouslySetInnerHTML={{ __html: instructions || '' }} />
-                        </div>
-                    )
-                }
-                {element}
-                <div className={styles['right']}>
-                    {formInputs}
-                </div>
-            </div>
+const TwoColumnItem: React.FC<ItemRowProps> = ({ element, formInputs, hasMultipleGroups, instructions, isMultiFieldGroup, title, renderDividers }: ItemRowProps) => (
+    <>
+        <div className={cn(styles['form-group-item'], !isMultiFieldGroup && styles['single-field'])}>
             {
-                renderDividers !== false && <PageDivider styleNames={[!hasMultipleGroups ? 'spacingSmall' : '']} />
+                isMultiFieldGroup && (
+                    <div className={styles.left}>
+                        <h3 className={styles.title}>
+                            {title}
+                        </h3>
+                        <div className={styles['group-item-instructions']} dangerouslySetInnerHTML={{ __html: instructions || '' }} />
+                    </div>
+                )
             }
-        </>
-    )
-}
-
-const SingleColumnItem: React.FC<ItemRowProps> = ({ formInputs, hasMultipleGroups, instructions, isMultiFieldGroup, title }: ItemRowProps) => {
-    return (
-        <>
-            <div className={cn(styles['form-group-item'], styles['full-width-container'])}>
-                {
-                    isMultiFieldGroup && (
-                        <>
-                            <h3 className={styles['title']}>
-                                {title}
-                            </h3>
-                            <div className={styles['group-item-instructions']} dangerouslySetInnerHTML={{ __html: instructions || '' }} />
-                        </>
-                    )
-                }
-                <div className={styles['full-width-items']}>{formInputs}</div>
+            {element}
+            <div className={styles.right}>
+                {formInputs}
             </div>
-            <PageDivider styleNames={[!hasMultipleGroups ? 'spacingSmall' : '']} />
-        </>
-    )
-}
+        </div>
+        {
+            renderDividers !== false && <PageDivider styleNames={[!hasMultipleGroups ? 'spacingSmall' : '']} />
+        }
+    </>
+)
+
+const SingleColumnItem: React.FC<ItemRowProps> = ({ formInputs, hasMultipleGroups, instructions, isMultiFieldGroup, title }: ItemRowProps) => (
+    <>
+        <div className={cn(styles['form-group-item'], styles['full-width-container'])}>
+            {
+                isMultiFieldGroup && (
+                    <>
+                        <h3 className={styles.title}>
+                            {title}
+                        </h3>
+                        <div className={styles['group-item-instructions']} dangerouslySetInnerHTML={{ __html: instructions || '' }} />
+                    </>
+                )
+            }
+            <div className={styles['full-width-items']}>{formInputs}</div>
+        </div>
+        <PageDivider styleNames={[!hasMultipleGroups ? 'spacingSmall' : '']} />
+    </>
+)
 
 const FormGroupItem: React.FC<FormGroupItemProps> = ({ group, renderDividers, renderFormInput, totalGroupCount }: FormGroupItemProps) => {
     const { instructions, title, inputs, element }: FormGroup = group
diff --git a/src-ts/lib/form/form-groups/form-input-row/FormInputRow.tsx b/src-ts/lib/form/form-groups/form-input-row/FormInputRow.tsx
index 68090a0b0..96e2870e7 100644
--- a/src-ts/lib/form/form-groups/form-input-row/FormInputRow.tsx
+++ b/src-ts/lib/form/form-groups/form-input-row/FormInputRow.tsx
@@ -1,7 +1,7 @@
 import classNames from 'classnames'
 import { ReactNode } from 'react'
 
-import '../../../../lib/styles/index.scss'
+import "../../../styles/index.scss"
 import { FormInputModel } from '../../form-input.model'
 
 import styles from './FormInputRow.module.scss'
diff --git a/src-ts/lib/form/form-groups/form-input/input-file-picker/InputFilePicker.tsx b/src-ts/lib/form/form-groups/form-input/input-file-picker/InputFilePicker.tsx
index b22b21540..118113f0d 100644
--- a/src-ts/lib/form/form-groups/form-input/input-file-picker/InputFilePicker.tsx
+++ b/src-ts/lib/form/form-groups/form-input/input-file-picker/InputFilePicker.tsx
@@ -58,7 +58,7 @@ const InputFilePicker: FC<InputFilePickerProps> = (props: InputFilePickerProps)
             />
             <input
                 name={props.name}
-                type={'file'}
+                type="file"
                 accept={props.fileConfig?.acceptFileType || '*'}
                 className={styles.filePickerInput}
                 ref={fileInputRef}
diff --git a/src-ts/lib/form/form-groups/form-input/input-image-picker/InputImagePicker.tsx b/src-ts/lib/form/form-groups/form-input/input-image-picker/InputImagePicker.tsx
index d724b8ade..9296d07d0 100644
--- a/src-ts/lib/form/form-groups/form-input/input-image-picker/InputImagePicker.tsx
+++ b/src-ts/lib/form/form-groups/form-input/input-image-picker/InputImagePicker.tsx
@@ -1,6 +1,6 @@
 import { ChangeEvent, createRef, Dispatch, FC, RefObject, SetStateAction, useEffect, useState } from 'react'
 
-import { Button, IconOutline } from '../../../../../lib'
+import { Button, IconOutline } from "../../../.."
 import { InputValue } from '../../../form-input.model'
 
 import styles from './InputImagePicker.module.scss'
@@ -32,6 +32,7 @@ const InputImagePicker: FC<InputImagePickerProps> = (props: InputImagePickerProp
                     setFileDataURL(result)
                 }
             }
+
             fileReader.readAsDataURL(files[0])
         } else if (fileDataURL) {
             setFileDataURL(undefined)
@@ -50,7 +51,7 @@ const InputImagePicker: FC<InputImagePickerProps> = (props: InputImagePickerProp
                 onClick={() => fileInputRef.current?.click()} />
             <input
                 name={props.name}
-                type={'file'}
+                type="file"
                 accept={props.fileConfig?.acceptFileType || '*'}
                 className={styles.filePickerInput}
                 ref={fileInputRef}
@@ -62,7 +63,7 @@ const InputImagePicker: FC<InputImagePickerProps> = (props: InputImagePickerProp
             />
             {
                 fileDataURL ? (
-                    <img src={fileDataURL} alt={'Badge preview'} className={styles.badgeImage} />
+                    <img src={fileDataURL} alt="Badge preview" className={styles.badgeImage} />
                 ) : (
                     <div className={styles.filePickerPlaceholder}>UPLOAD<br />IMAGE</div>
                 )
diff --git a/src-ts/lib/form/form-groups/form-input/input-rating/InputRating.tsx b/src-ts/lib/form/form-groups/form-input/input-rating/InputRating.tsx
index 721745978..6a64bd35c 100644
--- a/src-ts/lib/form/form-groups/form-input/input-rating/InputRating.tsx
+++ b/src-ts/lib/form/form-groups/form-input/input-rating/InputRating.tsx
@@ -71,8 +71,8 @@ const InputRating: FC<InputRatingProps> = (props: InputRatingProps) => {
             {...props}
             dirty={!!props.dirty}
             disabled={!!props.disabled}
-            hint={''}
-            label={''}
+            hint=""
+            label=""
             type='rating'
             className={styles['rating-input-wrapper']}
             hideInlineErrors={props.hideInlineErrors}
diff --git a/src-ts/lib/form/form-groups/form-input/input-select/InputSelect.tsx b/src-ts/lib/form/form-groups/form-input/input-select/InputSelect.tsx
index cc4db7122..1dbf52317 100644
--- a/src-ts/lib/form/form-groups/form-input/input-select/InputSelect.tsx
+++ b/src-ts/lib/form/form-groups/form-input/input-select/InputSelect.tsx
@@ -68,7 +68,7 @@ const InputSelect: FC<InputSelectProps> = (props: InputSelectProps) => {
             hideInlineErrors={props.hideInlineErrors}
             ref={triggerRef}
         >
-            <div className={styles['selected']} onClick={() => !props.disabled && toggleMenu()}>
+            <div className={styles.selected} onClick={() => !props.disabled && toggleMenu()}>
                 <span className='body-small'>{selectedOption ? label(selectedOption) : ''}</span>
                 <span className={styles['selected-icon']}>
                     <IconOutline.ChevronDownIcon />
diff --git a/src-ts/lib/form/form-groups/form-input/input-textarea/InputTextarea.tsx b/src-ts/lib/form/form-groups/form-input/input-textarea/InputTextarea.tsx
index b344cc027..579af6c56 100644
--- a/src-ts/lib/form/form-groups/form-input/input-textarea/InputTextarea.tsx
+++ b/src-ts/lib/form/form-groups/form-input/input-textarea/InputTextarea.tsx
@@ -22,30 +22,28 @@ interface InputTextareaProps {
     readonly value?: string | number
 }
 
-const InputTextarea: FC<InputTextareaProps> = (props: InputTextareaProps) => {
-    return (
-        <InputWrapper
-            {...props}
-            dirty={!!props.dirty}
+const InputTextarea: FC<InputTextareaProps> = (props: InputTextareaProps) => (
+    <InputWrapper
+        {...props}
+        dirty={!!props.dirty}
+        disabled={!!props.disabled}
+        label={props.label || props.name}
+        type='textarea'
+        hideInlineErrors={props.hideInlineErrors}
+    >
+        <textarea
+            autoComplete={props.autocomplete}
+            className={styles['form-input-textarea']}
+            defaultValue={props.value}
             disabled={!!props.disabled}
-            label={props.label || props.name}
-            type='textarea'
-            hideInlineErrors={props.hideInlineErrors}
-        >
-            <textarea
-                autoComplete={props.autocomplete}
-                className={styles['form-input-textarea']}
-                defaultValue={props.value}
-                disabled={!!props.disabled}
-                name={props.name}
-                onBlur={props.onBlur}
-                onChange={props.onChange}
-                placeholder={props.placeholder}
-                spellCheck={!!props.spellCheck}
-                tabIndex={props.tabIndex}
-            />
-        </InputWrapper>
-    )
-}
+            name={props.name}
+            onBlur={props.onBlur}
+            onChange={props.onChange}
+            placeholder={props.placeholder}
+            spellCheck={!!props.spellCheck}
+            tabIndex={props.tabIndex}
+        />
+    </InputWrapper>
+)
 
 export default InputTextarea
diff --git a/src-ts/lib/form/form-groups/form-radio/index.tsx b/src-ts/lib/form/form-groups/form-radio/index.tsx
index 5adecaaae..0107ad2ae 100644
--- a/src-ts/lib/form/form-groups/form-radio/index.tsx
+++ b/src-ts/lib/form/form-groups/form-radio/index.tsx
@@ -10,17 +10,15 @@ interface FormRadioProps extends FormInputModel {
 
 const FormRadio: React.FC<FormRadioProps> = ({type, name, options, onChange, value}: FormRadioProps) => {
 
-    const renderOption: (Option: JSX.Element, selected: boolean) => React.FunctionComponentElement<any> = (Option: JSX.Element, selected: boolean) => {
-        return React.cloneElement(Option, {
-            selected,
-        })
-    }
+    const renderOption: (Option: JSX.Element, selected: boolean) => React.FunctionComponentElement<any> = (Option: JSX.Element, selected: boolean) => React.cloneElement(Option, {
+        selected,
+    })
 
     return (
         <div className={styles['form-radio']}>
             {
                 options?.map(({children: Option, id}: FormRadioButtonOption)  => (
-                    <label key={id} className={styles['option']} htmlFor={id}>
+                    <label key={id} className={styles.option} htmlFor={id}>
                         <input checked={value === id} type={type} name={name} id={id} value={id} onChange={onChange} />
                         {renderOption(Option, value === id)}
                     </label>
diff --git a/src-ts/lib/form/validator-functions/index.ts b/src-ts/lib/form/validator-functions/index.ts
index 981143aa5..4dbf048d6 100644
--- a/src-ts/lib/form/validator-functions/index.ts
+++ b/src-ts/lib/form/validator-functions/index.ts
@@ -8,5 +8,5 @@ export {
     sslUrl as validatorSslUrl,
 } from './validator.functions'
 export
-    // tslint:disable-next-line: no-unused-expression
+// tslint:disable-next-line: no-unused-expression
 type { ValidatorFn } from './validator.functions'
diff --git a/src-ts/lib/form/validator-functions/validator.functions.ts b/src-ts/lib/form/validator-functions/validator.functions.ts
index dbf89559a..ec59f2449 100644
--- a/src-ts/lib/form/validator-functions/validator.functions.ts
+++ b/src-ts/lib/form/validator-functions/validator.functions.ts
@@ -104,7 +104,9 @@ export function requiredIfOther(value: InputValue, formElements?: HTMLFormContro
     const otherField: HTMLInputElement = getOtherField(formElements, otherFieldName)
     if (typeof value === 'string' && !otherField.value) {
         return undefined
-    } else if (typeof value === 'boolean' && otherField.value !== undefined) {
+    }
+
+    if (typeof value === 'boolean' && otherField.value !== undefined) {
         return undefined
     }
 
diff --git a/src-ts/lib/functions/authentication-functions/authentication-url.config.ts b/src-ts/lib/functions/authentication-functions/authentication-url.config.ts
index 1cbee2247..37d28a94c 100644
--- a/src-ts/lib/functions/authentication-functions/authentication-url.config.ts
+++ b/src-ts/lib/functions/authentication-functions/authentication-url.config.ts
@@ -9,7 +9,7 @@ export function login(returnUrl?: string): string {
     return `${authentication}?retUrl=${encodeURIComponent(retUrl)}`
 }
 
-export const logout: string = `${authentication}?logout=true&retUrl=${encodeURIComponent('https://' + window.location.host)}`
+export const logout: string = `${authentication}?logout=true&retUrl=${encodeURIComponent(`https://${  window.location.host}`)}`
 
 export function signup(returnUrl?: string, regSource?: AuthenticationRegistrationSource): string {
     return `${login(returnUrl)}&mode=signUp${!!regSource ? `&regSource=${regSource}` : ''}`
diff --git a/src-ts/lib/functions/file-functions/file.functions.ts b/src-ts/lib/functions/file-functions/file.functions.ts
index 1e1f9177c..fb97ca765 100644
--- a/src-ts/lib/functions/file-functions/file.functions.ts
+++ b/src-ts/lib/functions/file-functions/file.functions.ts
@@ -26,6 +26,7 @@ export function fileCreateFromCanvas(canvas: HTMLCanvasElement, fileName: string
                 reject()
                 return
             }
+
             resolve(
                 new File([blob], fileName, {type: blob.type})
             )
diff --git a/src-ts/lib/hooks/use-on-hover-element.hook.ts b/src-ts/lib/hooks/use-on-hover-element.hook.ts
index 0425a1222..91c669b96 100644
--- a/src-ts/lib/hooks/use-on-hover-element.hook.ts
+++ b/src-ts/lib/hooks/use-on-hover-element.hook.ts
@@ -28,6 +28,7 @@ export function useOnHoverElement(
         if (!!nextVal !== !!counter.current) {
             cb(nextVal > 0)
         }
+
         counter.current = nextVal
     }, [cb])
 
diff --git a/src-ts/lib/hooks/use-window-size.hook.ts b/src-ts/lib/hooks/use-window-size.hook.ts
index df3944a28..e080bad67 100644
--- a/src-ts/lib/hooks/use-window-size.hook.ts
+++ b/src-ts/lib/hooks/use-window-size.hook.ts
@@ -6,29 +6,29 @@ export interface WindowSize {
 }
 
 export function useWindowSize(): WindowSize {
-  const [windowSize, setWindowSize]: [WindowSize, Dispatch<SetStateAction<WindowSize>>] = useState({
-    height: 0,
-    width: 0,
-  })
+    const [windowSize, setWindowSize]: [WindowSize, Dispatch<SetStateAction<WindowSize>>] = useState({
+        height: 0,
+        width: 0,
+    })
 
-  const handleResize: () => void = useCallback(() => {
+    const handleResize: () => void = useCallback(() => {
     // Set window width/height to state
-    setWindowSize({
-      height: window.innerHeight,
-      width: window.innerWidth,
-    })
-  }, [])
+        setWindowSize({
+            height: window.innerHeight,
+            width: window.innerWidth,
+        })
+    }, [])
 
-  useEffect(() => {
+    useEffect(() => {
     // Add event listener
-    window.addEventListener('resize', handleResize)
+        window.addEventListener('resize', handleResize)
 
-    // Call handler right away so state gets updated with initial window size
-    handleResize()
+        // Call handler right away so state gets updated with initial window size
+        handleResize()
 
-    // Remove event listener on cleanup
-    return () => window.removeEventListener('resize', handleResize)
-  }, [handleResize]) // Empty array ensures that effect is only run on mount
+        // Remove event listener on cleanup
+        return () => window.removeEventListener('resize', handleResize)
+    }, [handleResize]) // Empty array ensures that effect is only run on mount
 
-  return windowSize
+    return windowSize
 }
diff --git a/src-ts/lib/info-card/InfoCard.tsx b/src-ts/lib/info-card/InfoCard.tsx
index 5ff36a87f..b8c860a84 100644
--- a/src-ts/lib/info-card/InfoCard.tsx
+++ b/src-ts/lib/info-card/InfoCard.tsx
@@ -37,7 +37,7 @@ const InfoCard: FC<InfoCardProps> = ({
             {renderHeader(isCollapsible, isOpen, setIsOpen, title || '')}
 
             {showSpacing && (
-                <div className={styles.spacing}></div>
+                <div className={styles.spacing} />
             )}
 
             {isOpen &&
diff --git a/src-ts/lib/loading-spinner/LoadingSpinner.tsx b/src-ts/lib/loading-spinner/LoadingSpinner.tsx
index c2a310e3e..478fb6c7a 100644
--- a/src-ts/lib/loading-spinner/LoadingSpinner.tsx
+++ b/src-ts/lib/loading-spinner/LoadingSpinner.tsx
@@ -28,7 +28,7 @@ const LoadingSpinner: FC<LoadingSpinnerProps> = ({ hide, className, type = 'Norm
     const isOverlay: boolean = type === 'Overlay'
     return (
         <div className={classNames(styles['loading-spinner'], styles.show, {[styles.overlay]: isOverlay}, className)}>
-            <PuffLoader color={'#2196f3'} loading={true} size={100} />
+            <PuffLoader color="#2196f3" loading size={100} />
         </div>
     )
 }
diff --git a/src-ts/lib/modals/base-modal/BaseModal.tsx b/src-ts/lib/modals/base-modal/BaseModal.tsx
index f26ef670d..5ab65ac2d 100644
--- a/src-ts/lib/modals/base-modal/BaseModal.tsx
+++ b/src-ts/lib/modals/base-modal/BaseModal.tsx
@@ -15,25 +15,22 @@ const BaseModal: FC<BaseModalProps> = ({
     children,
     title,
     ...props
-}: BaseModalProps) => {
-
-    return (
-        <Modal
-            {...props}
-            classNames={{ modal: `modal-${props.size || 'md'}` }}
-            closeIcon={<IconOutline.XIcon width={28} height={28} />}
-        >
-            <div className={styles['modal-header']}>
-                <h3>{title}</h3>
-            </div>
-
-            <hr className={styles['spacer']} />
-
-            <div className={classNames(styles['modal-body'], 'modal-body')}>
-                {children}
-            </div>
-        </Modal>
-    )
-}
+}: BaseModalProps) => (
+    <Modal
+        {...props}
+        classNames={{ modal: `modal-${props.size || 'md'}` }}
+        closeIcon={<IconOutline.XIcon width={28} height={28} />}
+    >
+        <div className={styles['modal-header']}>
+            <h3>{title}</h3>
+        </div>
+
+        <hr className={styles.spacer} />
+
+        <div className={classNames(styles['modal-body'], 'modal-body')}>
+            {children}
+        </div>
+    </Modal>
+)
 
 export default BaseModal
diff --git a/src-ts/lib/modals/confirm/ConfirmModal.tsx b/src-ts/lib/modals/confirm/ConfirmModal.tsx
index 887e955de..7b51536eb 100755
--- a/src-ts/lib/modals/confirm/ConfirmModal.tsx
+++ b/src-ts/lib/modals/confirm/ConfirmModal.tsx
@@ -15,31 +15,29 @@ const ConfirmModal: FC<ConfirmModalProps> = ({
     onConfirm,
     action = 'Confirm',
     ...props
-}: ConfirmModalProps) => {
-    return (
-        <BaseModal
-            {...props}
-            styles={{ modal: { maxWidth: '450px' } }}
-        >
-            {children}
-            <div className='button-container'>
-                <Button
-                    label='Cancel'
-                    onClick={props.onClose}
-                    tabIndex={1}
-                    buttonStyle='secondary'
-                    size='lg'
-                />
-                <Button
-                    buttonStyle='primary'
-                    label={action}
-                    onClick={onConfirm}
-                    tabIndex={2}
-                    size='lg'
-                />
-            </div>
-        </BaseModal>
-    )
-}
+}: ConfirmModalProps) => (
+    <BaseModal
+        {...props}
+        styles={{ modal: { maxWidth: '450px' } }}
+    >
+        {children}
+        <div className='button-container'>
+            <Button
+                label='Cancel'
+                onClick={props.onClose}
+                tabIndex={1}
+                buttonStyle='secondary'
+                size='lg'
+            />
+            <Button
+                buttonStyle='primary'
+                label={action}
+                onClick={onConfirm}
+                tabIndex={2}
+                size='lg'
+            />
+        </div>
+    </BaseModal>
+)
 
 export default ConfirmModal
diff --git a/src-ts/lib/page-divider/PageDivider.tsx b/src-ts/lib/page-divider/PageDivider.tsx
index 790fe00aa..7654422ef 100644
--- a/src-ts/lib/page-divider/PageDivider.tsx
+++ b/src-ts/lib/page-divider/PageDivider.tsx
@@ -11,7 +11,7 @@ const PageDivider: FC<PageDividerProps> = ({ styleNames = [] }) => {
 
     const additionalStyles: Array<{ [key: string]: any }> = styleNames.map((style) => styles[style])
 
-    return <div className={cn(styles.divider, ...additionalStyles)}></div>
+    return <div className={cn(styles.divider, ...additionalStyles)} />
 }
 
 export default PageDivider
diff --git a/src-ts/lib/payment-form/PaymentForm.tsx b/src-ts/lib/payment-form/PaymentForm.tsx
index 6b35de399..8c6384e8b 100644
--- a/src-ts/lib/payment-form/PaymentForm.tsx
+++ b/src-ts/lib/payment-form/PaymentForm.tsx
@@ -2,7 +2,7 @@ import {
     CardCvcElement,
     CardExpiryElement,
     CardNumberElement,
-  } from '@stripe/react-stripe-js'
+} from '@stripe/react-stripe-js'
 import { StripeCardCvcElementChangeEvent, StripeCardExpiryElementChangeEvent, StripeCardNumberElementChangeEvent } from '@stripe/stripe-js'
 import cn from 'classnames'
 import React, { Dispatch, SetStateAction, useContext, useState } from 'react'
@@ -73,7 +73,7 @@ const PaymentForm: React.FC<PaymentFormProps> = (props: PaymentFormProps) => {
     const renderCheckboxLabel: () => JSX.Element = () => (
         <div className={styles['checkbox-label']}>
             Yes, I understand and agree to Topcoder’s
-             <span className={styles['link']} onClick={onOpenOrderContract}>Order Contract</span>
+            <span className={styles.link} onClick={onOpenOrderContract}>Order Contract</span>
         </div>
     )
 
@@ -93,7 +93,7 @@ const PaymentForm: React.FC<PaymentFormProps> = (props: PaymentFormProps) => {
                 isOpen={isOrderContractModalOpen}
                 onClose={() => setIsOrderContractModalOpen(false)}
             />
-            <div className={styles['label']}>Contact Information</div>
+            <div className={styles.label}>Contact Information</div>
             <InputText
                 label='Email'
                 placeholder='email'
@@ -104,10 +104,10 @@ const PaymentForm: React.FC<PaymentFormProps> = (props: PaymentFormProps) => {
                 value={profile?.email}
             />
 
-            <div className={styles['label']}>Card Information</div>
+            <div className={styles.label}>Card Information</div>
 
             <InputWrapper
-                className={cn(styles['input-wrapper'], !!cardNumberError && styles['error'])}
+                className={cn(styles['input-wrapper'], !!cardNumberError && styles.error)}
                 label='Card Number'
                 tabIndex={2}
                 type='text'
@@ -119,7 +119,7 @@ const PaymentForm: React.FC<PaymentFormProps> = (props: PaymentFormProps) => {
                 <CardNumberElement
                     options={{
                         classes: {
-                            base: styles['cardElement'],
+                            base: styles.cardElement,
                         },
                     }}
                     onChange={(event: StripeCardNumberElementChangeEvent) => cardElementOnChange('cardComplete', event, setCardNumberError)}
@@ -128,7 +128,7 @@ const PaymentForm: React.FC<PaymentFormProps> = (props: PaymentFormProps) => {
 
             <div className={styles['date-cvv-wrapper']}>
                 <InputWrapper
-                    className={cn(styles['input-wrapper'], !!cardExpiryError && styles['error'])}
+                    className={cn(styles['input-wrapper'], !!cardExpiryError && styles.error)}
                     label='Date'
                     tabIndex={3}
                     type='text'
@@ -139,7 +139,7 @@ const PaymentForm: React.FC<PaymentFormProps> = (props: PaymentFormProps) => {
                     <CardExpiryElement
                         options={{
                             classes: {
-                                base: styles['cardElement'],
+                                base: styles.cardElement,
                             },
                             placeholder: 'MM/YY',
                         }}
@@ -147,7 +147,7 @@ const PaymentForm: React.FC<PaymentFormProps> = (props: PaymentFormProps) => {
                     />
                 </InputWrapper>
                 <InputWrapper
-                    className={cn(styles['input-wrapper'], !!cardCVVError && styles['error'])}
+                    className={cn(styles['input-wrapper'], !!cardCVVError && styles.error)}
                     label='CVC'
                     tabIndex={3}
                     type='text'
@@ -158,7 +158,7 @@ const PaymentForm: React.FC<PaymentFormProps> = (props: PaymentFormProps) => {
                     <CardCvcElement
                         options={{
                             classes: {
-                                base: styles['cardElement'],
+                                base: styles.cardElement,
                             },
                             placeholder: 'CCV',
                         }}
@@ -183,7 +183,7 @@ const PaymentForm: React.FC<PaymentFormProps> = (props: PaymentFormProps) => {
                     value={props.formData.country}
                     onChange={(option) => props.onUpdateField('country', option)}
                     options={COUNTRIES_OPTIONS}
-                    style2={true}
+                    style2
                 />
             </InputWrapper>
 
@@ -212,7 +212,7 @@ const PaymentForm: React.FC<PaymentFormProps> = (props: PaymentFormProps) => {
 
             {
                 props.error && (
-                    <div className={styles['error']}>
+                    <div className={styles.error}>
                         Your card was declined. Please try a different card.
                     </div>
                 )
diff --git a/src-ts/lib/payment-form/constants/index.tsx b/src-ts/lib/payment-form/constants/index.tsx
index f1574fc57..2c4da3cc7 100644
--- a/src-ts/lib/payment-form/constants/index.tsx
+++ b/src-ts/lib/payment-form/constants/index.tsx
@@ -1,6 +1,6 @@
 import countries from './countries.json'
 
 export const COUNTRIES_OPTIONS: any = countries.map((ct) => ({
-  label: ct.name,
-  value: ct.code,
+    label: ct.name,
+    value: ct.code,
 }))
diff --git a/src-ts/lib/portal/Portal.tsx b/src-ts/lib/portal/Portal.tsx
index 2a82d2e15..6ae498572 100755
--- a/src-ts/lib/portal/Portal.tsx
+++ b/src-ts/lib/portal/Portal.tsx
@@ -23,6 +23,7 @@ const Portal: FC<PortalProps> = (props: PortalProps) => {
         if (props.className) {
             backupHtmlNode.classList.add(props.className)
         }
+
         return backupHtmlNode
     }, [props.portalId, props.portalNode, props.className]) as HTMLElement
 
@@ -30,6 +31,7 @@ const Portal: FC<PortalProps> = (props: PortalProps) => {
         if (defaultPortalNode) {
             document.body.appendChild(defaultPortalNode)
         }
+
         return () => {
             if (defaultPortalNode) {
                 document.body.removeChild(defaultPortalNode)
diff --git a/src-ts/lib/progress-bar/ProgressBar.tsx b/src-ts/lib/progress-bar/ProgressBar.tsx
index 36285a9fb..694175062 100644
--- a/src-ts/lib/progress-bar/ProgressBar.tsx
+++ b/src-ts/lib/progress-bar/ProgressBar.tsx
@@ -13,8 +13,8 @@ const ProgressBar: FC<ProgressBarProps> = (props: ProgressBarProps) => {
     }
 
     return (
-        <div className={styles['wrap']}>
-            <div className='progress' style={progressProps}></div>
+        <div className={styles.wrap}>
+            <div className='progress' style={progressProps} />
         </div>
     )
 }
diff --git a/src-ts/lib/radio-button/RadioButton.tsx b/src-ts/lib/radio-button/RadioButton.tsx
index ce16503ef..3ce2edebf 100644
--- a/src-ts/lib/radio-button/RadioButton.tsx
+++ b/src-ts/lib/radio-button/RadioButton.tsx
@@ -10,16 +10,14 @@ interface RadioProps {
     selected?: boolean
 }
 
-const RadioButton: FC<RadioProps> = ({ icon, name, selected, isRecommended }: RadioProps) => {
-    return (
-        <div className={cn(styles['bug-delivery-radio'], { [styles.selected]: selected, [styles.recommended]: isRecommended })}>
-            <>
-                {icon}
-                <div className={styles['name']}>{name}</div>
-                {isRecommended && <div className={styles['recommended-text-wrapper']}>Recommended</div>}
-            </>
-        </div>
-    )
-}
+const RadioButton: FC<RadioProps> = ({ icon, name, selected, isRecommended }: RadioProps) => (
+    <div className={cn(styles['bug-delivery-radio'], { [styles.selected]: selected, [styles.recommended]: isRecommended })}>
+        <>
+            {icon}
+            <div className={styles.name}>{name}</div>
+            {isRecommended && <div className={styles['recommended-text-wrapper']}>Recommended</div>}
+        </>
+    </div>
+)
 
 export default RadioButton
diff --git a/src-ts/lib/react-select/ReactSelect.tsx b/src-ts/lib/react-select/ReactSelect.tsx
index 3de42958c..9e7927e3b 100644
--- a/src-ts/lib/react-select/ReactSelect.tsx
+++ b/src-ts/lib/react-select/ReactSelect.tsx
@@ -20,88 +20,88 @@ interface ReactSelectProps {
 
 const ReactSelect: React.FC<ReactSelectProps> = (props) => {
     // TODO: Refactor this closer to the other css setup on other input fields
-   const customStyles: any = {
-     control: (provided: any, state: any) => ({
-        ...provided,
-        border: props.style2 ? '0' : '1px solid #aaaaab',
-        borderColor: state.isFocused ? '#55a5ff' : '#aaaaab',
-        boxShadow: props.style2
-            ? 'none'
-            : state.isFocused
-            ? '0 0 2px 1px #cee6ff'
-            : provided.boxShadow,
-        minHeight: '22px',
-    }),
-     indicatorContainer: (provided: any) => ({
-        padding: '0',
-    }),
-     indicatorSeparator: () => ({
-        display: 'none',
-    }),
-     indicatorsContainer: (provided: any) => ({
-        ...provided,
-        height: '30px',
-        marginTop: '-5px',
-        width: '30px',
-    }),
-     input: (provided: any) => ({
-        ...provided,
-        fontSize: props.style2 ? '20px' : '14px',
-        height: '22px',
-        margin: '0px',
-        padding: '0',
-    }),
-     menu: (provided: any) => ({
-        ...provided,
-        minHeight: '40px',
-        zIndex: 10,
-    }),
-     multiValue: (provided: any) => ({
-        ...provided,
-        borderRadius: '5px',
-        color: '#AAAAAA',
-        fontFamily: 'Roboto',
-        fontSize: '14px',
-        lineHeight: '22px',
-        margin: '3px 3px',
-        textAlign: 'left',
-    }),
-     option: (provided: any) => ({
-        ...provided,
-        minHeight: '32px',
-    }),
-     placeholder: (provided: any) => ({
-        ...provided,
-        color: '#AAAAAA',
-        fontFamily: 'Roboto',
-        fontSize: '14px',
-        fontWeight: '400',
-        lineHeight: '22px',
-        marginTop: '0',
-        paddingLeft: '0',
-        textAlign: 'left',
-    }),
-     singleValue: (provided: any) => ({
-        ...provided,
-        color: '#7F7F7F',
-        fontSize: '14px',
-        lineHeight: '24px',
-        marginLeft: 0,
-    }),
-     valueContainer: (provided: any) => ({
-        ...provided,
-        padding: 0,
-     }),
-   }
+    const customStyles: any = {
+        control: (provided: any, state: any) => ({
+            ...provided,
+            border: props.style2 ? '0' : '1px solid #aaaaab',
+            borderColor: state.isFocused ? '#55a5ff' : '#aaaaab',
+            boxShadow: props.style2
+                ? 'none'
+                : state.isFocused
+                    ? '0 0 2px 1px #cee6ff'
+                    : provided.boxShadow,
+            minHeight: '22px',
+        }),
+        indicatorContainer: (provided: any) => ({
+            padding: '0',
+        }),
+        indicatorSeparator: () => ({
+            display: 'none',
+        }),
+        indicatorsContainer: (provided: any) => ({
+            ...provided,
+            height: '30px',
+            marginTop: '-5px',
+            width: '30px',
+        }),
+        input: (provided: any) => ({
+            ...provided,
+            fontSize: props.style2 ? '20px' : '14px',
+            height: '22px',
+            margin: '0px',
+            padding: '0',
+        }),
+        menu: (provided: any) => ({
+            ...provided,
+            minHeight: '40px',
+            zIndex: 10,
+        }),
+        multiValue: (provided: any) => ({
+            ...provided,
+            borderRadius: '5px',
+            color: '#AAAAAA',
+            fontFamily: 'Roboto',
+            fontSize: '14px',
+            lineHeight: '22px',
+            margin: '3px 3px',
+            textAlign: 'left',
+        }),
+        option: (provided: any) => ({
+            ...provided,
+            minHeight: '32px',
+        }),
+        placeholder: (provided: any) => ({
+            ...provided,
+            color: '#AAAAAA',
+            fontFamily: 'Roboto',
+            fontSize: '14px',
+            fontWeight: '400',
+            lineHeight: '22px',
+            marginTop: '0',
+            paddingLeft: '0',
+            textAlign: 'left',
+        }),
+        singleValue: (provided: any) => ({
+            ...provided,
+            color: '#7F7F7F',
+            fontSize: '14px',
+            lineHeight: '24px',
+            marginLeft: 0,
+        }),
+        valueContainer: (provided: any) => ({
+            ...provided,
+            padding: 0,
+        }),
+    }
 
-   return (
+    return (
         <div className={styles['select-wrapper']}>
             <Select
                 options={props.options}
                 value={props.value}
                 styles={customStyles}
                 onChange={props.onChange}
-                className={props.error ? styles['error'] : ''}
+                className={props.error ? styles.error : ''}
                 isMulti={props.isMulti}
                 onBlur={props.onBlur}
                 onFocus={props.onFocus}
@@ -111,7 +111,7 @@ const ReactSelect: React.FC<ReactSelectProps> = (props) => {
                 isDisabled={props.disabled}
             />
         </div>
-   )
- }
+    )
+}
 
 export default ReactSelect
diff --git a/src-ts/lib/restricted-page/RestrictedPage.tsx b/src-ts/lib/restricted-page/RestrictedPage.tsx
index 91d6a8db9..ca04794e8 100644
--- a/src-ts/lib/restricted-page/RestrictedPage.tsx
+++ b/src-ts/lib/restricted-page/RestrictedPage.tsx
@@ -5,13 +5,13 @@ import { ContentLayout } from '..'
 import styles from './RestrictedPage.module.scss'
 
 export const RestrictedPage: ReactElement =
-  <ContentLayout
-    contentClass={styles['contentLayout']}
-    outerClass={styles['contentLayout-outer']}
-    innerClass={styles['contentLayout-inner']}
-    title='Thanks for visiting'
-  >
-    <div className={styles.container}>
-      <p>Unfortunately, you are not permitted to access the site. If you feel you should be able to, please <a href='/support'>contact us</a>.</p>
-    </div>
-  </ContentLayout>
+    <ContentLayout
+        contentClass={styles.contentLayout}
+        outerClass={styles['contentLayout-outer']}
+        innerClass={styles['contentLayout-inner']}
+        title='Thanks for visiting'
+    >
+        <div className={styles.container}>
+            <p>Unfortunately, you are not permitted to access the site. If you feel you should be able to, please <a href='/support'>contact us</a>.</p>
+        </div>
+    </ContentLayout>
diff --git a/src-ts/lib/route-provider/require-auth-provider/require-auth.provider.tsx b/src-ts/lib/route-provider/require-auth-provider/require-auth.provider.tsx
index 4b6fa5e19..e0963f00d 100644
--- a/src-ts/lib/route-provider/require-auth-provider/require-auth.provider.tsx
+++ b/src-ts/lib/route-provider/require-auth-provider/require-auth.provider.tsx
@@ -9,7 +9,7 @@ interface RequireAuthProviderProps {
     rolesRequired?: Array<string>
 }
 
-function RequireAuthProvider(props: RequireAuthProviderProps): JSX.Element {
+const RequireAuthProvider = (props: RequireAuthProviderProps): JSX.Element => {
 
     const profileContextData: ProfileContextData = useContext(profileContext)
     const { profile, initialized }: ProfileContextData = profileContextData
@@ -26,14 +26,17 @@ function RequireAuthProvider(props: RequireAuthProviderProps): JSX.Element {
             if (!profile.roles) {
                 return RestrictedPage
             }
+
             // if the profile doesn't include all the required roles, show the restricted page
             if (props.rolesRequired.some(role => !profile.roles.includes(role))) {
                 return RestrictedPage
             }
-            return props.children
-        } else {
+
             return props.children
         }
+ 
+        return props.children
+        
     }
 
     // redirect to the login page
diff --git a/src-ts/lib/route-provider/route.provider.tsx b/src-ts/lib/route-provider/route.provider.tsx
index 9cd8a9bea..ee09c1c74 100644
--- a/src-ts/lib/route-provider/route.provider.tsx
+++ b/src-ts/lib/route-provider/route.provider.tsx
@@ -165,7 +165,5 @@ export const RouteProvider: FC<RouteProviderProps> = (props: RouteProviderProps)
 }
 
 function isRootRoute(rootLoggedIn: string | undefined, rootLoggedOut: string): (activePath: string) => boolean {
-    return (activePath: string) => {
-        return [rootLoggedIn, rootLoggedOut].some(route => activePath === route)
-    }
+    return (activePath: string) => [rootLoggedIn, rootLoggedOut].some(route => activePath === route)
 }
diff --git a/src-ts/lib/social-links/facebook/Facebook.tsx b/src-ts/lib/social-links/facebook/Facebook.tsx
index e8b78ab0a..90c923da4 100644
--- a/src-ts/lib/social-links/facebook/Facebook.tsx
+++ b/src-ts/lib/social-links/facebook/Facebook.tsx
@@ -3,14 +3,11 @@ import { FC } from 'react'
 import { SocialIconFacebook } from '../../svgs'
 import { SocialLink } from '../social-link'
 
-const Facebook: FC<{}> = () => {
-
-    return (
-        <SocialLink
-            icon={SocialIconFacebook}
-            url='https://www.facebook.com/topcoder'
-        />
-    )
-}
+const Facebook: FC<{}> = () => (
+    <SocialLink
+        icon={SocialIconFacebook}
+        url='https://www.facebook.com/topcoder'
+    />
+)
 
 export default Facebook
diff --git a/src-ts/lib/social-links/instagram/Instagram.tsx b/src-ts/lib/social-links/instagram/Instagram.tsx
index a7481ff8f..d9d2b2dbd 100644
--- a/src-ts/lib/social-links/instagram/Instagram.tsx
+++ b/src-ts/lib/social-links/instagram/Instagram.tsx
@@ -3,14 +3,11 @@ import { FC } from 'react'
 import { SocialIconInstagram } from '../../svgs'
 import { SocialLink } from '../social-link'
 
-const Instagram: FC<{}> = () => {
-
-    return (
-        <SocialLink
-            icon={SocialIconInstagram}
-            url='https://www.instagram.com/topcoder'
-        />
-    )
-}
+const Instagram: FC<{}> = () => (
+    <SocialLink
+        icon={SocialIconInstagram}
+        url='https://www.instagram.com/topcoder'
+    />
+)
 
 export default Instagram
diff --git a/src-ts/lib/social-links/linked-in/LinkedIn.tsx b/src-ts/lib/social-links/linked-in/LinkedIn.tsx
index 343c4a5cf..8ea3bf9ab 100644
--- a/src-ts/lib/social-links/linked-in/LinkedIn.tsx
+++ b/src-ts/lib/social-links/linked-in/LinkedIn.tsx
@@ -3,14 +3,11 @@ import { FC } from 'react'
 import { SocialIconLinkedIn } from '../../svgs'
 import { SocialLink } from '../social-link'
 
-const LinkedIn: FC<{}> = () => {
-
-    return (
-        <SocialLink
-            icon={SocialIconLinkedIn}
-            url='https://www.linkedin.com/company/topcoder'
-        />
-    )
-}
+const LinkedIn: FC<{}> = () => (
+    <SocialLink
+        icon={SocialIconLinkedIn}
+        url='https://www.linkedin.com/company/topcoder'
+    />
+)
 
 export default LinkedIn
diff --git a/src-ts/lib/social-links/social-link/SocialLink.tsx b/src-ts/lib/social-links/social-link/SocialLink.tsx
index c25f755fa..ec9fabecc 100644
--- a/src-ts/lib/social-links/social-link/SocialLink.tsx
+++ b/src-ts/lib/social-links/social-link/SocialLink.tsx
@@ -1,4 +1,5 @@
 import { FC, SVGProps } from 'react'
+
 interface SocialLinkProps {
     readonly icon: FC<SVGProps<SVGSVGElement>>
     url: string
diff --git a/src-ts/lib/social-links/twitter/Twitter.tsx b/src-ts/lib/social-links/twitter/Twitter.tsx
index 560c3f5aa..8211bc610 100644
--- a/src-ts/lib/social-links/twitter/Twitter.tsx
+++ b/src-ts/lib/social-links/twitter/Twitter.tsx
@@ -3,14 +3,11 @@ import { FC } from 'react'
 import { SocialIconTwitter } from '../../svgs'
 import { SocialLink } from '../social-link'
 
-const Twitter: FC<{}> = () => {
-
-    return (
-        <SocialLink
-            icon={SocialIconTwitter}
-            url='https://twitter.com/topcoder'
-        />
-    )
-}
+const Twitter: FC<{}> = () => (
+    <SocialLink
+        icon={SocialIconTwitter}
+        url='https://twitter.com/topcoder'
+    />
+)
 
 export default Twitter
diff --git a/src-ts/lib/social-links/youtube/Youtube.tsx b/src-ts/lib/social-links/youtube/Youtube.tsx
index 6daa79836..edb5f9698 100644
--- a/src-ts/lib/social-links/youtube/Youtube.tsx
+++ b/src-ts/lib/social-links/youtube/Youtube.tsx
@@ -3,14 +3,11 @@ import { FC } from 'react'
 import { SocialIconYoutube } from '../../svgs'
 import { SocialLink } from '../social-link'
 
-const Youtube: FC<{}> = () => {
-
-    return (
-        <SocialLink
-            icon={SocialIconYoutube}
-            url='https://www.youtube.com/channel/UCFv29ANLT2FQmtvS9DRixNA'
-        />
-    )
-}
+const Youtube: FC<{}> = () => (
+    <SocialLink
+        icon={SocialIconYoutube}
+        url='https://www.youtube.com/channel/UCFv29ANLT2FQmtvS9DRixNA'
+    />
+)
 
 export default Youtube
diff --git a/src-ts/lib/social-share/facebook/FacebookSocialShareBtn.tsx b/src-ts/lib/social-share/facebook/FacebookSocialShareBtn.tsx
index 163636ebb..728ef23c1 100644
--- a/src-ts/lib/social-share/facebook/FacebookSocialShareBtn.tsx
+++ b/src-ts/lib/social-share/facebook/FacebookSocialShareBtn.tsx
@@ -8,17 +8,14 @@ interface FacebookSocialShareBtnProps {
     shareUrl: string
 }
 
-const FacebookSocialShareBtn: FC<FacebookSocialShareBtnProps> = (props: FacebookSocialShareBtnProps) => {
-
-    return (
-        <Button
-            className={props.className}
-            icon={SocialShareFb}
-            url={`https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(props.shareUrl)}&src=share_button`}
-            target='_blank'
-            buttonStyle='icon'
-        />
-    )
-}
+const FacebookSocialShareBtn: FC<FacebookSocialShareBtnProps> = (props: FacebookSocialShareBtnProps) => (
+    <Button
+        className={props.className}
+        icon={SocialShareFb}
+        url={`https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(props.shareUrl)}&src=share_button`}
+        target='_blank'
+        buttonStyle='icon'
+    />
+)
 
 export default FacebookSocialShareBtn
diff --git a/src-ts/lib/social-share/linkedin/LinkedinSocialShareBtn.tsx b/src-ts/lib/social-share/linkedin/LinkedinSocialShareBtn.tsx
index 1caa3b777..d751ee582 100644
--- a/src-ts/lib/social-share/linkedin/LinkedinSocialShareBtn.tsx
+++ b/src-ts/lib/social-share/linkedin/LinkedinSocialShareBtn.tsx
@@ -8,17 +8,14 @@ interface TwitterSocialShareBtnProps {
     shareUrl: string
 }
 
-const TwitterSocialShareBtn: FC<TwitterSocialShareBtnProps> = (props: TwitterSocialShareBtnProps) => {
-
-    return (
-        <Button
-            className={props.className}
-            icon={SocialShareLinkedIn}
-            url={`https://www.linkedin.com/sharing/share-offsite/?url=${encodeURIComponent(props.shareUrl)}`}
-            target='_blank'
-            buttonStyle='icon'
-        />
-    )
-}
+const TwitterSocialShareBtn: FC<TwitterSocialShareBtnProps> = (props: TwitterSocialShareBtnProps) => (
+    <Button
+        className={props.className}
+        icon={SocialShareLinkedIn}
+        url={`https://www.linkedin.com/sharing/share-offsite/?url=${encodeURIComponent(props.shareUrl)}`}
+        target='_blank'
+        buttonStyle='icon'
+    />
+)
 
 export default TwitterSocialShareBtn
diff --git a/src-ts/lib/social-share/twitter/TwitterSocialShareBtn.tsx b/src-ts/lib/social-share/twitter/TwitterSocialShareBtn.tsx
index cfc77b3f1..5aa6dd0f0 100644
--- a/src-ts/lib/social-share/twitter/TwitterSocialShareBtn.tsx
+++ b/src-ts/lib/social-share/twitter/TwitterSocialShareBtn.tsx
@@ -8,17 +8,14 @@ interface TwitterSocialShareBtnProps {
     shareUrl: string
 }
 
-const TwitterSocialShareBtn: FC<TwitterSocialShareBtnProps> = (props: TwitterSocialShareBtnProps) => {
-
-    return (
-        <Button
-            className={props.className}
-            icon={SocialShareTwitter}
-            url={`https://twitter.com/intent/tweet?url=${encodeURIComponent(props.shareUrl)}`}
-            target='_blank'
-            buttonStyle='icon'
-        />
-    )
-}
+const TwitterSocialShareBtn: FC<TwitterSocialShareBtnProps> = (props: TwitterSocialShareBtnProps) => (
+    <Button
+        className={props.className}
+        icon={SocialShareTwitter}
+        url={`https://twitter.com/intent/tweet?url=${encodeURIComponent(props.shareUrl)}`}
+        target='_blank'
+        buttonStyle='icon'
+    />
+)
 
 export default TwitterSocialShareBtn
diff --git a/src-ts/lib/svgs/icon-wrapper/IconWrapper.tsx b/src-ts/lib/svgs/icon-wrapper/IconWrapper.tsx
index 6c97dd1d2..79c3a4a24 100644
--- a/src-ts/lib/svgs/icon-wrapper/IconWrapper.tsx
+++ b/src-ts/lib/svgs/icon-wrapper/IconWrapper.tsx
@@ -9,9 +9,9 @@ interface IconWrapperProps {
 }
 
 const IconWrapper: FC<IconWrapperProps> = ({ className, icon }: IconWrapperProps) => (
-  <div className={classNames(styles.iconWrapper, className)}>
-    <>{icon}</>
-  </div>
+    <div className={classNames(styles.iconWrapper, className)}>
+        <>{icon}</>
+    </div>
 )
 
 export default IconWrapper
diff --git a/src-ts/lib/table/Table.tsx b/src-ts/lib/table/Table.tsx
index 4c16dbb5f..3461de4aa 100644
--- a/src-ts/lib/table/Table.tsx
+++ b/src-ts/lib/table/Table.tsx
@@ -57,13 +57,13 @@ const Table: <T extends { [propertyName: string]: any }>(props: TableProps<T>) =
 
             setSortedData(sorted)
         },
-            [
-                columns,
-                data,
-                defaultSortDirectionMap,
-                props.onToggleSort,
-                sort,
-            ])
+        [
+            columns,
+            data,
+            defaultSortDirectionMap,
+            props.onToggleSort,
+            sort,
+        ])
 
         function toggleSort(fieldName: string): void {
 
@@ -134,16 +134,14 @@ const Table: <T extends { [propertyName: string]: any }>(props: TableProps<T>) =
 
                 // get the cells in the row
                 const cells: Array<JSX.Element> = props.columns
-                    .map((col, colIndex) => {
-                        return (
-                            <TableCell
-                                {...col}
-                                data={sorted}
-                                index={index}
-                                key={`${index}${colIndex}`}
-                            />
-                        )
-                    })
+                    .map((col, colIndex) => (
+                        <TableCell
+                            {...col}
+                            data={sorted}
+                            index={index}
+                            key={`${index}${colIndex}`}
+                        />
+                    ))
 
                 // return the entire row
                 return (
@@ -172,7 +170,7 @@ const Table: <T extends { [propertyName: string]: any }>(props: TableProps<T>) =
                 </table>
                 {
                     !!props.moreToLoad && !!props.onLoadMoreClick && (
-                        <div className={styles['loadBtnWrap']}>
+                        <div className={styles.loadBtnWrap}>
                             <Button
                                 buttonStyle='tertiary'
                                 label='Load More'
diff --git a/src-ts/lib/table/table-cell/TableCell.tsx b/src-ts/lib/table/table-cell/TableCell.tsx
index f93b5ab6f..23e784c01 100644
--- a/src-ts/lib/table/table-cell/TableCell.tsx
+++ b/src-ts/lib/table/table-cell/TableCell.tsx
@@ -41,6 +41,7 @@ const TableCell: <T extends { [propertyName: string]: any }>(props: TableCellPro
             if (props.type !== 'action') {
                 return
             }
+
             // this is an action table cell, so stop propagation
             event.preventDefault()
             event.stopPropagation()
diff --git a/src-ts/lib/tooltip/Tooltip.tsx b/src-ts/lib/tooltip/Tooltip.tsx
index 37ed22fea..06da006f9 100644
--- a/src-ts/lib/tooltip/Tooltip.tsx
+++ b/src-ts/lib/tooltip/Tooltip.tsx
@@ -32,12 +32,12 @@ const Tooltip: FC<TooltipProps> = ({
     let tooltipProps: TooltipEvent = {}
     // The following attributes are required by react-tooltip when we want to show the tooltip on click rather than hover
     if (triggerOn === 'click') {
-      tooltipProps = {
-        globalEventOff: 'click',
-      }
-      event = {
-        'data-event': 'click focus',
-      }
+        tooltipProps = {
+            globalEventOff: 'click',
+        }
+        event = {
+            'data-event': 'click focus',
+        }
     }
 
     return (
@@ -51,7 +51,7 @@ const Tooltip: FC<TooltipProps> = ({
                 {trigger}
             </div>
             <ReactTooltip
-                className={styles['tooltip']}
+                className={styles.tooltip}
                 id={tooltipId.current}
                 aria-haspopup='true'
                 place={place}
diff --git a/src-ts/tools/dev-center/dev-center-lib/MarkdownDoc/LayoutDoc.tsx b/src-ts/tools/dev-center/dev-center-lib/MarkdownDoc/LayoutDoc.tsx
index 07242e1af..8f74d5927 100644
--- a/src-ts/tools/dev-center/dev-center-lib/MarkdownDoc/LayoutDoc.tsx
+++ b/src-ts/tools/dev-center/dev-center-lib/MarkdownDoc/LayoutDoc.tsx
@@ -14,10 +14,10 @@ export const LayoutDoc: React.FC<LayoutDocProps> = (props) => {
     const { children, toc, disableToc }: LayoutDocProps = props
 
     return (
-        <main className={styles['main']}>
+        <main className={styles.main}>
             <div
-                className={`${styles['mainContent']} ${
-                    disableToc ? styles['disableToc'] : ''
+                className={`${styles.mainContent} ${
+                    disableToc ? styles.disableToc : ''
                 }`}
             >
                 {children}
diff --git a/src-ts/tools/dev-center/dev-center-lib/MarkdownDoc/LayoutDocHeader.tsx b/src-ts/tools/dev-center/dev-center-lib/MarkdownDoc/LayoutDocHeader.tsx
index c96041b48..2bef580b9 100644
--- a/src-ts/tools/dev-center/dev-center-lib/MarkdownDoc/LayoutDocHeader.tsx
+++ b/src-ts/tools/dev-center/dev-center-lib/MarkdownDoc/LayoutDocHeader.tsx
@@ -12,9 +12,9 @@ export const LayoutDocHeader: React.FC<LayoutDocHeaderProps> = (props) => {
 
     return (
         <header>
-            <h1 className={styles['title']}>{title}</h1>
-            <hr className={styles['divider']} />
-            <h2 className={styles['subtitle']}>{subtitle}</h2>
+            <h1 className={styles.title}>{title}</h1>
+            <hr className={styles.divider} />
+            <h2 className={styles.subtitle}>{subtitle}</h2>
         </header>
     )
 }
diff --git a/src-ts/tools/dev-center/dev-center-lib/MarkdownDoc/MarkdownAccordion.tsx b/src-ts/tools/dev-center/dev-center-lib/MarkdownDoc/MarkdownAccordion.tsx
index 5dff004f0..1e8c81a4b 100644
--- a/src-ts/tools/dev-center/dev-center-lib/MarkdownDoc/MarkdownAccordion.tsx
+++ b/src-ts/tools/dev-center/dev-center-lib/MarkdownDoc/MarkdownAccordion.tsx
@@ -25,7 +25,7 @@ export const MarkdownAccordion: React.FC<MarkdownAccordionProps> = (props) => {
     const [header, ...children]: ReturnType<typeof React.Children.toArray> =
         React.Children.toArray(childrenProp)
     return (
-        <div className={`${styles['accordion']}`}>
+        <div className={`${styles.accordion}`}>
             <div
                 className={`${styles['pane-outline']}`}
                 onClick={() => {
diff --git a/src-ts/tools/dev-center/dev-center-lib/MarkdownDoc/MarkdownCode.tsx b/src-ts/tools/dev-center/dev-center-lib/MarkdownDoc/MarkdownCode.tsx
index d55290c87..9a7abd35b 100644
--- a/src-ts/tools/dev-center/dev-center-lib/MarkdownDoc/MarkdownCode.tsx
+++ b/src-ts/tools/dev-center/dev-center-lib/MarkdownDoc/MarkdownCode.tsx
@@ -33,7 +33,7 @@ export const MarkdownCode: React.FC<MarkdownCodeProps> = (props) => {
 
     return (
         <div
-            className={`${styles['codeBlock']} ${
+            className={`${styles.codeBlock} ${
                 showLineNumbers ? styles['show-line-numbers'] : ''
             } hljs`}
             ref={ref}
@@ -55,7 +55,7 @@ interface LineNumbersProps {
     showLineNumbers: boolean
 }
 
-function LineNumbers(props: LineNumbersProps): React.ReactElement | null {
+const LineNumbers = (props: LineNumbersProps): React.ReactElement | null => {
     const { codeRef, showLineNumbers, onVisibilityChange }: LineNumbersProps =
         props
     const [lineNumbers, setLineNumbers]: [
@@ -83,6 +83,7 @@ function LineNumbers(props: LineNumbersProps): React.ReactElement | null {
         if (!pre) {
             return
         }
+
         const innerText: string = pre.innerText
         const clientWidth: number = pre.clientWidth
 
@@ -117,14 +118,14 @@ function LineNumbers(props: LineNumbersProps): React.ReactElement | null {
     }
 
     return (
-        <div className={styles['lineNumbers']}>
+        <div className={styles.lineNumbers}>
             {lineNumbers.map((n, index) => {
                 const prev: number = index > 0 ? lineNumbers[index - 1] : -1
                 return (
                     <div
                         key={`line-${index}`}
-                        className={`${styles['num']} ${
-                            prev === n ? styles['hidden'] : ''
+                        className={`${styles.num} ${
+                            prev === n ? styles.hidden : ''
                         }`}
                     >
                         {n}
@@ -140,6 +141,7 @@ function measureText(text: string, canvas: HTMLCanvasElement): number {
     if (!context) {
         return Number.MAX_SAFE_INTEGER
     }
+
     context.font = 'normal 400 14px / 18px "Roboto Mono"'
     const metrics: TextMetrics = context.measureText(text)
     return metrics.width
diff --git a/src-ts/tools/dev-center/dev-center-lib/MarkdownDoc/MarkdownImages.tsx b/src-ts/tools/dev-center/dev-center-lib/MarkdownDoc/MarkdownImages.tsx
index 12914db61..6786ee8b7 100644
--- a/src-ts/tools/dev-center/dev-center-lib/MarkdownDoc/MarkdownImages.tsx
+++ b/src-ts/tools/dev-center/dev-center-lib/MarkdownDoc/MarkdownImages.tsx
@@ -16,16 +16,14 @@ interface CarouselButtonProps {
     onClick: (ev: any) => void
 }
 
-const CarouselButton: React.FC<CarouselButtonProps> = ({ onClick, active }) => {
-    return (
-        <button
-            className={`${styles['indicator']} ${
-                active ? styles['active'] : ''
-            }`}
-            onClick={onClick}
-        ></button>
-    )
-}
+const CarouselButton: React.FC<CarouselButtonProps> = ({ onClick, active }) => (
+    <button
+        className={`${styles.indicator} ${
+            active ? styles.active : ''
+        }`}
+        onClick={onClick}
+    />
+)
 
 const MarkdownImages: React.FC<MarkdownImagesProps> = ({
     children,
@@ -51,40 +49,38 @@ const MarkdownImages: React.FC<MarkdownImagesProps> = ({
         pages,
         activePage,
         onClick,
-    }) => {
-        return (
-            <div className={styles['footer']}>
-                <Button
-                    buttonStyle='icon'
-                    size='xl'
-                    className={styles['prev']}
-                    icon={IconSolid.ChevronLeftIcon}
-                    disable={carouselRef?.current?.state.activePage === 0}
-                    onClick={handlePrev}
-                />
-                {pages.map((page) => {
-                    const isActivePage: boolean = activePage === page
-                    return (
-                        <CarouselButton
-                            key={page}
-                            onClick={() => onClick(page)}
-                            active={isActivePage}
-                        />
-                    )
-                })}
-                <Button
-                    buttonStyle='icon'
-                    size='xl'
-                    className={styles['next']}
-                    icon={IconSolid.ChevronRightIcon}
-                    disable={
-                        carouselRef?.current?.state.activePage === length - 1
-                    }
-                    onClick={handleNext}
-                />
-            </div>
-        )
-    }
+    }) => (
+        <div className={styles.footer}>
+            <Button
+                buttonStyle='icon'
+                size='xl'
+                className={styles.prev}
+                icon={IconSolid.ChevronLeftIcon}
+                disable={carouselRef?.current?.state.activePage === 0}
+                onClick={handlePrev}
+            />
+            {pages.map((page) => {
+                const isActivePage: boolean = activePage === page
+                return (
+                    <CarouselButton
+                        key={page}
+                        onClick={() => onClick(page)}
+                        active={isActivePage}
+                    />
+                )
+            })}
+            <Button
+                buttonStyle='icon'
+                size='xl'
+                className={styles.next}
+                icon={IconSolid.ChevronRightIcon}
+                disable={
+                    carouselRef?.current?.state.activePage === length - 1
+                }
+                onClick={handleNext}
+            />
+        </div>
+    )
     return children.length > 1 ? (
         // @ts-ignore
         <Carousel
@@ -92,13 +88,13 @@ const MarkdownImages: React.FC<MarkdownImagesProps> = ({
             showArrows={false}
             isRTL={false}
             ref={carouselRef}
-            className={styles['imagesBlock']}
+            className={styles.imagesBlock}
             renderPagination={renderPagination}
         >
             {children.map((image, index) => (
                 <div
                     key={`md-image-${index}`}
-                    className={styles['imageContainer']}
+                    className={styles.imageContainer}
                 >
                     {image}
                 </div>
@@ -106,8 +102,8 @@ const MarkdownImages: React.FC<MarkdownImagesProps> = ({
         </Carousel>
     ) : (
         <>
-            <div key={`md-image-single`} className={`${styles['imageBlock']}}`}>
-                <div className={styles['imageContainer']}>{children[0]}</div>
+            <div key="md-image-single" className={`${styles.imageBlock}}`}>
+                <div className={styles.imageContainer}>{children[0]}</div>
             </div>
         </>
     )
diff --git a/src-ts/tools/dev-center/dev-center-lib/MarkdownDoc/MarkdownLink.tsx b/src-ts/tools/dev-center/dev-center-lib/MarkdownDoc/MarkdownLink.tsx
index 303162e2d..3cbcfdf2e 100644
--- a/src-ts/tools/dev-center/dev-center-lib/MarkdownDoc/MarkdownLink.tsx
+++ b/src-ts/tools/dev-center/dev-center-lib/MarkdownDoc/MarkdownLink.tsx
@@ -12,10 +12,10 @@ interface MarkdownLinkProps {
 export const MarkdownLink: React.FC<MarkdownLinkProps> = (props) => {
     const { children, href }: MarkdownLinkProps = props
     return (
-        <div className={styles['linkBlock']}>
-            <span className={styles['label']}>LINK</span>
-            <span className={styles['divider']}></span>
-            <span className={styles['link']}>{children}</span>
+        <div className={styles.linkBlock}>
+            <span className={styles.label}>LINK</span>
+            <span className={styles.divider} />
+            <span className={styles.link}>{children}</span>
             <CopyButton text={href} />
         </div>
     )
diff --git a/src-ts/tools/dev-center/dev-center-lib/MarkdownDoc/TableOfContents.tsx b/src-ts/tools/dev-center/dev-center-lib/MarkdownDoc/TableOfContents.tsx
index 20a674635..bd79a731b 100644
--- a/src-ts/tools/dev-center/dev-center-lib/MarkdownDoc/TableOfContents.tsx
+++ b/src-ts/tools/dev-center/dev-center-lib/MarkdownDoc/TableOfContents.tsx
@@ -13,9 +13,7 @@ export const TableOfContents: React.FC<TableOfContentsProps> = (props) => {
         React.Dispatch<React.SetStateAction<number>>
     ] = React.useState(-1)
     const { toc }: { toc: TOC } = props
-    const items: TOC = React.useMemo(() => {
-        return toc.filter((item) => item.level === 2 || item.level === 3)
-    }, [toc])
+    const items: TOC = React.useMemo(() => toc.filter((item) => item.level === 2 || item.level === 3), [toc])
 
     const navRef: React.RefObject<HTMLElement> = React.createRef<HTMLElement>()
 
@@ -47,15 +45,15 @@ export const TableOfContents: React.FC<TableOfContentsProps> = (props) => {
     useOnScroll({ onScroll: findActiveIndex })
 
     return (
-        <nav ref={navRef} className={styles['nav']}>
-            <div className={styles['navLabel']}>ON THIS PAGE</div>
+        <nav ref={navRef} className={styles.nav}>
+            <div className={styles.navLabel}>ON THIS PAGE</div>
             {items.length > 0 ? (
                 <ul>
                     {items.map((item, index) => (
                         <li
                             key={`${item.title}-${index}`}
-                            className={`${styles['navListItem']} ${
-                                index === activeIndex ? styles['active'] : ''
+                            className={`${styles.navListItem} ${
+                                index === activeIndex ? styles.active : ''
                             }`}
                         >
                             <a
@@ -86,6 +84,7 @@ function useOnScroll({ onScroll }: { onScroll: () => void }): void {
                 clearTimeout(debounceTimer.current)
                 debounceTimer.current = undefined
             }
+
             debounceTimer.current = setTimeout(() => {
                 debounceTimer.current = undefined
                 onScroll()
diff --git a/src-ts/tools/dev-center/dev-center-lib/MarkdownDoc/markdownRenderer/renderer.tsx b/src-ts/tools/dev-center/dev-center-lib/MarkdownDoc/markdownRenderer/renderer.tsx
index a9b1c8b46..82b263d12 100644
--- a/src-ts/tools/dev-center/dev-center-lib/MarkdownDoc/markdownRenderer/renderer.tsx
+++ b/src-ts/tools/dev-center/dev-center-lib/MarkdownDoc/markdownRenderer/renderer.tsx
@@ -55,10 +55,12 @@ export class Renderer implements MarkdownRenderer {
         if (!this.instance) {
             this.instance = new Renderer()
         }
+
         return this.instance
     }
 
     private renderer: MarkedRenderer
+
     static instance: Renderer
 
     constructor() {
@@ -89,6 +91,7 @@ export class Renderer implements MarkdownRenderer {
                     </MarkdownAccordion>
                 )
             }
+
             return node
         })
 
@@ -113,14 +116,10 @@ export class Renderer implements MarkdownRenderer {
 
         const isH1Tag: (tagName: keyof JSX.IntrinsicElements) => boolean = (
             tagName: keyof JSX.IntrinsicElements
-        ) => {
-            return tagName === MarkdownHeaderTag.h1
-        }
+        ) => tagName === MarkdownHeaderTag.h1
         const isGroupByTag: (
             tagName: keyof JSX.IntrinsicElements
-        ) => boolean = (tagName: keyof JSX.IntrinsicElements) => {
-            return !!tagName && options?.groupBy === tagName
-        }
+        ) => boolean = (tagName: keyof JSX.IntrinsicElements) => !!tagName && options?.groupBy === tagName
 
         for (const nodeElem of nodes) {
             if (!React.isValidElement(nodeElem)) {
@@ -159,6 +158,7 @@ export class Renderer implements MarkdownRenderer {
                     group.push(node)
                     result.push(group)
                 }
+
                 isAppending = true
                 endGroup = false
             } else {
@@ -186,15 +186,19 @@ export class Renderer implements MarkdownRenderer {
             ) {
                 return true
             }
+
             return false
         }
+
         const isCodeBlock: (t: marked.Token) => boolean = (t: marked.Token) => {
             t = t as marked.Tokens.Code
             if (t.type === 'code') {
                 return true
             }
+
             return false
         }
+
         const isImagesBlock: (t: marked.Token) => boolean = (
             t: marked.Token
         ) => {
@@ -213,22 +217,24 @@ export class Renderer implements MarkdownRenderer {
             ) {
                 return true
             }
+
             return false
         }
 
         const getClassname: (t: marked.Token) => string = (t: marked.Token) => {
             const classnameMapping: MarkdownTagClassName = {
                 code: t.lang
-                    ? `${styles['codeBlock']} ${styles[`language-${t.lang}`]}`
-                    : styles['codeBlock'],
-                codespan: styles['codeInline'],
+                    ? `${styles.codeBlock} ${styles[`language-${t.lang}`]}`
+                    : styles.codeBlock,
+                codespan: styles.codeInline,
                 heading: styles[`heading${t.depth}`],
                 list: styles[`${t.ordered ? 'orderedList' : 'unorderedList'}`],
-                paragraph: styles['paragraph'],
+                paragraph: styles.paragraph,
             }
 
             return _.get(classnameMapping, t.type, '')
         }
+
         const stripTag: (htmlString: string, tagname: string) => string = (
             htmlString: string,
             tagname: string
@@ -239,6 +245,7 @@ export class Renderer implements MarkdownRenderer {
             )
             return htmlString.replace(tagRegExp, '$1')
         }
+
         const extractId: (htmlString: string, tagname: string, leadingIndex: number) => string = (
             htmlString: string,
             tagname: string,
@@ -253,6 +260,7 @@ export class Renderer implements MarkdownRenderer {
             const id: string = matches ? matches[1] : ''
             return `${leadingIndex}-${id}`
         }
+
         const extractTag: (htmlString: string) => string = (
             htmlString: string
         ) => {
@@ -262,11 +270,10 @@ export class Renderer implements MarkdownRenderer {
             const matches: RegExpExecArray | null = tagRegExp.exec(htmlString)
             return matches ? matches[1] : ''
         }
+
         const removeLineBreak: (htmlString: string) => string = (
             htmlString: string
-        ) => {
-            return htmlString.replace(/\n/g, '')
-        }
+        ) => htmlString.replace(/\n/g, '')
         const parserOptions: marked.MarkedOptions = {
             baseUrl: options?.baseUrl,
             headerIds: true,
@@ -281,9 +288,7 @@ export class Renderer implements MarkdownRenderer {
         ) => React.ReactElement = (
             element: React.ElementType,
             elementProps: any
-        ) => {
-            return React.createElement(element, elementProps)
-        }
+        ) => React.createElement(element, elementProps)
 
         if (options && options.toc && token.type === 'heading') {
             const h: string = marked.parser([token], parserOptions)
@@ -316,7 +321,9 @@ export class Renderer implements MarkdownRenderer {
                     })}
                 </MarkdownLink>
             )
-        } else if (isCodeBlock(token)) {
+        }
+
+        if (isCodeBlock(token)) {
             token = token as marked.Tokens.Code
             return (
                 <MarkdownCode code={token.text} lang={token.lang}>
@@ -325,22 +332,22 @@ export class Renderer implements MarkdownRenderer {
                     })}
                 </MarkdownCode>
             )
-        } else if (isImagesBlock(token)) {
+        }
+
+        if (isImagesBlock(token)) {
             token = token as marked.Tokens.Paragraph
             const length: number = token.tokens.filter(
                 (t) => t.type === 'image'
             ).length
             const images: Array<JSX.Element> = token.tokens
                 .filter((t) => t.type === 'image')
-                .map((t, idx) => {
-                    return (
-                        <img
-                            src={require('../../../' + t.href.slice(2))}
-                            alt=''
-                            key={idx}
-                        ></img>
-                    )
-                })
+                .map((t, idx) => (
+                    <img
+                        src={require(`../../../${  t.href.slice(2)}`)}
+                        alt=''
+                        key={idx}
+                    />
+                ))
             return <MarkdownImages length={length}>{images}</MarkdownImages>
         }
 
@@ -358,6 +365,7 @@ export class Renderer implements MarkdownRenderer {
                     token = token as marked.Tokens.Heading
                     id = extractId(html, `h${token.depth}`, index).trim()
                 }
+
                 return React.createElement(tag, {
                     className: getClassname(token),
                     dangerouslySetInnerHTML: { __html: stripTag(html, tag) },
diff --git a/src-ts/tools/dev-center/dev-center-lib/MarkdownDoc/markdownRenderer/util.ts b/src-ts/tools/dev-center/dev-center-lib/MarkdownDoc/markdownRenderer/util.ts
index ff307e998..a2f375d97 100644
--- a/src-ts/tools/dev-center/dev-center-lib/MarkdownDoc/markdownRenderer/util.ts
+++ b/src-ts/tools/dev-center/dev-center-lib/MarkdownDoc/markdownRenderer/util.ts
@@ -30,9 +30,9 @@ export function renderMarkdown(
         const matchStr: string = matches ? matches[0] : ''
         return matchStr
             ? {
-                  s: fromStr.replace(matchStr, '').trimStart(),
-                  title: matchStr.replace(/^#/, '').replace(/`/g, '').trim(),
-              }
+                s: fromStr.replace(matchStr, '').trimStart(),
+                title: matchStr.replace(/^#/, '').replace(/`/g, '').trim(),
+            }
             : { title, s }
     }
 
diff --git a/src-ts/tools/dev-center/dev-center-pages/community-app/getting-started/GettingStartedGuide.tsx b/src-ts/tools/dev-center/dev-center-pages/community-app/getting-started/GettingStartedGuide.tsx
index 7044631cc..4295ffcfb 100644
--- a/src-ts/tools/dev-center/dev-center-pages/community-app/getting-started/GettingStartedGuide.tsx
+++ b/src-ts/tools/dev-center/dev-center-pages/community-app/getting-started/GettingStartedGuide.tsx
@@ -10,20 +10,20 @@ import gettingStartedGuide from './GettingStartedGuide.md'
 import styles from './GettingStartedGuide.module.scss'
 
 export const GettingStartedGuide: React.FC = () => {
-  const { doc, toc, title }: ReturnType<typeof useMarkdown> = useMarkdown({ uri: gettingStartedGuide })
-  const breadcrumb: Array<BreadcrumbItemModel> = React.useMemo(() => [
-    { name: toolTitle, url: '/dev-center' },
-    { name: title, url: '#' },
-  ], [title])
+    const { doc, toc, title }: ReturnType<typeof useMarkdown> = useMarkdown({ uri: gettingStartedGuide })
+    const breadcrumb: Array<BreadcrumbItemModel> = React.useMemo(() => [
+        { name: toolTitle, url: '/dev-center' },
+        { name: title, url: '#' },
+    ], [title])
 
-  return (
-    <ContentLayout contentClass={styles['contentLayout']} outerClass={styles['contentLayout-outer']} innerClass={styles['contentLayout-inner']}>
+    return (
+        <ContentLayout contentClass={styles.contentLayout} outerClass={styles['contentLayout-outer']} innerClass={styles['contentLayout-inner']}>
 
-      <Breadcrumb items={breadcrumb} />
-      <LayoutDocHeader title={title} subtitle='Getting started Guide' />
-      <MarkdownDoc doc={doc} toc={toc} />
-    </ContentLayout>
-  )
+            <Breadcrumb items={breadcrumb} />
+            <LayoutDocHeader title={title} subtitle='Getting started Guide' />
+            <MarkdownDoc doc={doc} toc={toc} />
+        </ContentLayout>
+    )
 }
 
 export default GettingStartedGuide
diff --git a/src-ts/tools/dev-center/dev-center-pages/community-app/landing-page/DevCenterLandingPage.tsx b/src-ts/tools/dev-center/dev-center-pages/community-app/landing-page/DevCenterLandingPage.tsx
index 20198fa76..0d2e2fd53 100644
--- a/src-ts/tools/dev-center/dev-center-pages/community-app/landing-page/DevCenterLandingPage.tsx
+++ b/src-ts/tools/dev-center/dev-center-pages/community-app/landing-page/DevCenterLandingPage.tsx
@@ -5,15 +5,12 @@ import { DevCenterGetStarted } from './dev-center-get-started'
 import { DevCenterHeader } from './dev-center-header'
 import styles from './DevCenterLandingPage.module.scss'
 
-const DevCenter: FC = () => {
-
-    return (
-        <div className={styles.container}>
-            <DevCenterHeader/>
-            <DevCenterGetStarted/>
-            <DevCenterArticlesection/>
-        </div>
-    )
-}
+const DevCenter: FC = () => (
+    <div className={styles.container}>
+        <DevCenterHeader/>
+        <DevCenterGetStarted/>
+        <DevCenterArticlesection/>
+    </div>
+)
 
 export default DevCenter
diff --git a/src-ts/tools/dev-center/dev-center-pages/community-app/landing-page/dev-center-articles-section/ArticleCard/ArticleCard.tsx b/src-ts/tools/dev-center/dev-center-pages/community-app/landing-page/dev-center-articles-section/ArticleCard/ArticleCard.tsx
index fb5b04e41..1e2cbf2f8 100644
--- a/src-ts/tools/dev-center/dev-center-pages/community-app/landing-page/dev-center-articles-section/ArticleCard/ArticleCard.tsx
+++ b/src-ts/tools/dev-center/dev-center-pages/community-app/landing-page/dev-center-articles-section/ArticleCard/ArticleCard.tsx
@@ -101,7 +101,7 @@ const ArticleCard: FC<ArticleCardProps> = ({
 
     return (
         <div
-            style={{ backgroundImage: 'url(\'' + image + '\')' }}
+            style={{ backgroundImage: `url('${  image  }')` }}
             className={outerClass}
         >
             <div
@@ -125,7 +125,7 @@ const ArticleCard: FC<ArticleCardProps> = ({
                             {article.title}
                         </h2>
                     ) : (
-                        <h4 className={'font-tc-white details'}>
+                        <h4 className="font-tc-white details">
                             {article.title}
                         </h4>
                     )}
diff --git a/src-ts/tools/dev-center/dev-center-pages/community-app/landing-page/dev-center-articles-section/Articles.ts b/src-ts/tools/dev-center/dev-center-pages/community-app/landing-page/dev-center-articles-section/Articles.ts
index 3e7a45277..8442a05cf 100644
--- a/src-ts/tools/dev-center/dev-center-pages/community-app/landing-page/dev-center-articles-section/Articles.ts
+++ b/src-ts/tools/dev-center/dev-center-pages/community-app/landing-page/dev-center-articles-section/Articles.ts
@@ -20,6 +20,7 @@ export async function getBlog(url: string): Promise<BlogPost | undefined> {
         if (!blog.featuredImage) {
             blog.featuredImage = DEFAULT_BLOG_IMAGE
         }
+
         return blog
     } catch (e) {
         return undefined
diff --git a/src-ts/tools/dev-center/dev-center-pages/community-app/landing-page/dev-center-articles-section/DevCenterArticlesSection.tsx b/src-ts/tools/dev-center/dev-center-pages/community-app/landing-page/dev-center-articles-section/DevCenterArticlesSection.tsx
index 477ec7cf2..e59326333 100644
--- a/src-ts/tools/dev-center/dev-center-pages/community-app/landing-page/dev-center-articles-section/DevCenterArticlesSection.tsx
+++ b/src-ts/tools/dev-center/dev-center-pages/community-app/landing-page/dev-center-articles-section/DevCenterArticlesSection.tsx
@@ -5,15 +5,13 @@ import { ContentLayout } from '../../../../../../lib'
 import { CardSection } from './CardSection'
 import styles from './DevCenterArticlesSection.module.scss'
 
-const DevCenterArticlesection: FC = () => {
-    return (
-        <div className={styles.container}>
-            <ContentLayout>
-                <h3 className={styles.title}>Success Stories And Articles</h3>
-                <CardSection />
-            </ContentLayout>
-        </div>
-    )
-}
+const DevCenterArticlesection: FC = () => (
+    <div className={styles.container}>
+        <ContentLayout>
+            <h3 className={styles.title}>Success Stories And Articles</h3>
+            <CardSection />
+        </ContentLayout>
+    </div>
+)
 
 export default DevCenterArticlesection
diff --git a/src-ts/tools/dev-center/dev-center-pages/community-app/landing-page/dev-center-card/DevCenterCard.tsx b/src-ts/tools/dev-center/dev-center-pages/community-app/landing-page/dev-center-card/DevCenterCard.tsx
index 8fb46f93f..223439787 100644
--- a/src-ts/tools/dev-center/dev-center-pages/community-app/landing-page/dev-center-card/DevCenterCard.tsx
+++ b/src-ts/tools/dev-center/dev-center-pages/community-app/landing-page/dev-center-card/DevCenterCard.tsx
@@ -13,22 +13,19 @@ interface DevCenterCardProps {
     titleClass: string
 }
 
-const DevCenterCard: FC<DevCenterCardProps> = ({ icon, cornerIcon, title, titleClass, description, button, className= '' }) => {
-
-    return (
-        <div className={classNames(styles.card, className)}>
-            <div className={styles.cornerImage}>{cornerIcon}</div>
-            <div className={styles.cardContainer}>
-                {icon}
-                <div className={styles.titleSection}>
-                    <h4 className={classNames(styles.title, titleClass)}>{title}</h4>
-                    <span className={classNames('body-main ', styles.summary)}>{description}</span>
-                    {button && button}
-                </div>
+const DevCenterCard: FC<DevCenterCardProps> = ({ icon, cornerIcon, title, titleClass, description, button, className= '' }) => (
+    <div className={classNames(styles.card, className)}>
+        <div className={styles.cornerImage}>{cornerIcon}</div>
+        <div className={styles.cardContainer}>
+            {icon}
+            <div className={styles.titleSection}>
+                <h4 className={classNames(styles.title, titleClass)}>{title}</h4>
+                <span className={classNames('body-main ', styles.summary)}>{description}</span>
+                {button && button}
             </div>
-
         </div>
-    )
-}
+
+    </div>
+)
 
 export default DevCenterCard
diff --git a/src-ts/tools/dev-center/dev-center-pages/community-app/landing-page/dev-center-get-started/DevCenterGetStarted.tsx b/src-ts/tools/dev-center/dev-center-pages/community-app/landing-page/dev-center-get-started/DevCenterGetStarted.tsx
index e8af5157e..30f76945d 100644
--- a/src-ts/tools/dev-center/dev-center-pages/community-app/landing-page/dev-center-get-started/DevCenterGetStarted.tsx
+++ b/src-ts/tools/dev-center/dev-center-pages/community-app/landing-page/dev-center-get-started/DevCenterGetStarted.tsx
@@ -5,13 +5,11 @@ import { ContentLayout } from '../../../../../../lib'
 import styles from './DevCenterGetStarted.module.scss'
 import { GetStartedCardsContainer } from './GetStartedCardsContainer'
 
-const DevCenterGetStarted: FC = () => {
-    return (
-        <ContentLayout>
-            <h3 className={styles.title}>Getting Started</h3>
-            <GetStartedCardsContainer/>
-        </ContentLayout>
-    )
-}
+const DevCenterGetStarted: FC = () => (
+    <ContentLayout>
+        <h3 className={styles.title}>Getting Started</h3>
+        <GetStartedCardsContainer/>
+    </ContentLayout>
+)
 
 export default DevCenterGetStarted
diff --git a/src-ts/tools/dev-center/dev-center-pages/community-app/landing-page/dev-center-get-started/GetStartedCardsContainer/GetStartedCardsContainer.tsx b/src-ts/tools/dev-center/dev-center-pages/community-app/landing-page/dev-center-get-started/GetStartedCardsContainer/GetStartedCardsContainer.tsx
index b16310abf..99e91cd59 100644
--- a/src-ts/tools/dev-center/dev-center-pages/community-app/landing-page/dev-center-get-started/GetStartedCardsContainer/GetStartedCardsContainer.tsx
+++ b/src-ts/tools/dev-center/dev-center-pages/community-app/landing-page/dev-center-get-started/GetStartedCardsContainer/GetStartedCardsContainer.tsx
@@ -6,27 +6,25 @@ import { DevCenterCard } from '../../dev-center-card'
 
 import styles from './GetStartedCardsContainer.module.scss'
 
-const GetStartedCardsContainer: FC = () => {
-    return (
-        <div className={styles.container}>
-            <DevCenterCard
-                cornerIcon={<CommunityAppCornerIcon/>}
-                icon={<CommunityAppIcon/>}
-                title ='Community App'
-                titleClass={styles.communityTitle}
-                description='Learn about Topcoder Community App and run started code.'
-                button={<Button route='/dev-center/getting-started' label='get started' className={styles.button}/>}
-            />
-            <DevCenterCard
-                cornerIcon={<ApiCornerIcon/>}
-                icon={<ApiIcon/>}
-                title ='TopCoder api'
-                titleClass={styles.apiTitle}
-                description='Explore API libraries and integrate with API endpoints.'
-                button={<h4 className={styles.comingSoon}>Coming soon</h4>}
-            />
-        </div>
-    )
-}
+const GetStartedCardsContainer: FC = () => (
+    <div className={styles.container}>
+        <DevCenterCard
+            cornerIcon={<CommunityAppCornerIcon/>}
+            icon={<CommunityAppIcon/>}
+            title ='Community App'
+            titleClass={styles.communityTitle}
+            description='Learn about Topcoder Community App and run started code.'
+            button={<Button route='/dev-center/getting-started' label='get started' className={styles.button}/>}
+        />
+        <DevCenterCard
+            cornerIcon={<ApiCornerIcon/>}
+            icon={<ApiIcon/>}
+            title ='TopCoder api'
+            titleClass={styles.apiTitle}
+            description='Explore API libraries and integrate with API endpoints.'
+            button={<h4 className={styles.comingSoon}>Coming soon</h4>}
+        />
+    </div>
+)
 
 export default GetStartedCardsContainer
diff --git a/src-ts/tools/dev-center/dev-center-pages/community-app/landing-page/dev-center-header/DevCenterCarousel/DevCenterCarousel.tsx b/src-ts/tools/dev-center/dev-center-pages/community-app/landing-page/dev-center-header/DevCenterCarousel/DevCenterCarousel.tsx
index 36c4f11a3..97480191d 100644
--- a/src-ts/tools/dev-center/dev-center-pages/community-app/landing-page/dev-center-header/DevCenterCarousel/DevCenterCarousel.tsx
+++ b/src-ts/tools/dev-center/dev-center-pages/community-app/landing-page/dev-center-header/DevCenterCarousel/DevCenterCarousel.tsx
@@ -7,18 +7,16 @@ import { DevCenterCarouselItem } from '../DevCenterCarouselItem'
 import './carouselStyle.css'
 import styles from './DevCenterCarousel.module.scss'
 
-const DevCenterCarousel: FC = () => {
-    return (
-        <div className={styles.container}>
-            <Carousel
-                itemsToShow={1}
-                showArrows={false}
-                isRTL={false}
-                >
-                {CarouselContent.map((item, key) => <DevCenterCarouselItem item={item} key={key} />)}
-            </Carousel>
-        </div>
-    )
-}
+const DevCenterCarousel: FC = () => (
+    <div className={styles.container}>
+        <Carousel
+            itemsToShow={1}
+            showArrows={false}
+            isRTL={false}
+        >
+            {CarouselContent.map((item, key) => <DevCenterCarouselItem item={item} key={key} />)}
+        </Carousel>
+    </div>
+)
 
 export default DevCenterCarousel
diff --git a/src-ts/tools/dev-center/dev-center-pages/community-app/landing-page/dev-center-header/DevCenterCarouselItem/DevCenterCarouselItem.tsx b/src-ts/tools/dev-center/dev-center-pages/community-app/landing-page/dev-center-header/DevCenterCarouselItem/DevCenterCarouselItem.tsx
index ac6b67ffe..9db235e7d 100644
--- a/src-ts/tools/dev-center/dev-center-pages/community-app/landing-page/dev-center-header/DevCenterCarouselItem/DevCenterCarouselItem.tsx
+++ b/src-ts/tools/dev-center/dev-center-pages/community-app/landing-page/dev-center-header/DevCenterCarouselItem/DevCenterCarouselItem.tsx
@@ -6,17 +6,15 @@ import { CarouselItem } from '../carousel-content.config'
 
 import styles from './DevCenterCarouselItem.module.scss'
 
-const DevCenterCarouselItem: FC<{ item: CarouselItem }> = ({item}) => {
-    return (
-        <div className={styles.card}>
-            <div className={styles.titleContainer}>
-                {item.isNewFeature && <DevCenterTag text='New Feature'/>}
-                <h2 className={styles.headline}>{item.headline}</h2>
-                <span className={classNames(styles.summary, 'medium-subtitle')}>{item.summary}</span>
-            </div>
-            <img src={item.image} className={styles.image} alt=''/>
+const DevCenterCarouselItem: FC<{ item: CarouselItem }> = ({item}) => (
+    <div className={styles.card}>
+        <div className={styles.titleContainer}>
+            {item.isNewFeature && <DevCenterTag text='New Feature'/>}
+            <h2 className={styles.headline}>{item.headline}</h2>
+            <span className={classNames(styles.summary, 'medium-subtitle')}>{item.summary}</span>
         </div>
-    )
-}
+        <img src={item.image} className={styles.image} alt=''/>
+    </div>
+)
 
 export default DevCenterCarouselItem
diff --git a/src-ts/tools/dev-center/dev-center-pages/community-app/landing-page/dev-center-header/DevCenterHeader.tsx b/src-ts/tools/dev-center/dev-center-pages/community-app/landing-page/dev-center-header/DevCenterHeader.tsx
index 3cdbd0921..e5103b0f0 100644
--- a/src-ts/tools/dev-center/dev-center-pages/community-app/landing-page/dev-center-header/DevCenterHeader.tsx
+++ b/src-ts/tools/dev-center/dev-center-pages/community-app/landing-page/dev-center-header/DevCenterHeader.tsx
@@ -6,24 +6,22 @@ import { ContentLayout } from '../../../../../../lib'
 import DevCenterCarousel from './DevCenterCarousel/DevCenterCarousel'
 import styles from './DevCenterHeader.module.scss'
 
-const DevCenterHeader: FC<{}> = () => {
-    return (
-        <div className={styles.outerContainer}>
-            <ContentLayout>
-                <div className={styles.innerContainer}>
-                    <div className={styles.leftContent}>
-                        <h1 className={styles.title}>
-                            TopCoder <br />
-                            Developer Center
-                        </h1>
-                        <span className={classNames(styles.subtitle, 'body-main')}>Let's build together with millions of Topcoder developers around the world.</span>
-                    </div>
-                    <div className={styles.rightContent}>
-                        <DevCenterCarousel/>
-                    </div>
+const DevCenterHeader: FC<{}> = () => (
+    <div className={styles.outerContainer}>
+        <ContentLayout>
+            <div className={styles.innerContainer}>
+                <div className={styles.leftContent}>
+                    <h1 className={styles.title}>
+                        TopCoder <br />
+                        Developer Center
+                    </h1>
+                    <span className={classNames(styles.subtitle, 'body-main')}>Let's build together with millions of Topcoder developers around the world.</span>
                 </div>
-            </ContentLayout>
-        </div>)
-}
+                <div className={styles.rightContent}>
+                    <DevCenterCarousel/>
+                </div>
+            </div>
+        </ContentLayout>
+    </div>)
 
 export default DevCenterHeader
diff --git a/src-ts/tools/dev-center/dev-center-pages/community-app/landing-page/dev-center-header/carousel-content.config.ts b/src-ts/tools/dev-center/dev-center-pages/community-app/landing-page/dev-center-header/carousel-content.config.ts
index 969ee18c3..f699e3251 100644
--- a/src-ts/tools/dev-center/dev-center-pages/community-app/landing-page/dev-center-header/carousel-content.config.ts
+++ b/src-ts/tools/dev-center/dev-center-pages/community-app/landing-page/dev-center-header/carousel-content.config.ts
@@ -20,9 +20,9 @@ export interface CarouselItem {
  */
 export const CarouselContent: Array<CarouselItem> = [
     {
-      headline: 'Introducing new feature: API Explorer (Coming soon)',
-      image: CodeImage,
-      isNewFeature: true,
-      summary: 'Now You Can Try Topcoder API Methods Without Writing Code.',
+        headline: 'Introducing new feature: API Explorer (Coming soon)',
+        image: CodeImage,
+        isNewFeature: true,
+        summary: 'Now You Can Try Topcoder API Methods Without Writing Code.',
     },
-   ]
+]
diff --git a/src-ts/tools/dev-center/dev-center-pages/community-app/landing-page/dev-center-tag/DevCenterTag.tsx b/src-ts/tools/dev-center/dev-center-pages/community-app/landing-page/dev-center-tag/DevCenterTag.tsx
index 07baa5394..498729c1c 100644
--- a/src-ts/tools/dev-center/dev-center-pages/community-app/landing-page/dev-center-tag/DevCenterTag.tsx
+++ b/src-ts/tools/dev-center/dev-center-pages/community-app/landing-page/dev-center-tag/DevCenterTag.tsx
@@ -7,12 +7,10 @@ interface TagProps {
     text: string
 }
 
-const DevCenterTag: FC<TagProps> = ({ text }) => {
-    return (
-        <div className={styles.tag}>
-            <span className={classNames('font-tc-white', 'label', styles.text)}>{text}</span>
-        </div>
-    )
-}
+const DevCenterTag: FC<TagProps> = ({ text }) => (
+    <div className={styles.tag}>
+        <span className={classNames('font-tc-white', 'label', styles.text)}>{text}</span>
+    </div>
+)
 
 export default DevCenterTag
diff --git a/src-ts/tools/gamification-admin/game-config/gamification.config.ts b/src-ts/tools/gamification-admin/game-config/gamification.config.ts
index e204a4040..c36520eef 100644
--- a/src-ts/tools/gamification-admin/game-config/gamification.config.ts
+++ b/src-ts/tools/gamification-admin/game-config/gamification.config.ts
@@ -7,21 +7,21 @@ import { GamificationConfigProd } from './gamification.prod.config'
 
 function getConfig(): GamificationConfigModel {
 
-  switch (EnvironmentConfig.ENV) {
+    switch (EnvironmentConfig.ENV) {
 
-    case 'dev':
-      return GamificationConfigDev
+        case 'dev':
+            return GamificationConfigDev
 
-    case 'prod':
-      return GamificationConfigProd
+        case 'prod':
+            return GamificationConfigProd
 
-    default:
-      return GamificationConfigDefault
-  }
+        default:
+            return GamificationConfigDefault
+    }
 }
 
 const GamificationConfig: GamificationConfigModel = {
-  ...getConfig(),
+    ...getConfig(),
 }
 
 export default GamificationConfig
diff --git a/src-ts/tools/gamification-admin/game-config/gamification.default.config.ts b/src-ts/tools/gamification-admin/game-config/gamification.default.config.ts
index 05a4f7b51..1d7b1149d 100644
--- a/src-ts/tools/gamification-admin/game-config/gamification.default.config.ts
+++ b/src-ts/tools/gamification-admin/game-config/gamification.default.config.ts
@@ -1,9 +1,9 @@
 import { GamificationConfigModel } from './gamification-config.model'
 
 export const GamificationConfigDefault: GamificationConfigModel = {
-  ACCEPTED_BADGE_MIME_TYPES: 'image/svg+xml,image/svg',
-  CSV_HEADER: ['tc_handle', 'badge_id'],
-  MAX_BADGE_IMAGE_FILE_SIZE: 5000000, // 5mb in bytes
-  ORG_ID: '6052dd9b-ea80-494b-b258-edd1331e27a3',
-  PAGE_SIZE: 12,
+    ACCEPTED_BADGE_MIME_TYPES: 'image/svg+xml,image/svg',
+    CSV_HEADER: ['tc_handle', 'badge_id'],
+    MAX_BADGE_IMAGE_FILE_SIZE: 5000000, // 5mb in bytes
+    ORG_ID: '6052dd9b-ea80-494b-b258-edd1331e27a3',
+    PAGE_SIZE: 12,
 }
diff --git a/src-ts/tools/gamification-admin/game-config/gamification.dev.config.ts b/src-ts/tools/gamification-admin/game-config/gamification.dev.config.ts
index 02fec4630..1cd328d2e 100644
--- a/src-ts/tools/gamification-admin/game-config/gamification.dev.config.ts
+++ b/src-ts/tools/gamification-admin/game-config/gamification.dev.config.ts
@@ -2,5 +2,5 @@ import { GamificationConfigModel } from './gamification-config.model'
 import { GamificationConfigDefault } from './gamification.default.config'
 
 export const GamificationConfigDev: GamificationConfigModel = {
-  ...GamificationConfigDefault,
+    ...GamificationConfigDefault,
 }
diff --git a/src-ts/tools/gamification-admin/game-config/gamification.prod.config.ts b/src-ts/tools/gamification-admin/game-config/gamification.prod.config.ts
index e49185be0..515d832ea 100644
--- a/src-ts/tools/gamification-admin/game-config/gamification.prod.config.ts
+++ b/src-ts/tools/gamification-admin/game-config/gamification.prod.config.ts
@@ -2,6 +2,6 @@ import { GamificationConfigModel } from './gamification-config.model'
 import { GamificationConfigDefault } from './gamification.default.config'
 
 export const GamificationConfigProd: GamificationConfigModel = {
-  ...GamificationConfigDefault,
-  ORG_ID: 'e111f8df-6ac8-44d1-b4da-bb916f5e3425',
+    ...GamificationConfigDefault,
+    ORG_ID: 'e111f8df-6ac8-44d1-b4da-bb916f5e3425',
 }
diff --git a/src-ts/tools/gamification-admin/game-lib/modals/badge-activated-modal/BadgeActivatedModal.tsx b/src-ts/tools/gamification-admin/game-lib/modals/badge-activated-modal/BadgeActivatedModal.tsx
index 4af00da97..123e04da9 100644
--- a/src-ts/tools/gamification-admin/game-lib/modals/badge-activated-modal/BadgeActivatedModal.tsx
+++ b/src-ts/tools/gamification-admin/game-lib/modals/badge-activated-modal/BadgeActivatedModal.tsx
@@ -4,6 +4,7 @@ import { BaseModal, Button, PageDivider, useCheckIsMobile } from '../../../../..
 import { GameBadge } from '../../game-badge.model'
 
 import styles from './BadgeActivatedModal.module.scss'
+
 export interface BadgeActivatedModalProps {
     badge: GameBadge
     isOpen: boolean
@@ -23,7 +24,7 @@ const BadgeActivatedModal: FC<BadgeActivatedModalProps> = (props: BadgeActivated
             onClose={onClose}
             open={props.isOpen}
             size='md'
-            title={`Badge updated`}
+            title="Badge updated"
             closeOnOverlayClick={false}
         >
             <div className={styles.wrapper}>
diff --git a/src-ts/tools/gamification-admin/game-lib/modals/badge-assigned-modal/BadgeAssignedModal.tsx b/src-ts/tools/gamification-admin/game-lib/modals/badge-assigned-modal/BadgeAssignedModal.tsx
index 4c7679205..3e65d3ce6 100644
--- a/src-ts/tools/gamification-admin/game-lib/modals/badge-assigned-modal/BadgeAssignedModal.tsx
+++ b/src-ts/tools/gamification-admin/game-lib/modals/badge-assigned-modal/BadgeAssignedModal.tsx
@@ -4,6 +4,7 @@ import { BaseModal, Button, PageDivider, useCheckIsMobile } from '../../../../..
 import { GameBadge } from '../../game-badge.model'
 
 import styles from './BadgeAssignedModal.module.scss'
+
 export interface BadgeAssignedModalProps {
     badge: GameBadge
     isOpen: boolean
@@ -23,7 +24,7 @@ const BadgeAssignedModal: FC<BadgeAssignedModalProps> = (props: BadgeAssignedMod
             onClose={onClose}
             open={props.isOpen}
             size='md'
-            title={`Badge awarded`}
+            title="Badge awarded"
             closeOnOverlayClick={false}
         >
             <div className={styles.wrapper}>
diff --git a/src-ts/tools/gamification-admin/game-lib/modals/badge-created-modal/BadgeCreatedModal.tsx b/src-ts/tools/gamification-admin/game-lib/modals/badge-created-modal/BadgeCreatedModal.tsx
index d9009375a..caf749c73 100644
--- a/src-ts/tools/gamification-admin/game-lib/modals/badge-created-modal/BadgeCreatedModal.tsx
+++ b/src-ts/tools/gamification-admin/game-lib/modals/badge-created-modal/BadgeCreatedModal.tsx
@@ -5,6 +5,7 @@ import { badgeDetailPath } from '../../../gamification-admin.routes'
 import { GameBadge } from '../../game-badge.model'
 
 import styles from './BadgeCreatedModal.module.scss'
+
 export interface BadgeCreatedModalProps {
     badge: GameBadge
     isOpen: boolean
@@ -24,7 +25,7 @@ const BadgeCreatedModal: FC<BadgeCreatedModalProps> = (props: BadgeCreatedModalP
             onClose={onClose}
             open={props.isOpen}
             size='md'
-            title={`Badge created`}
+            title="Badge created"
             closeOnOverlayClick={false}
         >
             <div className={styles.wrapper}>
diff --git a/src-ts/tools/gamification-admin/pages/badge-detail/AwardedMembersTab/awarded-members-table/awarded-members-table.config.tsx b/src-ts/tools/gamification-admin/pages/badge-detail/AwardedMembersTab/awarded-members-table/awarded-members-table.config.tsx
index 741104373..3589c7c9d 100644
--- a/src-ts/tools/gamification-admin/pages/badge-detail/AwardedMembersTab/awarded-members-table/awarded-members-table.config.tsx
+++ b/src-ts/tools/gamification-admin/pages/badge-detail/AwardedMembersTab/awarded-members-table/awarded-members-table.config.tsx
@@ -6,23 +6,23 @@ import { MemberAwaredAtRenderer } from './member-awardedAt-renderer'
 import { MemberHandleRenderer } from './member-handle-renderer'
 
 export const awardedMembersColumns: ReadonlyArray<TableColumn<MemberBadgeAward>> = [
-  {
-    defaultSortDirection: 'asc',
-    isDefaultSort: true,
-    label: 'Handle',
-    propertyName: 'user_handle',
-    renderer: MemberHandleRenderer,
-    type: 'element',
-  },
-  {
-    defaultSortDirection: 'asc',
-    label: 'Awarded at',
-    propertyName: 'awarded_at',
-    renderer: MemberAwaredAtRenderer,
-    type: 'element',
-  },
-  {
-    renderer: MemberActionRenderer,
-    type: 'action',
-  },
+    {
+        defaultSortDirection: 'asc',
+        isDefaultSort: true,
+        label: 'Handle',
+        propertyName: 'user_handle',
+        renderer: MemberHandleRenderer,
+        type: 'element',
+    },
+    {
+        defaultSortDirection: 'asc',
+        label: 'Awarded at',
+        propertyName: 'awarded_at',
+        renderer: MemberAwaredAtRenderer,
+        type: 'element',
+    },
+    {
+        renderer: MemberActionRenderer,
+        type: 'action',
+    },
 ]
diff --git a/src-ts/tools/gamification-admin/pages/badge-detail/AwardedMembersTab/awarded-members-table/member-action-renderer/MemberActionRenderer.tsx b/src-ts/tools/gamification-admin/pages/badge-detail/AwardedMembersTab/awarded-members-table/member-action-renderer/MemberActionRenderer.tsx
index dd70da073..dd096fb31 100644
--- a/src-ts/tools/gamification-admin/pages/badge-detail/AwardedMembersTab/awarded-members-table/member-action-renderer/MemberActionRenderer.tsx
+++ b/src-ts/tools/gamification-admin/pages/badge-detail/AwardedMembersTab/awarded-members-table/member-action-renderer/MemberActionRenderer.tsx
@@ -4,28 +4,28 @@ import { MemberBadgeAward } from '../../../../../game-lib'
 
 import styles from './MemberActionRenderer.module.scss'
 
-function MemberActionRenderer(memberAward: MemberBadgeAward): JSX.Element {
+const MemberActionRenderer = (memberAward: MemberBadgeAward): JSX.Element => 
 
-    // const isMobile: boolean = useCheckIsMobile()
+// const isMobile: boolean = useCheckIsMobile()
 
-    // const buttonProps: ButtonProps = {
-    //     buttonStyle: 'secondary',
-    //     size: isMobile ? 'xs' : 'sm',
-    // }
+// const buttonProps: ButtonProps = {
+//     buttonStyle: 'secondary',
+//     size: isMobile ? 'xs' : 'sm',
+// }
 
-    // const actionButtons: Array<{
-    //     label: string
-    // }> = [
-    //         {
-    //             label: 'Unassign',
-    //         },
-    //     ]
+// const actionButtons: Array<{
+//     label: string
+// }> = [
+//         {
+//             label: 'Unassign',
+//         },
+//     ]
 
-    // function onUnassign(): void {
+// function onUnassign(): void {
 
-    // }
+// }
 
-    return (
+    (
         <div className={styles['badge-actions']}>
             {/* {actionButtons.map((button, index) => {
                 return (
@@ -39,6 +39,6 @@ function MemberActionRenderer(memberAward: MemberBadgeAward): JSX.Element {
             })} */}
         </div>
     )
-}
+
 
 export default MemberActionRenderer
diff --git a/src-ts/tools/gamification-admin/pages/badge-detail/AwardedMembersTab/awarded-members-table/member-awardedAt-renderer/MemberAwaredAtRenderer.tsx b/src-ts/tools/gamification-admin/pages/badge-detail/AwardedMembersTab/awarded-members-table/member-awardedAt-renderer/MemberAwaredAtRenderer.tsx
index fa9263cce..952ba3263 100644
--- a/src-ts/tools/gamification-admin/pages/badge-detail/AwardedMembersTab/awarded-members-table/member-awardedAt-renderer/MemberAwaredAtRenderer.tsx
+++ b/src-ts/tools/gamification-admin/pages/badge-detail/AwardedMembersTab/awarded-members-table/member-awardedAt-renderer/MemberAwaredAtRenderer.tsx
@@ -2,7 +2,7 @@ import { MemberBadgeAward } from '../../../../../game-lib'
 
 import styles from './MemberAwaredAtRenderer.module.scss'
 
-function MemberAwaredAtRenderer(memberAward: MemberBadgeAward): JSX.Element {
+const MemberAwaredAtRenderer = (memberAward: MemberBadgeAward): JSX.Element => {
     const dateFormat: Record<string, string> = {
         day: 'numeric',
         hour: 'numeric',
diff --git a/src-ts/tools/gamification-admin/pages/badge-detail/AwardedMembersTab/awarded-members-table/member-handle-renderer/MemberHandleRenderer.tsx b/src-ts/tools/gamification-admin/pages/badge-detail/AwardedMembersTab/awarded-members-table/member-handle-renderer/MemberHandleRenderer.tsx
index 5f6458809..1c47b2788 100644
--- a/src-ts/tools/gamification-admin/pages/badge-detail/AwardedMembersTab/awarded-members-table/member-handle-renderer/MemberHandleRenderer.tsx
+++ b/src-ts/tools/gamification-admin/pages/badge-detail/AwardedMembersTab/awarded-members-table/member-handle-renderer/MemberHandleRenderer.tsx
@@ -4,16 +4,14 @@ import { MemberBadgeAward } from '../../../../../game-lib'
 
 import styles from './MemberHandleRenderer.module.scss'
 
-function MemberHandleRenderer(memberAward: MemberBadgeAward): JSX.Element {
-    return (
-        <div className={styles.memberAward}>
-            <p className={styles.memberHandle}>{memberAward.user_handle}</p>
-            <IconOutline.ExternalLinkIcon
-                className={styles.profileLink}
-                onClick={() => window.open(`${EnvironmentConfig.TOPCODER_URLS.USER_PROFILE}/${memberAward.user_handle}`, '_blank')}
-            />
-        </div>
-    )
-}
+const MemberHandleRenderer = (memberAward: MemberBadgeAward): JSX.Element => (
+    <div className={styles.memberAward}>
+        <p className={styles.memberHandle}>{memberAward.user_handle}</p>
+        <IconOutline.ExternalLinkIcon
+            className={styles.profileLink}
+            onClick={() => window.open(`${EnvironmentConfig.TOPCODER_URLS.USER_PROFILE}/${memberAward.user_handle}`, '_blank')}
+        />
+    </div>
+)
 
 export default MemberHandleRenderer
diff --git a/src-ts/tools/gamification-admin/pages/badge-detail/BadgeDetailPage.tsx b/src-ts/tools/gamification-admin/pages/badge-detail/BadgeDetailPage.tsx
index ae0ae2df1..042f93e17 100644
--- a/src-ts/tools/gamification-admin/pages/badge-detail/BadgeDetailPage.tsx
+++ b/src-ts/tools/gamification-admin/pages/badge-detail/BadgeDetailPage.tsx
@@ -92,6 +92,7 @@ const BadgeDetailPage: FC = () => {
                     setFileDataURL(result)
                 }
             }
+
             fileReader.readAsDataURL(newImageFile[0])
         } else if (fileDataURL) {
             setFileDataURL(undefined)
@@ -211,6 +212,7 @@ const BadgeDetailPage: FC = () => {
             setBadgeNameErrorText('Update rejected due to invalid title string.')
             return
         }
+
         if (newBadgeName !== badgeDetailsHandler.data?.badge_name) {
             // save only if different
             updateBadgeAsync({
@@ -287,6 +289,7 @@ const BadgeDetailPage: FC = () => {
             onManualAssign={onAssign}
         />
     }
+
     if (activeTab === BadgeDetailsTabViews.batchAward) {
         activeTabElement = <BatchAwardTab
             badge={badgeDetailsHandler.data as GameBadge}
@@ -322,7 +325,7 @@ const BadgeDetailPage: FC = () => {
                                         onClick={() => fileInputRef.current?.click()} />
                                     <img src={fileDataURL || badgeDetailsHandler.data?.badge_image_url} alt='badge media preview' />
                                     <input
-                                        type={'file'}
+                                        type="file"
                                         ref={fileInputRef}
                                         className={styles.filePickerInput}
                                         accept={GamificationConfig.ACCEPTED_BADGE_MIME_TYPES}
diff --git a/src-ts/tools/gamification-admin/pages/badge-detail/BatchAwardTab/BatchAwardTab.tsx b/src-ts/tools/gamification-admin/pages/badge-detail/BatchAwardTab/BatchAwardTab.tsx
index 83cda8abd..d2034f7a9 100644
--- a/src-ts/tools/gamification-admin/pages/badge-detail/BatchAwardTab/BatchAwardTab.tsx
+++ b/src-ts/tools/gamification-admin/pages/badge-detail/BatchAwardTab/BatchAwardTab.tsx
@@ -7,6 +7,7 @@ import { BadgeAssignedModal } from '../../../game-lib/modals/badge-assigned-moda
 import { batchAssignRequestAsync } from '../badge-details.functions'
 
 import styles from './BatchAwardTab.module.scss'
+
 interface BatchAwardTabProps {
     badge: GameBadge,
     onBatchAssign: () => void
@@ -40,6 +41,7 @@ const BatchAwardTab: FC<BatchAwardTabProps> = (props: BatchAwardTabProps) => {
                 if (e.errors && e.errors[0] && e.errors[0].path === 'user_id') {
                     message = `CSV file contains duplicate data. There are members included already owning this badge.`
                 }
+
                 setErrorText(message)
             })
     }
@@ -50,7 +52,7 @@ const BatchAwardTab: FC<BatchAwardTabProps> = (props: BatchAwardTabProps) => {
             <div className={styles.batchFormWrap}>
                 <div>
                     <p>If you would like to assign multiple people to multiple badges, this area is for you. Download the template below, populate the file with your data, and upload that file to the right once completed.</p>
-                    <a target={'_blank'} href='/gamification-admin/bulk.sample.csv' download='bulk.sample.csv' className={styles.templateLink}>Download template CSV</a>
+                    <a target="_blank" href='/gamification-admin/bulk.sample.csv' download='bulk.sample.csv' className={styles.templateLink}>Download template CSV</a>
                 </div>
                 <div className={styles.batchForm}>
                     <InputFilePicker
diff --git a/src-ts/tools/gamification-admin/pages/badge-detail/ManualAwardTab/ManualAwardTab.tsx b/src-ts/tools/gamification-admin/pages/badge-detail/ManualAwardTab/ManualAwardTab.tsx
index a997263a5..07b231680 100644
--- a/src-ts/tools/gamification-admin/pages/badge-detail/ManualAwardTab/ManualAwardTab.tsx
+++ b/src-ts/tools/gamification-admin/pages/badge-detail/ManualAwardTab/ManualAwardTab.tsx
@@ -40,6 +40,7 @@ const ManualAwardTab: FC<ManualAwardTabProps> = (props: ManualAwardTabProps) =>
                     const handleOrId: string = find(selectedMembers, { userId: e.errors[0].value })?.handle || e.errors[0].value
                     message = `Member ${handleOrId} already owns this badge.`
                 }
+
                 setBadgeAssignError(message)
             })
     }
@@ -51,7 +52,7 @@ const ManualAwardTab: FC<ManualAwardTabProps> = (props: ManualAwardTabProps) =>
                 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Neque ullamcorper neque sed orci, enim amet, sed.</p>
                 <div className={styles.manualForm}>
                     <InputHandleAutocomplete
-                        label={'Select Member'}
+                        label="Select Member"
                         name='manual-award-member-select'
                         placeholder='Type and select member to award'
                         onChange={setSelectedMembers}
diff --git a/src-ts/tools/gamification-admin/pages/badge-detail/update-badge.store.ts b/src-ts/tools/gamification-admin/pages/badge-detail/update-badge.store.ts
index 4d5ef14fe..1018837da 100644
--- a/src-ts/tools/gamification-admin/pages/badge-detail/update-badge.store.ts
+++ b/src-ts/tools/gamification-admin/pages/badge-detail/update-badge.store.ts
@@ -13,13 +13,16 @@ export async function submitRequestAsync(request: UpdateBadgeRequest): Promise<G
     if (request.files) {
         form.append('file', request.files[0])
     }
+
     if (request.badgeActive !== undefined) {
         form.append('active', request.badgeActive)
     }
+
     if (request.badgeName) { (
         form.append('badge_name', request.badgeName)
     )
     }
+
     if (request.badgeDesc) {
         form.append('badge_description', request.badgeDesc)
     }
diff --git a/src-ts/tools/gamification-admin/pages/badge-listing/badge-listing-table/badge-action-renderer/BadgeActionRenderer.tsx b/src-ts/tools/gamification-admin/pages/badge-listing/badge-listing-table/badge-action-renderer/BadgeActionRenderer.tsx
index de110b033..2ae3076dd 100644
--- a/src-ts/tools/gamification-admin/pages/badge-listing/badge-listing-table/badge-action-renderer/BadgeActionRenderer.tsx
+++ b/src-ts/tools/gamification-admin/pages/badge-listing/badge-listing-table/badge-action-renderer/BadgeActionRenderer.tsx
@@ -4,7 +4,7 @@ import { badgeDetailPath } from '../../../../gamification-admin.routes'
 
 import styles from './BadgeActionRenderer.module.scss'
 
-function BadgeActionRenderer(badge: GameBadge): JSX.Element {
+const BadgeActionRenderer = (badge: GameBadge): JSX.Element => {
 
     const isMobile: boolean = useCheckIsMobile()
 
@@ -17,27 +17,25 @@ function BadgeActionRenderer(badge: GameBadge): JSX.Element {
         label: string
         view?: 'edit' | 'award'
     }> = [
-            {
-                label: 'View',
-            },
-            {
-                label: 'Award',
-                view: 'award',
-            },
-        ]
+        {
+            label: 'View',
+        },
+        {
+            label: 'Award',
+            view: 'award',
+        },
+    ]
 
     return (
         <div className={styles['badge-actions']}>
-            {actionButtons.map((button, index) => {
-                return (
-                    <Button
-                        {...buttonProps}
-                        key={index}
-                        label={button.label}
-                        route={badgeDetailPath(badge.id, button.view)}
-                    />
-                )
-            })}
+            {actionButtons.map((button, index) => (
+                <Button
+                    {...buttonProps}
+                    key={index}
+                    label={button.label}
+                    route={badgeDetailPath(badge.id, button.view)}
+                />
+            ))}
         </div>
     )
 }
diff --git a/src-ts/tools/gamification-admin/pages/badge-listing/badge-listing-table/badge-listing-table.config.tsx b/src-ts/tools/gamification-admin/pages/badge-listing/badge-listing-table/badge-listing-table.config.tsx
index 1d6d54ef4..564b3503b 100644
--- a/src-ts/tools/gamification-admin/pages/badge-listing/badge-listing-table/badge-listing-table.config.tsx
+++ b/src-ts/tools/gamification-admin/pages/badge-listing/badge-listing-table/badge-listing-table.config.tsx
@@ -5,16 +5,16 @@ import { BadgeActionRenderer } from './badge-action-renderer'
 import { BadgeListingNameRenderer } from './badge-name-renderer'
 
 export const badgeListingColumns: ReadonlyArray<TableColumn<GameBadge>> = [
-  {
-    defaultSortDirection: 'asc',
-    isDefaultSort: true,
-    label: 'Badge Name',
-    propertyName: 'badge_name',
-    renderer: BadgeListingNameRenderer,
-    type: 'element',
-  },
-  {
-    renderer: BadgeActionRenderer,
-    type: 'action',
-  },
+    {
+        defaultSortDirection: 'asc',
+        isDefaultSort: true,
+        label: 'Badge Name',
+        propertyName: 'badge_name',
+        renderer: BadgeListingNameRenderer,
+        type: 'element',
+    },
+    {
+        renderer: BadgeActionRenderer,
+        type: 'action',
+    },
 ]
diff --git a/src-ts/tools/gamification-admin/pages/badge-listing/badge-listing-table/badge-name-renderer/BadgeListingNameRenderer.tsx b/src-ts/tools/gamification-admin/pages/badge-listing/badge-listing-table/badge-name-renderer/BadgeListingNameRenderer.tsx
index 7b9c604ca..09aef78dc 100644
--- a/src-ts/tools/gamification-admin/pages/badge-listing/badge-listing-table/badge-name-renderer/BadgeListingNameRenderer.tsx
+++ b/src-ts/tools/gamification-admin/pages/badge-listing/badge-listing-table/badge-name-renderer/BadgeListingNameRenderer.tsx
@@ -2,17 +2,15 @@ import { GameBadge } from '../../../../game-lib'
 
 import styles from './BadgeListingNameRenderer.module.scss'
 
-function BadgeListingNameRenderer(badge: GameBadge): JSX.Element {
-    return (
-        <div className={styles['badge']}>
-            <img
-                alt={badge.badge_name}
-                className={styles[badge.active ? 'badge-image' : 'badge-image-disabled']}
-                src={badge.badge_image_url}
-            />
-            <p className={styles['badge-name']}>{badge.badge_name}</p>
-        </div>
-    )
-}
+const BadgeListingNameRenderer = (badge: GameBadge): JSX.Element => (
+    <div className={styles.badge}>
+        <img
+            alt={badge.badge_name}
+            className={styles[badge.active ? 'badge-image' : 'badge-image-disabled']}
+            src={badge.badge_image_url}
+        />
+        <p className={styles['badge-name']}>{badge.badge_name}</p>
+    </div>
+)
 
 export default BadgeListingNameRenderer
diff --git a/src-ts/tools/gamification-admin/pages/create-badge/create-badge-form/CreateBadgeForm.tsx b/src-ts/tools/gamification-admin/pages/create-badge/create-badge-form/CreateBadgeForm.tsx
index ceae9d636..b4857bc20 100644
--- a/src-ts/tools/gamification-admin/pages/create-badge/create-badge-form/CreateBadgeForm.tsx
+++ b/src-ts/tools/gamification-admin/pages/create-badge/create-badge-form/CreateBadgeForm.tsx
@@ -42,8 +42,8 @@ const CreateBadgeForm: FC<CreateBadgeFormProps> = (props: CreateBadgeFormProps)
         <Form
             formDef={props.formDef}
             requestGenerator={generateRequest}
-            resetFormAfterSave={true}
-            resetFormOnUnmount={true}
+            resetFormAfterSave
+            resetFormOnUnmount
             save={saveAsync}
         />
     )
diff --git a/src-ts/tools/learn/course-certificate/certificate-view/CertificateView.tsx b/src-ts/tools/learn/course-certificate/certificate-view/CertificateView.tsx
index 3fb376920..c849bded6 100644
--- a/src-ts/tools/learn/course-certificate/certificate-view/CertificateView.tsx
+++ b/src-ts/tools/learn/course-certificate/certificate-view/CertificateView.tsx
@@ -127,6 +127,7 @@ const CertificateView: FC<CertificateViewProps> = (props: CertificateViewProps)
         if (!canvas) {
             return
         }
+
         fileDownloadCanvasAsImage(canvas, `${certificationTitle}.png`)
     }
 
@@ -135,6 +136,7 @@ const CertificateView: FC<CertificateViewProps> = (props: CertificateViewProps)
         if (!canvas) {
             return
         }
+
         const printWindow: Window | null = window.open('')
 
         if (!printWindow) {
@@ -163,7 +165,7 @@ const CertificateView: FC<CertificateViewProps> = (props: CertificateViewProps)
             <LoadingSpinner hide={ready} />
 
             {ready && readyAndCompletedCertification && (
-                <div className={styles['wrap']}>
+                <div className={styles.wrap}>
                     <div className={styles['content-wrap']}>
                         {!props.hideActions && (
                             <div className={styles['btns-wrap']}>
diff --git a/src-ts/tools/learn/course-certificate/certificate-view/action-button/ActionButton.tsx b/src-ts/tools/learn/course-certificate/certificate-view/action-button/ActionButton.tsx
index ca3b8bd70..b85d0918b 100644
--- a/src-ts/tools/learn/course-certificate/certificate-view/action-button/ActionButton.tsx
+++ b/src-ts/tools/learn/course-certificate/certificate-view/action-button/ActionButton.tsx
@@ -15,7 +15,7 @@ const ActionButton: FC<ActionButtonProps> = (props: ActionButtonProps) => {
     if (!!props.url) {
         return (
             <a
-                className={styles['wrap']}
+                className={styles.wrap}
                 href={props.url}
                 onClick={props.onClick}
                 tabIndex={-1}
@@ -27,7 +27,7 @@ const ActionButton: FC<ActionButtonProps> = (props: ActionButtonProps) => {
     }
 
     return (
-        <div className={styles['wrap']} onClick={props.onClick}>
+        <div className={styles.wrap} onClick={props.onClick}>
             {props.icon}
         </div>
     )
diff --git a/src-ts/tools/learn/course-certificate/certificate-view/certificate/Certificate.tsx b/src-ts/tools/learn/course-certificate/certificate-view/certificate/Certificate.tsx
index 68f842d6c..f044c3995 100644
--- a/src-ts/tools/learn/course-certificate/certificate-view/certificate/Certificate.tsx
+++ b/src-ts/tools/learn/course-certificate/certificate-view/certificate/Certificate.tsx
@@ -33,32 +33,32 @@ const Certificate: FC<CertificateProps> = (props: CertificateProps) => {
     return (
         <div
             {...elementSelector}
-            className={classNames(styles['wrap'], props.viewStyle)}
+            className={classNames(styles.wrap, props.viewStyle)}
             ref={props.elRef}
         >
-            <div className={classNames(styles['details'], `theme-${certificateType.toLowerCase()}`)}>
+            <div className={classNames(styles.details, `theme-${certificateType.toLowerCase()}`)}>
                 <div className={styles['details-inner']}>
                     <h2 className='details grad'>Topcoder Academy</h2>
                     <h3>Certificate of Course Completion</h3>
-                    <h1 className={classNames(styles['username'], 'grad')}>
+                    <h1 className={classNames(styles.username, 'grad')}>
                         {props.userName}
                     </h1>
                     <div className={classNames('large-subtitle', styles['tc-handle'])}>
                         <span>Topcoder Handle: </span>
                         <span>{props.tcHandle}</span>
                     </div>
-                    <div className={styles['logos']}>
-                        <div className={styles['logo']}>
+                    <div className={styles.logos}>
+                        <div className={styles.logo}>
                             <TcLogoSvg />
                         </div>
-                        <div className={styles['divider']} />
-                        <div className={styles['logo']}>
+                        <div className={styles.divider} />
+                        <div className={styles.logo}>
                             <TcAcademyLogoSvg />
                         </div>
-                </div>
+                    </div>
                 </div>
             </div>
-            <div className={styles['badges']}>
+            <div className={styles.badges}>
                 <div className={styles['pattern-bg']}>
                     <CertificateBgPattern type={certificateType} />
                 </div>
@@ -69,7 +69,7 @@ const Certificate: FC<CertificateProps> = (props: CertificateProps) => {
                         completedDate={props.completedDate}
                     />
                 </div>
-                <div className={styles['vendor']}>
+                <div className={styles.vendor}>
                     <div className='body-ultra-small'>
                         Course content provided by {props.provider}
                     </div>
diff --git a/src-ts/tools/learn/course-certificate/certificate-view/certificate/certificate-bg-pattern/CertificateBgPattern.tsx b/src-ts/tools/learn/course-certificate/certificate-view/certificate/certificate-bg-pattern/CertificateBgPattern.tsx
index 82fdb7c1a..801a3c8d2 100644
--- a/src-ts/tools/learn/course-certificate/certificate-view/certificate/certificate-bg-pattern/CertificateBgPattern.tsx
+++ b/src-ts/tools/learn/course-certificate/certificate-view/certificate/certificate-bg-pattern/CertificateBgPattern.tsx
@@ -9,14 +9,11 @@ interface CertificateBgPatternProps {
     type: LearnCertificateTrackType
 }
 
-const CertificateBgPattern: FC<CertificateBgPatternProps> = (props: CertificateBgPatternProps) => {
-
-    return (
-        <div className={classNames(styles['wrap'], `theme-${props.type.toLowerCase()}`)}>
-            <div className='pattern-bg'></div>
-            <div className='wave-bg'></div>
-        </div>
-    )
-}
+const CertificateBgPattern: FC<CertificateBgPatternProps> = (props: CertificateBgPatternProps) => (
+    <div className={classNames(styles.wrap, `theme-${props.type.toLowerCase()}`)}>
+        <div className='pattern-bg' />
+        <div className='wave-bg' />
+    </div>
+)
 
 export default CertificateBgPattern
diff --git a/src-ts/tools/learn/course-certificate/certificate-view/certificate/course-card/CourseCard.tsx b/src-ts/tools/learn/course-certificate/certificate-view/certificate/course-card/CourseCard.tsx
index 96b38ee32..5cb12df83 100644
--- a/src-ts/tools/learn/course-certificate/certificate-view/certificate/course-card/CourseCard.tsx
+++ b/src-ts/tools/learn/course-certificate/certificate-view/certificate/course-card/CourseCard.tsx
@@ -12,27 +12,24 @@ interface CourseCardProps {
     type: LearnCertificateTrackType
 }
 
-const CourseCard: FC<CourseCardProps> = (props: CourseCardProps) => {
-
-    return (
-        <div className={styles['wrap']}>
-            <div className={styles['top-wrap']}>
-                <div className={styles['badge']}>
-                    <CourseBadge type={props.type} asImg />
-                </div>
-                <h5 className={classNames('details', styles['course-title'])}>
-                    {props.course}
-                </h5>
-            </div>
-            <div className={styles['details']}>
-                <IconOutline.CalendarIcon />
-                <span className='large-subtitle'>
-                    <span>Completed</span>
-                    <span>{props.completedDate && textFormatDateLocaleShortString(new Date(props.completedDate))}</span>
-                </span>
+const CourseCard: FC<CourseCardProps> = (props: CourseCardProps) => (
+    <div className={styles.wrap}>
+        <div className={styles['top-wrap']}>
+            <div className={styles.badge}>
+                <CourseBadge type={props.type} asImg />
             </div>
+            <h5 className={classNames('details', styles['course-title'])}>
+                {props.course}
+            </h5>
         </div>
-    )
-}
+        <div className={styles.details}>
+            <IconOutline.CalendarIcon />
+            <span className='large-subtitle'>
+                <span>Completed</span>
+                <span>{props.completedDate && textFormatDateLocaleShortString(new Date(props.completedDate))}</span>
+            </span>
+        </div>
+    </div>
+)
 
 export default CourseCard
diff --git a/src-ts/tools/learn/course-details/CourseDetailsPage.tsx b/src-ts/tools/learn/course-details/CourseDetailsPage.tsx
index 1795fecfd..6f2474bc7 100644
--- a/src-ts/tools/learn/course-details/CourseDetailsPage.tsx
+++ b/src-ts/tools/learn/course-details/CourseDetailsPage.tsx
@@ -79,7 +79,7 @@ const CourseDetailsPage: FC<{}> = () => {
             <>
                 <h3 className='details'>Suggested next steps</h3>
 
-                <div className={styles['text']}>
+                <div className={styles.text}>
                     <p>
                         Now that you have completed the {course.title},
                         we'd recommend you enroll in another course to continue your learning.
@@ -93,9 +93,9 @@ const CourseDetailsPage: FC<{}> = () => {
                     <h3 className='details'>Why should you complete this course?</h3>
 
                     <div
-                        className={styles['text']}
+                        className={styles.text}
                         dangerouslySetInnerHTML={{ __html: (course.keyPoints ?? []).join('<br /><br />') }}
-                    ></div>
+                    />
                 </>
             )
         )
@@ -112,7 +112,7 @@ const CourseDetailsPage: FC<{}> = () => {
             <>
                 <h3 className='details mtop'>Prerequisites</h3>
 
-                <div className={styles['text']}>
+                <div className={styles.text}>
                     There are no prerequisites for this course.
                     The course content is appropriate for new learners with no previous experience in this topic.
                 </div>
@@ -133,9 +133,9 @@ const CourseDetailsPage: FC<{}> = () => {
                     <h3 className='details mtop'>Suggestions for completing this course</h3>
 
                     <div
-                        className={styles['text']}
+                        className={styles.text}
                         dangerouslySetInnerHTML={{ __html: (course.completionSuggestions ?? []).join('<br /><br />') }}
-                    ></div>
+                    />
                 </>
             )
         )
@@ -159,14 +159,14 @@ const CourseDetailsPage: FC<{}> = () => {
     return (
         <ContentLayout>
             {!ready && (
-                <div className={styles['wrap']}>
+                <div className={styles.wrap}>
                     <LoadingSpinner />
                 </div>
             )}
             <Breadcrumb items={breadcrumb} />
             {ready && course && (
                 <>
-                    <div className={styles['wrap']}>
+                    <div className={styles.wrap}>
                         <div className={styles['intro-copy']}>
                             <CourseTitle
                                 size='lg'
@@ -176,12 +176,12 @@ const CourseDetailsPage: FC<{}> = () => {
                             />
 
                             <div
-                                className={styles['text']}
+                                className={styles.text}
                                 dangerouslySetInnerHTML={{ __html: course.introCopy.join('<br /><br />') }}
-                            ></div>
+                            />
                         </div>
 
-                        <div className={styles['description']}>
+                        <div className={styles.description}>
                             {getDescription()}
                             {getPrerequisites()}
                             {getCompletionSuggestion()}
@@ -190,7 +190,7 @@ const CourseDetailsPage: FC<{}> = () => {
                             </div>
                         </div>
 
-                        <div className={styles['aside']}>
+                        <div className={styles.aside}>
                             <CourseCurriculum
                                 course={course}
                                 progress={progress}
diff --git a/src-ts/tools/learn/course-details/course-curriculum/CourseCurriculum.tsx b/src-ts/tools/learn/course-details/course-curriculum/CourseCurriculum.tsx
index 5aa882224..ad8f795d9 100644
--- a/src-ts/tools/learn/course-details/course-curriculum/CourseCurriculum.tsx
+++ b/src-ts/tools/learn/course-details/course-curriculum/CourseCurriculum.tsx
@@ -152,8 +152,8 @@ const CourseCurriculum: FC<CourseCurriculumProps> = (props: CourseCurriculumProp
 
     return (
         <>
-            <div className={styles['wrap']}>
-                <div className={styles['title']}>
+            <div className={styles.wrap}>
+                <div className={styles.title}>
                     {isCompleted && (
                         <>
                             <LearningHat />
diff --git a/src-ts/tools/learn/course-details/course-curriculum/curriculum-summary/CurriculumSummary.tsx b/src-ts/tools/learn/course-details/course-curriculum/curriculum-summary/CurriculumSummary.tsx
index 7d611fef4..db0febe9c 100644
--- a/src-ts/tools/learn/course-details/course-curriculum/curriculum-summary/CurriculumSummary.tsx
+++ b/src-ts/tools/learn/course-details/course-curriculum/curriculum-summary/CurriculumSummary.tsx
@@ -49,23 +49,23 @@ const CurriculumSummary: FC<CurriculumSummaryProps> = (props: CurriculumSummaryP
     }, [completed, props.completedDate, props.onClickCertificateBtn])
 
     return (
-        <div className={styles['wrap']}>
+        <div className={styles.wrap}>
             {(inProgress || completed) && (
                 <>
-                    <div className={styles['title']}>
+                    <div className={styles.title}>
                         {title}
                     </div>
                     <ProgressBar progress={progress ?? 0} />
                 </>
             )}
 
-            <div className={styles['summary']}>
+            <div className={styles.summary}>
                 <CurriculumSummaryStats
                     moduleCount={props.course.modules.length}
                     completionHours={props.course.estimatedCompletionTime}
                 />
 
-                <div className={styles['button']}>
+                <div className={styles.button}>
                     <Button
                         buttonStyle={completed ? 'secondary' : 'primary'}
                         size='md'
diff --git a/src-ts/tools/learn/course-details/course-curriculum/tc-academy-policy-modal/TcAcademyPolicyModal.tsx b/src-ts/tools/learn/course-details/course-curriculum/tc-academy-policy-modal/TcAcademyPolicyModal.tsx
index 9becad13f..e4b682503 100644
--- a/src-ts/tools/learn/course-details/course-curriculum/tc-academy-policy-modal/TcAcademyPolicyModal.tsx
+++ b/src-ts/tools/learn/course-details/course-curriculum/tc-academy-policy-modal/TcAcademyPolicyModal.tsx
@@ -17,6 +17,7 @@ const TcAcademyPolicyModal: FC<TcAcademyPolicyModalProps> = (props: TcAcademyPol
         if (loading) {
             return
         }
+
         setLoading(true)
         props.onConfirm()
     }
@@ -68,7 +69,7 @@ const TcAcademyPolicyModal: FC<TcAcademyPolicyModalProps> = (props: TcAcademyPol
             <div className='button-container'>
                 <Button
                     buttonStyle='primary'
-                    label={'I Agree'}
+                    label="I Agree"
                     onClick={handleConfirm}
                     tabIndex={2}
                     size='lg'
diff --git a/src-ts/tools/learn/course-details/promo-course/PromoCourse.tsx b/src-ts/tools/learn/course-details/promo-course/PromoCourse.tsx
index a06308af9..da7a8ed8e 100644
--- a/src-ts/tools/learn/course-details/promo-course/PromoCourse.tsx
+++ b/src-ts/tools/learn/course-details/promo-course/PromoCourse.tsx
@@ -6,33 +6,30 @@ import { ReactComponent as MobileLearnGetCertified2 } from './mobile-get-certifi
 import { ReactComponent as MobileLearnGetCertified } from './mobile-get-certified.svg'
 import styles from './PromoCourse.module.scss'
 
-const PromoCourse: FC<{}> = () => {
-
-    return (
-        <div className={styles['wrap']}>
-            <div className={styles['text-content']}>
-                <h4 className='details'>Coming soon</h4>
-                <div className='body-medium-bold'>
-                    More ways to reach your potential with Recommended Learning Paths
-                </div>
-                <div className='body-main'>
-                    We will be building additional learning path courses, where when taken
-                    in sequence, will result in a larger Topcoder certification.
-                    These certifications will show in your Topcoder profile and will showcase
-                    your verified skills and earned certifications. The resulting outcome is
-                    that you have gained essential skills allowing you to be more successful
-                    on the Topcoder platform.
-                </div>
-            </div>
-            <div className={classNames('mobile-hide', styles['course-path-steps'])}>
-                <LearnGetCertified />
+const PromoCourse: FC<{}> = () => (
+    <div className={styles.wrap}>
+        <div className={styles['text-content']}>
+            <h4 className='details'>Coming soon</h4>
+            <div className='body-medium-bold'>
+                More ways to reach your potential with Recommended Learning Paths
             </div>
-            <div className={classNames('desktop-hide', styles['course-path-steps'])}>
-                <MobileLearnGetCertified />
-                <MobileLearnGetCertified2 />
+            <div className='body-main'>
+                We will be building additional learning path courses, where when taken
+                in sequence, will result in a larger Topcoder certification.
+                These certifications will show in your Topcoder profile and will showcase
+                your verified skills and earned certifications. The resulting outcome is
+                that you have gained essential skills allowing you to be more successful
+                on the Topcoder platform.
             </div>
         </div>
-    )
-}
+        <div className={classNames('mobile-hide', styles['course-path-steps'])}>
+            <LearnGetCertified />
+        </div>
+        <div className={classNames('desktop-hide', styles['course-path-steps'])}>
+            <MobileLearnGetCertified />
+            <MobileLearnGetCertified2 />
+        </div>
+    </div>
+)
 
 export default PromoCourse
diff --git a/src-ts/tools/learn/free-code-camp/FreeCodeCamp.tsx b/src-ts/tools/learn/free-code-camp/FreeCodeCamp.tsx
index 83af1a695..7d69ac783 100644
--- a/src-ts/tools/learn/free-code-camp/FreeCodeCamp.tsx
+++ b/src-ts/tools/learn/free-code-camp/FreeCodeCamp.tsx
@@ -96,9 +96,7 @@ const FreeCodeCamp: FC<{}> = () => {
         },
     ])
 
-    const currentModuleData: LearnModule | undefined = useMemo(() => {
-        return courseData?.modules.find(d => d.key === moduleParam)
-    }, [courseData, moduleParam])
+    const currentModuleData: LearnModule | undefined = useMemo(() => courseData?.modules.find(d => d.key === moduleParam), [courseData, moduleParam])
 
     const currentStepIndex: number = useMemo(() => {
         if (!currentModuleData) {
@@ -137,9 +135,11 @@ const FreeCodeCamp: FC<{}> = () => {
         if (coursePath !== certificationParam) {
             setCourseParam(coursePath)
         }
+
         if (modulePath !== moduleParam) {
             setModuleParam(modulePath)
         }
+
         if (lessonPath !== lessonParam) {
             setLessonParam(lessonPath)
         }
@@ -329,9 +329,11 @@ const FreeCodeCamp: FC<{}> = () => {
         if (certificationPath !== certificationParam) {
             setCourseParam(certificationPath)
         }
+
         if (modulePath !== moduleParam) {
             setModuleParam(modulePath)
         }
+
         if (lessonPath !== lessonParam) {
             setLessonParam(lessonPath)
         }
diff --git a/src-ts/tools/learn/free-code-camp/fcc-frame/FccFrame.tsx b/src-ts/tools/learn/free-code-camp/fcc-frame/FccFrame.tsx
index 7ccb16d3c..5f66a1641 100755
--- a/src-ts/tools/learn/free-code-camp/fcc-frame/FccFrame.tsx
+++ b/src-ts/tools/learn/free-code-camp/fcc-frame/FccFrame.tsx
@@ -49,6 +49,7 @@ const FccFrame: FC<FccFrameProps> = (props: FccFrameProps) => {
         if (!frameRef) {
             return
         }
+
         const handleEvent: (event: any) => void = (event: any) => {
             const { data: jsonData, origin }: { data: string, origin: string } = event
 
diff --git a/src-ts/tools/learn/free-code-camp/title-nav/TitleNav.tsx b/src-ts/tools/learn/free-code-camp/title-nav/TitleNav.tsx
index 40240173c..340b39385 100755
--- a/src-ts/tools/learn/free-code-camp/title-nav/TitleNav.tsx
+++ b/src-ts/tools/learn/free-code-camp/title-nav/TitleNav.tsx
@@ -11,37 +11,34 @@ interface TitleNavProps {
     title?: string
 }
 
-const TitleNav: FC<TitleNavProps> = (props: TitleNavProps) => {
+const TitleNav: FC<TitleNavProps> = (props: TitleNavProps) => (
+    <div className={styles.wrap}>
+        <h1 className='details'>
+            {props.title}
+        </h1>
 
-    return (
-        <div className={styles['wrap']}>
-            <h1 className='details'>
-                {props.title}
-            </h1>
-
-            <div className={styles['nav-wrap']}>
-                <span className='overline'>
-                    <span className={styles['current']}>{props.currentStep}</span>
-                    <span> / </span>
-                    <span>{props.maxStep}</span>
-                </span>
-                <div className={styles['nav-btns']}>
-                    <div
-                        className={styles['nav-btn']}
-                        onClick={() => props.onNavigate(-1)}
-                    >
-                        <IconSolid.ChevronLeftIcon />
-                    </div>
-                    <div
-                        className={styles['nav-btn']}
-                        onClick={() => props.onNavigate(1)}
-                    >
-                        <IconSolid.ChevronRightIcon />
-                    </div>
+        <div className={styles['nav-wrap']}>
+            <span className='overline'>
+                <span className={styles.current}>{props.currentStep}</span>
+                <span> / </span>
+                <span>{props.maxStep}</span>
+            </span>
+            <div className={styles['nav-btns']}>
+                <div
+                    className={styles['nav-btn']}
+                    onClick={() => props.onNavigate(-1)}
+                >
+                    <IconSolid.ChevronLeftIcon />
+                </div>
+                <div
+                    className={styles['nav-btn']}
+                    onClick={() => props.onNavigate(1)}
+                >
+                    <IconSolid.ChevronRightIcon />
                 </div>
             </div>
         </div>
-    )
-}
+    </div>
+)
 
 export default TitleNav
diff --git a/src-ts/tools/learn/learn-lib/collapsible-pane/CollapsiblePane.tsx b/src-ts/tools/learn/learn-lib/collapsible-pane/CollapsiblePane.tsx
index dadf18d74..291f452bf 100644
--- a/src-ts/tools/learn/learn-lib/collapsible-pane/CollapsiblePane.tsx
+++ b/src-ts/tools/learn/learn-lib/collapsible-pane/CollapsiblePane.tsx
@@ -31,8 +31,8 @@ const CollapsiblePane: FC<CollapsiblePaneProps> = (props: CollapsiblePaneProps)
     const elRef: MutableRefObject<HTMLElement | any> = useRef()
 
     const toggle: () => void = useCallback(() => {
-      setIsOpen(!isOpen)
-      onToggle(!isOpen)
+        setIsOpen(!isOpen)
+        onToggle(!isOpen)
     }, [isOpen, onToggle])
 
     const close: () => void = useCallback(() => {
@@ -49,7 +49,7 @@ const CollapsiblePane: FC<CollapsiblePaneProps> = (props: CollapsiblePaneProps)
     return (
         <div ref={elRef} className={
             classNames(
-                styles['wrap'],
+                styles.wrap,
                 props.position ?? 'to-left',
                 isOpen ? 'open' : 'collapsed',
             )
@@ -58,7 +58,7 @@ const CollapsiblePane: FC<CollapsiblePaneProps> = (props: CollapsiblePaneProps)
                 {isOpen ? <IconSolid.ChevronDoubleLeftIcon /> : <IconSolid.ChevronDoubleRightIcon />}
                 {props.title}
             </div>
-            <div className={styles['content']}>
+            <div className={styles.content}>
                 {props.children}
             </div>
         </div>
diff --git a/src-ts/tools/learn/learn-lib/course-badge/CourseBadge.tsx b/src-ts/tools/learn/learn-lib/course-badge/CourseBadge.tsx
index ca8ee7864..0905fb177 100644
--- a/src-ts/tools/learn/learn-lib/course-badge/CourseBadge.tsx
+++ b/src-ts/tools/learn/learn-lib/course-badge/CourseBadge.tsx
@@ -17,10 +17,11 @@ const CourseBadge: FC<CourseBadgeProps> = (props: CourseBadgeProps) => {
             <img src={badgeImg} alt={props.type} />
         )
     }
+
     const Badge: FC<SVGProps<SVGSVGElement>> = getBadge(props.type)
 
     return (
-        <div className={styles['wrap']}>
+        <div className={styles.wrap}>
             <Badge />
         </div>
     )
diff --git a/src-ts/tools/learn/learn-lib/course-outline/CourseOutline.tsx b/src-ts/tools/learn/learn-lib/course-outline/CourseOutline.tsx
index 65dd085cc..201396046 100644
--- a/src-ts/tools/learn/learn-lib/course-outline/CourseOutline.tsx
+++ b/src-ts/tools/learn/learn-lib/course-outline/CourseOutline.tsx
@@ -7,7 +7,7 @@ import {
     LearnLesson,
     LearnModule,
     LearnUserCertificationProgress,
-} from '../../learn-lib'
+} from ".."
 import { getLessonPathFromModule } from '../../learn.routes'
 
 import { CollapsibleItem } from './collapsible-item'
@@ -24,22 +24,20 @@ interface CourseOutlineProps {
 const CourseOutline: FC<CourseOutlineProps> = (props: CourseOutlineProps) => {
 
     const lessonPath: (course: LearnCourse, module: LearnModule, lesson: LearnLesson) => string
-        = useCallback((course: LearnCourse, module: LearnModule, lesson: LearnLesson) => {
-            return getLessonPathFromModule(
-                course.provider,
-                course.certification,
-                module.key,
-                lesson.dashedName,
-            )
-        }, [])
+        = useCallback((course: LearnCourse, module: LearnModule, lesson: LearnLesson) => getLessonPathFromModule(
+            course.provider,
+            course.certification,
+            module.key,
+            lesson.dashedName,
+        ), [])
 
     return (
-        <div className={classNames(styles['wrap'], 'course-outline-wrap')}>
+        <div className={classNames(styles.wrap, 'course-outline-wrap')}>
 
             <LoadingSpinner hide={props.ready !== false} />
 
             {props.course && (
-                <div className={classNames(styles['content'], 'content')}>
+                <div className={classNames(styles.content, 'content')}>
                     {props.course.modules.map((module) => (
                         <CollapsibleItem
                             active={props.currentStep}
diff --git a/src-ts/tools/learn/learn-lib/course-outline/collapsible-item/CollapsibleItem.tsx b/src-ts/tools/learn/learn-lib/course-outline/collapsible-item/CollapsibleItem.tsx
index 1af065230..a3b75d364 100644
--- a/src-ts/tools/learn/learn-lib/course-outline/collapsible-item/CollapsibleItem.tsx
+++ b/src-ts/tools/learn/learn-lib/course-outline/collapsible-item/CollapsibleItem.tsx
@@ -3,7 +3,7 @@ import { Dispatch, FC, ReactNode, SetStateAction, useCallback, useMemo, useState
 import { Link } from 'react-router-dom'
 
 import { IconOutline, IconSolid } from '../../../../../lib'
-import { LearnModule, LearnModuleProgress, LearnUserCertificationProgress } from '../../../learn-lib'
+import { LearnModule, LearnModuleProgress, LearnUserCertificationProgress } from "../.."
 import { StatusIcon } from '../status-icon'
 import { StepIcon } from '../step-icon'
 
@@ -36,17 +36,11 @@ const CollapsibleItem: FC<CollapsibleItemProps> = (props: CollapsibleItemProps)
         setIsOpen(open => !open)
     }, [])
 
-    const progress: LearnModuleProgress | undefined = useMemo(() => {
-        return props.progress?.find(m => m.module === props.moduleKey)
-    }, [props.progress, props.moduleKey])
+    const progress: LearnModuleProgress | undefined = useMemo(() => props.progress?.find(m => m.module === props.moduleKey), [props.progress, props.moduleKey])
 
-    const isCompleted: boolean = useMemo(() => {
-        return !!progress && progress.lessonCount === progress?.completedLessons.length
-    }, [progress])
+    const isCompleted: boolean = useMemo(() => !!progress && progress.lessonCount === progress?.completedLessons.length, [progress])
 
-    const isPartial: boolean = useMemo(() => {
-        return !!progress && !!progress.completedLessons.length
-    }, [progress])
+    const isPartial: boolean = useMemo(() => !!progress && !!progress.completedLessons.length, [progress])
 
     const isItemCompleted: (key: string) => boolean = (key: string) => (
         !!progress?.completedLessons.find(l => l.dashedName === key)
@@ -84,10 +78,10 @@ const CollapsibleItem: FC<CollapsibleItemProps> = (props: CollapsibleItemProps)
     }
 
     return (
-        <div className={classNames(styles['wrap'], isOpen ? 'is-open' : 'collapsed')}>
+        <div className={classNames(styles.wrap, isOpen ? 'is-open' : 'collapsed')}>
             <div className={styles['title-row']} onClick={toggle}>
                 <StatusIcon completed={isCompleted} partial={isPartial} />
-                <span className={styles['title']}>
+                <span className={styles.title}>
                     {props.isAssessment && (
                         <div className={classNames(styles['title-tag'], 'label')}>
                             assessment
@@ -95,13 +89,13 @@ const CollapsibleItem: FC<CollapsibleItemProps> = (props: CollapsibleItemProps)
                     )}
                     {props.title}
                 </span>
-                <span className={styles['chevron']}>
+                <span className={styles.chevron}>
                     <IconSolid.ChevronUpIcon />
                 </span>
             </div>
             {isOpen && (
-                <div className={styles['content']}>
-                    <div className={styles['summary']}>
+                <div className={styles.content}>
+                    <div className={styles.summary}>
                         <span className={styles['summary-item']}>
                             <IconOutline.DocumentTextIcon />
                             {props.lessonsCount} Lessons
@@ -114,10 +108,10 @@ const CollapsibleItem: FC<CollapsibleItemProps> = (props: CollapsibleItemProps)
                         )}
                     </div>
                     <div className={styles['short-desc']}>
-                        <span className='body-small' dangerouslySetInnerHTML={{ __html: props.shortDescription.join('<br/>') }}></span>
+                        <span className='body-small' dangerouslySetInnerHTML={{ __html: props.shortDescription.join('<br/>') }} />
                     </div>
 
-                    <ul className={classNames(styles['list'], 'steps-list')}>
+                    <ul className={classNames(styles.list, 'steps-list')}>
                         {props.items.map(renderListItem)}
                     </ul>
                 </div>
diff --git a/src-ts/tools/learn/learn-lib/course-outline/status-icon/StatusIcon.tsx b/src-ts/tools/learn/learn-lib/course-outline/status-icon/StatusIcon.tsx
index 9f6d2d03e..612d795cb 100755
--- a/src-ts/tools/learn/learn-lib/course-outline/status-icon/StatusIcon.tsx
+++ b/src-ts/tools/learn/learn-lib/course-outline/status-icon/StatusIcon.tsx
@@ -12,7 +12,7 @@ interface StatusIconProps {
 
 const StatusIcon: FC<StatusIconProps> = (props: StatusIconProps) => {
     const classes: string = classNames(
-        styles['checkmark'],
+        styles.checkmark,
         'status-checkbox',
         props.completed && 'completed',
         props.partial && 'partial',
diff --git a/src-ts/tools/learn/learn-lib/course-outline/step-icon/StepIcon.tsx b/src-ts/tools/learn/learn-lib/course-outline/step-icon/StepIcon.tsx
index b5fd8b2a5..72e140f75 100755
--- a/src-ts/tools/learn/learn-lib/course-outline/step-icon/StepIcon.tsx
+++ b/src-ts/tools/learn/learn-lib/course-outline/step-icon/StepIcon.tsx
@@ -38,11 +38,11 @@ const StepIcon: FC<StepIconProps> = (props: StepIconProps) => {
 
     return (
         <div className={classnames}>
-            <span className={styles['icon']}>
+            <span className={styles.icon}>
                 {getIconContent()}
             </span>
             {props.label && (
-                <span className={classNames(styles['label'], 'body-small')}>
+                <span className={classNames(styles.label, 'body-small')}>
                     {props.label}
                 </span>
             )}
diff --git a/src-ts/tools/learn/learn-lib/course-title/CourseTitle.tsx b/src-ts/tools/learn/learn-lib/course-title/CourseTitle.tsx
index ff719ad4e..593bf821f 100644
--- a/src-ts/tools/learn/learn-lib/course-title/CourseTitle.tsx
+++ b/src-ts/tools/learn/learn-lib/course-title/CourseTitle.tsx
@@ -27,11 +27,11 @@ const CourseTitle: FC<CourseTitleProps> = (props: CourseTitleProps) => {
     )
 
     return (
-        <div className={classNames(styles['wrap'], props.size)}>
+        <div className={classNames(styles.wrap, props.size)}>
             <div className={classNames('badge-icon', props.size)}>
                 <CourseBadge type={props.trackType ?? 'DEV'} />
             </div>
-            <div className={styles['text']}>
+            <div className={styles.text}>
                 <div className={styles['title-row']}>
                     {title}
                     <span className='mobile-hide'>
diff --git a/src-ts/tools/learn/learn-lib/courses-provider/courses.provider.tsx b/src-ts/tools/learn/learn-lib/courses-provider/courses.provider.tsx
index 5c001c51f..5c7af77db 100644
--- a/src-ts/tools/learn/learn-lib/courses-provider/courses.provider.tsx
+++ b/src-ts/tools/learn/learn-lib/courses-provider/courses.provider.tsx
@@ -37,6 +37,7 @@ export function useCourses(provider: string, certification?: string): CoursesPro
                 if (!mounted) {
                     return
                 }
+
                 setState((prevState) => ({
                     ...prevState,
                     course,
diff --git a/src-ts/tools/learn/learn-lib/curriculum-summary/CurriculumSummary.tsx b/src-ts/tools/learn/learn-lib/curriculum-summary/CurriculumSummary.tsx
index 071ce6e86..d1c55a8eb 100644
--- a/src-ts/tools/learn/learn-lib/curriculum-summary/CurriculumSummary.tsx
+++ b/src-ts/tools/learn/learn-lib/curriculum-summary/CurriculumSummary.tsx
@@ -14,13 +14,13 @@ const CurriculumSummary: FC<CurriculumSummaryProps> = (props: CurriculumSummaryP
     const hasTimeEstimate: boolean = props.completionHours?.value !== 0
 
     return (
-        <div className={styles['summary']}>
+        <div className={styles.summary}>
             <div className={styles['stat-item']}>
-                <div className={styles['icon']}>
+                <div className={styles.icon}>
                     <IconOutline.DocumentTextIcon />
                 </div>
                 <div className='sub'>
-                    <h3 className={styles['count']}>
+                    <h3 className={styles.count}>
                         {props.moduleCount ?? 0}
                     </h3>
                     <div className={styles['count-label']}>
@@ -29,11 +29,11 @@ const CurriculumSummary: FC<CurriculumSummaryProps> = (props: CurriculumSummaryP
                 </div>
             </div>
             <div className={styles['stat-item']}>
-                <div className={styles['icon']}>
+                <div className={styles.icon}>
                     <IconOutline.ClockIcon />
                 </div>
                 <div className='sub'>
-                    <h3 className={styles['count']}>
+                    <h3 className={styles.count}>
                         {hasTimeEstimate ? props.completionHours?.value : (<>&nbsp;</>)}
                     </h3>
                     <div className={styles['count-label']}>
diff --git a/src-ts/tools/learn/learn-lib/functions/learn.factory.ts b/src-ts/tools/learn/learn-lib/functions/learn.factory.ts
index 308d13da2..e7122f84b 100644
--- a/src-ts/tools/learn/learn-lib/functions/learn.factory.ts
+++ b/src-ts/tools/learn/learn-lib/functions/learn.factory.ts
@@ -9,9 +9,11 @@ export function create<T extends LearnResponseModel>(item: T): T {
     if (typeof item?.createdAt === 'string') {
         item.createdAt = new Date(item.createdAt)
     }
+
     if (typeof item?.updatedAt === 'string') {
         item.updatedAt = new Date(item.updatedAt)
     }
+
     if (typeof item?.publishedAt === 'string') {
         item.publishedAt = new Date(item.publishedAt)
     }
diff --git a/src-ts/tools/learn/learn-lib/my-course-card/completed/Completed.tsx b/src-ts/tools/learn/learn-lib/my-course-card/completed/Completed.tsx
index 805f02df4..3134caeb5 100644
--- a/src-ts/tools/learn/learn-lib/my-course-card/completed/Completed.tsx
+++ b/src-ts/tools/learn/learn-lib/my-course-card/completed/Completed.tsx
@@ -2,7 +2,7 @@ import classNames from 'classnames'
 import { FC } from 'react'
 
 import { Button, textFormatDateLocaleShortString } from '../../../../../lib'
-import { CourseTitle, LearnCertification } from '../../../learn-lib'
+import { CourseTitle, LearnCertification } from "../.."
 import { getCertificatePath, getCoursePath } from '../../../learn.routes'
 
 import styles from './Completed.module.scss'
@@ -19,8 +19,8 @@ const Completed: FC<CompletedProps> = (props: CompletedProps) => {
     }
 
     return (
-        <div className={classNames(styles['wrap'], 'course-card-wrap', 'completed')}>
-            <div className={styles['line']}>
+        <div className={classNames(styles.wrap, 'course-card-wrap', 'completed')}>
+            <div className={styles.line}>
                 <CourseTitle
                     title={props.certification.title}
                     trackType={props.certification.trackType}
diff --git a/src-ts/tools/learn/learn-lib/my-course-card/in-progress/InProgress.tsx b/src-ts/tools/learn/learn-lib/my-course-card/in-progress/InProgress.tsx
index b05b64269..fc1189c4d 100644
--- a/src-ts/tools/learn/learn-lib/my-course-card/in-progress/InProgress.tsx
+++ b/src-ts/tools/learn/learn-lib/my-course-card/in-progress/InProgress.tsx
@@ -12,7 +12,7 @@ import {
     CourseTitle,
     LearnCertification,
     useCourses,
-} from '../../../learn-lib'
+} from "../.."
 import { getCoursePath, getLessonPathFromCurrentLesson } from '../../../learn.routes'
 import { CurriculumSummary } from '../../curriculum-summary'
 
@@ -50,16 +50,16 @@ const InProgress: FC<InProgressProps> = (props: InProgressProps) => {
     }
 
     return (
-        <div className={classNames(styles['wrap'], styles['large'], 'course-card-wrap', 'in-progress')}>
-            <div className={styles['inner']}>
-                <div className={styles['line']}>
+        <div className={classNames(styles.wrap, styles.large, 'course-card-wrap', 'in-progress')}>
+            <div className={styles.inner}>
+                <div className={styles.line}>
                     <CourseTitle
                         title={props.certification?.title ?? ''}
                         trackType={props.certification?.trackType}
                         credits={props.certification?.providerName}
                     >
                         {isDetailed && (
-                            <div className={styles['status']}>In Progress</div>
+                            <div className={styles.status}>In Progress</div>
                         )}
                     </CourseTitle>
                     {isMinimum && (
@@ -85,12 +85,12 @@ const InProgress: FC<InProgressProps> = (props: InProgressProps) => {
                 )}
 
                 {isDetailed && (
-                    <div className={styles['summary']}>
+                    <div className={styles.summary}>
                         <CurriculumSummary
                             moduleCount={course?.modules.length ?? 0}
                             completionHours={course?.estimatedCompletionTime}
                         />
-                        <div className={styles['button']}>
+                        <div className={styles.button}>
                             <Button
                                 buttonStyle='primary'
                                 size='md'
@@ -102,9 +102,9 @@ const InProgress: FC<InProgressProps> = (props: InProgressProps) => {
                 )}
             </div>
             {isDetailed && (
-                <div className={styles['details']}>
+                <div className={styles.details}>
                     <div className={styles['details-inner']}>
-                        <p dangerouslySetInnerHTML={{ __html: course?.introCopy.join('<br /><br />') ?? '' }}></p>
+                        <p dangerouslySetInnerHTML={{ __html: course?.introCopy.join('<br /><br />') ?? '' }} />
                         {props.startDate && (
                             <div className={styles['started-date']}>
                                 <span>Started </span>
diff --git a/src-ts/tools/learn/learn-lib/user-certifications-provider/user-certifications.provider.tsx b/src-ts/tools/learn/learn-lib/user-certifications-provider/user-certifications.provider.tsx
index f1ef3dad1..1f4c9a151 100644
--- a/src-ts/tools/learn/learn-lib/user-certifications-provider/user-certifications.provider.tsx
+++ b/src-ts/tools/learn/learn-lib/user-certifications-provider/user-certifications.provider.tsx
@@ -40,6 +40,7 @@ export function useUserCertifications(): UserCertificationsProviderData {
                     ready: true,
                 }))
             }
+
             return
         }
 
diff --git a/src-ts/tools/learn/learn-lib/user-completed-certifications-provider/user-completed-certifications.provider.tsx b/src-ts/tools/learn/learn-lib/user-completed-certifications-provider/user-completed-certifications.provider.tsx
index f3131b8ff..323ee6892 100644
--- a/src-ts/tools/learn/learn-lib/user-completed-certifications-provider/user-completed-certifications.provider.tsx
+++ b/src-ts/tools/learn/learn-lib/user-completed-certifications-provider/user-completed-certifications.provider.tsx
@@ -36,10 +36,8 @@ export function useUserCompletedCertifications(userId?: number, provider?: strin
                 let certifications: Array<LearnUserCompletedCertification> = completedCertifications
 
                 if (provider || certification) {
-                    certifications = completedCertifications.filter((c) => {
-                        return (!provider || c.provider === provider) &&
-                        (!certification || c.certification === certification)
-                    })
+                    certifications = completedCertifications.filter((c) => (!provider || c.provider === provider) &&
+                        (!certification || c.certification === certification))
                 }
 
                 setState((prevState) => ({
diff --git a/src-ts/tools/learn/learn-lib/wave-hero/WaveHero.tsx b/src-ts/tools/learn/learn-lib/wave-hero/WaveHero.tsx
index 907111c88..480e5fd03 100755
--- a/src-ts/tools/learn/learn-lib/wave-hero/WaveHero.tsx
+++ b/src-ts/tools/learn/learn-lib/wave-hero/WaveHero.tsx
@@ -10,27 +10,24 @@ interface WaveHeroProps {
     title: ReactNode
 }
 
-const WaveHero: FC<WaveHeroProps> = (props: WaveHeroProps) => {
-
-    return (
-        <div className={classNames(styles['hero-wrap'], props.theme)}>
-            <div className={styles['hero-inner']}>
-                <div className={styles['hero-content']}>
-                    <div className={styles['hero-text-col']}>
-                        <h1>{props.title}</h1>
-                        <p className={styles['hero-text']}
-                            dangerouslySetInnerHTML={{__html: props.text || ''}}
-                        ></p>
-                    </div>
-                    {props.children && (
-                        <div className={classNames(styles['hero-card-col'], 'hero-card-col')}>
-                            {props.children}
-                        </div>
-                    )}
+const WaveHero: FC<WaveHeroProps> = (props: WaveHeroProps) => (
+    <div className={classNames(styles['hero-wrap'], props.theme)}>
+        <div className={styles['hero-inner']}>
+            <div className={styles['hero-content']}>
+                <div className={styles['hero-text-col']}>
+                    <h1>{props.title}</h1>
+                    <p className={styles['hero-text']}
+                        dangerouslySetInnerHTML={{__html: props.text || ''}}
+                    />
                 </div>
+                {props.children && (
+                    <div className={classNames(styles['hero-card-col'], 'hero-card-col')}>
+                        {props.children}
+                    </div>
+                )}
             </div>
         </div>
-    )
-}
+    </div>
+)
 
 export default WaveHero
diff --git a/src-ts/tools/learn/learn.routes.tsx b/src-ts/tools/learn/learn.routes.tsx
index a5fc22bc2..a6a10e436 100644
--- a/src-ts/tools/learn/learn.routes.tsx
+++ b/src-ts/tools/learn/learn.routes.tsx
@@ -5,7 +5,7 @@ import { LearnConfig } from './learn-config'
 
 const WelcomePage: LazyLoadedComponent = lazyLoad(() => import('./welcome'), 'WelcomePage')
 const CourseDetailsPage: LazyLoadedComponent = lazyLoad(() => import('./course-details'), 'CourseDetailsPage')
-const CourseCompletedPage: LazyLoadedComponent = lazyLoad(() => import('./course-completed/'), 'CourseCompletedPage')
+const CourseCompletedPage: LazyLoadedComponent = lazyLoad(() => import("./course-completed"), 'CourseCompletedPage')
 const MyCertificate: LazyLoadedComponent = lazyLoad(() => import('./course-certificate'), 'MyCertificate')
 const UserCertificate: LazyLoadedComponent = lazyLoad(() => import('./course-certificate'), 'UserCertificate')
 const FreeCodeCamp: LazyLoadedComponent = lazyLoad(() => import('./free-code-camp'), 'FreeCodeCamp')
diff --git a/src-ts/tools/learn/my-learning/MyLearning.tsx b/src-ts/tools/learn/my-learning/MyLearning.tsx
index b97350f30..5efe3e8a7 100755
--- a/src-ts/tools/learn/my-learning/MyLearning.tsx
+++ b/src-ts/tools/learn/my-learning/MyLearning.tsx
@@ -70,7 +70,7 @@ const MyLearning: FC<{}> = () => {
     return (
         <ContentLayout contentClass={styles['content-layout']}>
             <Breadcrumb items={breadcrumb} />
-            <div className={styles['wrap']}>
+            <div className={styles.wrap}>
                 <LoadingSpinner hide={ready} className={styles['loading-spinner']} />
 
                 <Portal portalId='page-subheader-portal-el'>
diff --git a/src-ts/tools/learn/my-learning/hero-card/HeroCard.tsx b/src-ts/tools/learn/my-learning/hero-card/HeroCard.tsx
index 5123e6865..67ea6cb7e 100755
--- a/src-ts/tools/learn/my-learning/hero-card/HeroCard.tsx
+++ b/src-ts/tools/learn/my-learning/hero-card/HeroCard.tsx
@@ -9,40 +9,37 @@ interface HeroCardProps {
     userHandle?: string
 }
 
-const HeroCard: FC<HeroCardProps> = (props: HeroCardProps) => {
-
-    return (
-        <div className={styles['wrap']}>
-            <div className={styles['line']}>
-                <span>Learning looks good on you.</span>
-                <Button
-                    buttonStyle='link'
-                    label='check out your profile'
-                    url={`${EnvironmentConfig.TOPCODER_URLS.USER_PROFILE}/${props.userHandle}`}
-                    target='_blank'
-                />
-            </div>
-            <div className={styles['line']}>
-                <span>Put your new skills to use.</span>
-                <Button
-                    buttonStyle='link'
-                    label='compete in a challenge'
-                    url={EnvironmentConfig.TOPCODER_URLS.CHALLENGES_PAGE}
-                    target='_blank'
-                />
-            </div>
-            <div className={styles['line']}>
-                <span>Get that Gig!</span>
-                <Button
-                    buttonStyle='link'
-                    label='see gig opportunities'
-                    url={EnvironmentConfig.TOPCODER_URLS.GIGS_PAGE}
-                    target='_blank'
-                />
-            </div>
-
+const HeroCard: FC<HeroCardProps> = (props: HeroCardProps) => (
+    <div className={styles.wrap}>
+        <div className={styles.line}>
+            <span>Learning looks good on you.</span>
+            <Button
+                buttonStyle='link'
+                label='check out your profile'
+                url={`${EnvironmentConfig.TOPCODER_URLS.USER_PROFILE}/${props.userHandle}`}
+                target='_blank'
+            />
         </div>
-    )
-}
+        <div className={styles.line}>
+            <span>Put your new skills to use.</span>
+            <Button
+                buttonStyle='link'
+                label='compete in a challenge'
+                url={EnvironmentConfig.TOPCODER_URLS.CHALLENGES_PAGE}
+                target='_blank'
+            />
+        </div>
+        <div className={styles.line}>
+            <span>Get that Gig!</span>
+            <Button
+                buttonStyle='link'
+                label='see gig opportunities'
+                url={EnvironmentConfig.TOPCODER_URLS.GIGS_PAGE}
+                target='_blank'
+            />
+        </div>
+
+    </div>
+)
 
 export default HeroCard
diff --git a/src-ts/tools/learn/my-learning/tab-content-layout/TabContentLayout.tsx b/src-ts/tools/learn/my-learning/tab-content-layout/TabContentLayout.tsx
index 8aed257b6..a65309f16 100644
--- a/src-ts/tools/learn/my-learning/tab-content-layout/TabContentLayout.tsx
+++ b/src-ts/tools/learn/my-learning/tab-content-layout/TabContentLayout.tsx
@@ -55,13 +55,13 @@ const TabContentLayout: FC<TabContentLayoutProps> = (props: TabContentLayoutProp
     }
 
     useEffect(() => {
-      props.onCategoryChange?.(selectedCategory)
-      props.onSortChange?.(sortingField)
+        props.onCategoryChange?.(selectedCategory)
+        props.onSortChange?.(sortingField)
     // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [props.onCategoryChange, props.onSortChange])
 
     return (
-        <div className={styles['wrap']}>
+        <div className={styles.wrap}>
             <div className={styles['title-line']}>
                 <h2 className='details'>{props.title}</h2>
 
@@ -73,7 +73,7 @@ const TabContentLayout: FC<TabContentLayoutProps> = (props: TabContentLayoutProp
                         name='filter-courses'
                         label='Categories'
                         disabled={props.disableFilters}
-                    ></InputSelect>
+                    />
                     <InputSelect
                         options={props.sortOptions}
                         value={sortingField}
@@ -81,7 +81,7 @@ const TabContentLayout: FC<TabContentLayoutProps> = (props: TabContentLayoutProp
                         name='sort-courses'
                         label='Sort by'
                         disabled={props.disableFilters}
-                    ></InputSelect>
+                    />
                 </div>
             </div>
             {props.children}
diff --git a/src-ts/tools/learn/welcome/available-courses-list/AvailableCoursesList.tsx b/src-ts/tools/learn/welcome/available-courses-list/AvailableCoursesList.tsx
index 89c6bc0b9..28926dc80 100644
--- a/src-ts/tools/learn/welcome/available-courses-list/AvailableCoursesList.tsx
+++ b/src-ts/tools/learn/welcome/available-courses-list/AvailableCoursesList.tsx
@@ -27,40 +27,34 @@ const AvailableCoursesList: FC<AvailableCoursesListProps> = (props: AvailableCou
     ] = useLocalStorage<string>('tca-welcome-filter-certs', '')
 
     // certificates indexed by category, sorted by title
-    const certsByCategory: Dictionary<Array<LearnCertification>> = useMemo(() => {
-      return groupBy(orderBy(props.certifications, 'title', 'asc'), 'category')
-    }, [props.certifications])
+    const certsByCategory: Dictionary<Array<LearnCertification>> = useMemo(() => groupBy(orderBy(props.certifications, 'title', 'asc'), 'category'), [props.certifications])
 
     // compute all the available category dropdown options
     const certsCategoriesOptions: Array<{
         label: string,
         value: string,
-    }> = useMemo(() => {
-        return [
-            {label: 'All Categories', value: '', orderIndex: -1},
-            ...Object.keys(certsByCategory).sort().map((c) => ({
-                label: c,
-                value: c,
-            })),
-        ]
-    }, [certsByCategory])
+    }> = useMemo(() => [
+        {label: 'All Categories', value: '', orderIndex: -1},
+        ...Object.keys(certsByCategory).sort().map((c) => ({
+            label: c,
+            value: c,
+        })),
+    ], [certsByCategory])
 
     // create and sort the certificates groups
-    const certificationsGroups: Array<string> = useMemo(() => {
-        return orderBy(Object.keys(certsByCategory), [
-            c => PRIORITY_CATEGORIES.includes(c) ? -1 : 1,
-            identity,
-        ], ['asc', 'asc'])
-    }, [certsByCategory])
+    const certificationsGroups: Array<string> = useMemo(() => orderBy(Object.keys(certsByCategory), [
+        c => PRIORITY_CATEGORIES.includes(c) ? -1 : 1,
+        identity,
+    ], ['asc', 'asc']), [certsByCategory])
 
     const certificationsCount: number = (certsByCategory[selectedCategory] ?? props.certifications).length
 
     return (
-        <div className={styles['wrap']}>
+        <div className={styles.wrap}>
             <div className={styles['courses-list-header']}>
                 <h3 className='details'>
                     Courses Available
-                    <span className={classNames(styles['badge'], 'medium-subtitle')}>
+                    <span className={classNames(styles.badge, 'medium-subtitle')}>
                         {certificationsCount}
                     </span>
                 </h3>
@@ -72,7 +66,7 @@ const AvailableCoursesList: FC<AvailableCoursesListProps> = (props: AvailableCou
                         onChange={(e) => setSelectedCategory(e.target.value as string)}
                         name='filter-courses'
                         label='Categories'
-                    ></InputSelect>
+                    />
                 </div>
             </div>
 
diff --git a/src-ts/tools/learn/welcome/courses-card/CoursesCard.tsx b/src-ts/tools/learn/welcome/courses-card/CoursesCard.tsx
index 2ceaabb38..47f0a51d2 100644
--- a/src-ts/tools/learn/welcome/courses-card/CoursesCard.tsx
+++ b/src-ts/tools/learn/welcome/courses-card/CoursesCard.tsx
@@ -77,7 +77,7 @@ const CoursesCard: FC<CoursesCardProps> = (props: CoursesCardProps) => {
     ])
 
     return (
-        <div className={classNames(styles['wrap'], !link && 'soon')}>
+        <div className={classNames(styles.wrap, !link && 'soon')}>
             <div className='overline'>
                 {props.certification.category}
             </div>
@@ -86,7 +86,7 @@ const CoursesCard: FC<CoursesCardProps> = (props: CoursesCardProps) => {
                 title={props.certification.title}
                 trackType={props.certification.trackType}
             />
-            <div className={styles['bottom']}>
+            <div className={styles.bottom}>
                 {!!link && (
                     <Button
                         buttonStyle={buttonStyle}
diff --git a/src-ts/tools/learn/welcome/progress-block/cards-slider/CardsSlider.tsx b/src-ts/tools/learn/welcome/progress-block/cards-slider/CardsSlider.tsx
index d8b4f8f29..70c8cdd22 100644
--- a/src-ts/tools/learn/welcome/progress-block/cards-slider/CardsSlider.tsx
+++ b/src-ts/tools/learn/welcome/progress-block/cards-slider/CardsSlider.tsx
@@ -11,22 +11,20 @@ interface CardsSliderProps {
 const CardsSlider: FC<CardsSliderProps> = (props: CardsSliderProps) => {
     const [activeSlide, setActiveSlide]: [number, Dispatch<SetStateAction<number>>] = useState(0)
 
-    const wrapSlides: (children: Array<JSX.Element>) => Array<JSX.Element> = (children: Array<JSX.Element>) => {
-        return Children.map<ReactNode, ReactNode>(children, (child, index) => (
-            <div
-                className={
-                    classNames(
-                        styles.slide,
-                        activeSlide === index && 'active',
-                        activeSlide > index && 'is-prev',
-                        activeSlide < index && 'is-next',
-                    )
-                }
-            >
-                {child}
-            </div>
-        )) as Array<JSX.Element>
-    }
+    const wrapSlides: (children: Array<JSX.Element>) => Array<JSX.Element> = (children: Array<JSX.Element>) => Children.map<ReactNode, ReactNode>(children, (child, index) => (
+        <div
+            className={
+                classNames(
+                    styles.slide,
+                    activeSlide === index && 'active',
+                    activeSlide > index && 'is-prev',
+                    activeSlide < index && 'is-next',
+                )
+            }
+        >
+            {child}
+        </div>
+    )) as Array<JSX.Element>
 
     return (
         <div className={styles.wrap}>
diff --git a/src-ts/tools/learn/welcome/progress-block/no-progress/NoProgress.tsx b/src-ts/tools/learn/welcome/progress-block/no-progress/NoProgress.tsx
index 9dc57e46c..dffc95b06 100644
--- a/src-ts/tools/learn/welcome/progress-block/no-progress/NoProgress.tsx
+++ b/src-ts/tools/learn/welcome/progress-block/no-progress/NoProgress.tsx
@@ -4,18 +4,16 @@ import { LearningHat } from '../../../learn-lib'
 
 import styles from './NoProgress.module.scss'
 
-const NoProgress: FC<{}> = () => {
-    return (
-        <div className={styles['wrap']}>
-            <div className={styles['icon']}>
-                <LearningHat />
-            </div>
-            <h2 className='details'>Happy you’re here!</h2>
-            <div className={styles['content-text']}>
-                To start learning something new, select a course from the list below. Good Luck!
-            </div>
+const NoProgress: FC<{}> = () => (
+    <div className={styles.wrap}>
+        <div className={styles.icon}>
+            <LearningHat />
         </div>
-    )
-}
+        <h2 className='details'>Happy you’re here!</h2>
+        <div className={styles['content-text']}>
+            To start learning something new, select a course from the list below. Good Luck!
+        </div>
+    </div>
+)
 
 export default NoProgress
diff --git a/src-ts/tools/work/work-detail-details/WorkDetailDetails.tsx b/src-ts/tools/work/work-detail-details/WorkDetailDetails.tsx
index 77be6241e..1766606e6 100644
--- a/src-ts/tools/work/work-detail-details/WorkDetailDetails.tsx
+++ b/src-ts/tools/work/work-detail-details/WorkDetailDetails.tsx
@@ -16,8 +16,8 @@ const WorkDetailDetails: FC<WorkDetailDetailsProps> = (props: WorkDetailDetailsP
     const workType: WorkType = props.formData?.workType?.selectedWorkType
 
     return (
-        <div className={styles['wrap']}>
-            <div className={styles['detailsContainer']}>
+        <div className={styles.wrap}>
+            <div className={styles.detailsContainer}>
                 {workType !== WorkType.designLegacy &&
                     <WorkDetailDetailsPane formData={props.formData} />
                 }
diff --git a/src-ts/tools/work/work-detail-details/work-detail-details-pane/WorkDetailDetailsPane.tsx b/src-ts/tools/work/work-detail-details/work-detail-details-pane/WorkDetailDetailsPane.tsx
index a336d891e..dfcd16e7e 100644
--- a/src-ts/tools/work/work-detail-details/work-detail-details-pane/WorkDetailDetailsPane.tsx
+++ b/src-ts/tools/work/work-detail-details/work-detail-details-pane/WorkDetailDetailsPane.tsx
@@ -42,40 +42,39 @@ const WorkDetailDetailsPane: FC<WorkDetailDetailsPaneProps> = ({ collapsible, de
         if (!collapsible) {
             return
         }
+
         setOpen(!isOpen)
     }
 
     return (
         <>
             {isReviewPage && (
-                <div className={styles['header']} onClick={onTogglePane}>
+                <div className={styles.header} onClick={onTogglePane}>
                     <div className={styles['header-content']}>
-                        <h3 className={styles['title']}>REVIEW REQUIREMENTS</h3>
-                        <Link className={styles['link']} to={redirectUrl}>
+                        <h3 className={styles.title}>REVIEW REQUIREMENTS</h3>
+                        <Link className={styles.link} to={redirectUrl}>
                             edit
                         </Link>
                     </div>
                     {
                         collapsible && (
-                            <div className={cn(styles['icon-wrapper'], isOpen && styles['open'])}>
+                            <div className={cn(styles['icon-wrapper'], isOpen && styles.open)}>
                                 <ArrowIcon />
                             </div>
                         )
                     }
                 </div>
             )}
-            {isOpen && details.map((detail) => {
-                return (
-                    <div key={detail.key} className={styles['detail']}>
-                        <h4 className={styles['title']}>{detail.title}</h4>
-                        {detail.key === ChallengeMetadataName.packageType ? (
-                          <p className={styles['content']}>{getSelectedPackageFormatted(detail.value)}</p>
-                        ) : (
-                          <p className={styles['content']}>{formatOption(detail.value)}</p>
-                        )}
-                    </div>
-                )
-            })}
+            {isOpen && details.map((detail) => (
+                <div key={detail.key} className={styles.detail}>
+                    <h4 className={styles.title}>{detail.title}</h4>
+                    {detail.key === ChallengeMetadataName.packageType ? (
+                        <p className={styles.content}>{getSelectedPackageFormatted(detail.value)}</p>
+                    ) : (
+                        <p className={styles.content}>{formatOption(detail.value)}</p>
+                    )}
+                </div>
+            ))}
         </>
     )
 }
@@ -86,10 +85,12 @@ function formatOption(detail: Array<string> | {} | string): string | Array<JSX.E
     if (isEmpty) {
         return noInfoProvidedElement
     }
+
     if (_.isArray(detail)) {
         return detail
             .map((val, index) => (<div key={`${index}`}>{val}</div>))
     }
+
     if (_.isObject(detail)) {
         return Object.keys(detail)
             .map((key) => {
@@ -97,6 +98,7 @@ function formatOption(detail: Array<string> | {} | string): string | Array<JSX.E
                 return <div key={`${key}`}>{`${key}: `}{value}</div>
             })
     }
+
     return detail
 }
 
@@ -109,14 +111,14 @@ function checkIsEmpty(detail: Array<string> | {} | string): boolean {
 }
 
 const getSelectedPackageFormatted: (packageId: string) => string = (packageId) => {
-  const currentPackage: FormCard | undefined = BugHuntPricingConfig.find((pricingConfig) => pricingConfig.id === packageId)
-  if (currentPackage) {
-    const deviceType: string = currentPackage.sections?.[0]?.rows?.[3]?.text || ''
-    const noOfTesters: string = `${currentPackage.sections?.[0]?.rows?.[2]?.text || 0} testers`
-    return `${currentPackage.title} - ${currencyFormat(currentPackage.price)} - ${deviceType} - ${noOfTesters}`
-  }
-
-  return packageId
+    const currentPackage: FormCard | undefined = BugHuntPricingConfig.find((pricingConfig) => pricingConfig.id === packageId)
+    if (currentPackage) {
+        const deviceType: string = currentPackage.sections?.[0]?.rows?.[3]?.text || ''
+        const noOfTesters: string = `${currentPackage.sections?.[0]?.rows?.[2]?.text || 0} testers`
+        return `${currentPackage.title} - ${currencyFormat(currentPackage.price)} - ${deviceType} - ${noOfTesters}`
+    }
+
+    return packageId
 }
 
 export default WorkDetailDetailsPane
diff --git a/src-ts/tools/work/work-detail-details/work-detail-details-sidebar/WorkDetailDetailsSidebar.tsx b/src-ts/tools/work/work-detail-details/work-detail-details-sidebar/WorkDetailDetailsSidebar.tsx
index 8342c79f7..dd265808f 100644
--- a/src-ts/tools/work/work-detail-details/work-detail-details-sidebar/WorkDetailDetailsSidebar.tsx
+++ b/src-ts/tools/work/work-detail-details/work-detail-details-sidebar/WorkDetailDetailsSidebar.tsx
@@ -25,10 +25,10 @@ const WorkDetailDetailsSidebar: FC<{}> = () => {
             <PrivacyPolicyModal isOpen={isPrivacyPolicyModalOpen} onClose={() => setIsPrivacyPolicyModalOpen(false)} />
             <TermsModal isOpen={isTermsModalOpne} onClose={() => setIsTermsModalOpen(false)} />
 
-            <div className={styles['wrap']}>
+            <div className={styles.wrap}>
                 <h4>supporting information</h4>
                 <a
-                    className={styles['link']}
+                    className={styles.link}
                     href={window.location.href}
                     onClick={(e) => handleClick(e, setIsOrderContractModalOpen)}
                     rel='noopener noreferrer'
@@ -38,7 +38,7 @@ const WorkDetailDetailsSidebar: FC<{}> = () => {
                     ORDER CONTRACT
                 </a>
                 <a
-                    className={styles['link']}
+                    className={styles.link}
                     href={window.location.href}
                     onClick={(e) => handleClick(e, setIsPrivacyPolicyModalOpen)}
                     rel='noopener noreferrer'
@@ -48,7 +48,7 @@ const WorkDetailDetailsSidebar: FC<{}> = () => {
                     PRIVACY POLICY
                 </a>
                 <a
-                    className={styles['link']}
+                    className={styles.link}
                     href={window.location.href}
                     onClick={(e) => handleClick(e, setIsTermsModalOpen)}
                     rel='noopener noreferrer'
diff --git a/src-ts/tools/work/work-detail-header/WorkDetailHeader.tsx b/src-ts/tools/work/work-detail-header/WorkDetailHeader.tsx
index 18554bf60..acb8a461a 100644
--- a/src-ts/tools/work/work-detail-header/WorkDetailHeader.tsx
+++ b/src-ts/tools/work/work-detail-header/WorkDetailHeader.tsx
@@ -29,7 +29,7 @@ const WorkDetailHeader: FC<WorkDetailHeaderProps> = (props: WorkDetailHeaderProp
             {work.status === WorkStatus.ready && (
                 <Button
                     onClick={props.markAsDone}
-                    label={'Mark as Done'}
+                    label="Mark as Done"
                     size='md'
                 />
             )}
diff --git a/src-ts/tools/work/work-detail-header/WorkFeedback/WorkFeedback.tsx b/src-ts/tools/work/work-detail-header/WorkFeedback/WorkFeedback.tsx
index d9c72fdb0..cc020d41c 100644
--- a/src-ts/tools/work/work-detail-header/WorkFeedback/WorkFeedback.tsx
+++ b/src-ts/tools/work/work-detail-header/WorkFeedback/WorkFeedback.tsx
@@ -24,12 +24,10 @@ const WorkFeedback: FC<WorkFeedbackProps> = (props: WorkFeedbackProps) => {
 
     function requestGenerator(inputs: ReadonlyArray<FormInputModel>): Array<Feedback> {
         return inputs
-            .map((input: FormInputModel) => {
-                return {
-                    name: input.instructions || input.label as string,
-                    value: input.value,
-                }
-            })
+            .map((input: FormInputModel) => ({
+                name: input.instructions || input.label as string,
+                value: input.value,
+            }))
     }
 
     async function saveAsync(feedback: Array<Feedback>): Promise<void> {
diff --git a/src-ts/tools/work/work-detail-solutions/WorkDetailSolutions.tsx b/src-ts/tools/work/work-detail-solutions/WorkDetailSolutions.tsx
index 9ead7e57a..dd90ff76f 100644
--- a/src-ts/tools/work/work-detail-solutions/WorkDetailSolutions.tsx
+++ b/src-ts/tools/work/work-detail-solutions/WorkDetailSolutions.tsx
@@ -31,7 +31,7 @@ const WorkDetailSolutions: FC<WorkDetailSolutionsProps> = (props: WorkDetailSolu
                     <h3>
                         Solutions Available for Download
                     </h3>
-                    <p className={'body-small'}>
+                    <p className="body-small">
                         The solutions listed below have met your detailed criteria. They are ranked based on the best solution as determined by Topcoder expert reviewers.
                     </p>
                 </div>
diff --git a/src-ts/tools/work/work-detail-solutions/work-solutions-list/work-solutions-list-item/WorkSolutionsListItem.tsx b/src-ts/tools/work/work-detail-solutions/work-solutions-list/work-solutions-list-item/WorkSolutionsListItem.tsx
index 2d5cd8a9a..e164efe46 100644
--- a/src-ts/tools/work/work-detail-solutions/work-solutions-list/work-solutions-list-item/WorkSolutionsListItem.tsx
+++ b/src-ts/tools/work/work-detail-solutions/work-solutions-list/work-solutions-list-item/WorkSolutionsListItem.tsx
@@ -10,23 +10,21 @@ interface WorkSolutionsListItemProps {
     solution: WorkSolution
 }
 
-const WorkSolutionsListItem: FC<WorkSolutionsListItemProps> = (props: WorkSolutionsListItemProps) => {
-    return (
-        <div className={styles['wrap']}>
-            <div className={styles.name}>
-                <span>Submitted by:</span>
-                <span>{props.solution.createdBy}</span>
-            </div>
-
-            <Button
-                buttonStyle='secondary'
-                tabIndex={-1}
-                label='Download'
-                size='md'
-                onClick={() => props.onDownload(props.solution.id)}
-            />
+const WorkSolutionsListItem: FC<WorkSolutionsListItemProps> = (props: WorkSolutionsListItemProps) => (
+    <div className={styles.wrap}>
+        <div className={styles.name}>
+            <span>Submitted by:</span>
+            <span>{props.solution.createdBy}</span>
         </div>
-    )
-}
+
+        <Button
+            buttonStyle='secondary'
+            tabIndex={-1}
+            label='Download'
+            size='md'
+            onClick={() => props.onDownload(props.solution.id)}
+        />
+    </div>
+)
 
 export default WorkSolutionsListItem
diff --git a/src-ts/tools/work/work-detail-summary/WorkDetailHighlights/WorkDetailHighlights.tsx b/src-ts/tools/work/work-detail-summary/WorkDetailHighlights/WorkDetailHighlights.tsx
index 15f2b9bdf..5a08f071f 100644
--- a/src-ts/tools/work/work-detail-summary/WorkDetailHighlights/WorkDetailHighlights.tsx
+++ b/src-ts/tools/work/work-detail-summary/WorkDetailHighlights/WorkDetailHighlights.tsx
@@ -22,32 +22,32 @@ const WorkDetailHighlights: FC<WorkDetailHighlightsProps> = (props: WorkDetailHi
         info?: number | string
         name: string
     }> = [
-            {
-                icon: <IconOutline.CalendarIcon />,
-                info: textFormatDateLocaleShortString(work.submittedDate),
-                name: 'Submitted',
-            },
-            {
-                icon: <IconOutline.CurrencyDollarIcon />,
-                info: textFormatMoneyLocaleString(work.cost),
-                name: 'Cost (USD)',
-            },
-            {
-                icon: <IconOutline.UserGroupIcon />,
-                info: work.participantsCount,
-                name: 'Participants',
-            },
-            {
-                icon: <IconOutline.DocumentTextIcon />,
-                info: work.solutionsCount,
-                name: 'Solutions Received',
-            },
-            {
-                icon: <IconOutline.IdentificationIcon />,
-                info: work.id,
-                name: 'Work id',
-            },
-        ]
+        {
+            icon: <IconOutline.CalendarIcon />,
+            info: textFormatDateLocaleShortString(work.submittedDate),
+            name: 'Submitted',
+        },
+        {
+            icon: <IconOutline.CurrencyDollarIcon />,
+            info: textFormatMoneyLocaleString(work.cost),
+            name: 'Cost (USD)',
+        },
+        {
+            icon: <IconOutline.UserGroupIcon />,
+            info: work.participantsCount,
+            name: 'Participants',
+        },
+        {
+            icon: <IconOutline.DocumentTextIcon />,
+            info: work.solutionsCount,
+            name: 'Solutions Received',
+        },
+        {
+            icon: <IconOutline.IdentificationIcon />,
+            info: work.id,
+            name: 'Work id',
+        },
+    ]
 
     const higlightElements: Array<JSX.Element> = highlights
         .map((item, index) => (
diff --git a/src-ts/tools/work/work-detail-summary/WorkTransferredStatus/WorkTransferredStatus.tsx b/src-ts/tools/work/work-detail-summary/WorkTransferredStatus/WorkTransferredStatus.tsx
index 2b71ffe2e..2bf989bbd 100644
--- a/src-ts/tools/work/work-detail-summary/WorkTransferredStatus/WorkTransferredStatus.tsx
+++ b/src-ts/tools/work/work-detail-summary/WorkTransferredStatus/WorkTransferredStatus.tsx
@@ -2,32 +2,30 @@ import { FC } from 'react'
 
 import styles from './WorkTransferredStatus.module.scss'
 
-const WorkTransferredStatus: FC<{}> = () => {
-    return (
-        <div className={styles.wrap}>
-            <h3>Transferred</h3>
-            <p>
-                <div className={styles.line}>
-                    We have a few outstanding questions that will help us better understand the work and scope before we can launch your work on our platform.
-                </div>
+const WorkTransferredStatus: FC<{}> = () => (
+    <div className={styles.wrap}>
+        <h3>Transferred</h3>
+        <p>
+            <div className={styles.line}>
+                We have a few outstanding questions that will help us better understand the work and scope before we can launch your work on our platform.
+            </div>
 
-                <div className={styles.line}>
-                    A Topcoder Solutions Expert will reach out to you via email with questions about your work request.
-                </div>
+            <div className={styles.line}>
+                A Topcoder Solutions Expert will reach out to you via email with questions about your work request.
+            </div>
 
-                <div className={styles.line}>
-                    <strong>
-                        Please note, the charge to your credit card has been put on hold automatically for you.
-                    </strong>
-                </div>
+            <div className={styles.line}>
+                <strong>
+                    Please note, the charge to your credit card has been put on hold automatically for you.
+                </strong>
+            </div>
 
-                <div className={styles.line}>
-                    Thank you!<br />
-                    The Topcoder Team
-                </div>
-            </p>
-        </div>
-    )
-}
+            <div className={styles.line}>
+                Thank you!<br />
+                The Topcoder Team
+            </div>
+        </p>
+    </div>
+)
 
 export default WorkTransferredStatus
diff --git a/src-ts/tools/work/work-lib/work-provider/message-functions/message.functions.ts b/src-ts/tools/work/work-lib/work-provider/message-functions/message.functions.ts
index dbd73b742..6d718cace 100644
--- a/src-ts/tools/work/work-lib/work-provider/message-functions/message.functions.ts
+++ b/src-ts/tools/work/work-lib/work-provider/message-functions/message.functions.ts
@@ -8,12 +8,10 @@ export async function getAndSetForWorkItemsAsync(workItems: Array<Work>, handle:
     // create a list of promises
     const requestsList: Array<Promise<GetUnreadMessageCountResponse>> = workItems
         .filter(work => work.status === WorkStatus.active)
-        .map(work => {
-            return messageStoreGetUnreadCountAsync(work.id, handle)
-                .catch(() => ({
-                    workId: work.id,
-                }))
-        })
+        .map(work => messageStoreGetUnreadCountAsync(work.id, handle)
+            .catch(() => ({
+                workId: work.id,
+            })))
 
     // resolve all the promises
     const results: Array<GetUnreadMessageCountResponse> = await Promise.all(requestsList)
diff --git a/src-ts/tools/work/work-lib/work-provider/work-functions/work-factory/work.factory.ts b/src-ts/tools/work/work-lib/work-provider/work-functions/work-factory/work.factory.ts
index 5eb4d4556..fb872ca2b 100644
--- a/src-ts/tools/work/work-lib/work-provider/work-functions/work-factory/work.factory.ts
+++ b/src-ts/tools/work/work-lib/work-provider/work-functions/work-factory/work.factory.ts
@@ -182,6 +182,7 @@ export function buildUpdateRequest(workTypeConfig: WorkTypeConfig, challenge: Ch
         if (workTypeConfig.submissionPhaseDuration && phase.phaseId === WorkConfigConstants.PHASE_ID_SUBMISSION) {
             phase.duration = workTypeConfig.submissionPhaseDuration[formData[ChallengeMetadataName.packageType] as PricePackageName] || 0
         }
+
         return phase
     })
 
@@ -292,7 +293,7 @@ function buildFormDataBugHunt(formData: any): ReadonlyArray<FormDetail> {
         {
             key: ChallengeMetadataName.deliveryType,
             title: ChallengeMetadataTitle.bugDeliveryType,
-            value: `${formData.deliveryType}${formData.repositoryLink ? ': ' + formData.repositoryLink : ''}`,
+            value: `${formData.deliveryType}${formData.repositoryLink ? `: ${  formData.repositoryLink}` : ''}`,
         },
         {
             key: ChallengeMetadataName.additionalInformation,
@@ -451,14 +452,10 @@ function findOpenPhase(challenge: Challenge): ChallengePhase | undefined {
     const openPhase: ChallengePhase | undefined = sortedPhases.find(phase => phase.isOpen)
         // otherwise, find the phase that _should_ be open now based on its start/end datetimes
         || sortedPhases
-            .find(phase => {
-                return new Date(phase.actualEndDate) > now && new Date(phase.actualStartDate) < now
-            })
+            .find(phase => new Date(phase.actualEndDate) > now && new Date(phase.actualStartDate) < now)
         // otherwise, find the most recently started phase that's in the past
         || sortedPhases
-            .find(phase => {
-                return new Date(phase.actualStartDate) < now
-            })
+            .find(phase => new Date(phase.actualStartDate) < now)
 
     return openPhase
 }
@@ -469,8 +466,10 @@ function findPhase(challenge: Challenge, phases: Array<string>): ChallengePhase
         if (!!phase) {
             break
         }
+
         phase = challenge.phases.find((p: any) => p.name === currentPhase)
     }
+
     return phase
 }
 
@@ -481,9 +480,11 @@ function formatFormDataOption(detail: Array<string> | { [key: string]: any }): s
     if (isEmpty) {
         return noInfoProvidedText
     }
+
     if (Array.isArray(detail)) {
         return detail.join('\n\n')
     }
+
     if (typeof detail === 'object') {
         return Object.keys(detail)
             .map((key: string) => {
@@ -492,6 +493,7 @@ function formatFormDataOption(detail: Array<string> | { [key: string]: any }): s
             })
             .join('\n\n')
     }
+
     return detail
 }
 
@@ -549,9 +551,9 @@ function getProgress(challenge: Challenge, workStatus: WorkStatus): WorkProgress
         },
         {
             date: getProgressStepDateStart(challenge, [
-              ChallengePhaseName.specificationReview,
-              ChallengePhaseName.specificationSubmission,
-              ChallengePhaseName.registration,
+                ChallengePhaseName.specificationReview,
+                ChallengePhaseName.specificationSubmission,
+                ChallengePhaseName.registration,
             ]),
             name: 'Started',
         },
@@ -699,7 +701,7 @@ function getTypeCategory(type: WorkType): WorkTypeCategory {
             return WorkTypeCategory.design
 
         case WorkType.bugHunt:
-          return WorkTypeCategory.qa
+            return WorkTypeCategory.qa
 
         // TOOD: other categories: dev
         default:
diff --git a/src-ts/tools/work/work-lib/work-provider/work-functions/work-store/work-prices.config.ts b/src-ts/tools/work/work-lib/work-provider/work-functions/work-store/work-prices.config.ts
index ea6c9c7df..1c315b521 100644
--- a/src-ts/tools/work/work-lib/work-provider/work-functions/work-store/work-prices.config.ts
+++ b/src-ts/tools/work/work-lib/work-provider/work-functions/work-store/work-prices.config.ts
@@ -164,6 +164,7 @@ function getPrizeSets(priceConfig: WorkPrice, packageName?: PricePackageName | u
     if (!packageName) {
         packageName = priceConfig.usePromo ? 'promo' : 'base'
     }
+
     const pricePackage: WorkPriceBreakdown | undefined = priceConfig.packages?.[packageName]
 
     if (!pricePackage) { return [] }
diff --git a/src-ts/tools/work/work-lib/work-provider/work-functions/work-store/work-type.config.ts b/src-ts/tools/work/work-lib/work-provider/work-functions/work-store/work-type.config.ts
index 2e4fdb495..eddfb209a 100644
--- a/src-ts/tools/work/work-lib/work-provider/work-functions/work-store/work-type.config.ts
+++ b/src-ts/tools/work/work-lib/work-provider/work-functions/work-store/work-type.config.ts
@@ -32,7 +32,7 @@ export const WorkTypeConfigs: { [workType: string]: WorkTypeConfig } = {
             type: 'Review & Payment',
         },
         shortDescription: 'Find bugs quickly and vigorously',
-        startRoute: WorkIntakeFormRoutes[WorkType.bugHunt]['basicInfo'],
+        startRoute: WorkIntakeFormRoutes[WorkType.bugHunt].basicInfo,
         submissionPhaseDuration: {
             'advanced': 172800, // 2 days
             'premium': 259200, // 3 days
diff --git a/src-ts/tools/work/work-lib/work-provider/work.provider.tsx b/src-ts/tools/work/work-lib/work-provider/work.provider.tsx
index 0e34bf95c..4da398d67 100644
--- a/src-ts/tools/work/work-lib/work-provider/work.provider.tsx
+++ b/src-ts/tools/work/work-lib/work-provider/work.provider.tsx
@@ -28,6 +28,7 @@ export const WorkProvider: FC<{ children: ReactNode }> = ({ children }: { childr
             if (!removedItemIndex) {
                 return
             }
+
             workList.splice(removedItemIndex, 1)
             setWorkContextData({
                 ...workContextData,
@@ -77,14 +78,12 @@ export const WorkProvider: FC<{ children: ReactNode }> = ({ children }: { childr
                 // now that the work list is initialized,
                 // set all the message counts individually in the background.
                 const promises: Array<Promise<Work>> = output
-                    .map(item => {
-                        return messageGetUnreadCountAsync(item.id, safeProfile.handle)
-                            .then(messageCount => {
-                                item.messageCount = messageCount
-                                return item
-                            })
-                            .catch(() => item)
-                    })
+                    .map(item => messageGetUnreadCountAsync(item.id, safeProfile.handle)
+                        .then(messageCount => {
+                            item.messageCount = messageCount
+                            return item
+                        })
+                        .catch(() => item))
 
                 Promise.all(promises)
                     .then(results => {
diff --git a/src-ts/tools/work/work-lib/work-status-item/WorkStatusItem.tsx b/src-ts/tools/work/work-lib/work-status-item/WorkStatusItem.tsx
index 725bfff36..f6e25a2ed 100644
--- a/src-ts/tools/work/work-lib/work-status-item/WorkStatusItem.tsx
+++ b/src-ts/tools/work/work-lib/work-status-item/WorkStatusItem.tsx
@@ -6,7 +6,7 @@ export interface WorkStatusItemProps {
     workStatus?: WorkStatus
 }
 
-function WorkStatusItem({ workStatus }: WorkStatusItemProps): JSX.Element {
+const WorkStatusItem = ({ workStatus }: WorkStatusItemProps): JSX.Element => {
 
     if (!workStatus) {
         return <></>
@@ -18,7 +18,7 @@ function WorkStatusItem({ workStatus }: WorkStatusItemProps): JSX.Element {
 
     return (
         <div className={styles['status-container']}>
-            <div className={styles[statusKey]}></div>
+            <div className={styles[statusKey]} />
             <div className={styles['small-tab']}>
                 {workStatus}
             </div>
diff --git a/src-ts/tools/work/work-login-prompt/WorkLoginPrompt.tsx b/src-ts/tools/work/work-login-prompt/WorkLoginPrompt.tsx
index 05d6604e4..e0b6fd94e 100644
--- a/src-ts/tools/work/work-login-prompt/WorkLoginPrompt.tsx
+++ b/src-ts/tools/work/work-login-prompt/WorkLoginPrompt.tsx
@@ -29,9 +29,9 @@ const WorkLoginPrompt: FC<WorkLoginPromptProps> = ({ previousPageUrl }: WorkLogi
     }
 
     const onBack: () => void = () => {
-      navigate(
-        previousPageUrl
-      )
+        navigate(
+            previousPageUrl
+        )
     }
 
     return (
@@ -46,12 +46,12 @@ const WorkLoginPrompt: FC<WorkLoginPromptProps> = ({ previousPageUrl }: WorkLogi
                         security, please log in or create an account.
                     </p>
 
-                    <div className={styles['btn']}>
+                    <div className={styles.btn}>
                         <Button
                             label='LOG IN'
                             url={authUrlLogin(customReturnUrl)}
                         />
-                        <span className={styles['separator']}>OR</span>
+                        <span className={styles.separator}>OR</span>
                         <Button
                             label='SIGN UP'
                             onClick={signUp}
@@ -60,15 +60,15 @@ const WorkLoginPrompt: FC<WorkLoginPromptProps> = ({ previousPageUrl }: WorkLogi
                 </div>
             </div>
             <PageDivider />
-            <div className={styles['footerContent']}>
-              <div>
-                <Button
-                  size='md'
-                  icon={BackArrowIcon}
-                  buttonStyle='secondary'
-                  onClick={onBack}
-                />
-              </div>
+            <div className={styles.footerContent}>
+                <div>
+                    <Button
+                        size='md'
+                        icon={BackArrowIcon}
+                        buttonStyle='secondary'
+                        onClick={onBack}
+                    />
+                </div>
             </div>
         </>
     )
diff --git a/src-ts/tools/work/work-not-logged-in/WorkNotLoggedIn.tsx b/src-ts/tools/work/work-not-logged-in/WorkNotLoggedIn.tsx
index 0e3e84024..cd74ce723 100644
--- a/src-ts/tools/work/work-not-logged-in/WorkNotLoggedIn.tsx
+++ b/src-ts/tools/work/work-not-logged-in/WorkNotLoggedIn.tsx
@@ -51,7 +51,7 @@ const WorkNotLoggedIn: FC<{}> = () => {
     }
 
     return (
-        <ContentLayout title={''} >
+        <ContentLayout title="" >
             <div className={styles.container}>
 
                 <div className={styles.leftContent}>
diff --git a/src-ts/tools/work/work-self-service/intake-forms/bug-hunt/BugHuntIntakeForm.tsx b/src-ts/tools/work/work-self-service/intake-forms/bug-hunt/BugHuntIntakeForm.tsx
index 9403b4396..349ca078b 100644
--- a/src-ts/tools/work/work-self-service/intake-forms/bug-hunt/BugHuntIntakeForm.tsx
+++ b/src-ts/tools/work/work-self-service/intake-forms/bug-hunt/BugHuntIntakeForm.tsx
@@ -180,7 +180,7 @@ const BugHuntIntakeForm: React.FC = () => {
         if (action === 'save') {
             navigate(`${dashboardRoute}/draft`)
         } else if (action === 'submit') {
-            const nextUrl: string = `${WorkIntakeFormRoutes[WorkType.bugHunt]['review']}/${workId || challenge?.id}`
+            const nextUrl: string = `${WorkIntakeFormRoutes[WorkType.bugHunt].review}/${workId || challenge?.id}`
             navigate(nextUrl)
         }
     }
@@ -194,8 +194,9 @@ const BugHuntIntakeForm: React.FC = () => {
             localStorage.setItem('challengeInProgress', JSON.stringify(formData))
             localStorage.setItem('challengeInProgressType', WorkType.bugHunt)
         }
-        const returnUrl: string = encodeURIComponent(`${window.location.origin}${WorkIntakeFormRoutes[WorkType.bugHunt]['saveAfterLogin']}`)
-        const loginPromptUrl: string = `${WorkIntakeFormRoutes[WorkType.bugHunt]['loginPrompt']}/${returnUrl}`
+
+        const returnUrl: string = encodeURIComponent(`${window.location.origin}${WorkIntakeFormRoutes[WorkType.bugHunt].saveAfterLogin}`)
+        const loginPromptUrl: string = `${WorkIntakeFormRoutes[WorkType.bugHunt].loginPrompt}/${returnUrl}`
         navigate(loginPromptUrl)
     }
 
@@ -219,7 +220,7 @@ const BugHuntIntakeForm: React.FC = () => {
         <>
             <LoadingSpinner hide={!loading} type='Overlay' />
             <IntakeFormsBreadcrumb
-                basicInfoRoute={WorkIntakeFormRoutes[WorkType.bugHunt]['basicInfo']}
+                basicInfoRoute={WorkIntakeFormRoutes[WorkType.bugHunt].basicInfo}
                 workType={workBugHuntConfig.type}
             />
             <div className={styles['bug-hunt-wrapper']}>
diff --git a/src-ts/tools/work/work-self-service/intake-forms/bug-hunt/bug-hunt.form.config.tsx b/src-ts/tools/work/work-self-service/intake-forms/bug-hunt/bug-hunt.form.config.tsx
index f7d43cb8e..cd58728bb 100644
--- a/src-ts/tools/work/work-self-service/intake-forms/bug-hunt/bug-hunt.form.config.tsx
+++ b/src-ts/tools/work/work-self-service/intake-forms/bug-hunt/bug-hunt.form.config.tsx
@@ -119,12 +119,12 @@ export const BugHuntFormConfig: FormDefinition = {
                     options: [
                         {
                             checked: false,
-                            children: <RadioButton name={'GitHub'} icon={<GithubIcon />} isRecommended />,
+                            children: <RadioButton name="GitHub" icon={<GithubIcon />} isRecommended />,
                             id: 'GitHub',
                         },
                         {
                             checked: false,
-                            children: <RadioButton name={'GitLab'} icon={<GitlabIcon />} />,
+                            children: <RadioButton name="GitLab" icon={<GitlabIcon />} />,
                             id: 'GitLab',
                         },
                     ],
diff --git a/src-ts/tools/work/work-self-service/intake-forms/bug-hunt/bug-hunt.form.pricing-config.tsx b/src-ts/tools/work/work-self-service/intake-forms/bug-hunt/bug-hunt.form.pricing-config.tsx
index f8f701122..e2c6cfda3 100644
--- a/src-ts/tools/work/work-self-service/intake-forms/bug-hunt/bug-hunt.form.pricing-config.tsx
+++ b/src-ts/tools/work/work-self-service/intake-forms/bug-hunt/bug-hunt.form.pricing-config.tsx
@@ -48,148 +48,148 @@ const BugHuntPricingConfig: Array<FormCard> = [
         ],
         title: 'Feature Menu',
     },
-  {
-      id: 'standard',
-      price: 1499,
-      sections: [
-          {
-              rows: [
-                  {
-                      icon: 'clock',
-                      label: 'Hunt Duration',
-                      text: 'Up to 24h',
-                  },
-                  {
-                      icon: 'exclamation',
-                      label: 'Number of Bugs',
-                      text: 'Up to 50',
-                  },
-                  {
-                      icon: 'user-group',
-                      label: 'Number of Testers',
-                      text: 'Up to 10',
-                  },
-                  {
-                      icon: 'desktop-computer',
-                      infoIcon: true,
-                      label: 'Device Types',
-                      text: 'Desktop',
-                      tooltipText: 'Testers may use devtools or other emulator software to test',
-                  },
-                  {
-                      infoIcon: true,
-                      label: 'Latest browser testing',
-                      tooltipText: 'Testing takes place on Chrome, Edge, Firefox and Safari',
-                      valueIcon: 'check',
-                  },
-                  {
-                      label: 'Detailed bug reporting',
-                      valueIcon: 'check',
-                  },
-                  {
-                      label: 'Expert verification',
-                      valueIcon: 'check',
-                  },
-              ],
-          },
-      ],
-      title: 'Standard',
-  },
-  {
-      id: 'advanced',
-      mostPopular: true,
-      price: 1899,
-      sections: [
-          {
-              rows: [
-                  {
-                      icon: 'clock',
-                      label: 'Hunt Duration',
-                      text: 'Up to 48h',
-                  },
-                  {
-                      icon: 'exclamation',
-                      label: 'Number of Bugs',
-                      text: 'Up to 100',
-                  },
-                  {
-                      icon: 'user-group',
-                      label: 'Number of Testers',
-                      text: 'Up to 25',
-                  },
-                  {
-                      icon: 'desktop-computer',
-                      infoIcon: true,
-                      label: 'Device Types',
-                      text: 'Desktop & Mobile',
-                      tooltipText: 'Testers may use devtools or other emulator software to test',
-                  },
-                  {
-                      infoIcon: true,
-                      label: 'Latest browser testing',
-                      tooltipText: 'Testing takes place on Chrome, Edge, Firefox and Safari',
-                      valueIcon: 'check',
-                  },
-                  {
-                      label: 'Detailed bug reporting',
-                      valueIcon: 'check',
-                  },
-                  {
-                      label: 'Expert verification',
-                      valueIcon: 'check',
-                  },
-              ],
-          },
-      ],
-      title: 'Advanced',
-  },
-  {
-      id: 'premium',
-      price: 2299,
-      sections: [
-          {
-              rows: [
-                  {
-                      icon: 'clock',
-                      label: 'Hunt Duration',
-                      text: 'Up to 72h',
-                  },
-                  {
-                      icon: 'exclamation',
-                      label: 'Number of Bugs',
-                      text: 'Up to 200',
-                  },
-                  {
-                      icon: 'user-group',
-                      label: 'Number of Testers',
-                      text: 'Up to 50',
-                  },
-                  {
-                      icon: 'desktop-computer',
-                      infoIcon: true,
-                      label: 'Device Types',
-                      text: 'Desktop, Tablet & Mobile',
-                      tooltipText: 'Testers may use devtools or other emulator software to test',
-                  },
-                  {
-                      infoIcon: true,
-                      label: 'Latest browser testing',
-                      tooltipText: 'Testing takes place on Chrome, Edge, Firefox and Safari',
-                      valueIcon: 'check',
-                  },
-                  {
-                      label: 'Detailed bug reporting',
-                      valueIcon: 'check',
-                  },
-                  {
-                      label: 'Expert verification',
-                      valueIcon: 'check',
-                  },
-              ],
-          },
-      ],
-      title: 'Premium',
-  },
+    {
+        id: 'standard',
+        price: 1499,
+        sections: [
+            {
+                rows: [
+                    {
+                        icon: 'clock',
+                        label: 'Hunt Duration',
+                        text: 'Up to 24h',
+                    },
+                    {
+                        icon: 'exclamation',
+                        label: 'Number of Bugs',
+                        text: 'Up to 50',
+                    },
+                    {
+                        icon: 'user-group',
+                        label: 'Number of Testers',
+                        text: 'Up to 10',
+                    },
+                    {
+                        icon: 'desktop-computer',
+                        infoIcon: true,
+                        label: 'Device Types',
+                        text: 'Desktop',
+                        tooltipText: 'Testers may use devtools or other emulator software to test',
+                    },
+                    {
+                        infoIcon: true,
+                        label: 'Latest browser testing',
+                        tooltipText: 'Testing takes place on Chrome, Edge, Firefox and Safari',
+                        valueIcon: 'check',
+                    },
+                    {
+                        label: 'Detailed bug reporting',
+                        valueIcon: 'check',
+                    },
+                    {
+                        label: 'Expert verification',
+                        valueIcon: 'check',
+                    },
+                ],
+            },
+        ],
+        title: 'Standard',
+    },
+    {
+        id: 'advanced',
+        mostPopular: true,
+        price: 1899,
+        sections: [
+            {
+                rows: [
+                    {
+                        icon: 'clock',
+                        label: 'Hunt Duration',
+                        text: 'Up to 48h',
+                    },
+                    {
+                        icon: 'exclamation',
+                        label: 'Number of Bugs',
+                        text: 'Up to 100',
+                    },
+                    {
+                        icon: 'user-group',
+                        label: 'Number of Testers',
+                        text: 'Up to 25',
+                    },
+                    {
+                        icon: 'desktop-computer',
+                        infoIcon: true,
+                        label: 'Device Types',
+                        text: 'Desktop & Mobile',
+                        tooltipText: 'Testers may use devtools or other emulator software to test',
+                    },
+                    {
+                        infoIcon: true,
+                        label: 'Latest browser testing',
+                        tooltipText: 'Testing takes place on Chrome, Edge, Firefox and Safari',
+                        valueIcon: 'check',
+                    },
+                    {
+                        label: 'Detailed bug reporting',
+                        valueIcon: 'check',
+                    },
+                    {
+                        label: 'Expert verification',
+                        valueIcon: 'check',
+                    },
+                ],
+            },
+        ],
+        title: 'Advanced',
+    },
+    {
+        id: 'premium',
+        price: 2299,
+        sections: [
+            {
+                rows: [
+                    {
+                        icon: 'clock',
+                        label: 'Hunt Duration',
+                        text: 'Up to 72h',
+                    },
+                    {
+                        icon: 'exclamation',
+                        label: 'Number of Bugs',
+                        text: 'Up to 200',
+                    },
+                    {
+                        icon: 'user-group',
+                        label: 'Number of Testers',
+                        text: 'Up to 50',
+                    },
+                    {
+                        icon: 'desktop-computer',
+                        infoIcon: true,
+                        label: 'Device Types',
+                        text: 'Desktop, Tablet & Mobile',
+                        tooltipText: 'Testers may use devtools or other emulator software to test',
+                    },
+                    {
+                        infoIcon: true,
+                        label: 'Latest browser testing',
+                        tooltipText: 'Testing takes place on Chrome, Edge, Firefox and Safari',
+                        valueIcon: 'check',
+                    },
+                    {
+                        label: 'Detailed bug reporting',
+                        valueIcon: 'check',
+                    },
+                    {
+                        label: 'Expert verification',
+                        valueIcon: 'check',
+                    },
+                ],
+            },
+        ],
+        title: 'Premium',
+    },
 ]
 
 export default BugHuntPricingConfig
diff --git a/src-ts/tools/work/work-self-service/intake-forms/review/AboutYourProjectInfoCard/AboutYourProjectInfoCard.tsx b/src-ts/tools/work/work-self-service/intake-forms/review/AboutYourProjectInfoCard/AboutYourProjectInfoCard.tsx
index e1b2071f8..4b3c69a8f 100644
--- a/src-ts/tools/work/work-self-service/intake-forms/review/AboutYourProjectInfoCard/AboutYourProjectInfoCard.tsx
+++ b/src-ts/tools/work/work-self-service/intake-forms/review/AboutYourProjectInfoCard/AboutYourProjectInfoCard.tsx
@@ -1,36 +1,34 @@
 import React from 'react'
 
-const AboutYourProjectInfoCard: React.FC = () => {
-    return (
-        <>
-            <li>
-                <strong>
-                    Your Dashboard is your go-to hub for managing your work.
-                </strong>
-                &nbsp; From here you can view timelines, details, and other important
-                information tied to your work submissions.
-            </li>
-            <li>
-                <strong>
-                    You can expect members of our community to ask you questions about
-                    this work.
-                </strong>
-                &nbsp; From your Work Summary page you’ll see if you have any
-                outstanding Messages, indicated by a red icon. Please answer questions
-                from our members in a timely and thorough manner. This will help them
-                deliver high quality results for you on time!
-            </li>
-            <li>
-                <strong>
-                    Topcoder experts will curate the best solutions for you.
-                </strong>
-                &nbsp; This saves you time and energy wading through submissions that
-                perhaps aren't of value to you. When your high-quality submissions are
-                ready, you'll be notified to download your assets, rate your Topcoder
-                experience, and officially close out this work.
-            </li>
-        </>
-   )
-}
+const AboutYourProjectInfoCard: React.FC = () => (
+    <>
+        <li>
+            <strong>
+                Your Dashboard is your go-to hub for managing your work.
+            </strong>
+            &nbsp; From here you can view timelines, details, and other important
+            information tied to your work submissions.
+        </li>
+        <li>
+            <strong>
+                You can expect members of our community to ask you questions about
+                this work.
+            </strong>
+            &nbsp; From your Work Summary page you’ll see if you have any
+            outstanding Messages, indicated by a red icon. Please answer questions
+            from our members in a timely and thorough manner. This will help them
+            deliver high quality results for you on time!
+        </li>
+        <li>
+            <strong>
+                Topcoder experts will curate the best solutions for you.
+            </strong>
+            &nbsp; This saves you time and energy wading through submissions that
+            perhaps aren't of value to you. When your high-quality submissions are
+            ready, you'll be notified to download your assets, rate your Topcoder
+            experience, and officially close out this work.
+        </li>
+    </>
+)
 
 export default AboutYourProjectInfoCard
diff --git a/src-ts/tools/work/work-self-service/intake-forms/review/Review.tsx b/src-ts/tools/work/work-self-service/intake-forms/review/Review.tsx
index 553089e28..5593eebf9 100644
--- a/src-ts/tools/work/work-self-service/intake-forms/review/Review.tsx
+++ b/src-ts/tools/work/work-self-service/intake-forms/review/Review.tsx
@@ -54,7 +54,7 @@ const Review: FC = () => {
     const { profile: userProfile }: ProfileContextData = useContext<ProfileContextData>(profileContext)
 
     const workId: string | undefined = useParams().workId
-    const redirectUrl: string = `${WorkIntakeFormRoutes[WorkType.bugHunt]['basicInfo']}/${workId}`
+    const redirectUrl: string = `${WorkIntakeFormRoutes[WorkType.bugHunt].basicInfo}/${workId}`
 
     const [challenge, setChallenge]: [Challenge | undefined, Dispatch<SetStateAction<Challenge | undefined>>] = useState()
     const [formData, setFormData]: [any, Dispatch<any>] = useState<any>({})
@@ -92,6 +92,7 @@ const Review: FC = () => {
             if (!intakeFormBH) {
                 return
             }
+
             const form: any = JSON.parse(intakeFormBH.value).form
             setFormData(JSON.parse(intakeFormBH.value).form)
             setFormValues({
@@ -101,6 +102,7 @@ const Review: FC = () => {
                 price: `$${getPrice(form.basicInfo.packageType)}`,
             })
         }
+
         getAndSetWork()
         // Disabling to avoid infite re-renders
         // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -198,8 +200,8 @@ const Review: FC = () => {
             {/* TODO: We need to not hard code the configs to that of BugHunt and instead
             use the challenge data to determine the WorkType */}
             <IntakeFormsBreadcrumb
-                basicInfoRoute={`${WorkIntakeFormRoutes[WorkType.bugHunt]['basicInfo']}/${workId}`}
-                reviewRoute={WorkIntakeFormRoutes[WorkType.bugHunt]['review']}
+                basicInfoRoute={`${WorkIntakeFormRoutes[WorkType.bugHunt].basicInfo}/${workId}`}
+                reviewRoute={WorkIntakeFormRoutes[WorkType.bugHunt].review}
                 workType={workBugHuntConfig.type}
             />
             <WorkTypeBanner
@@ -212,14 +214,14 @@ const Review: FC = () => {
 
             <DeliverablesInfoCard isMobile={isMobile} />
 
-            <div className={styles['content']}>
-                <div className={styles['left']}>
-                    <WorkDetailDetailsPane formData={formData} isReviewPage={true} redirectUrl={redirectUrl} collapsible={true} defaultOpen={true} />
+            <div className={styles.content}>
+                <div className={styles.left}>
+                    <WorkDetailDetailsPane formData={formData} isReviewPage redirectUrl={redirectUrl} collapsible defaultOpen />
                     {
                         !isMobile && (
                             <InfoCard
                                 color='success'
-                                defaultOpen={true}
+                                defaultOpen
                                 isCollapsible
                                 title={workBugHuntConfig.review.aboutYourProjectTitle}
                             >
@@ -228,13 +230,13 @@ const Review: FC = () => {
                         )
                     }
                 </div>
-                <div className={styles['right']}>
+                <div className={styles.right}>
                     {
                         profile && (
                             <div className={styles['payment-form-wrapper']}>
                                 <div className={styles['form-header']}>
-                                    <h3 className={styles['price']}>{formFieldValues.price}</h3>
-                                    <div className={styles['label']}>Total Payment</div>
+                                    <h3 className={styles.price}>{formFieldValues.price}</h3>
+                                    <div className={styles.label}>Total Payment</div>
                                 </div>
                                 <PaymentForm
                                     formData={formFieldValues}
diff --git a/src-ts/tools/work/work-self-service/intake-forms/save-after-login/SaveAfterLogin.tsx b/src-ts/tools/work/work-self-service/intake-forms/save-after-login/SaveAfterLogin.tsx
index fa9c7914a..a6c839022 100644
--- a/src-ts/tools/work/work-self-service/intake-forms/save-after-login/SaveAfterLogin.tsx
+++ b/src-ts/tools/work/work-self-service/intake-forms/save-after-login/SaveAfterLogin.tsx
@@ -30,7 +30,7 @@ const SaveAfterLogin: FC = () => {
 
                     localStorage.removeItem('challengeInProgress')
                     localStorage.removeItem('challengeInProgressType')
-                    const nextUrl: string = `${WorkIntakeFormRoutes[workType]['review']}/${challenge?.id}`
+                    const nextUrl: string = `${WorkIntakeFormRoutes[workType].review}/${challenge?.id}`
                     navigate(nextUrl)
                 }
             } catch (err) {
diff --git a/src-ts/tools/work/work-service-price/WorkServicePrice.tsx b/src-ts/tools/work/work-service-price/WorkServicePrice.tsx
index 1c4593303..854f78d55 100644
--- a/src-ts/tools/work/work-service-price/WorkServicePrice.tsx
+++ b/src-ts/tools/work/work-service-price/WorkServicePrice.tsx
@@ -16,45 +16,45 @@ export interface WorkServicePriceProps {
 }
 
 const ServicePrice: FC<WorkServicePriceProps> = (props: WorkServicePriceProps) => {
-  const { icon, iconClass, showIcon, hideTitle = false, serviceType, stickerPrice, price = 0, duration }: WorkServicePriceProps = props
+    const { icon, iconClass, showIcon, hideTitle = false, serviceType, stickerPrice, price = 0, duration }: WorkServicePriceProps = props
 
-  return (
-    <div className={styles.container}>
-      <div className={styles.inline}>
-        {!!showIcon && !!icon && (
-          <IconWrapper icon={icon} className={iconClass} />
-        )}
-        <div className={styles['content-wrapper']}>
-          {!hideTitle && (
-            <p><h3 className={styles.serviceTitle}>
-              {serviceType}
-            </h3></p>
-          )}
-          <h3>
-            <div className={styles.priceAndDuration}>
-              {stickerPrice && (
-                <span className={styles.stickerPrice}>
-                  {textFormatMoneyLocaleString(stickerPrice)}
-                </span>
-              )}
-              <span className={styles.discount}>{textFormatMoneyLocaleString(price)}</span>
-              <span className={styles.separator}>|</span>
-              <span className={styles.days}>{duration}&nbsp;Days</span>
-              <span className={styles.help}>
-                <Tooltip
-                  content='The price and project length is dynamic and dependent on the
+    return (
+        <div className={styles.container}>
+            <div className={styles.inline}>
+                {!!showIcon && !!icon && (
+                    <IconWrapper icon={icon} className={iconClass} />
+                )}
+                <div className={styles['content-wrapper']}>
+                    {!hideTitle && (
+                        <p><h3 className={styles.serviceTitle}>
+                            {serviceType}
+                        </h3></p>
+                    )}
+                    <h3>
+                        <div className={styles.priceAndDuration}>
+                            {stickerPrice && (
+                                <span className={styles.stickerPrice}>
+                                    {textFormatMoneyLocaleString(stickerPrice)}
+                                </span>
+                            )}
+                            <span className={styles.discount}>{textFormatMoneyLocaleString(price)}</span>
+                            <span className={styles.separator}>|</span>
+                            <span className={styles.days}>{duration}&nbsp;Days</span>
+                            <span className={styles.help}>
+                                <Tooltip
+                                    content='The price and project length is dynamic and dependent on the
                   variables selected as you define your work.'
-                  trigger={(
-                    <IconOutline.QuestionMarkCircleIcon className={styles['help-icon']} width={16} height={16} />
-                  )}
-                />
-              </span>
+                                    trigger={(
+                                        <IconOutline.QuestionMarkCircleIcon className={styles['help-icon']} width={16} height={16} />
+                                    )}
+                                />
+                            </span>
+                        </div>
+                    </h3>
+                </div>
             </div>
-          </h3>
         </div>
-      </div>
-    </div>
-  )
+    )
 }
 
 export default ServicePrice
diff --git a/src-ts/tools/work/work-table/WorkTable.tsx b/src-ts/tools/work/work-table/WorkTable.tsx
index 2e3a07d06..b84e2f9b4 100644
--- a/src-ts/tools/work/work-table/WorkTable.tsx
+++ b/src-ts/tools/work/work-table/WorkTable.tsx
@@ -146,7 +146,7 @@ const WorkTable: FC<{}> = () => {
     // if we don't have any work after filtering, render no results
     // otherwise, render the table
     const resultsElement: JSX.Element = !filteredResults?.length
-        ? <WorkNoResults filtered={true} />
+        ? <WorkNoResults filtered />
         : (
             <Table
                 columns={columns}
diff --git a/src-ts/tools/work/work-table/work-badge-renderer/WorkBadgeRenderer.tsx b/src-ts/tools/work/work-table/work-badge-renderer/WorkBadgeRenderer.tsx
index e08f5993a..6a82d1ad8 100644
--- a/src-ts/tools/work/work-table/work-badge-renderer/WorkBadgeRenderer.tsx
+++ b/src-ts/tools/work/work-table/work-badge-renderer/WorkBadgeRenderer.tsx
@@ -8,7 +8,7 @@ interface WorkBadgeRendererProps {
     type: 'messages' | 'items'
 }
 
-function WorkBadgeRenderer(props: WorkBadgeRendererProps): JSX.Element {
+const WorkBadgeRenderer = (props: WorkBadgeRendererProps): JSX.Element => {
 
     if (props.count === undefined || (!!props.hideZero && props.count === 0)) {
         return <></>
diff --git a/src-ts/tools/work/work-table/work-delete-button-renderer/WorkDeleteButtonRenderer.tsx b/src-ts/tools/work/work-table/work-delete-button-renderer/WorkDeleteButtonRenderer.tsx
index 8bfee7820..1a598bcca 100644
--- a/src-ts/tools/work/work-table/work-delete-button-renderer/WorkDeleteButtonRenderer.tsx
+++ b/src-ts/tools/work/work-table/work-delete-button-renderer/WorkDeleteButtonRenderer.tsx
@@ -10,7 +10,7 @@ import {
 import '../../../../lib/styles/index.scss'
 import { Work, workContext, WorkContextData, workDeleteAsync, WorkStatus } from '../../work-lib'
 
-function WorkDeleteButtonRenderer(work: Work): JSX.Element | undefined {
+const WorkDeleteButtonRenderer = (work: Work): JSX.Element | undefined => {
 
     const workContextData: WorkContextData = useContext(workContext)
     const [confirmationOpen, setConfirmationOpen]: [boolean, Dispatch<SetStateAction<boolean>>] = useState<boolean>(false)
diff --git a/src-ts/tools/work/work-table/work-status-renderer/WorkStatusRenderer.tsx b/src-ts/tools/work/work-table/work-status-renderer/WorkStatusRenderer.tsx
index c66b831df..da8735408 100644
--- a/src-ts/tools/work/work-table/work-status-renderer/WorkStatusRenderer.tsx
+++ b/src-ts/tools/work/work-table/work-status-renderer/WorkStatusRenderer.tsx
@@ -1,9 +1,7 @@
 import { Work, WorkStatusItem } from '../../work-lib'
 
-function WorkStatusRenderer(work: Work): JSX.Element {
-    return (
-        <WorkStatusItem workStatus={work.status} />
-    )
-}
+const WorkStatusRenderer = (work: Work): JSX.Element => (
+    <WorkStatusItem workStatus={work.status} />
+)
 
 export default WorkStatusRenderer
diff --git a/src-ts/tools/work/work-table/work-table-title-renderer/WorkTableTitleRenderer.tsx b/src-ts/tools/work/work-table/work-table-title-renderer/WorkTableTitleRenderer.tsx
index c04f027b9..5cce28a3a 100644
--- a/src-ts/tools/work/work-table/work-table-title-renderer/WorkTableTitleRenderer.tsx
+++ b/src-ts/tools/work/work-table/work-table-title-renderer/WorkTableTitleRenderer.tsx
@@ -9,7 +9,7 @@ import {
 
 import styles from './WorkTableTitleRenderer.module.scss'
 
-function WorkTableTitleRenderer(data: Work): JSX.Element {
+const WorkTableTitleRenderer = (data: Work): JSX.Element => {
 
     let Icon: JSX.Element
     switch (data.typeCategory) {
@@ -23,13 +23,13 @@ function WorkTableTitleRenderer(data: Work): JSX.Element {
             break
 
         case WorkTypeCategory.qa:
-          Icon = (
-            <IconWrapper
-              className={styles['qa-icon']}
-              icon={<IconOutline.BadgeCheckIcon />}
-            />
-          )
-          break
+            Icon = (
+                <IconWrapper
+                    className={styles['qa-icon']}
+                    icon={<IconOutline.BadgeCheckIcon />}
+                />
+            )
+            break
 
         // TODO: dev work categories
         default:
diff --git a/src-ts/tools/work/work-type-banner/WorkTypeBanner.tsx b/src-ts/tools/work/work-type-banner/WorkTypeBanner.tsx
index a9a98e8c3..8810cc688 100644
--- a/src-ts/tools/work/work-type-banner/WorkTypeBanner.tsx
+++ b/src-ts/tools/work/work-type-banner/WorkTypeBanner.tsx
@@ -10,28 +10,28 @@ interface WorkTypeBannerProps {
 
 export const WorkTypeBanner: FC<WorkTypeBannerProps> = (props: WorkTypeBannerProps) => {
 
-  const styleType: string = props.workType
-    .toLowerCase()
-    .split(' ')
-    .join('-')
-    .split('&')
-    .join('')
+    const styleType: string = props.workType
+        .toLowerCase()
+        .split(' ')
+        .join('-')
+        .split('&')
+        .join('')
 
-  return (
-    <div className={`${styles.heroContainer} ${styles[styleType]}`}>
-      <div
-        className={`${styles.heroBackgroundContainer} ${styles[styleType]}`}
-      ></div>
-      <div className={styles.heroContent}>
-        <div className={styles.heroHeader}>
-          <div className={styles.heroHeaderContent}>
-            <div className={styles.heroHeaderTitle}>{props.title}</div>
-            <div className={styles.heroHeaderSubtitle}>{props.subTitle}</div>
-          </div>
+    return (
+        <div className={`${styles.heroContainer} ${styles[styleType]}`}>
+            <div
+                className={`${styles.heroBackgroundContainer} ${styles[styleType]}`}
+            />
+            <div className={styles.heroContent}>
+                <div className={styles.heroHeader}>
+                    <div className={styles.heroHeaderContent}>
+                        <div className={styles.heroHeaderTitle}>{props.title}</div>
+                        <div className={styles.heroHeaderSubtitle}>{props.subTitle}</div>
+                    </div>
+                </div>
+            </div>
         </div>
-      </div>
-    </div>
-  )
+    )
 }
 
 export default WorkTypeBanner
diff --git a/src-ts/tools/work/work.routes.tsx b/src-ts/tools/work/work.routes.tsx
index f519f797a..70fe89534 100644
--- a/src-ts/tools/work/work.routes.tsx
+++ b/src-ts/tools/work/work.routes.tsx
@@ -98,7 +98,7 @@ export const workRoutes: Array<PlatformRoute> = [
                 route: `${bugHuntRoute}review/:workId`,
             },
             {
-                element: <WorkLoginPrompt previousPageUrl={WorkIntakeFormRoutes[WorkType.bugHunt]['basicInfo']} />,
+                element: <WorkLoginPrompt previousPageUrl={WorkIntakeFormRoutes[WorkType.bugHunt].basicInfo} />,
                 route: `${bugHuntRoute}login-prompt/:retUrl`,
             },
             // General