refactor: #2520 Refactor submit app modal styles + global styles (#2577)

reapit · Sep 7, 2020 · 921428f · 921428f
1 parent 21aeea9
commit 921428f
Show file tree

Hide file tree

Showing 36 changed files with 115 additions and 197 deletions.
diff --git a/...s/app-detail-preview/client/__tests__/__snapshots__/contact-developer-modal.test.tsx.snap b/...s/app-detail-preview/client/__tests__/__snapshots__/contact-developer-modal.test.tsx.snap
@@ -61,7 +61,7 @@ exports[`ContactDeveloperSection should match snapshot with gutter 1`] = `
         <Component>
           <p>
             <a
-              className={[Function]}
+              className=""
               href="mailto:[email protected]"
               rel="noopener noreferrer"
               target="_blank"
@@ -80,7 +80,7 @@ exports[`ContactDeveloperSection should match snapshot with gutter 1`] = `
         <Component>
           <p>
             <a
-              className={[Function]}
+              className=""
               href="https://reapit.com"
               rel="noopener noreferrer"
               target="_blank"
@@ -156,7 +156,7 @@ exports[`ContactDeveloperSection should match snapshot without gutter 1`] = `
         <Component>
           <p>
             <a
-              className={[Function]}
+              className=""
               href="mailto:[email protected]"
               rel="noopener noreferrer"
               target="_blank"
@@ -175,7 +175,7 @@ exports[`ContactDeveloperSection should match snapshot without gutter 1`] = `
         <Component>
           <p>
             <a
-              className={[Function]}
+              className=""
               href="https://reapit.com"
               rel="noopener noreferrer"
               target="_blank"

