From 14126994823ac30b9e13afb3f0e31927b5c50c02 Mon Sep 17 00:00:00 2001
From: Vu Nguyen <vunp@reapit.com>
Date: Thu, 3 Sep 2020 15:17:27 +0700
Subject: [PATCH] refactor: #2520 remove unused styles + refactor app revision
 styles (#2554)

---
 .../components/pages/api-docs/api-docs.tsx    |   2 +-
 .../__styles__/pending-revision-comparison.ts | 119 ++++++++++++++++++
 .../app-revision-comparison.test.tsx.snap     | 110 ++++++++++++----
 .../__snapshots__/diff-checkbox.test.tsx.snap |   9 +-
 .../__snapshots__/diff-media.test.tsx.snap    |  16 ++-
 .../diff-render-html.test.tsx.snap            |  12 +-
 .../__snapshots__/diff-view.test.tsx.snap     |   6 +-
 .../app-revision-comparison/diff-checkbox.tsx |  10 +-
 .../app-revision-comparison/diff-media.tsx    |  30 +++--
 .../diff-render-html.tsx                      |  11 +-
 .../app-revision-comparison/diff-viewer.tsx   |   7 +-
 .../__snapshots__/apps.test.tsx.snap          |   2 +-
 .../src/components/pages/apps/apps.tsx        |   2 +-
 .../developer-edit-app.test.tsx.snap          |   8 +-
 .../general-information-section.test.tsx.snap |  16 ++-
 .../permission-section.test.tsx.snap          |   4 +-
 .../edit-app/general-information-section.tsx  |   6 +-
 .../pages/edit-app/permission-section.tsx     |   3 +-
 .../__snapshots__/help.test.tsx.snap          |  12 ++
 .../src/components/pages/help/help.tsx        |   2 +-
 .../pages/login/__styles__/login.ts}          |  71 +++++------
 .../__snapshots__/login.test.tsx.snap         |  21 +++-
 .../src/components/pages/login/login.tsx      |   4 +-
 .../pages/register/__styles__/register.ts     |  68 ++++++++++
 .../__snapshots__/register.test.tsx.snap      |  12 +-
 .../components/pages/register/register.tsx    |   4 +-
 .../src/components/pages/swagger/swagger.tsx  |   2 +-
 .../pages/webhooks/webhook-edit-modal.tsx     |   3 +-
 .../pages/welcome/__styles__/welcome.ts       |   8 ++
 .../__snapshots__/welcome.test.tsx.snap       |   5 +
 .../src/components/pages/welcome/welcome.tsx  |  22 ++--
 .../__snapshots__/categories-list.tsx.snap    |  46 -------
 .../__snapshots__/category-item.tsx.snap      |  15 ---
 .../ui/__tests__/categories-list.tsx          |  25 ----
 .../components/ui/__tests__/category-item.tsx |  27 ----
 .../src/components/ui/categories-list.tsx     |  32 -----
 .../src/components/ui/category-item.tsx       |  48 -------
 .../developer-edition-content.tsx.snap        |   4 +-
 .../__snapshots__/error-content.tsx.snap      |   4 +-
 .../__snapshots__/success-content.tsx.snap    |  16 ++-
 .../developer-edition-content.tsx             |   3 +-
 .../developer-edition-modal/error-content.tsx |   3 +-
 .../success-content.tsx                       |   9 +-
 .../__styles__/help-item-list.ts              |  11 ++
 .../__snapshots__/help-item-list.tsx.snap     |  12 ++
 .../__tests__/help-item-list.tsx              |   0
 .../{ => help-item-list}/help-item-list.tsx   |   8 +-
 .../src/components/ui/help-item-list/index.ts |   3 +
 .../ui/popup/__styles__/popup.ts}             |  11 +-
 .../__snapshots__/sandbox-pop-up.tsx.snap     |   0
 .../unsupport-brower-pop-up.tsx.snap          |   0
 .../{ => popup}/__tests__/sandbox-pop-up.tsx  |   0
 .../__tests__/unsupport-brower-pop-up.tsx     |   0
 .../ui/{ => popup}/sandbox-pop-up.tsx         |   7 +-
 .../{ => popup}/unsupport-browser-pop-up.tsx  |   7 +-
 .../src/core/__styles__/colors.ts             |   1 +
 .../src/styles/blocks/app-sidebar.scss        |  35 ------
 .../src/styles/blocks/categories-list.scss    |  38 ------
 .../styles/blocks/developer-app-modal.scss    |   3 -
 .../blocks/developer-edition-modal.scss       |   4 -
 .../src/styles/blocks/diff-checkbox.scss      |  34 -----
 .../src/styles/blocks/diff-media.scss         |  64 ----------
 .../src/styles/blocks/diff-render-html.scss   |  52 --------
 .../src/styles/blocks/diff-viewer.scss        |  21 ----
 .../src/styles/blocks/loader.scss             |  51 --------
 .../developer-submit-app-successfully.scss    |   5 -
 .../styles/pages/developer-submit-app.scss    |  33 -----
 .../src/styles/pages/developer-welcome.scss   |  20 ---
 .../src/styles/pages/help.scss                |  17 ---
 .../elements/src/styles/base/utilities.scss   |   4 +
 70 files changed, 531 insertions(+), 749 deletions(-)
 create mode 100644 packages/developer-portal/src/components/pages/app-detail/app-revision-modal/app-revision-comparison/__styles__/pending-revision-comparison.ts
 rename packages/developer-portal/src/{styles/pages/login.scss => components/pages/login/__styles__/login.ts} (59%)
 create mode 100644 packages/developer-portal/src/components/pages/register/__styles__/register.ts
 create mode 100644 packages/developer-portal/src/components/pages/welcome/__styles__/welcome.ts
 delete mode 100644 packages/developer-portal/src/components/ui/__tests__/__snapshots__/categories-list.tsx.snap
 delete mode 100644 packages/developer-portal/src/components/ui/__tests__/__snapshots__/category-item.tsx.snap
 delete mode 100644 packages/developer-portal/src/components/ui/__tests__/categories-list.tsx
 delete mode 100644 packages/developer-portal/src/components/ui/__tests__/category-item.tsx
 delete mode 100644 packages/developer-portal/src/components/ui/categories-list.tsx
 delete mode 100644 packages/developer-portal/src/components/ui/category-item.tsx
 create mode 100644 packages/developer-portal/src/components/ui/help-item-list/__styles__/help-item-list.ts
 rename packages/developer-portal/src/components/ui/{ => help-item-list}/__tests__/__snapshots__/help-item-list.tsx.snap (95%)
 rename packages/developer-portal/src/components/ui/{ => help-item-list}/__tests__/help-item-list.tsx (100%)
 rename packages/developer-portal/src/components/ui/{ => help-item-list}/help-item-list.tsx (82%)
 create mode 100644 packages/developer-portal/src/components/ui/help-item-list/index.ts
 rename packages/developer-portal/src/{styles/blocks/sandbox-pop-up.scss => components/ui/popup/__styles__/popup.ts} (60%)
 rename packages/developer-portal/src/components/ui/{ => popup}/__tests__/__snapshots__/sandbox-pop-up.tsx.snap (100%)
 rename packages/developer-portal/src/components/ui/{ => popup}/__tests__/__snapshots__/unsupport-brower-pop-up.tsx.snap (100%)
 rename packages/developer-portal/src/components/ui/{ => popup}/__tests__/sandbox-pop-up.tsx (100%)
 rename packages/developer-portal/src/components/ui/{ => popup}/__tests__/unsupport-brower-pop-up.tsx (100%)
 rename packages/developer-portal/src/components/ui/{ => popup}/sandbox-pop-up.tsx (72%)
 rename packages/developer-portal/src/components/ui/{ => popup}/unsupport-browser-pop-up.tsx (73%)
 delete mode 100644 packages/developer-portal/src/styles/blocks/app-sidebar.scss
 delete mode 100644 packages/developer-portal/src/styles/blocks/categories-list.scss
 delete mode 100644 packages/developer-portal/src/styles/blocks/developer-app-modal.scss
 delete mode 100644 packages/developer-portal/src/styles/blocks/developer-edition-modal.scss
 delete mode 100644 packages/developer-portal/src/styles/blocks/diff-checkbox.scss
 delete mode 100644 packages/developer-portal/src/styles/blocks/diff-media.scss
 delete mode 100644 packages/developer-portal/src/styles/blocks/diff-render-html.scss
 delete mode 100644 packages/developer-portal/src/styles/blocks/diff-viewer.scss
 delete mode 100644 packages/developer-portal/src/styles/blocks/loader.scss
 delete mode 100644 packages/developer-portal/src/styles/pages/developer-submit-app-successfully.scss
 delete mode 100644 packages/developer-portal/src/styles/pages/developer-submit-app.scss
 delete mode 100644 packages/developer-portal/src/styles/pages/developer-welcome.scss
 delete mode 100644 packages/developer-portal/src/styles/pages/help.scss

diff --git a/packages/developer-portal/src/components/pages/api-docs/api-docs.tsx b/packages/developer-portal/src/components/pages/api-docs/api-docs.tsx
index 35f89b33ab..202412cdd1 100644
--- a/packages/developer-portal/src/components/pages/api-docs/api-docs.tsx
+++ b/packages/developer-portal/src/components/pages/api-docs/api-docs.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react'
 import { useHistory } from 'react-router'
 import ErrorBoundary from '@/components/hocs/error-boundary'
-import { UnsupportBrowserPopUp } from '@/components/ui/unsupport-browser-pop-up'
+import { UnsupportBrowserPopUp } from '@/components/ui/popup/unsupport-browser-pop-up'
 import { isIE } from '@/utils/browser'
 import Routes from '@/constants/routes'
 import { IFRAME_URLS } from '@/constants/iframe-urls'
diff --git a/packages/developer-portal/src/components/pages/app-detail/app-revision-modal/app-revision-comparison/__styles__/pending-revision-comparison.ts b/packages/developer-portal/src/components/pages/app-detail/app-revision-modal/app-revision-comparison/__styles__/pending-revision-comparison.ts
new file mode 100644
index 0000000000..12c1d8376b
--- /dev/null
+++ b/packages/developer-portal/src/components/pages/app-detail/app-revision-modal/app-revision-comparison/__styles__/pending-revision-comparison.ts
@@ -0,0 +1,119 @@
+import { css } from 'linaria'
+import { grey, black, greyLight, greenLighter, redLighter, reapitMidblue } from '@/core/__styles__/colors'
+
+export const container = css`
+  background-color: ${greyLight};
+  border: 1px solid ${greyLight};
+  border-radius: 3px;
+  padding: 10px;
+  color: ${black};
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+`
+
+export const checkbox = css`
+  padding: 4px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+  pointer-events: none;
+`
+
+export const green = css`
+  background-color: ${greenLighter};
+`
+
+export const red = css`
+  background-color: ${redLighter};
+`
+
+export const arrow = css`
+  font-size: 18px;
+  color: ${grey};
+`
+
+export const image = css`
+  background-size: contain;
+  background-repeat: no-repeat;
+  background-position: center;
+`
+
+export const block = css`
+  border-radius: 4px;
+  width: 88px;
+  height: 88px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`
+
+export const iconBlock = css`
+  width: 90px;
+  height: 90px;
+`
+
+export const iconImage = css`
+  width: 80px;
+  height: 80px;
+`
+
+export const mediaBlock = css`
+  width: 150px;
+  height: 210px;
+`
+
+export const mediaImage = css`
+  width: 140px;
+  height: 200px;
+`
+
+export const diffRenderHtmlContainer = css`
+  background-color: ${greyLight};
+  border: 1px solid ${greyLight};
+  border-radius: 3px;
+  padding: 10px;
+  color: ${black};
+  display: flex;
+  align-items: center;
+
+  & a {
+    color: ${reapitMidblue};
+    font-weight: bold;
+  }
+
+  & ul,
+  & ol {
+    margin-top: 0;
+    margin-left: 0;
+    list-style-position: inside;
+
+    & li div {
+      display: inline-block;
+    }
+  }
+
+  & p {
+    margin: 1rem 0;
+  }
+`
+
+export const diffRenderBlock = css`
+  overflow-wrap: break-word;
+  border-radius: 4px;
+  // 4% space for arrow
+  width: 48%;
+`
+
+export const diffViewerContainer = css`
+  background-color: ${greyLight};
+  border: 1px solid ${greyLight};
+  border-radius: 3px;
+  padding: 10px;
+  color: ${black};
+
+  span {
+    overflow-wrap: break-word;
+  }
+`
diff --git a/packages/developer-portal/src/components/pages/app-detail/app-revision-modal/app-revision-comparison/__tests__/__snapshots__/app-revision-comparison.test.tsx.snap b/packages/developer-portal/src/components/pages/app-detail/app-revision-modal/app-revision-comparison/__tests__/__snapshots__/app-revision-comparison.test.tsx.snap
index e0d7bf78a0..82d9a87d04 100644
--- a/packages/developer-portal/src/components/pages/app-detail/app-revision-modal/app-revision-comparison/__tests__/__snapshots__/app-revision-comparison.test.tsx.snap
+++ b/packages/developer-portal/src/components/pages/app-detail/app-revision-modal/app-revision-comparison/__tests__/__snapshots__/app-revision-comparison.test.tsx.snap
@@ -172,13 +172,17 @@ Get
               currentString="Peter's Properties"
               type="words"
             >
-              <div>
+              <div
+                className=""
+              >
                 <span
+                  className=""
                   key="0"
                 >
                   Peter's
                 </span>
                 <span
+                  className=""
                   key="1"
                 >
                   Amazon
@@ -190,11 +194,13 @@ Get
                    
                 </span>
                 <span
+                  className=""
                   key="3"
                 >
                   Properties
                 </span>
                 <span
+                  className=""
                   key="4"
                 >
                   Shopping 2
@@ -216,7 +222,9 @@ Get
               currentString=""
               type="words"
             >
-              <div>
+              <div
+                className=""
+              >
                 <span
                   className=""
                   key="0"
@@ -238,13 +246,17 @@ Get
               currentString="http://myawesomeproptechproduct.io"
               type="words"
             >
-              <div>
+              <div
+                className=""
+              >
                 <span
+                  className=""
                   key="0"
                 >
                   http
                 </span>
                 <span
+                  className=""
                   key="1"
                 >
                   https
@@ -256,11 +268,13 @@ Get
                   ://
                 </span>
                 <span
+                  className=""
                   key="3"
                 >
                   myawesomeproptechproduct
                 </span>
                 <span
+                  className=""
                   key="4"
                 >
                   www
@@ -272,11 +286,13 @@ Get
                   .
                 </span>
                 <span
+                  className=""
                   key="6"
                 >
                   io
                 </span>
                 <span
+                  className=""
                   key="7"
                 >
                   amazon.com/
@@ -298,7 +314,9 @@ Get
               currentString=""
               type="words"
             >
-              <div>
+              <div
+                className=""
+              >
                 <span
                   className=""
                   key="0"
@@ -320,13 +338,17 @@ Get
               currentString="support@reapit.com"
               type="words"
             >
-              <div>
+              <div
+                className=""
+              >
                 <span
+                  className=""
                   key="0"
                 >
                   support
                 </span>
                 <span
+                  className=""
                   key="1"
                 >
                   VBNApplication
@@ -338,11 +360,13 @@ Get
                   @
                 </span>
                 <span
+                  className=""
                   key="3"
                 >
                   reapit
                 </span>
                 <span
+                  className=""
                   key="4"
                 >
                   test
@@ -370,13 +394,17 @@ Get
               currentString="0113 288 2900"
               type="words"
             >
-              <div>
+              <div
+                className=""
+              >
                 <span
+                  className=""
                   key="0"
                 >
                   0113
                 </span>
                 <span
+                  className=""
                   key="1"
                 >
                   0800
@@ -388,11 +416,13 @@ Get
                    
                 </span>
                 <span
+                  className=""
                   key="3"
                 >
                   288
                 </span>
                 <span
+                  className=""
                   key="4"
                 >
                   279
@@ -404,11 +434,13 @@ Get
                    
                 </span>
                 <span
+                  className=""
                   key="6"
                 >
                   2900
                 </span>
                 <span
+                  className=""
                   key="7"
                 >
                   7234
@@ -431,13 +463,17 @@ Get
               currentString="vitae elementum curabitur vitae"
               type="words"
             >
-              <div>
+              <div
+                className=""
+              >
                 <span
+                  className=""
                   key="0"
                 >
                   vitae
                 </span>
                 <span
+                  className=""
                   key="1"
                 >
                   Shop
@@ -449,11 +485,13 @@ Get
                    
                 </span>
                 <span
+                  className=""
                   key="3"
                 >
                   elementum
                 </span>
                 <span
+                  className=""
                   key="4"
                 >
                   millions
@@ -465,11 +503,13 @@ Get
                    
                 </span>
                 <span
+                  className=""
                   key="6"
                 >
                   curabitur
                 </span>
                 <span
+                  className=""
                   key="7"
                 >
                   of
@@ -481,11 +521,13 @@ Get
                    
                 </span>
                 <span
+                  className=""
                   key="9"
                 >
                   vitae
                 </span>
                 <span
+                  className=""
                   key="10"
                 >
                   products, never miss amazing deals, compare prices and reviews
@@ -520,13 +562,15 @@ Get
       notifications when a new deal is available."
               currentString="enim facilisis"
             >
-              <div>
+              <div
+                className=""
+              >
                 <Component
-                  className="undefined undefined"
+                  className=""
                   html="enim facilisis"
                 >
                   <Component
-                    className="undefined undefined"
+                    className=""
                   >
                     <div
                       className=""
@@ -536,11 +580,13 @@ Get
                     </div>
                   </Component>
                 </Component>
-                <span>
+                <span
+                  className=""
+                >
                   →
                 </span>
                 <Component
-                  className="undefined undefined"
+                  className=""
                   html="Download the app now and start shopping our selection of fashion, books, toys, home
       appliances, sport accessories and much more.
 
@@ -557,7 +603,7 @@ Get
       notifications when a new deal is available."
                 >
                   <Component
-                    className="undefined undefined"
+                    className=""
                   >
                     <div
                       className=""
@@ -597,7 +643,9 @@ Get
               currentString=""
               type="words"
             >
-              <div>
+              <div
+                className=""
+              >
                 <span
                   className=""
                   key="0"
@@ -619,7 +667,9 @@ Get
               currentString=""
               type="words"
             >
-              <div>
+              <div
+                className=""
+              >
                 <span
                   className=""
                   key="0"
@@ -641,7 +691,9 @@ Get
               currentString=""
               type="words"
             >
-              <div>
+              <div
+                className=""
+              >
                 <span
                   className=""
                   key="0"
@@ -663,7 +715,9 @@ Get
               currentString=""
               type="wordsWithSpace"
             >
-              <div>
+              <div
+                className=""
+              >
                 <span
                   className=""
                   key="0"
@@ -686,10 +740,11 @@ Get
               dataTest="revision-diff-isListed"
             >
               <div
+                className=""
                 data-test="revision-diff-isListed"
               >
                 <span
-                  className="undefined "
+                  className=" "
                 >
                   <input
                     checked={false}
@@ -716,10 +771,11 @@ Get
               dataTest="revision-diff-isDirectApi"
             >
               <div
+                className=""
                 data-test="revision-diff-isDirectApi"
               >
                 <span
-                  className="undefined "
+                  className=" "
                 >
                   <input
                     checked={false}
@@ -744,12 +800,14 @@ Get
             <DiffMedia
               type="media"
             >
-              <div>
+              <div
+                className=""
+              >
                 <div
-                  className="undefined undefined "
+                  className=""
                 >
                   <div