diff --git a/...veloper-portal/src/components/pages/app-detail-preview/client/contact-developer-modal.tsx b/...veloper-portal/src/components/pages/app-detail-preview/client/contact-developer-modal.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 import { Button, Grid, GridItem, SubTitleH6, Content, ModalV2 } from '@reapit/elements'
-import linkStyles from '@/styles/elements/link.scss?mod'
+import { link } from '@/styles/elements/link'
 
 export type ContactDeveloperSectionType = {
   contact: {
@@ -70,12 +70,7 @@ export const ContactDeveloperSection = ({
             </GridItem>
             <GridItem>
               <p>
-                <a
-                  className={linkStyles.link}
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  href={`mailto:${supportEmail}`}
-                >
+                <a className={link} target="_blank" rel="noopener noreferrer" href={`mailto:${supportEmail}`}>
                   {supportEmail}
                 </a>
               </p>
@@ -87,7 +82,7 @@ export const ContactDeveloperSection = ({
             </GridItem>
             <GridItem>
               <p>
-                <a className={linkStyles.link} href={homePage} target="_blank" rel="noopener noreferrer">
+                <a className={link} href={homePage} target="_blank" rel="noopener noreferrer">
                   {homePage}
                 </a>
               </p>

diff --git a/...nts/pages/edit-app/__tests__/__snapshots__/agency-cloud-integration-section.test.tsx.snap b/...nts/pages/edit-app/__tests__/__snapshots__/agency-cloud-integration-section.test.tsx.snap
@@ -42,7 +42,7 @@ exports[`AgencyCloudIntegrationSection should match a snapshot 1`] = `
                   To be able to associate your application with an action in Agency Cloud the application will need to be given a desktop type. Please select the type of integration your app requires from the list below. For more information on Desktop Types, please
                    
                   <a
-                    className={[Function]}
+                    className=""
                     href="https://foundations-documentation.reapit.cloud/api/desktop-api#desktop-types"
                     rel="noopener noreferrer"
                     target="_blank"

diff --git a/...mponents/pages/edit-app/__tests__/__snapshots__/authentication-flow-section.test.tsx.snap b/...mponents/pages/edit-app/__tests__/__snapshots__/authentication-flow-section.test.tsx.snap
@@ -29,7 +29,7 @@ exports[`AuthenticationFlowSection should match a snapshot 1`] = `
     . For more information on authentication, see our platform documentation
      
     <a
-      className={[Function]}
+      className=""
       href="https://foundations-documentation.reapit.cloud/api/api-documentation#authentication"
       rel="noopener noreferrer"
       target="_blank"

diff --git a/...al/src/components/pages/edit-app/__tests__/__snapshots__/developer-edit-app.test.tsx.snap b/...al/src/components/pages/edit-app/__tests__/__snapshots__/developer-edit-app.test.tsx.snap
@@ -813,7 +813,7 @@ exports[`DeveloperSubmitApp should match a snapshot when pendingRevisions = fals
                       >
                         For more information on how to complete this form, please view our "Step-by-step" guide 
                         <a
-                          className={[Function]}
+                          className=""
                           href="https://foundations-documentation.reapit.cloud/developer-portal"
                           rel="noopener noreferrer"
                           target="_blank"
@@ -1302,7 +1302,7 @@ exports[`DeveloperSubmitApp should match a snapshot when pendingRevisions = fals
                         To be able to associate your application with an action in Agency Cloud the application will need to be given a desktop type. Please select the type of integration your app requires from the list below. For more information on Desktop Types, please
                          
                         <a
-                          className={[Function]}
+                          className=""
                           href="https://foundations-documentation.reapit.cloud/api/desktop-api#desktop-types"
                           rel="noopener noreferrer"
                           target="_blank"
@@ -1814,7 +1814,7 @@ exports[`DeveloperSubmitApp should match a snapshot when pendingRevisions = fals
                         . For more information on authentication, see our platform documentation
                          
                         <a
-                          className={[Function]}
+                          className=""
                           href="https://foundations-documentation.reapit.cloud/api/api-documentation#authentication"
                           rel="noopener noreferrer"
                           target="_blank"

diff --git a/...mponents/pages/edit-app/__tests__/__snapshots__/general-information-section.test.tsx.snap b/...mponents/pages/edit-app/__tests__/__snapshots__/general-information-section.test.tsx.snap
@@ -38,7 +38,7 @@ exports[`GeneralInformationSection should match a snapshot when isListed equal t
                 >
                   For more information on how to complete this form, please view our "Step-by-step" guide 
                   <a
-                    className={[Function]}
+                    className=""
                     href="https://foundations-documentation.reapit.cloud/developer-portal"
                     rel="noopener noreferrer"
                     target="_blank"
@@ -552,7 +552,7 @@ exports[`GeneralInformationSection should match a snapshot when isListed equal t
                 >
                   For more information on how to complete this form, please view our "Step-by-step" guide 
                   <a
-                    className={[Function]}
+                    className=""
                     href="https://foundations-documentation.reapit.cloud/developer-portal"
                     rel="noopener noreferrer"
                     target="_blank"

diff --git a/packages/developer-portal/src/components/pages/edit-app/agency-cloud-integration-section.tsx b/packages/developer-portal/src/components/pages/edit-app/agency-cloud-integration-section.tsx
@@ -8,10 +8,10 @@ import {
   DropdownSelect,
   SelectOption,
 } from '@reapit/elements'
-import linkStyles from '@/styles/elements/link.scss?mod'
 import { useSelector } from 'react-redux'
 import { selectIntegrationTypes } from '@/selector/integration-types'
 import { DesktopIntegrationTypeModel } from '@reapit/foundations-ts-definitions'
+import { link } from '@/styles/elements/link'
 
 export type AgencyCloudIntegrationSectionProps = {}
 
@@ -37,7 +37,7 @@ const AgencyCloudIntegrationSection: React.FC<AgencyCloudIntegrationSectionProps
         desktop type. Please select the type of integration your app requires from the list below. For more information
         on Desktop Types, please{' '}
         <a
-          className={linkStyles.link}
+          className={link}
           href="https://foundations-documentation.reapit.cloud/api/desktop-api#desktop-types"
           target="_blank"
           rel="noopener noreferrer"

diff --git a/packages/developer-portal/src/components/pages/edit-app/authentication-flow-section.tsx b/packages/developer-portal/src/components/pages/edit-app/authentication-flow-section.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react'
 
 import { FormSection, FormHeading, FormSubHeading, Grid, GridItem, RadioSelect } from '@reapit/elements'
-import linkStyles from '@/styles/elements/link.scss?mod'
+import { link } from '@/styles/elements/link'
 
 export type AuthenticationFlowSectionProps = {
   authFlow?: string
@@ -22,7 +22,7 @@ const AuthenticationFlowSection: React.FC<AuthenticationFlowSectionProps> = ({ s
         <strong>This flow must not be used for applications without a server-side component</strong>. For more
         information on authentication, see our platform documentation{' '}
         <a
-          className={linkStyles.link}
+          className={link}
           href="https://foundations-documentation.reapit.cloud/api/api-documentation#authentication"
           target="_blank"
           rel="noopener noreferrer"

diff --git a/packages/developer-portal/src/components/pages/edit-app/general-information-section.tsx b/packages/developer-portal/src/components/pages/edit-app/general-information-section.tsx
@@ -13,7 +13,7 @@ import {
   SelectBoxOptions,
 } from '@reapit/elements'
 import { exec } from 'pell'
-import linkStyles from '@/styles/elements/link.scss?mod'
+import { link } from '@/styles/elements/link'
 import { useSelector } from 'react-redux'
 import { selectCategories } from '@/selector/app-categories'
 import { CategoryModel } from '@reapit/foundations-ts-definitions'
@@ -42,7 +42,7 @@ const GeneralInformationSection: React.FC<GeneralInformationSectionProps> = ({ i
       <Helper>
         For more information on how to complete this form, please view our &quot;Step-by-step&quot; guide&nbsp;
         <a
-          className={linkStyles.link}
+          className={link}
           href="https://foundations-documentation.reapit.cloud/developer-portal"
           target="_blank"
           rel="noopener noreferrer"

diff --git a/packages/developer-portal/src/components/pages/settings/billing/subscriptions.tsx b/packages/developer-portal/src/components/pages/settings/billing/subscriptions.tsx
@@ -3,7 +3,7 @@ import { H5, Table, getDate, Loader, Section } from '@reapit/elements'
 import { useSelector, useDispatch } from 'react-redux'
 import { developerFetchSubscriptions, developerDeleteSubscription } from '@/actions/developer-subscriptions'
 import { selectSubscriptions, selectSubscriptionsLoading } from '@/selector/developer-subscriptions'
-import styles from '@/styles/elements/link.scss?mod'
+import { hyperlinked } from '@/styles/elements/link'
 import { SubscriptionModel } from '@reapit/foundations-ts-definitions'
 import { Dispatch } from 'redux'
 import ConfirmModal from './delete-confirm'
@@ -58,7 +58,7 @@ export const genarateTableData = (subscriptions: SubscriptionModel[] = [], onCan
   return subscriptions.map(subscription => ({
     ...subscription,
     cancel: !subscription.cancelled && (
-      <a className={styles.hyperlinked} data-test="button-cancel" onClick={() => onCancel(subscription.id)}>
+      <a className={hyperlinked} data-test="button-cancel" onClick={() => onCancel(subscription.id)}>
         Cancel
       </a>
     ),

diff --git a/...ages/developer-portal/src/components/pages/settings/settings-organisation-tab/members.tsx b/...ages/developer-portal/src/components/pages/settings/settings-organisation-tab/members.tsx
@@ -2,7 +2,7 @@ import React, { Dispatch } from 'react'
 import { FlexContainerBasic, Table, Section, H5 } from '@reapit/elements'
 import SetAsAdminModal from './set-as-admin'
 import DisableMemberModal from '@/components/ui/disable-member-modal'
-import styles from '@/styles/elements/link.scss?mod'
+import { hyperlinked } from '@/styles/elements/link'
 import { useSelector } from 'react-redux'
 import { selectOrganisationMembers, selectOrganisationMembersLoading } from '@/selector/developers'
 import InviteMemberModal from '@/components/ui/developer-invite-member-modal'
@@ -56,24 +56,21 @@ export const prepareData = (
           <FlexContainerBasic centerContent flexColumn>
             {ableToDisable && (
               <a
-                className={styles.hyperlinked}
+                className={hyperlinked}
                 onClick={openDisableMemberModal(setSelectedUser, setEditStatusModalVisible, user)}
               >
                 Disable
               </a>
             )}
             {ableToReInvite && (
-              <a
-                className={styles.hyperlinked}
-                onClick={openReinviteModal(setSelectedUser, setReInviteModalVisible, user)}
-              >
+              <a className={hyperlinked} onClick={openReinviteModal(setSelectedUser, setReInviteModalVisible, user)}>
                 Invite Again
               </a>
             )}
             {ableToSetAdmin && (
               <a
                 data-test="button-cancel"
-                className={styles.hyperlinked}
+                className={hyperlinked}
                 onClick={() => {
                   setSelectedUser(user)
                   handleOpenSetAdminModal()

diff --git a/...per-portal/src/styles/vendor/swagger.scss → ...nents/pages/swagger/__styles__/swagger.ts b/...per-portal/src/styles/vendor/swagger.scss → ...nents/pages/swagger/__styles__/swagger.ts
@@ -1,12 +1,12 @@
 /* purgecss start ignore */
-@import '../base/fonts.scss';
-@import '../base/colors.scss';
+import { css } from 'linaria'
+import { reapitMidblue, greyLight, grey } from '@/core/__styles__/colors'
 
 /*
   Overrides file to make Swagger UI look more like the rest of the site.
   Some pretty horrible Sass in here however, need to be very specific to override defaults.
 */
-.swagger {
+export const swagger = css`
   // Can't reset the global scrollbar to default styles
   // Need to write custom styles
   *::-webkit-scrollbar {
@@ -38,7 +38,7 @@
     a,
     .info,
     .markdown {
-      font-family: $font-family-roboto;
+      font-family: 'Roboto', Helvetica, sans-serif;
       font-size: 1rem;
     }
 
@@ -50,20 +50,20 @@
     h6,
     .title,
     .model-title {
-      font-family: $font-family-roboto;
+      font-family: 'Roboto', Helvetica, sans-serif;
     }
 
     .info a {
-      color: $reapit-mid-blue;
+      color: ${reapitMidblue};
     }
 
     .info table {
-      font-family: $font-family-roboto;
+      font-family: 'Roboto', Helvetica, sans-serif;
       font-size: 1rem;
     }
 
     a {
-      color: $reapit-mid-blue;
+      color: ${reapitMidblue};
     }
 
     .loading,
@@ -79,7 +79,7 @@
 
     h2,
     .info h2 {
-      font-family: $font-family-roboto;
+      font-family: 'Roboto', Helvetica, sans-serif;
       font-size: 2rem;
       font-weight: bold;
     }
@@ -90,9 +90,9 @@
 
     code,
     .prop-format {
-      font-family: $font-family-monospace;
+      font-family: 'Source Code Pro', monospace;
       font-size: 1rem;
-      color: $grey;
+      color: ${grey};
     }
 
     .auth-wrapper {
@@ -133,19 +133,19 @@
       border-radius: none;
 
       .model-container {
-        background: $grey-light;
+        background: ${greyLight};
         margin: 1rem 0;
       }
     }
 
     .model {
       td,
       .prop-type {
-        font-family: $font-family-monospace;
+        font-family: 'Source Code Pro', monospace;
       }
 
       .prop-type {
-        color: $grey;
+        color: ${grey};
       }
     }
 
@@ -164,16 +164,16 @@
 
       small {
         font-size: 1rem;
-        font-family: $font-family-roboto;
+        font-family: 'Roboto', Helvetica, sans-serif;
       }
     }
 
     p,
     .markdown,
     .opblock-summary-description {
-      font-family: $font-family-roboto;
-      color: $grey;
+      font-family: 'Roboto', Helvetica, sans-serif;
+      color: ${grey};
     }
   }
-}
+`
 /* purgecss end ignore */
diff --git a/...veloper-portal/src/components/pages/swagger/__tests__/__snapshots__/swagger.test.tsx.snap b/...veloper-portal/src/components/pages/swagger/__tests__/__snapshots__/swagger.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`Swagger should match a snapshot 1`] = `
 <Connect(ErrorBoundary)>
   <div
-    className="swagger"
+    className=""
   >
     <Component />
     <div

diff --git a/packages/developer-portal/src/components/pages/swagger/swagger.tsx b/packages/developer-portal/src/components/pages/swagger/swagger.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react'
 import SwaggerUI from 'swagger-ui-react'
 import 'swagger-ui-react/swagger-ui.css'
-import '../../../styles/vendor/swagger.scss'
+import { swagger } from './__styles__/swagger'
 import ErrorBoundary from '@/components/hocs/error-boundary'
 import { Loader, StringMap } from '@reapit/elements'
 import { getAccessToken } from '@/utils/session'
@@ -52,7 +52,7 @@ export const SwaggerPage: React.SFC = () => {
 
   return (
     <ErrorBoundary>
-      <div className="swagger">
+      <div className={swagger}>
         {(loading || !accessToken) && <Loader />}
         <div className={`${loading ? 'swagger-loading' : ''}`}>
           <SwaggerUI

diff --git a/...al/src/components/pages/webhooks/__tests__/__snapshots__/webhook-test-modal.test.tsx.snap b/...al/src/components/pages/webhooks/__tests__/__snapshots__/webhook-test-modal.test.tsx.snap
@@ -59,7 +59,7 @@ exports[`WebhookTestModalBody WebhookTestModalBody should match snapshot 1`] = `
           To test your Webhook subscription, please select a subscription topic and an example payload for that topic will be sent to the configured URL. For more information, please
            
           <a
-            className={[Function]}
+            className=""
             href="/api-docs/api/webhooks#testing"
             rel="noopener noreferrer"
             target="_blank"