-                    className="undefined undefined"
+                    className=""
                     style={
                       Object {
                         "backgroundImage": "url(\\"undefined\\")",
@@ -757,14 +815,16 @@ Get
                     }
                   />
                 </div>
-                <span>
+                <span
+                  className=""
+                >
                   →
                 </span>
                 <div
-                  className="undefined undefined "
+                  className=""
                 >
                   <div
-                    className="undefined undefined"
+                    className=""
                     style={
                       Object {
                         "backgroundImage": "url(\\"undefined\\")",
diff --git a/packages/developer-portal/src/components/pages/app-detail/app-revision-modal/app-revision-comparison/__tests__/__snapshots__/diff-checkbox.test.tsx.snap b/packages/developer-portal/src/components/pages/app-detail/app-revision-modal/app-revision-comparison/__tests__/__snapshots__/diff-checkbox.test.tsx.snap
index 282ddf58bd..c80513231a 100644
--- a/packages/developer-portal/src/components/pages/app-detail/app-revision-modal/app-revision-comparison/__tests__/__snapshots__/diff-checkbox.test.tsx.snap
+++ b/packages/developer-portal/src/components/pages/app-detail/app-revision-modal/app-revision-comparison/__tests__/__snapshots__/diff-checkbox.test.tsx.snap
@@ -2,10 +2,11 @@
 
 exports[`DiffCheckbox should match a snapshot 1`] = `
 <div
+  className=""
   data-test=""
 >
   <span
-    className="undefined undefined"
+    className=" "
   >
     <input
       checked={true}
@@ -14,11 +15,13 @@ exports[`DiffCheckbox should match a snapshot 1`] = `
       type="checkbox"
     />
   </span>
-  <span>
+  <span
+    className=""
+  >
     →
   </span>
   <span
-    className="undefined undefined"
+    className=" "
   >
     <input
       checked={false}
diff --git a/packages/developer-portal/src/components/pages/app-detail/app-revision-modal/app-revision-comparison/__tests__/__snapshots__/diff-media.test.tsx.snap b/packages/developer-portal/src/components/pages/app-detail/app-revision-modal/app-revision-comparison/__tests__/__snapshots__/diff-media.test.tsx.snap
index 4c62b62f5d..66263b4408 100644
--- a/packages/developer-portal/src/components/pages/app-detail/app-revision-modal/app-revision-comparison/__tests__/__snapshots__/diff-media.test.tsx.snap
+++ b/packages/developer-portal/src/components/pages/app-detail/app-revision-modal/app-revision-comparison/__tests__/__snapshots__/diff-media.test.tsx.snap
@@ -1,12 +1,14 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`DiffMedia should match a snapshot 1`] = `
-<div>
+<div
+  className=""
+>
   <div
-    className="undefined undefined undefined"
+    className=""
   >
     <div
-      className="undefined undefined"
+      className=""
       style={
         Object {
           "backgroundImage": "url(\\"image-2\\")",
@@ -14,14 +16,16 @@ exports[`DiffMedia should match a snapshot 1`] = `
       }
     />
   </div>
-  <span>
+  <span
+    className=""
+  >
     →
   </span>
   <div
-    className="undefined undefined undefined"
+    className=""
   >
     <div
-      className="undefined undefined"
+      className=""
       style={
         Object {
           "backgroundImage": "url(\\"image-1\\")",
diff --git a/packages/developer-portal/src/components/pages/app-detail/app-revision-modal/app-revision-comparison/__tests__/__snapshots__/diff-render-html.test.tsx.snap b/packages/developer-portal/src/components/pages/app-detail/app-revision-modal/app-revision-comparison/__tests__/__snapshots__/diff-render-html.test.tsx.snap
index a10279a531..2eb23612a2 100644
--- a/packages/developer-portal/src/components/pages/app-detail/app-revision-modal/app-revision-comparison/__tests__/__snapshots__/diff-render-html.test.tsx.snap
+++ b/packages/developer-portal/src/components/pages/app-detail/app-revision-modal/app-revision-comparison/__tests__/__snapshots__/diff-render-html.test.tsx.snap
@@ -1,16 +1,20 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`DiffRenderHTML should match a snapshot 1`] = `
-<div>
+<div
+  className=""
+>
   <Component
-    className="undefined undefined"
+    className=""
     html="abc"
   />
-  <span>
+  <span
+    className=""
+  >
     →
   </span>
   <Component
-    className="undefined undefined"
+    className=""
     html="<b>axxxxxxxxxxxbc<b>"
   />
 </div>
diff --git a/packages/developer-portal/src/components/pages/app-detail/app-revision-modal/app-revision-comparison/__tests__/__snapshots__/diff-view.test.tsx.snap b/packages/developer-portal/src/components/pages/app-detail/app-revision-modal/app-revision-comparison/__tests__/__snapshots__/diff-view.test.tsx.snap
index 7ec7dad1fb..9a0e577ced 100644
--- a/packages/developer-portal/src/components/pages/app-detail/app-revision-modal/app-revision-comparison/__tests__/__snapshots__/diff-view.test.tsx.snap
+++ b/packages/developer-portal/src/components/pages/app-detail/app-revision-modal/app-revision-comparison/__tests__/__snapshots__/diff-view.test.tsx.snap
@@ -1,13 +1,17 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`DiffViewer should match a snapshot 1`] = `
-<div>
+<div
+  className=""
+>
   <span
+    className=""
     key="0"
   >
     abc
   </span>
   <span
+    className=""
     key="1"
   >
     axxxxxxxxxxxbc
diff --git a/packages/developer-portal/src/components/pages/app-detail/app-revision-modal/app-revision-comparison/diff-checkbox.tsx b/packages/developer-portal/src/components/pages/app-detail/app-revision-modal/app-revision-comparison/diff-checkbox.tsx
index 5d15359c50..075699d702 100644
--- a/packages/developer-portal/src/components/pages/app-detail/app-revision-modal/app-revision-comparison/diff-checkbox.tsx
+++ b/packages/developer-portal/src/components/pages/app-detail/app-revision-modal/app-revision-comparison/diff-checkbox.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react'
-import styles from '@/styles/blocks/diff-checkbox.scss?mod'
+import { checkbox, arrow, container, red, green } from './__styles__/pending-revision-comparison'
 
 export interface DiffCheckboxProps {
   currentChecked: boolean
@@ -11,13 +11,13 @@ const DiffCheckbox = ({ currentChecked, changedChecked, dataTest }: DiffCheckbox
   const changed = currentChecked !== changedChecked
 
   return (
-    <div className={styles.container} data-test={dataTest || ''}>
-      <span className={`${styles.checkbox} ${changed ? styles.red : ''}`}>
+    <div className={container} data-test={dataTest || ''}>
+      <span className={`${checkbox} ${changed ? red : ''}`}>
         <input type="checkbox" checked={currentChecked} readOnly data-test="current" />
       </span>
-      {changed && <span className={styles.arrow}>&#8594;</span>}
+      {changed && <span className={arrow}>&#8594;</span>}
       {changed && (
-        <span className={`${styles.checkbox} ${styles.green}`}>
+        <span className={`${checkbox} ${green}`}>
           <input type="checkbox" checked={changedChecked} readOnly data-test="changed" />
         </span>
       )}
diff --git a/packages/developer-portal/src/components/pages/app-detail/app-revision-modal/app-revision-comparison/diff-media.tsx b/packages/developer-portal/src/components/pages/app-detail/app-revision-modal/app-revision-comparison/diff-media.tsx
index 089f8a52c2..3a64c21f4c 100644
--- a/packages/developer-portal/src/components/pages/app-detail/app-revision-modal/app-revision-comparison/diff-media.tsx
+++ b/packages/developer-portal/src/components/pages/app-detail/app-revision-modal/app-revision-comparison/diff-media.tsx
@@ -1,5 +1,17 @@
 import * as React from 'react'
-import styles from '@/styles/blocks/diff-media.scss?mod'
+import { cx } from 'linaria'
+import {
+  iconBlock,
+  mediaBlock,
+  iconImage,
+  mediaImage,
+  container,
+  block,
+  image,
+  arrow,
+  red,
+  green,
+} from './__styles__/pending-revision-comparison'
 
 export interface DiffMediaProps {
   currentMedia?: string
@@ -8,17 +20,17 @@ export interface DiffMediaProps {
 }
 
 const DiffMedia = ({ currentMedia, changedMedia, type }: DiffMediaProps) => {
-  const blockStyle = type === 'icon' ? styles.iconBlock : styles.mediaBlock
-  const imageStyle = type === 'icon' ? styles.iconImage : styles.mediaImage
+  const blockStyle = type === 'icon' ? iconBlock : mediaBlock
+  const imageStyle = type === 'icon' ? iconImage : mediaImage
   const isDiff = currentMedia !== changedMedia
   return (
-    <div className={styles.container}>
-      <div className={`${styles.block} ${blockStyle} ${isDiff ? styles.red : ''}`}>
-        <div className={`${styles.image} ${imageStyle}`} style={{ backgroundImage: `url("${currentMedia}")` }} />
+    <div className={container}>
+      <div className={cx(block, blockStyle, isDiff && red)}>
+        <div className={cx(image, imageStyle)} style={{ backgroundImage: `url("${currentMedia}")` }} />
       </div>
-      <span className={styles.arrow}>&#8594;</span>
-      <div className={`${styles.block} ${blockStyle} ${isDiff ? styles.green : ''}`}>
-        <div className={`${styles.image} ${imageStyle}`} style={{ backgroundImage: `url("${changedMedia}")` }} />
+      <span className={arrow}>&#8594;</span>
+      <div className={cx(block, blockStyle, isDiff && green)}>
+        <div className={cx(image, imageStyle)} style={{ backgroundImage: `url("${changedMedia}")` }} />
       </div>
     </div>
   )
diff --git a/packages/developer-portal/src/components/pages/app-detail/app-revision-modal/app-revision-comparison/diff-render-html.tsx b/packages/developer-portal/src/components/pages/app-detail/app-revision-modal/app-revision-comparison/diff-render-html.tsx
index 834fda1de4..32e1040e59 100644
--- a/packages/developer-portal/src/components/pages/app-detail/app-revision-modal/app-revision-comparison/diff-render-html.tsx
+++ b/packages/developer-portal/src/components/pages/app-detail/app-revision-modal/app-revision-comparison/diff-render-html.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react'
-import styles from '@/styles/blocks/diff-render-html.scss?mod'
+import { cx } from 'linaria'
 import { HTMLRender } from '@reapit/elements'
+import { red, green, diffRenderBlock, arrow, diffRenderHtmlContainer } from './__styles__/pending-revision-comparison'
 
 export interface DiffRenderHTMLProps {
   currentString?: string
@@ -10,10 +11,10 @@ export interface DiffRenderHTMLProps {
 const DiffRenderHTML = ({ currentString, changedString }: DiffRenderHTMLProps) => {
   const isDiff = currentString !== changedString
   return (
-    <div className={styles.container}>
-      <HTMLRender className={`${styles.diffRenderBlock} ${isDiff ? styles.red : ''}`} html={currentString || ''} />
-      <span className={styles.arrow}>&#8594;</span>
-      <HTMLRender className={`${styles.diffRenderBlock} ${isDiff ? styles.green : ''}`} html={changedString || ''} />
+    <div className={diffRenderHtmlContainer}>
+      <HTMLRender className={cx(diffRenderBlock, isDiff && red)} html={currentString || ''} />
+      <span className={arrow}>&#8594;</span>
+      <HTMLRender className={cx(diffRenderBlock, isDiff && green)} html={changedString || ''} />
     </div>
   )
 }
diff --git a/packages/developer-portal/src/components/pages/app-detail/app-revision-modal/app-revision-comparison/diff-viewer.tsx b/packages/developer-portal/src/components/pages/app-detail/app-revision-modal/app-revision-comparison/diff-viewer.tsx
index 24a1e2ebcb..1003022a85 100644
--- a/packages/developer-portal/src/components/pages/app-detail/app-revision-modal/app-revision-comparison/diff-viewer.tsx
+++ b/packages/developer-portal/src/components/pages/app-detail/app-revision-modal/app-revision-comparison/diff-viewer.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react'
 import * as jsdiff from 'diff'
-import styles from '@/styles/blocks/diff-viewer.scss?mod'
+import { cx } from 'linaria'
+import { diffViewerContainer, green, red } from './__styles__/pending-revision-comparison'
 
 export type DiffType = 'chars' | 'words' | 'lines' | 'wordsWithSpace'
 
@@ -20,12 +21,12 @@ const diffTypes = {
 const DiffViewer = ({ currentString, changedString, type = 'words' }: DiffViewerProps) => {
   const result = diffTypes[type](currentString, changedString).map((part, index) => {
     return (
-      <span key={index} className={part.added ? styles.green : part.removed ? styles.red : ''}>
+      <span key={index} className={cx(part.added ? green : part.removed && red)}>
         {part.value}
       </span>
     )
   })
-  return <div className={styles.container}>{result}</div>
+  return <div className={diffViewerContainer}>{result}</div>
 }
 
 export default DiffViewer
diff --git a/packages/developer-portal/src/components/pages/apps/__tests__/__snapshots__/apps.test.tsx.snap b/packages/developer-portal/src/components/pages/apps/__tests__/__snapshots__/apps.test.tsx.snap
index 0a90cb88a5..7914d9df9d 100644
--- a/packages/developer-portal/src/components/pages/apps/__tests__/__snapshots__/apps.test.tsx.snap
+++ b/packages/developer-portal/src/components/pages/apps/__tests__/__snapshots__/apps.test.tsx.snap
@@ -163,7 +163,7 @@ exports[`Login should match a snapshot 1`] = `
               loading={false}
             >
               <div
-                className="undefined "
+                className=""
               >
                 <Component
                   message="This is a sandbox environment, with anonymised test data and isolated from production"
diff --git a/packages/developer-portal/src/components/pages/apps/apps.tsx b/packages/developer-portal/src/components/pages/apps/apps.tsx
index ce564c3e90..18c3815886 100644
--- a/packages/developer-portal/src/components/pages/apps/apps.tsx
+++ b/packages/developer-portal/src/components/pages/apps/apps.tsx
@@ -5,7 +5,7 @@ import { History } from 'history'
 import { Loader, Pagination, Section, H3, Button } from '@reapit/elements'
 import AppList from '@/components/ui/apps/app-list'
 import ErrorBoundary from '@/components/hocs/error-boundary'
-import { SandboxPopUp } from '@/components/ui/sandbox-pop-up'
+import { SandboxPopUp } from '@/components/ui/popup/sandbox-pop-up'
 import { AppSummaryModel } from '@reapit/foundations-ts-definitions'
 import { getParamValueFromPath } from '@/utils/client-url-params'
 import Routes from '@/constants/routes'
diff --git a/packages/developer-portal/src/components/pages/edit-app/__tests__/__snapshots__/developer-edit-app.test.tsx.snap b/packages/developer-portal/src/components/pages/edit-app/__tests__/__snapshots__/developer-edit-app.test.tsx.snap
index 4cb72868e9..ab0bec9a08 100644
--- a/packages/developer-portal/src/components/pages/edit-app/__tests__/__snapshots__/developer-edit-app.test.tsx.snap
+++ b/packages/developer-portal/src/components/pages/edit-app/__tests__/__snapshots__/developer-edit-app.test.tsx.snap
@@ -1153,7 +1153,9 @@ exports[`DeveloperSubmitApp should match a snapshot when pendingRevisions = fals
                         className=""
                         data-test=""
                       >
-                        <Component>
+                        <Component
+                          className="is-half-desktop"
+                        >
                           <div
                             className=""
                             data-test=""
@@ -1197,7 +1199,9 @@ exports[`DeveloperSubmitApp should match a snapshot when pendingRevisions = fals
                             </Component>
                           </div>
                         </Component>
-                        <Component>
+                        <Component
+                          className="is-half-desktop"
+                        >
                           <div
                             className=""
                             data-test=""
diff --git a/packages/developer-portal/src/components/pages/edit-app/__tests__/__snapshots__/general-information-section.test.tsx.snap b/packages/developer-portal/src/components/pages/edit-app/__tests__/__snapshots__/general-information-section.test.tsx.snap
index 9288faca15..90e7f7e141 100644
--- a/packages/developer-portal/src/components/pages/edit-app/__tests__/__snapshots__/general-information-section.test.tsx.snap
+++ b/packages/developer-portal/src/components/pages/edit-app/__tests__/__snapshots__/general-information-section.test.tsx.snap
@@ -378,7 +378,9 @@ exports[`GeneralInformationSection should match a snapshot when isListed equal t
                   className=""
                   data-test=""
                 >
-                  <Component>
+                  <Component
+                    className="is-half-desktop"
+                  >
                     <div
                       className=""
                       data-test=""
@@ -422,7 +424,9 @@ exports[`GeneralInformationSection should match a snapshot when isListed equal t
                       </Component>
                     </div>
                   </Component>
-                  <Component>
+                  <Component
+                    className="is-half-desktop"
+                  >
                     <div
                       className=""
                       data-test=""
@@ -888,7 +892,9 @@ exports[`GeneralInformationSection should match a snapshot when isListed equal t
                   className=""
                   data-test=""
                 >
-                  <Component>
+                  <Component
+                    className="is-half-desktop"
+                  >
                     <div
                       className=""
                       data-test=""
@@ -931,7 +937,9 @@ exports[`GeneralInformationSection should match a snapshot when isListed equal t
                       </Component>
                     </div>
                   </Component>
-                  <Component>
+                  <Component
+                    className="is-half-desktop"
+                  >
                     <div
                       className=""
                       data-test=""
diff --git a/packages/developer-portal/src/components/pages/edit-app/__tests__/__snapshots__/permission-section.test.tsx.snap b/packages/developer-portal/src/components/pages/edit-app/__tests__/__snapshots__/permission-section.test.tsx.snap
index 43ad2a8d30..6cc5bf6365 100644
--- a/packages/developer-portal/src/components/pages/edit-app/__tests__/__snapshots__/permission-section.test.tsx.snap
+++ b/packages/developer-portal/src/components/pages/edit-app/__tests__/__snapshots__/permission-section.test.tsx.snap
@@ -13,7 +13,7 @@ exports[`MarketplaceStatusSection MarketplaceStatusSection should match a snapsh
     />
   </Component>
   <div
-    className="has-text-danger has-text-right undefined"
+    className="has-text-danger has-text-right w-100"
     data-test="input-error"
   >
     test
@@ -41,7 +41,7 @@ exports[`MarketplaceStatusSection should match a snapshot 1`] = `
       />
     </Component>
     <div
-      className="has-text-danger has-text-right undefined"
+      className="has-text-danger has-text-right w-100"
       data-test="input-error"
     >
       test
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
index caebb85fb1..ad4ce57263 100644
--- 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
@@ -17,7 +17,6 @@ import linkStyles from '@/styles/elements/link.scss?mod'
 import { useSelector } from 'react-redux'
 import { selectCategories } from '@/selector/app-categories'
 import { CategoryModel } from '@reapit/foundations-ts-definitions'
-import styles from '@/styles/pages/developer-submit-app.scss?mod'
 import { formFields } from './form-schema/form-fields'
 
 const { name, categoryId, supportEmail, telephone, homePage, launchUri, summary, description } = formFields
@@ -128,7 +127,7 @@ const GeneralInformationSection: React.FC<GeneralInformationSectionProps> = ({ i
         </GridItem>
       </Grid>
       <Grid>
-        <GridItem className={styles.gridMaxHalfWidth}>
+        <GridItem className="is-half-desktop">
           <TextArea
             id="summary"
             dataTest="submit-app-summary"
@@ -138,9 +137,8 @@ const GeneralInformationSection: React.FC<GeneralInformationSectionProps> = ({ i
             required={isListed}
           />
         </GridItem>
-        <GridItem className={styles.gridMaxHalfWidth}>
+        <GridItem className="is-half-desktop">
           <TextAreaEditor
-            containerClass={styles.contentOverflowXScroll}
             id="description"
             actions={[
               'bold',
diff --git a/packages/developer-portal/src/components/pages/edit-app/permission-section.tsx b/packages/developer-portal/src/components/pages/edit-app/permission-section.tsx
index 8b7a5103c4..c5d053c5b8 100644
--- a/packages/developer-portal/src/components/pages/edit-app/permission-section.tsx
+++ b/packages/developer-portal/src/components/pages/edit-app/permission-section.tsx
@@ -9,7 +9,6 @@ import {
   FormikErrors,
 } from '@reapit/elements'
 import { ScopeModel, CreateAppModel } from '@reapit/foundations-ts-definitions'
-import styles from '@/styles/pages/developer-submit-app.scss?mod'
 import { formFields } from './form-schema/form-fields'
 
 export type PermissionSectionProps = {
@@ -39,7 +38,7 @@ export const renderScopesCheckbox = (scopes: ScopeModel[] = [], errorScope?: str
       }
     })}
     {errorScope && (
-      <div className={`has-text-danger has-text-right ${styles.errorScope}`} data-test="input-error">
+      <div className="has-text-danger has-text-right w-100" data-test="input-error">
         {errorScope}
       </div>
     )}
diff --git a/packages/developer-portal/src/components/pages/help/__tests__/__snapshots__/help.test.tsx.snap b/packages/developer-portal/src/components/pages/help/__tests__/__snapshots__/help.test.tsx.snap
index 86a6105e31..3abce4921d 100644
--- a/packages/developer-portal/src/components/pages/help/__tests__/__snapshots__/help.test.tsx.snap
+++ b/packages/developer-portal/src/components/pages/help/__tests__/__snapshots__/help.test.tsx.snap
@@ -97,6 +97,7 @@ exports[`DeveloperHelpPage should match a snapshot 1`] = `
                   data-test=""
                 >
                   <Component
+                    className=""
                     isFlex={true}
                     isFlexColumn={true}
                   >
@@ -146,6 +147,7 @@ exports[`DeveloperHelpPage should match a snapshot 1`] = `
                           data-test=""
                         >
                           <Component
+                            className=""
                             disabled={false}
                             fullWidth={false}
                             loading={false}
@@ -187,6 +189,7 @@ exports[`DeveloperHelpPage should match a snapshot 1`] = `
                   data-test=""
                 >
                   <Component
+                    className=""
                     isFlex={true}
                     isFlexColumn={true}
                   >
@@ -236,6 +239,7 @@ exports[`DeveloperHelpPage should match a snapshot 1`] = `
                           data-test=""
                         >
                           <Component
+                            className=""
                             disabled={false}
                             fullWidth={false}
                             loading={false}
@@ -277,6 +281,7 @@ exports[`DeveloperHelpPage should match a snapshot 1`] = `
                   data-test=""
                 >
                   <Component
+                    className=""
                     isFlex={true}
                     isFlexColumn={true}
                   >
@@ -325,6 +330,7 @@ exports[`DeveloperHelpPage should match a snapshot 1`] = `
                           data-test=""
                         >
                           <Component
+                            className=""
                             disabled={false}
                             fullWidth={false}
                             loading={false}
@@ -366,6 +372,7 @@ exports[`DeveloperHelpPage should match a snapshot 1`] = `
                   data-test=""
                 >
                   <Component
+                    className=""
                     isFlex={true}
                     isFlexColumn={true}
                   >
@@ -415,6 +422,7 @@ exports[`DeveloperHelpPage should match a snapshot 1`] = `
                           data-test=""
                         >
                           <Component
+                            className=""
                             disabled={false}
                             fullWidth={false}
                             loading={false}
@@ -456,6 +464,7 @@ exports[`DeveloperHelpPage should match a snapshot 1`] = `
                   data-test=""
                 >
                   <Component
+                    className=""
                     isFlex={true}
                     isFlexColumn={true}
                   >
@@ -504,6 +513,7 @@ exports[`DeveloperHelpPage should match a snapshot 1`] = `
                           data-test=""
                         >
                           <Component
+                            className=""
                             disabled={false}
                             fullWidth={false}
                             loading={false}
@@ -545,6 +555,7 @@ exports[`DeveloperHelpPage should match a snapshot 1`] = `
                   data-test=""
                 >
                   <Component
+                    className=""
                     isFlex={true}
                     isFlexColumn={true}
                   >
@@ -594,6 +605,7 @@ exports[`DeveloperHelpPage should match a snapshot 1`] = `
                           data-test=""
                         >
                           <Component
+                            className=""
                             disabled={false}
                             fullWidth={false}
                             loading={false}
diff --git a/packages/developer-portal/src/components/pages/help/help.tsx b/packages/developer-portal/src/components/pages/help/help.tsx
index 58dcaf03c9..10b51c1781 100644
--- a/packages/developer-portal/src/components/pages/help/help.tsx
+++ b/packages/developer-portal/src/components/pages/help/help.tsx
@@ -10,7 +10,7 @@ import reportBugImg from '@/assets/images/help/report-bugs.jpg'
 import liveChatImg from '@/assets/images/help/live-chat.jpg'
 import roadmapImg from '@/assets/images/help/time-line.jpg'
 import whatNewImg from '@/assets/images/help/what-new.png'
-import { HelpItem, HelpItemList } from '@/components/ui/help-item-list'
+import HelpItemList, { HelpItem } from '@/components/ui/help-item-list'
 
 import { selectLoginIdentity } from '@/selector/auth'
 import { useReapitConnect } from '@reapit/connect-session'
diff --git a/packages/developer-portal/src/styles/pages/login.scss b/packages/developer-portal/src/components/pages/login/__styles__/login.ts
similarity index 59%
rename from packages/developer-portal/src/styles/pages/login.scss
rename to packages/developer-portal/src/components/pages/login/__styles__/login.ts
index 913d8a7711..542c808096 100644
--- a/packages/developer-portal/src/styles/pages/login.scss
+++ b/packages/developer-portal/src/components/pages/login/__styles__/login.ts
@@ -1,21 +1,23 @@
-@import '../base/colors.scss';
+import { css } from 'linaria'
+import { white } from '@/core/__styles__/colors'
+import { forTabletAndBelow, forMobileOnly } from '@/core/__styles__/media'
 
-.container {
+export const container = css`
   min-width: 100vw;
   min-height: 100vh;
   display: flex;
   justify-content: flex-end;
   align-items: center;
   flex-direction: row;
-  background-color: $white;
+  background-color: ${white};
 
-  @media screen and (max-width: 900px) {
+  ${forTabletAndBelow} {
     flex-direction: column-reverse;
   }
-}
+`
 
-.wrapper {
-  background-color: $white;
+export const wrapper = css`
+  background-color: ${white};
   width: 33.33%;
   padding: 1rem;
   pointer-events: auto;
@@ -36,23 +38,19 @@
     display: block;
   }
 
-  button,
+  button.button,
   .tabsContainer {
     margin: 0 auto 2rem auto;
     max-width: 400px;
   }
 
-  @media screen and (max-width: 900px) {
+  ${forTabletAndBelow} {
     width: 100%;
   }
+`
 
-  @media screen and (min-width: 1200px) {
-    padding: 0 3rem;
-  }
-}
-
-.image {
-  background-color: $white;
+export const image = css`
+  background-color: ${white};
   width: 66.66%;
   height: 100vh;
   font-size: 0;
@@ -63,36 +61,29 @@
     object-fit: cover;
   }
 
-  @media screen and (max-width: 900px) {
+  ${forTabletAndBelow} {
     width: 100%;
     height: 300px;
   }
-}
+`
 
-.register-level {
+export const registerLevel = css`
   flex-direction: column;
-}
+`
 
-.register {
+export const register = css`
   max-width: 400px;
   width: 100%;
   text-align: right;
   margin: 0 auto;
 
-  @media screen and (max-width: 768px) {
+  ${forMobileOnly} {
     padding-top: 1rem;
+    text-align: center;
   }
+`
 
-  @media screen and (min-width: 900px) {
-    padding-left: 1rem;
-  }
-
-  @media screen and (min-width: 960px) {
-    padding: 0;
-  }
-}
-
-.loginForm {
+export const loginForm = css`
   position: relative;
 
   .forgotPasswordContainer {
@@ -100,16 +91,18 @@
     right: 0;
     z-index: 1;
   }
-}
+`
 
-.labelTerms {
+export const labelTerms = css`
   font-size: 0.8rem;
   display: flex;
   align-items: center;
-}
+`
 
 // Need this to override default without !important
-.loginButton.loginButton {
-  margin-right: auto;
-  margin-left: auto;
-}
+export const loginButton = css`
+  .loginButton {
+    margin-right: auto;
+    margin-left: auto;
+  }
+`
diff --git a/packages/developer-portal/src/components/pages/login/__tests__/__snapshots__/login.test.tsx.snap b/packages/developer-portal/src/components/pages/login/__tests__/__snapshots__/login.test.tsx.snap
index 81f2662157..ca2c769d72 100644
--- a/packages/developer-portal/src/components/pages/login/__tests__/__snapshots__/login.test.tsx.snap
+++ b/packages/developer-portal/src/components/pages/login/__tests__/__snapshots__/login.test.tsx.snap
@@ -56,8 +56,12 @@ exports[`Login should match a snapshot 1`] = `
       }
     >
       <Component>
-        <div>
-          <div>
+        <div
+          className=""
+        >
+          <div
+            className=""
+          >
             <Component>
               <div
                 className=""
@@ -79,12 +83,15 @@ exports[`Login should match a snapshot 1`] = `
                 </p>
               </section>
             </Component>
-            <Component>
+            <Component
+              className=""
+            >
               <div
                 className=""
                 data-test=""
               >
                 <Component
+                  className=""
                   dataTest="login-button"
                   fullWidth={true}
                   onClick={[Function]}
@@ -99,7 +106,9 @@ exports[`Login should match a snapshot 1`] = `
                     Login
                   </button>
                 </Component>
-                <div>
+                <div
+                  className=""
+                >
                   Don't have an account yet? 
                   <Link
                     to="/register"
@@ -128,7 +137,9 @@ exports[`Login should match a snapshot 1`] = `
               />
             </Component>
           </div>
-          <div>
+          <div
+            className=""
+          >
             <img
               alt="Reapit Graphic"
               src=""
diff --git a/packages/developer-portal/src/components/pages/login/login.tsx b/packages/developer-portal/src/components/pages/login/login.tsx
index 6aec39e1d9..bc7f95577a 100644
--- a/packages/developer-portal/src/components/pages/login/login.tsx
+++ b/packages/developer-portal/src/components/pages/login/login.tsx
@@ -7,12 +7,10 @@ import { Button, Level, FlexContainerBasic, Section } from '@reapit/elements'
 import { getDefaultRoute } from '@/utils/auth-route'
 import Routes from '@/constants/routes'
 import messages from '@/constants/messages'
-import loginStyles from '@/styles/pages/login.scss?mod'
 import logoImage from '@/assets/images/reapit-graphic.jpg'
 import connectImage from '@/assets/images/reapit-connect.png'
 import { reapitConnectBrowserSession } from '@/core/connect-session'
-
-const { wrapper, container, image, register, registerLevel, loginButton } = loginStyles
+import { wrapper, container, image, register, registerLevel, loginButton } from './__styles__/login'
 
 export type LoginProps = {}
 
diff --git a/packages/developer-portal/src/components/pages/register/__styles__/register.ts b/packages/developer-portal/src/components/pages/register/__styles__/register.ts
new file mode 100644
index 0000000000..d7784c42d4
--- /dev/null
+++ b/packages/developer-portal/src/components/pages/register/__styles__/register.ts
@@ -0,0 +1,68 @@
+import { css } from 'linaria'
+import { white } from '@/core/__styles__/colors'
+import { forTabletAndBelow } from '@/core/__styles__/media'
+
+export const container = css`
+  min-width: 100vw;
+  min-height: 100vh;
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  flex-direction: row;
+  background-color: ${white};
+
+  ${forTabletAndBelow} {
+    flex-direction: column-reverse;
+  }
+`
+
+export const wrapper = css`
+  background-color: ${white};
+  width: 33.33%;
+  padding: 1rem;
+  pointer-events: auto;
+
+  &.disabled {
+    pointer-events: none;
+  }
+
+  h1,
+  p,
+  img {
+    text-align: center;
+  }
+
+  img {
+    margin: 0 auto;
+    max-width: 200px;
+    display: block;
+  }
+
+  button.button,
+  .tabsContainer {
+    margin: 0 auto 2rem auto;
+    max-width: 400px;
+  }
+
+  ${forTabletAndBelow} {
+    width: 100%;
+  }
+`
+
+export const image = css`
+  background-color: ${white};
+  width: 66.66%;
+  height: 100vh;
+  font-size: 0;
+
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+
+  ${forTabletAndBelow} {
+    width: 100%;
+    height: 300px;
+  }
+`
diff --git a/packages/developer-portal/src/components/pages/register/__tests__/__snapshots__/register.test.tsx.snap b/packages/developer-portal/src/components/pages/register/__tests__/__snapshots__/register.test.tsx.snap
index 00bc1bce30..f05ccca7a5 100644
--- a/packages/developer-portal/src/components/pages/register/__tests__/__snapshots__/register.test.tsx.snap
+++ b/packages/developer-portal/src/components/pages/register/__tests__/__snapshots__/register.test.tsx.snap
@@ -56,8 +56,12 @@ exports[`Register should match a snapshot 1`] = `
       }
     >
       <Component>
-        <div>
-          <div>
+        <div
+          className=""
+        >
+          <div
+            className=""
+          >
             <Component
               isCentered={true}
             >
@@ -535,7 +539,9 @@ exports[`Register should match a snapshot 1`] = `
               </Form>
             </Formik>
           </div>
-          <div>
+          <div
+            className=""
+          >
             <img
               alt="Reapit graphic"
               src=""
diff --git a/packages/developer-portal/src/components/pages/register/register.tsx b/packages/developer-portal/src/components/pages/register/register.tsx
index 6c0b6ab9eb..3ad8fcee32 100644
--- a/packages/developer-portal/src/components/pages/register/register.tsx
+++ b/packages/developer-portal/src/components/pages/register/register.tsx
@@ -26,15 +26,13 @@ import { developerCreate, developerSetFormState } from '@/actions/developer'
 import CallToAction from '@/components/ui/call-to-action'
 import TermsAndConditionsModal from '@/components/ui/terms-and-conditions-modal'
 import Routes from '@/constants/routes'
-import loginStyles from '@/styles/pages/login.scss?mod'
+import { container, wrapper, image } from './__styles__/register'
 import logoImage from '@/assets/images/reapit-graphic.jpg'
 import { formFields } from './form-fields'
 import { validationSchema } from './validation-schema'
 
 const { nameField, emailField, companyNameField, telephoneField } = formFields
 
-const { container, wrapper, image } = loginStyles
-
 export type RegisterProps = {}
 
 export const registerFormInitialValues: CreateDeveloperModel = {
diff --git a/packages/developer-portal/src/components/pages/swagger/swagger.tsx b/packages/developer-portal/src/components/pages/swagger/swagger.tsx
index bf291ae309..bd72ac6247 100644
--- a/packages/developer-portal/src/components/pages/swagger/swagger.tsx
+++ b/packages/developer-portal/src/components/pages/swagger/swagger.tsx
@@ -5,7 +5,7 @@ import '../../../styles/vendor/swagger.scss'
 import ErrorBoundary from '@/components/hocs/error-boundary'
 import { Loader, StringMap } from '@reapit/elements'
 import { getAccessToken } from '@/utils/session'
-import { SandboxPopUp } from '@/components/ui/sandbox-pop-up'
+import { SandboxPopUp } from '@/components/ui/popup/sandbox-pop-up'
 
 export type InterceptorParams = {
   url: string
diff --git a/packages/developer-portal/src/components/pages/webhooks/webhook-edit-modal.tsx b/packages/developer-portal/src/components/pages/webhooks/webhook-edit-modal.tsx
index 22d0e21968..ed259ec2d2 100644
--- a/packages/developer-portal/src/components/pages/webhooks/webhook-edit-modal.tsx
+++ b/packages/developer-portal/src/components/pages/webhooks/webhook-edit-modal.tsx
@@ -1,7 +1,6 @@
 import React, { useEffect } from 'react'
 import { useSelector, useDispatch } from 'react-redux'
 import { Dispatch } from 'redux'
-import styles from '@/styles/blocks/developer-app-modal.scss?mod'
 import {
   Modal,
   Button,
@@ -210,7 +209,7 @@ export const WebhookEditModal: React.FunctionComponent<WebhookEditProps> = ({
                 />
                 <ModalFooter
                   footerItems={
-                    <Level className={styles.footer}>
+                    <Level className="w-100">
                       <LevelLeft>
                         {isUpdate && (
                           <Button className="mr-2" variant="secondary" type="button" onClick={onDelete}>
diff --git a/packages/developer-portal/src/components/pages/welcome/__styles__/welcome.ts b/packages/developer-portal/src/components/pages/welcome/__styles__/welcome.ts
new file mode 100644
index 0000000000..487bb4750d
--- /dev/null
+++ b/packages/developer-portal/src/components/pages/welcome/__styles__/welcome.ts
@@ -0,0 +1,8 @@
+import { css } from 'linaria'
+import { forTabletOnly } from '@/core/__styles__/media'
+
+export const content = css`
+  ${forTabletOnly} {
+    max-width: 375px;
+  }
+`
diff --git a/packages/developer-portal/src/components/pages/welcome/__tests__/__snapshots__/welcome.test.tsx.snap b/packages/developer-portal/src/components/pages/welcome/__tests__/__snapshots__/welcome.test.tsx.snap
index 17c69afa26..fc8a10d30a 100644
--- a/packages/developer-portal/src/components/pages/welcome/__tests__/__snapshots__/welcome.test.tsx.snap
+++ b/packages/developer-portal/src/components/pages/welcome/__tests__/__snapshots__/welcome.test.tsx.snap
@@ -167,6 +167,7 @@ exports[`DeveloperWelcomeMessage should match a snapshot 1`] = `
     graphic={
       <img
         alt="step-1"
+        className="w-100"
         src=""
       />
     }
@@ -179,6 +180,7 @@ exports[`DeveloperWelcomeMessage should match a snapshot 1`] = `
     graphic={
       <img
         alt="step-2"
+        className="w-100"
         src=""
       />
     }
@@ -191,6 +193,7 @@ exports[`DeveloperWelcomeMessage should match a snapshot 1`] = `
     graphic={
       <img
         alt="step-3"
+        className="w-100"
         src=""
       />
     }
@@ -203,6 +206,7 @@ exports[`DeveloperWelcomeMessage should match a snapshot 1`] = `
     graphic={
       <img
         alt="step-4"
+        className="w-100"
         src=""
       />
     }
@@ -215,6 +219,7 @@ exports[`DeveloperWelcomeMessage should match a snapshot 1`] = `
     graphic={
       <img
         alt="step-5"
+        className="w-100"
         src=""
       />
     }
diff --git a/packages/developer-portal/src/components/pages/welcome/welcome.tsx b/packages/developer-portal/src/components/pages/welcome/welcome.tsx
index f6378934bf..d919229e58 100644
--- a/packages/developer-portal/src/components/pages/welcome/welcome.tsx
+++ b/packages/developer-portal/src/components/pages/welcome/welcome.tsx
@@ -2,7 +2,6 @@ import * as React from 'react'
 import { useHelpGuideContext, HelpGuide, Button } from '@reapit/elements'
 import Routes from '@/constants/routes'
 import { history } from '@/core/router'
-import styles from '@/styles/pages/developer-welcome.scss?mod'
 import Step1 from '@/assets/images/step-1.png'
 import Step2 from '@/assets/images/step-2.png'
 import Step3 from '@/assets/images/step-3.png'
@@ -10,6 +9,7 @@ import Step4 from '@/assets/images/step-4.png'
 import Step5 from '@/assets/images/step-5.png'
 import linkStyles from '@/styles/elements/link.scss?mod'
 import { setCookieString, COOKIE_DEVELOPER_FIRST_TIME_LOGIN_COMPLETE, COOKIE_MAX_AGE_INFINITY } from '@/utils/cookie'
+import { content } from './__styles__/welcome'
 
 export interface DevelopeWelcomeMappedActions {}
 
@@ -18,7 +18,7 @@ export type DeveloperWelcomeMessageProps = DevelopeWelcomeMappedActions
 export const Welcome = () => {
   const { goNext } = useHelpGuideContext()
   return (
-    <div className={styles.content}>
+    <div className={content}>
       <p className="mb-5">
         Thank you for registering as a Reapit Foundations Developer. Within this portal, you will have access to
         detailed documentation on all our APIs, full access to Reapit elements and Sandbox data. All available to assist
@@ -39,7 +39,7 @@ export const Documentation = () => {
   const { goNext, goPrev } = useHelpGuideContext()
 
   return (
-    <div className={styles.content}>
+    <div className={content}>
       <p className="mb-5">
         As Developers, we know detailed documentation and support is paramount when building any application. Therefore,
         we have created various sections to provide additional help and support. Each section can be accessed from the
@@ -99,7 +99,7 @@ export const Documentation = () => {
 export const Submitting = () => {
   const { goNext, goPrev } = useHelpGuideContext()
   return (
-    <div className={styles.content}>
+    <div className={content}>
       <p className="mb-5">
         To start building and interacting with the platform, you will need to first create an app. Using the ‘Create New
         App’ option under ‘Apps’, you will be required to provide some basic information such as an app name, the type
@@ -137,7 +137,7 @@ export const Submitting = () => {
 export const Managing = () => {
   const { goNext, goPrev } = useHelpGuideContext()
   return (
-    <div className={styles.content}>
+    <div className={content}>
       <p className="mb-5">
         If you need to make a change to your App listing, such as an update to a screenshot, to edit text, or request
         additional permissions, you can do so by clicking ‘Edit Details’ from the ‘Apps’ page. However, if your app is
@@ -160,7 +160,7 @@ export const Managing = () => {
 export const Support = () => {
   const { goPrev } = useHelpGuideContext()
   return (
-    <div className={styles.content}>
+    <div className={content}>
       <p className="mb-5">
         You are currently logged into our Beta release of Reapit Foundations and we are continuing to update, add
         additional features and address any issues that may appear. In the meantime, if you would like to request a
@@ -198,35 +198,35 @@ export const DeveloperWelcomeMessage: React.FC<DeveloperWelcomeMessageProps> = (
         component={Welcome}
         heading="Welcome to Reapit Foundations"
         subHeading="Let’s get started."
-        graphic={<img className={styles.graphic} alt="step-1" src={Step1} />}
+        graphic={<img className="w-100" alt="step-1" src={Step1} />}
       />
       <HelpGuide.Step
         id="step-2"
         component={Documentation}
         heading="Documentation"
         subHeading="We’ve got you covered."
-        graphic={<img className={styles.graphic} alt="step-2" src={Step2} />}
+        graphic={<img className="w-100" alt="step-2" src={Step2} />}
       />
       <HelpGuide.Step
         id="step-3"
         component={Submitting}
         heading="Submitting an App"
         subHeading="Nearly there."
-        graphic={<img className={styles.graphic} alt="step-3" src={Step3} />}
+        graphic={<img className="w-100" alt="step-3" src={Step3} />}
       />
       <HelpGuide.Step
         id="step-4"
         component={Managing}
         heading="Managing your App"
         subHeading="Installations and changes."
-        graphic={<img className={styles.graphic} alt="step-4" src={Step4} />}
+        graphic={<img className="w-100" alt="step-4" src={Step4} />}
       />
       <HelpGuide.Step
         id="step-5"
         component={Support}
         heading="On going support"
         subHeading="We’re here to help."
-        graphic={<img className={styles.graphic} alt="step-5" src={Step5} />}
+        graphic={<img className="w-100" alt="step-5" src={Step5} />}
       />
     </HelpGuide>
   )
diff --git a/packages/developer-portal/src/components/ui/__tests__/__snapshots__/categories-list.tsx.snap b/packages/developer-portal/src/components/ui/__tests__/__snapshots__/categories-list.tsx.snap
deleted file mode 100644
index e596b8865d..0000000000
--- a/packages/developer-portal/src/components/ui/__tests__/__snapshots__/categories-list.tsx.snap
+++ /dev/null
@@ -1,46 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`CategoriesList should match a snapshot 1`] = `
-<ul>
-  <CategoryItem
-    onSelectCategory={[MockFunction]}
-    selected={true}
-  />
-  <CategoryItem
-    category={
-      Object {
-        "description": "apps for game",
-        "id": "3",
-        "name": "Game",
-      }
-    }
-    key="3"
-    onSelectCategory={[MockFunction]}
-    selected={false}
-  />
-  <CategoryItem
-    category={
-      Object {
-        "description": "apps for entertainment",
-        "id": "2",
-        "name": "entertainment",
-      }
-    }
-    key="2"
-    onSelectCategory={[MockFunction]}
-    selected={false}
-  />
-  <CategoryItem
-    category={
-      Object {
-        "description": "apps for education",
-        "id": "1",
-        "name": "education",
-      }
-    }
-    key="1"
-    onSelectCategory={[MockFunction]}
-    selected={false}
-  />
-</ul>
-`;
diff --git a/packages/developer-portal/src/components/ui/__tests__/__snapshots__/category-item.tsx.snap b/packages/developer-portal/src/components/ui/__tests__/__snapshots__/category-item.tsx.snap
deleted file mode 100644
index 7a428b7bf2..0000000000
--- a/packages/developer-portal/src/components/ui/__tests__/__snapshots__/category-item.tsx.snap
+++ /dev/null
@@ -1,15 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`CategoryItem should match a snapshot 1`] = `
-<li
-  className="undefined false"
->
-  <a
-    data-test-category-id="3"
-    href="#"
-    onClick={[Function]}
-  >
-    Game
-  </a>
-</li>
-`;
diff --git a/packages/developer-portal/src/components/ui/__tests__/categories-list.tsx b/packages/developer-portal/src/components/ui/__tests__/categories-list.tsx
deleted file mode 100644
index 95ee35ac34..0000000000
--- a/packages/developer-portal/src/components/ui/__tests__/categories-list.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import * as React from 'react'
-import { shallow } from 'enzyme'
-
-import CategoriesList, { CategoriesListProps } from '@/components/ui/categories-list'
-import CategoryItem from '@/components/ui/category-item'
-import { categoriesStub } from '../../../sagas/__stubs__/app-categories'
-import { CategoryModel } from '@reapit/foundations-ts-definitions'
-
-const props: CategoriesListProps = {
-  categories: categoriesStub.data as CategoryModel[],
-  selectedCategory: '',
-  onSelectCategory: jest.fn(),
-}
-
-describe('CategoriesList', () => {
-  it('should match a snapshot', () => {
-    expect(shallow(<CategoriesList {...props} />)).toMatchSnapshot()
-  })
-
-  it('should contain list categories', () => {
-    const wrapper = shallow(<CategoriesList {...props} />)
-    // plus default item for all categories option
-    expect(wrapper.find(CategoryItem)).toHaveLength((categoriesStub?.data?.length || 0) + 1)
-  })
-})
diff --git a/packages/developer-portal/src/components/ui/__tests__/category-item.tsx b/packages/developer-portal/src/components/ui/__tests__/category-item.tsx
deleted file mode 100644
index 07afb6b025..0000000000
--- a/packages/developer-portal/src/components/ui/__tests__/category-item.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import * as React from 'react'
-import { shallow } from 'enzyme'
-
-import CategoryItem, { CategoryItemProps } from '../category-item'
-import { categoriesStub } from '../../../sagas/__stubs__/app-categories'
-
-const props: CategoryItemProps = {
-  category: (categoriesStub.data || [])[0],
-  selected: false,
-  onSelectCategory: jest.fn(),
-}
-
-describe('CategoryItem', () => {
-  it('should match a snapshot', () => {
-    expect(shallow(<CategoryItem {...props} />)).toMatchSnapshot()
-  })
-
-  it('should contain All when no category', () => {
-    const wrapper = shallow(<CategoryItem selected={false} onSelectCategory={jest.fn} />)
-    expect(
-      wrapper
-        .find('a')
-        .first()
-        .text(),
-    ).toEqual('All')
-  })
-})
diff --git a/packages/developer-portal/src/components/ui/categories-list.tsx b/packages/developer-portal/src/components/ui/categories-list.tsx
deleted file mode 100644
index a8f9fa7f2e..0000000000
--- a/packages/developer-portal/src/components/ui/categories-list.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-import * as React from 'react'
-import CategoryItem from './category-item'
-import styles from '@/styles/blocks/categories-list.scss?mod'
-import { CategoryModel } from '@reapit/foundations-ts-definitions'
-
-export interface CategoriesListProps {
-  categories: CategoryModel[]
-  selectedCategory?: string
-  onSelectCategory: (categoryId?: string) => void
-}
-
-const CategoriesList: React.FunctionComponent<CategoriesListProps> = ({
-  categories,
-  selectedCategory,
-  onSelectCategory,
-}: CategoriesListProps) => {
-  return (
-    <ul className={styles.listCategories}>
-      {categories.length > 0 && <CategoryItem selected={!selectedCategory} onSelectCategory={onSelectCategory} />}
-      {categories.map(category => (
-        <CategoryItem
-          category={category}
-          key={category.id?.toString() || ''}
-          selected={category.id?.toString() === selectedCategory}
-          onSelectCategory={onSelectCategory}
-        />
-      ))}
-    </ul>
-  )
-}
-
-export default CategoriesList
diff --git a/packages/developer-portal/src/components/ui/category-item.tsx b/packages/developer-portal/src/components/ui/category-item.tsx
deleted file mode 100644
index 56964d8c4b..0000000000
--- a/packages/developer-portal/src/components/ui/category-item.tsx
+++ /dev/null
@@ -1,48 +0,0 @@
-import * as React from 'react'
-import styles from '@/styles/blocks/categories-list.scss?mod'
-import { CategoryModel } from '@reapit/foundations-ts-definitions'
-
-export interface CategoryItemProps {
-  category?: CategoryModel
-  selected: boolean
-  onSelectCategory: (categoryId?: string) => void
-}
-
-const CategoryItem: React.FunctionComponent<CategoryItemProps> = ({
-  category,
-  selected,
-  onSelectCategory,
-}: CategoryItemProps) => {
-  if (!category) {
-    return (
-      <li className={`${styles.categoryItem} ${selected && styles.categoryItemActive}`}>
-        <a
-          href="#"
-          onClick={event => {
-            event.preventDefault()
-            onSelectCategory('')
-          }}
-        >
-          All
-        </a>
-      </li>
-    )
-  }
-
-  return (
-    <li className={`${styles.categoryItem} ${selected && styles.categoryItemActive}`}>
-      <a
-        data-test-category-id={category?.id}
-        href="#"
-        onClick={event => {
-          event.preventDefault()
-          onSelectCategory(category?.id)
-        }}
-      >
-        {category?.name}
-      </a>
-    </li>
-  )
-}
-
-export default CategoryItem
diff --git a/packages/developer-portal/src/components/ui/developer-edition-modal/__tests__/__snapshots__/developer-edition-content.tsx.snap b/packages/developer-portal/src/components/ui/developer-edition-modal/__tests__/__snapshots__/developer-edition-content.tsx.snap
index daff9dd3f5..889acce90c 100644
--- a/packages/developer-portal/src/components/ui/developer-edition-modal/__tests__/__snapshots__/developer-edition-content.tsx.snap
+++ b/packages/developer-portal/src/components/ui/developer-edition-modal/__tests__/__snapshots__/developer-edition-content.tsx.snap
@@ -8,7 +8,9 @@ exports[`DeveloperEditionContent should match snapshot 1`] = `
   <Component
     body={
       <React.Fragment>
-        <Unknown>
+        <Unknown
+          className="has-text-weight-normal"
+        >
           The Agency Cloud Developer Edition is a licensed product. However, there will be no charge for the licence during the Beta phase. For more information regarding the Developer Edition licence please refer to your Developer Registration 
           <a
             href=""
diff --git a/packages/developer-portal/src/components/ui/developer-edition-modal/__tests__/__snapshots__/error-content.tsx.snap b/packages/developer-portal/src/components/ui/developer-edition-modal/__tests__/__snapshots__/error-content.tsx.snap
index 71ebeeafa9..e7baf99957 100644
--- a/packages/developer-portal/src/components/ui/developer-edition-modal/__tests__/__snapshots__/error-content.tsx.snap
+++ b/packages/developer-portal/src/components/ui/developer-edition-modal/__tests__/__snapshots__/error-content.tsx.snap
@@ -7,7 +7,9 @@ exports[`ErrorContent should match snapshot 1`] = `
   />
   <Component
     body={
-      <Unknown>
+      <Unknown
+        className="has-text-weight-normal"
+      >
         It looks as though you already have a subscription in place for the Developer Edition of Agency Cloud. If you have not received your email with instructions on how to download, please let us know using the live chat feature on the 
         <a
           className={[Function]}
diff --git a/packages/developer-portal/src/components/ui/developer-edition-modal/__tests__/__snapshots__/success-content.tsx.snap b/packages/developer-portal/src/components/ui/developer-edition-modal/__tests__/__snapshots__/success-content.tsx.snap
index c10aa6e5e3..e873f92b45 100644
--- a/packages/developer-portal/src/components/ui/developer-edition-modal/__tests__/__snapshots__/success-content.tsx.snap
+++ b/packages/developer-portal/src/components/ui/developer-edition-modal/__tests__/__snapshots__/success-content.tsx.snap
@@ -8,10 +8,14 @@ exports[`SuccessContent should match snapshot 1`] = `
   <Component
     body={
       <React.Fragment>
-        <Unknown>
+        <Unknown
+          className="has-text-weight-normal"
+        >
           You have successfully subscribed 1 Agency Cloud user licence and an email has been sent to the following members of your organisation with instructions on how to get started.
         </Unknown>
-        <Unknown>
+        <Unknown
+          className="has-text-weight-normal"
+        >
           Duong Pham
            - 
           <a
@@ -23,10 +27,14 @@ exports[`SuccessContent should match snapshot 1`] = `
             tanphamhaiduong@gmail.com
           </a>
         </Unknown>
-        <Unknown>
+        <Unknown
+          className="has-text-weight-normal"
+        >
           We have added your subscription to your monthly billing. To manage your subscriptions please visit the 'Billing' tab.
         </Unknown>
-        <Unknown>
+        <Unknown
+          className="has-text-weight-normal"
+        >
           Reminder: There is no charge for the Developer Edition Licence during the Beta Phase.
         </Unknown>
       </React.Fragment>
diff --git a/packages/developer-portal/src/components/ui/developer-edition-modal/developer-edition-content.tsx b/packages/developer-portal/src/components/ui/developer-edition-modal/developer-edition-content.tsx
index d8683e1c33..514ee8ce7f 100644
--- a/packages/developer-portal/src/components/ui/developer-edition-modal/developer-edition-content.tsx
+++ b/packages/developer-portal/src/components/ui/developer-edition-modal/developer-edition-content.tsx
@@ -11,7 +11,6 @@ import {
   ModalProps,
   LevelRight,
 } from '@reapit/elements'
-import developerEditionStyles from '@/styles/blocks/developer-edition-modal.scss?mod'
 import { FormValues } from './form-fields'
 import pdfLink from '@/assets/files/reapit-foundations-developer-agreement.pdf'
 import { formFields } from './form-fields'
@@ -41,7 +40,7 @@ export const DeveloperEditionContent: React.FC<DeveloperEditionContentProps> = (
       <ModalBody
         body={
           <>
-            <SubTitleH6 className={developerEditionStyles.subTitle}>
+            <SubTitleH6 className="has-text-weight-normal">
               The Agency Cloud Developer Edition is a licensed product. However, there will be no charge for the licence
               during the Beta phase. For more information regarding the Developer Edition licence please refer to your
               Developer Registration&nbsp;
diff --git a/packages/developer-portal/src/components/ui/developer-edition-modal/error-content.tsx b/packages/developer-portal/src/components/ui/developer-edition-modal/error-content.tsx
index e8cbe054a8..3eb244679b 100644
--- a/packages/developer-portal/src/components/ui/developer-edition-modal/error-content.tsx
+++ b/packages/developer-portal/src/components/ui/developer-edition-modal/error-content.tsx
@@ -1,7 +1,6 @@
 import * as React from 'react'
 import { Button, SubTitleH6, ModalHeader, ModalBody, ModalFooter, ModalProps } from '@reapit/elements'
 import linkStyles from '@/styles/elements/link.scss?mod'
-import developerEditionStyles from '@/styles/blocks/developer-edition-modal.scss?mod'
 import routes from '@/constants/routes'
 
 export type ErrorContentProps = Pick<ModalProps, 'afterClose'>
@@ -12,7 +11,7 @@ export const ErrorContent: React.FC<ErrorContentProps> = ({ afterClose }) => {
       <ModalHeader title="Existing Subscription" />
       <ModalBody
         body={
-          <SubTitleH6 className={developerEditionStyles.subTitle}>
+          <SubTitleH6 className="has-text-weight-normal">
             It looks as though you already have a subscription in place for the Developer Edition of Agency Cloud. If
             you have not received your email with instructions on how to download, please let us know using the live
             chat feature on the&nbsp;
diff --git a/packages/developer-portal/src/components/ui/developer-edition-modal/success-content.tsx b/packages/developer-portal/src/components/ui/developer-edition-modal/success-content.tsx
index fd0744772a..1d4866fa37 100644
--- a/packages/developer-portal/src/components/ui/developer-edition-modal/success-content.tsx
+++ b/packages/developer-portal/src/components/ui/developer-edition-modal/success-content.tsx
@@ -2,7 +2,6 @@ import { DeveloperModel } from '@reapit/foundations-ts-definitions'
 import * as React from 'react'
 import { Button, SubTitleH6, ModalHeader, ModalBody, ModalFooter, ModalProps } from '@reapit/elements'
 import linkStyles from '@/styles/elements/link.scss?mod'
-import developerEditionStyles from '@/styles/blocks/developer-edition-modal.scss?mod'
 
 export type SuccessContentProps = Pick<ModalProps, 'afterClose'> & {
   developer?: DeveloperModel
@@ -21,11 +20,11 @@ export const SuccessContent: React.FC<SuccessContentProps> = ({ developer, after
       <ModalBody
         body={
           <>
-            <SubTitleH6 className={developerEditionStyles.subTitle}>
+            <SubTitleH6 className="has-text-weight-normal">
               You have successfully subscribed 1 Agency Cloud user licence and an email has been sent to the following
               members of your organisation with instructions on how to get started.
             </SubTitleH6>
-            <SubTitleH6 className={developerEditionStyles.subTitle}>
+            <SubTitleH6 className="has-text-weight-normal">
               {developer.name} -&nbsp;
               <a
                 className={linkStyles.link}
@@ -36,11 +35,11 @@ export const SuccessContent: React.FC<SuccessContentProps> = ({ developer, after
                 {developer.email}
               </a>
             </SubTitleH6>
-            <SubTitleH6 className={developerEditionStyles.subTitle}>
+            <SubTitleH6 className="has-text-weight-normal">
               We have added your subscription to your monthly billing. To manage your subscriptions please visit the
               &apos;Billing&apos; tab.
             </SubTitleH6>
-            <SubTitleH6 className={developerEditionStyles.subTitle}>
+            <SubTitleH6 className="has-text-weight-normal">
               Reminder: There is no charge for the Developer Edition Licence during the Beta Phase.
             </SubTitleH6>
           </>
diff --git a/packages/developer-portal/src/components/ui/help-item-list/__styles__/help-item-list.ts b/packages/developer-portal/src/components/ui/help-item-list/__styles__/help-item-list.ts
new file mode 100644
index 0000000000..b28e1e177f
--- /dev/null
+++ b/packages/developer-portal/src/components/ui/help-item-list/__styles__/help-item-list.ts
@@ -0,0 +1,11 @@
+import { css } from 'linaria'
+
+export const wrapBoxContent = css`
+  height: 100%;
+  border: 2px solid $grey-light;
+`
+
+export const button = css`
+  min-width: 8rem;
+  width: 35%;
+`
diff --git a/packages/developer-portal/src/components/ui/__tests__/__snapshots__/help-item-list.tsx.snap b/packages/developer-portal/src/components/ui/help-item-list/__tests__/__snapshots__/help-item-list.tsx.snap
similarity index 95%
rename from packages/developer-portal/src/components/ui/__tests__/__snapshots__/help-item-list.tsx.snap
rename to packages/developer-portal/src/components/ui/help-item-list/__tests__/__snapshots__/help-item-list.tsx.snap
index 4ae3ecd658..e371057c3f 100644
--- a/packages/developer-portal/src/components/ui/__tests__/__snapshots__/help-item-list.tsx.snap
+++ b/packages/developer-portal/src/components/ui/help-item-list/__tests__/__snapshots__/help-item-list.tsx.snap
@@ -10,6 +10,7 @@ exports[`HelpItemList should match a snapshot 1`] = `
       isFullHeight={true}
     >
       <Component
+        className=""
         isFlex={true}
         isFlexColumn={true}
       >
@@ -36,6 +37,7 @@ exports[`HelpItemList should match a snapshot 1`] = `
           className="text-end"
         >
           <Component
+            className=""
             disabled={false}
             fullWidth={false}
             loading={false}
@@ -57,6 +59,7 @@ exports[`HelpItemList should match a snapshot 1`] = `
       isFullHeight={true}
     >
       <Component
+        className=""
         isFlex={true}
         isFlexColumn={true}
       >
@@ -83,6 +86,7 @@ exports[`HelpItemList should match a snapshot 1`] = `
           className="text-end"
         >
           <Component
+            className=""
             disabled={false}
             fullWidth={false}
             loading={false}
@@ -104,6 +108,7 @@ exports[`HelpItemList should match a snapshot 1`] = `
       isFullHeight={true}
     >
       <Component
+        className=""
         isFlex={true}
         isFlexColumn={true}
       >
@@ -129,6 +134,7 @@ exports[`HelpItemList should match a snapshot 1`] = `
           className="text-end"
         >
           <Component
+            className=""
             disabled={false}
             fullWidth={false}
             loading={false}
@@ -150,6 +156,7 @@ exports[`HelpItemList should match a snapshot 1`] = `
       isFullHeight={true}
     >
       <Component
+        className=""
         isFlex={true}
         isFlexColumn={true}
       >
@@ -176,6 +183,7 @@ exports[`HelpItemList should match a snapshot 1`] = `
           className="text-end"
         >
           <Component
+            className=""
             disabled={false}
             fullWidth={false}
             loading={false}
@@ -197,6 +205,7 @@ exports[`HelpItemList should match a snapshot 1`] = `
       isFullHeight={true}
     >
       <Component
+        className=""
         isFlex={true}
         isFlexColumn={true}
       >
@@ -222,6 +231,7 @@ exports[`HelpItemList should match a snapshot 1`] = `
           className="text-end"
         >
           <Component
+            className=""
             disabled={false}
             fullWidth={false}
             loading={false}
@@ -243,6 +253,7 @@ exports[`HelpItemList should match a snapshot 1`] = `
       isFullHeight={true}
     >
       <Component
+        className=""
         isFlex={true}
         isFlexColumn={true}
       >
@@ -269,6 +280,7 @@ exports[`HelpItemList should match a snapshot 1`] = `
           className="text-end"
         >
           <Component
+            className=""
             disabled={false}
             fullWidth={false}
             loading={false}
diff --git a/packages/developer-portal/src/components/ui/__tests__/help-item-list.tsx b/packages/developer-portal/src/components/ui/help-item-list/__tests__/help-item-list.tsx
similarity index 100%
rename from packages/developer-portal/src/components/ui/__tests__/help-item-list.tsx
rename to packages/developer-portal/src/components/ui/help-item-list/__tests__/help-item-list.tsx
diff --git a/packages/developer-portal/src/components/ui/help-item-list.tsx b/packages/developer-portal/src/components/ui/help-item-list/help-item-list.tsx
similarity index 82%
rename from packages/developer-portal/src/components/ui/help-item-list.tsx
rename to packages/developer-portal/src/components/ui/help-item-list/help-item-list.tsx
index 62c940b133..5262bdb95f 100644
--- a/packages/developer-portal/src/components/ui/help-item-list.tsx
+++ b/packages/developer-portal/src/components/ui/help-item-list/help-item-list.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
-import styles from '@/styles/pages/help.scss?mod'
 import { Button, GridFourCol, GridThreeColItem, H5, Section, LevelRight, Content } from '@reapit/elements'
+import { wrapBoxContent, button } from './__styles__/help-item-list'
 
 export interface HelpItem {
   imgSrc: string
@@ -15,15 +15,15 @@ export const HelpItemList = ({ items }: { items: HelpItem[] }) => (
     {items.map(({ imgSrc, header, text, buttonText, buttonOnClick }) => (
       <GridThreeColItem key={header}>
         <Section isFullHeight isFlex>
-          <Section className={styles.wrapBoxContent} isFlex isFlexColumn>
+          <Section className={wrapBoxContent} isFlex isFlexColumn>
             <Section className="flex-shrink-0">
-              <img className={styles.image} src={imgSrc} alt={header} />
+              <img src={imgSrc} alt={header} />
             </Section>
             <H5 isCentered>{header}</H5>
             <Content className="flex-grow-1">{text}</Content>
             <LevelRight className="text-end">
               <Button
-                className={styles.button}
+                className={button}
                 type="button"
                 variant="primary"
                 onClick={buttonOnClick}
diff --git a/packages/developer-portal/src/components/ui/help-item-list/index.ts b/packages/developer-portal/src/components/ui/help-item-list/index.ts
new file mode 100644
index 0000000000..84e098ed40
--- /dev/null
+++ b/packages/developer-portal/src/components/ui/help-item-list/index.ts
@@ -0,0 +1,3 @@
+import { HelpItemList } from './help-item-list'
+export * from './help-item-list'
+export default HelpItemList
diff --git a/packages/developer-portal/src/styles/blocks/sandbox-pop-up.scss b/packages/developer-portal/src/components/ui/popup/__styles__/popup.ts
similarity index 60%
rename from packages/developer-portal/src/styles/blocks/sandbox-pop-up.scss
rename to packages/developer-portal/src/components/ui/popup/__styles__/popup.ts
index 31b4416d3d..5c6165aecd 100644
--- a/packages/developer-portal/src/styles/blocks/sandbox-pop-up.scss
+++ b/packages/developer-portal/src/components/ui/popup/__styles__/popup.ts
@@ -1,4 +1,7 @@
-.wrap-pop-up {
+import { css } from 'linaria'
+import { forTabletAndDesktop } from '@/core/__styles__/media'
+
+export const wrapPopup = css`
   position: fixed;
   bottom: 0;
   left: 0;
@@ -9,14 +12,14 @@
     white-space: normal;
   }
 
-  @media screen and (min-width: 768px) {
+  ${forTabletAndDesktop} {
     transform: translateX(66px); // 66px being the width of the sidebar
     width: calc(100vw - 66px);
   }
 
   &-desktop {
-    @media screen and (min-width: 768px) {
+    ${forTabletAndDesktop} {
       transform: none;
     }
   }
-}
+`
diff --git a/packages/developer-portal/src/components/ui/__tests__/__snapshots__/sandbox-pop-up.tsx.snap b/packages/developer-portal/src/components/ui/popup/__tests__/__snapshots__/sandbox-pop-up.tsx.snap
similarity index 100%
rename from packages/developer-portal/src/components/ui/__tests__/__snapshots__/sandbox-pop-up.tsx.snap
rename to packages/developer-portal/src/components/ui/popup/__tests__/__snapshots__/sandbox-pop-up.tsx.snap
diff --git a/packages/developer-portal/src/components/ui/__tests__/__snapshots__/unsupport-brower-pop-up.tsx.snap b/packages/developer-portal/src/components/ui/popup/__tests__/__snapshots__/unsupport-brower-pop-up.tsx.snap
similarity index 100%
rename from packages/developer-portal/src/components/ui/__tests__/__snapshots__/unsupport-brower-pop-up.tsx.snap
rename to packages/developer-portal/src/components/ui/popup/__tests__/__snapshots__/unsupport-brower-pop-up.tsx.snap
diff --git a/packages/developer-portal/src/components/ui/__tests__/sandbox-pop-up.tsx b/packages/developer-portal/src/components/ui/popup/__tests__/sandbox-pop-up.tsx
similarity index 100%
rename from packages/developer-portal/src/components/ui/__tests__/sandbox-pop-up.tsx
rename to packages/developer-portal/src/components/ui/popup/__tests__/sandbox-pop-up.tsx
diff --git a/packages/developer-portal/src/components/ui/__tests__/unsupport-brower-pop-up.tsx b/packages/developer-portal/src/components/ui/popup/__tests__/unsupport-brower-pop-up.tsx
similarity index 100%
rename from packages/developer-portal/src/components/ui/__tests__/unsupport-brower-pop-up.tsx
rename to packages/developer-portal/src/components/ui/popup/__tests__/unsupport-brower-pop-up.tsx
diff --git a/packages/developer-portal/src/components/ui/sandbox-pop-up.tsx b/packages/developer-portal/src/components/ui/popup/sandbox-pop-up.tsx
similarity index 72%
rename from packages/developer-portal/src/components/ui/sandbox-pop-up.tsx
rename to packages/developer-portal/src/components/ui/popup/sandbox-pop-up.tsx
index 776d32f319..c952d08522 100644
--- a/packages/developer-portal/src/components/ui/sandbox-pop-up.tsx
+++ b/packages/developer-portal/src/components/ui/popup/sandbox-pop-up.tsx
@@ -1,7 +1,6 @@
 import * as React from 'react'
 import { ToastMessage } from '@reapit/elements'
-import styles from '@/styles/blocks/sandbox-pop-up.scss?mod'
-import { reapitConnectBrowserSession } from '@/core/connect-session'
+import { wrapPopup } from './__styles__/popup'
 
 export const HALF_SECOND = 500
 
@@ -18,15 +17,13 @@ export const SandboxPopUp = ({
   loading = false,
   message = 'This is a sandbox environment, with anonymised test data and isolated from production',
 }) => {
-  const isDesktop = reapitConnectBrowserSession.connectIsDesktop
-
   const [isOpen, setIsOpen] = React.useState<boolean>(false)
   const setOpen = React.useCallback(setIsOpen.bind(null, true), [setIsOpen])
 
   React.useEffect(popUp(setOpen, loading), [loading])
 
   return (
-    <div className={`${styles['wrap-pop-up']} ${isDesktop ? styles['wrap-pop-up-desktop'] : ''}`}>
+    <div className={wrapPopup}>
       <ToastMessage visible={isOpen} message={message} variant="info" onCloseToast={setOpen} />
     </div>
   )
diff --git a/packages/developer-portal/src/components/ui/unsupport-browser-pop-up.tsx b/packages/developer-portal/src/components/ui/popup/unsupport-browser-pop-up.tsx
similarity index 73%
rename from packages/developer-portal/src/components/ui/unsupport-browser-pop-up.tsx
rename to packages/developer-portal/src/components/ui/popup/unsupport-browser-pop-up.tsx
index 84a9b9bca4..e9c500a81e 100644
--- a/packages/developer-portal/src/components/ui/unsupport-browser-pop-up.tsx
+++ b/packages/developer-portal/src/components/ui/popup/unsupport-browser-pop-up.tsx
@@ -1,7 +1,6 @@
 import * as React from 'react'
 import { ToastMessage } from '@reapit/elements'
-import styles from '@/styles/blocks/sandbox-pop-up.scss?mod'
-import { reapitConnectBrowserSession } from '@/core/connect-session'
+import { wrapPopup } from './__styles__/popup'
 
 export const TIMEOUT_DURATION = 500
 
@@ -21,14 +20,12 @@ export const handleCloseToast = setIsOpen => () => {
 }
 
 export const UnsupportBrowserPopUp = ({ unsupported = false, message = '' }) => {
-  const isDesktopMode = reapitConnectBrowserSession.connectIsDesktop
-
   const [isOpen, setIsOpen] = React.useState<boolean>(false)
 
   React.useEffect(popUp(setIsOpen, unsupported), [unsupported])
 
   return (
-    <div className={`${styles['wrap-pop-up']} ${isDesktopMode ? styles['wrap-pop-up-desktop'] : ''}`}>
+    <div className={wrapPopup}>
       <ToastMessage
         preventClose
         visible={isOpen}
diff --git a/packages/developer-portal/src/core/__styles__/colors.ts b/packages/developer-portal/src/core/__styles__/colors.ts
index 3b33f6c689..bc318e45e0 100644
--- a/packages/developer-portal/src/core/__styles__/colors.ts
+++ b/packages/developer-portal/src/core/__styles__/colors.ts
@@ -22,3 +22,4 @@ export const reapitPurple = '#a4185c'
 export const reapitGold = '#ffb71b'
 export const reapitGreen = '#a0c862'
 export const reapitRed = '#d3033d'
+export const greyLight = '#f5f7f9'
diff --git a/packages/developer-portal/src/styles/blocks/app-sidebar.scss b/packages/developer-portal/src/styles/blocks/app-sidebar.scss
deleted file mode 100644
index cbed3bbfa2..0000000000
--- a/packages/developer-portal/src/styles/blocks/app-sidebar.scss
+++ /dev/null
@@ -1,35 +0,0 @@
-@import "../base/colors.scss";
-
-.sidebar {
-  width: 100%;
-}
-
-.sidebarWrap {
-  background-color: white;
-  padding: 1rem;
-
-  .subHeading {
-    border-bottom: 1px $grey solid;
-    padding-bottom: 0.5rem;
-    margin-bottom: 1rem;
-    color: $grey;
-  }
-}
-
-.btnSearch {
-  height: 100%;
-  outline: none;
-  background: transparent;
-  border: none;
-  cursor: pointer;
-  pointer-events: initial;
-}
-
-
-
-@media screen and (min-width: 769px) {
-  .sidebar {
-    width: 240px;
-    min-width: 240px;
-  }
-}
diff --git a/packages/developer-portal/src/styles/blocks/categories-list.scss b/packages/developer-portal/src/styles/blocks/categories-list.scss
deleted file mode 100644
index 7553ea3c38..0000000000
--- a/packages/developer-portal/src/styles/blocks/categories-list.scss
+++ /dev/null
@@ -1,38 +0,0 @@
-@import '../base/screen-size.scss';
-
-.categoryItem {
-  display: inline;
-  margin: 4px;
-
-  a {
-    color: #262f69;
-    cursor: pointer;
-    text-decoration: none;
-    font-weight: normal;
-  }
-
-  &.categoryItemActive {
-    a {
-      color: black;
-      font-weight: 700;
-    }
-  }
-}
-
-.categoryItem:hover {
-  text-decoration: underline;
-}
-
-@media screen and (min-width: 769px) {
-  .categoryItem {
-    display: block;
-    margin: 4px;
-  }
-}
-
-.listCategories {
-  @include for-mobile-only {
-    display: flex;
-    flex-wrap: wrap;
-  }
-}
diff --git a/packages/developer-portal/src/styles/blocks/developer-app-modal.scss b/packages/developer-portal/src/styles/blocks/developer-app-modal.scss
deleted file mode 100644
index ff822393f9..0000000000
--- a/packages/developer-portal/src/styles/blocks/developer-app-modal.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-.footer {
-  width: 100%;
-}
diff --git a/packages/developer-portal/src/styles/blocks/developer-edition-modal.scss b/packages/developer-portal/src/styles/blocks/developer-edition-modal.scss
deleted file mode 100644
index 378e944119..0000000000
--- a/packages/developer-portal/src/styles/blocks/developer-edition-modal.scss
+++ /dev/null
@@ -1,4 +0,0 @@
-.subTitle {
-  font-weight: 400;
-  font-family: 'Roboto', Helvetica, sans-serif;
-}
diff --git a/packages/developer-portal/src/styles/blocks/diff-checkbox.scss b/packages/developer-portal/src/styles/blocks/diff-checkbox.scss
deleted file mode 100644
index 9640a2a205..0000000000
--- a/packages/developer-portal/src/styles/blocks/diff-checkbox.scss
+++ /dev/null
@@ -1,34 +0,0 @@
-@import '../base/colors';
-
-.container {
-  background-color: $grey-light;
-  border: 1px solid $grey-light;
-  border-radius: 3px;
-  padding: 10px;
-  color: $black;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
-
-.checkbox {
-  padding: 4px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 4px;
-  pointer-events: none;
-}
-
-.green {
-  background-color: $green-lighter;
-}
-
-.red {
-  background-color: $red-lighter;
-}
-
-.arrow {
-  font-size: 18px;
-  color: $grey;
-}
diff --git a/packages/developer-portal/src/styles/blocks/diff-media.scss b/packages/developer-portal/src/styles/blocks/diff-media.scss
deleted file mode 100644
index 4bc494656c..0000000000
--- a/packages/developer-portal/src/styles/blocks/diff-media.scss
+++ /dev/null
@@ -1,64 +0,0 @@
-@import '../base/colors';
-
-.container {
-  background-color: $grey-light;
-  border: 1px solid $grey-light;
-  border-radius: 3px;
-  padding: 10px;
-  color: $black;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
-
-.image {
-  background-size: contain;
-  background-repeat: no-repeat;
-  background-position: center;
-}
-
-.green {
-  background-color: $green-lighter;
-}
-
-.red {
-  background-color: $red-lighter;
-}
-
-.grey {
-  background-color: $grey-light;
-}
-
-.block {
-  border-radius: 4px;
-  width: 88px;
-  height: 88px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.arrow {
-  font-size: 18px;
-  color: $grey;
-}
-
-.iconBlock {
-  width: 90px;
-  height: 90px;
-}
-
-.iconImage {
-  width: 80px;
-  height: 80px;
-}
-
-.mediaBlock {
-  width: 150px;
-  height: 210px;
-}
-
-.mediaImage {
-  width: 140px;
-  height: 200px;
-}
diff --git a/packages/developer-portal/src/styles/blocks/diff-render-html.scss b/packages/developer-portal/src/styles/blocks/diff-render-html.scss
deleted file mode 100644
index 1e11e992be..0000000000
--- a/packages/developer-portal/src/styles/blocks/diff-render-html.scss
+++ /dev/null
@@ -1,52 +0,0 @@
-@import '../base/colors';
-
-.container {
-  background-color: $grey-light;
-  border: 1px solid $grey-light;
-  border-radius: 3px;
-  padding: 10px;
-  color: $black;
-  display: flex;
-  align-items: center;
-
-  & a {
-    color: $reapit-mid-blue;
-    font-weight: bold;
-  }
-
-  & ul,
-  & ol {
-    margin-top: 0;
-    margin-left: 0;
-    list-style-position: inside;
-
-    & li div {
-      display: inline-block;
-    }
-  }
-
-  & p {
-    margin: 1rem 0;
-  }
-}
-
-.green {
-  background-color: $green-lighter;
-}
-
-.red {
-  background-color: $red-lighter;
-}
-
-.arrow {
-  font-size: 18px;
-  color: $grey;
-}
-
-.diff-render-block {
-  overflow-wrap: break-word;
-  border-radius: 4px;
-  // 4% space for arrow
-  width: 48%;
-}
-
diff --git a/packages/developer-portal/src/styles/blocks/diff-viewer.scss b/packages/developer-portal/src/styles/blocks/diff-viewer.scss
deleted file mode 100644
index 2afc554c40..0000000000
--- a/packages/developer-portal/src/styles/blocks/diff-viewer.scss
+++ /dev/null
@@ -1,21 +0,0 @@
-@import '../base/colors';
-
-.container {
-  background-color: $grey-light;
-  border: 1px solid $grey-light;
-  border-radius: 3px;
-  padding: 10px;
-  color: $black;
-
-  span {
-    overflow-wrap: break-word;
-  }
-}
-
-.green {
-  background-color: $green-lighter;
-}
-
-.red {
-  background-color: $red-lighter;
-}
diff --git a/packages/developer-portal/src/styles/blocks/loader.scss b/packages/developer-portal/src/styles/blocks/loader.scss
deleted file mode 100644
index e4b3d87032..0000000000
--- a/packages/developer-portal/src/styles/blocks/loader.scss
+++ /dev/null
@@ -1,51 +0,0 @@
-@import '../base/layout.scss';
-@import '../base/colors.scss';
-
-.loader {
-  display: block;
-  margin: auto;
-  width: $layout-triple;
-  height: $layout-two-half;
-
-  &.body {
-    margin: 100px auto,
-  }
-
-  > div {
-    background-color: $grey;
-    height: 100%;
-    width: $layout-third;
-    margin: 2px;
-    display: inline-block;
-    border-radius: 15%;
-
-    animation: loader-animation 1.2s infinite ease-in-out;
-
-    &:nth-of-type(1) {
-      animation-delay: -1.1s;
-    }
-
-    &:nth-of-type(2) {
-      animation-delay: -1s;
-    }
-
-    &:nth-of-type(3) {
-      animation-delay: -0.9s;
-    }
-
-    &:nth-of-type(4) {
-      animation-delay: -0.8s;
-    }
-  }
-
-  @keyframes loader-animation {
-    0%,
-    40%,
-    100% {
-      transform: scaleY(0.4);
-    }
-    20% {
-      transform: scaleY(1);
-    }
-  }
-}
diff --git a/packages/developer-portal/src/styles/pages/developer-submit-app-successfully.scss b/packages/developer-portal/src/styles/pages/developer-submit-app-successfully.scss
deleted file mode 100644
index 1415d12b57..0000000000
--- a/packages/developer-portal/src/styles/pages/developer-submit-app-successfully.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-.wrapDeveloperSuccess {
-  max-width: 768px;
-  width: 768px;
-  flex-grow: 0;
-}
diff --git a/packages/developer-portal/src/styles/pages/developer-submit-app.scss b/packages/developer-portal/src/styles/pages/developer-submit-app.scss
deleted file mode 100644
index 9dcf337d95..0000000000
--- a/packages/developer-portal/src/styles/pages/developer-submit-app.scss
+++ /dev/null
@@ -1,33 +0,0 @@
-@import '../base/screen-size.scss';
-
-.terms-submit-app {
-  height: 100%;
-  width: 100%;
-  align-items: center;
-  font-weight: bold;
-
-  @media screen and (min-width: 768px) {
-    white-space: nowrap;
-  }
-}
-.label-terms {
-  cursor: pointer;
-}
-.terms-link {
-  text-decoration: underline;
-}
-
-.container {
-  flex-shrink: 0;
-}
-
-.errorScope {
-  width: 100%;
-}
-
-.gridMaxHalfWidth {
-  @include for-tablet-and-desktop {
-    max-width: 50%;
-  }
-  max-width: 100%;
-}
diff --git a/packages/developer-portal/src/styles/pages/developer-welcome.scss b/packages/developer-portal/src/styles/pages/developer-welcome.scss
deleted file mode 100644
index b8d5754cf6..0000000000
--- a/packages/developer-portal/src/styles/pages/developer-welcome.scss
+++ /dev/null
@@ -1,20 +0,0 @@
-.graphic {
-  width: 100%;
-  height: auto;
-}
-
-.container {
-  display: flex;
-  margin: 0 auto;
-  width: 100%;
-
-  @media (min-width: 769px) {
-    width: 80%;
-  }
-}
-
-.content {
-  @media (min-width: 769px) {
-    max-width: 375px;
-  }
-}
diff --git a/packages/developer-portal/src/styles/pages/help.scss b/packages/developer-portal/src/styles/pages/help.scss
deleted file mode 100644
index 01ce5efe42..0000000000
--- a/packages/developer-portal/src/styles/pages/help.scss
+++ /dev/null
@@ -1,17 +0,0 @@
-@import '../base/colors.scss';
-@import '../base/browser.scss';
-
-.wrapBoxContent {
-  height: 100%;
-  border: 2px solid $grey-light;
-}
-
-.image {
-  width: 100%;
-  height: auto;
-}
-
-.button {
-  min-width: 8rem;
-  width: 35%;
-}
diff --git a/packages/elements/src/styles/base/utilities.scss b/packages/elements/src/styles/base/utilities.scss
index c4c84ead2b..c0f97849f7 100644
--- a/packages/elements/src/styles/base/utilities.scss
+++ b/packages/elements/src/styles/base/utilities.scss
@@ -61,6 +61,10 @@ $units: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10;
   border-bottom: 1px solid $grey-light;
 }
 
+.w-100 {
+  width: 100%;
+}
+
 .mw-100 {
   max-width: 100%;
 }