load styles

src/App.js

@@ -6,7 +6,7 @@ import history from "./store/utils/history";
 import AppRoutes from "./AppRoutes";
 import Header from "./components/Header/Header";
 import { StyledEngineProvider } from "@mui/material";
-import GlobalStyle from "./components/Styles/globalStyles";
+//import GlobalStyle from "./themes/primaryTheme/globalStyles";
 
 const App = () => {
   return (
@@ -16,7 +16,6 @@ const App = () => {
       </Helmet>
       <StyledEngineProvider injectFirst>
         <Header />
-        <GlobalStyle />
         <AppRoutes />
       </StyledEngineProvider>
       {/* </main> */}

src/assets/styles/_functions.scss

@@ -0,0 +1,7 @@
+// @function pxToRem($target, $context: $base-font-size) {
+//   @return calc($target / $context) * 1rem;
+// }
+
+// @function pxToRemMd($target, $context: $base-font-size-md) {
+//   @return calc($target / $context) * 1rem;
+// }

src/assets/styles/_overwrite.scss

@@ -0,0 +1,244 @@
+// Overwrite
+.ais-ClearRefinements-button {
+  color: $grey-11;
+  font-size: pxToRem(14px);
+  letter-spacing: 0;
+  line-height: 1.15;
+  background-color: transparent;
+  border: none;
+  text-decoration: underline;
+  position: relative;
+  transition: all 0.2s;
+  outline: none;
+  cursor: pointer;
+
+  &[disabled] {
+    pointer-events: none;
+    opacity: 0.5;
+    cursor: auto;
+  }
+
+  &:hover {
+    color: $color-primary-light;
+  }
+
+  &:active {
+    color: $color-primary-dark;
+  }
+}
+
+.ais-RefinementList {
+  margin-bottom: pxToRem(32px);
+  margin-left: pxToRem(16px);
+
+  &.c-filter__refinement--closed {
+    display: none;
+  }
+}
+
+.ais-RefinementList.expanded {
+  .ais-RefinementList-showMore::before {
+    transform: rotate(180deg);
+  }
+}
+
+.ais-RefinementList-showMore {
+  color: $color-primary;
+  font-size: pxToRem(14px);
+  font-weight: 600;
+  letter-spacing: 0;
+  line-height: 1.56;
+  text-align: center;
+  background-color: transparent;
+  border: none;
+  position: relative;
+  margin-left: pxToRem(20px);
+  outline: none;
+  transition: all ease-in-out 0.3s;
+  cursor: pointer;
+
+  &[disabled] {
+    display: none;
+  }
+
+  &:hover {
+    color: $color-primary-light;
+  }
+
+  &:active {
+    color: $color-primary-dark;
+  }
+
+  &::before {
+    content: '';
+    background-image: url('../images/chevron-down.svg');
+    fill: $color-primary;
+    -webkit-text-stroke-color: $color-primary;
+    background-position: center;
+    width: pxToRem(20px);
+    height: pxToRem(20px);
+    position: absolute;
+    left: pxToRem(-22px);
+    transition: all 0.2s;
+  }
+}
+
+.ais-SearchBox {
+  display: flex;
+  justify-content: flex-end;
+  margin-bottom: pxToRem(24px);
+}
+
+.ais-SearchBox-input {
+  border: none;
+  color: $blue;
+  font-size: pxToRem(16px);
+  letter-spacing: 0;
+  line-height: 1.5;
+  outline: none;
+  -moz-appearance: none;
+  -webkit-appearance: none;
+  flex-grow: 1;
+
+  &::placeholder {
+    color: $blue;
+    font-size: pxToRem(16px);
+  }
+
+  @include media-below($bp-xl) {
+    font-size: pxToRemMd(16px);
+
+    &::placeholder {
+      font-size: pxToRemMd(16px);
+    }
+  }
+}
+
+.ais-SearchBox-form {
+  border: 1px solid $grey-6;
+  border-radius: $border-radius;
+  overflow: hidden;
+  padding: 0 pxToRem(12px);
+  height: pxToRem(33px);
+  align-items: center;
+  display: flex;
+  justify-content: space-between;
+  min-width: pxToRem(340px);
+}
+
+.ais-SearchBox-submit,
+.ais-SearchBox-reset {
+  border: none;
+  background: transparent;
+  outline: none;
+  height: pxToRem(16px);
+
+  > svg {
+    color: $blue-1;
+    fill: $blue-1;
+  }
+}
+
+.ais-SearchBox-submitIcon {
+  width: pxToRem(14px);
+  height: pxToRem(14px);
+  color: $blue-1;
+  fill: $blue-1;
+}
+
+.ais-SearchBox-resetIcon {
+  width: pxToRem(14px);
+  height: pxToRem(14px);
+}
+
+.ais-SearchBox-reset {
+  margin-left: pxToRem(10px);
+  cursor: pointer;
+}
+
+.c-plaid-link {
+  padding: 0 !important;
+  background: transparent !important;
+  border-width: 0 !important;
+  border-radius: 0 !important;
+  box-shadow: $box-shadow !important;
+
+  &.c-plaid-link--select-card {
+    margin-top: pxToRem(40px);
+
+    .c-select-card__button {
+      margin-top: 0;
+    }
+  }
+}
+
+.ais-InfiniteHitsWrap {
+  min-height: pxToRem(200px);
+}
+
+.ais-Highlight-highlighted {
+  background: #fff1d6;
+  font-style: normal;
+}
+
+.acsb-trigger {
+  display: none !important;
+  visibility: hidden !important;
+  width: 0 !important;
+  height: 0 !important;
+}
+
+.ais-CurrentRefinements-list {
+  display: flex;
+  flex-wrap: wrap;
+
+  > :not(:last-child) {
+    margin-right: pxToRem(16px);
+  }
+}
+
+.ais-CurrentRefinements-item {
+  border-radius: $border-radius;
+  background-color: $dark-blue;
+  padding: pxToRem(4px) pxToRem(8px);
+  flex-shrink: 0;
+  margin-bottom: pxToRem(16px);
+}
+
+.ais-CurrentRefinements-item-link {
+  font-size: pxToRem(16px);
+  line-height: 1.5;
+  font-weight: 600;
+  color: $white;
+  display: flex;
+  align-items: center;
+  text-decoration: none;
+}
+
+.ais-CurrentRefinements-close {
+  color: $white;
+  width: pxToRem(24px);
+  margin-left: pxToRem(8px);
+}
+
+.recharts-surface {
+  overflow: visible;
+}
+
+.recharts-cartesian-axis-tick-value {
+  color: #9aa1a9;
+  font-size: 10px;
+  letter-spacing: 0;
+  line-height: 20px;
+}
+.recharts-tooltip-wrapper:empty{
+  display: 'none',
+}
+.recharts-text{
+  &.recharts-pie-label-text{
+  font-size: 14px;
+  @include media-below($bp-xl) {
+    font-size: 12px;
+  }
+  }
+}

src/assets/styles/_reset.scss

@@ -0,0 +1,127 @@
+/**
+ * Reset
+ *
+ */
+
+*,
+*:before,
+*:after {
+  box-sizing: border-box;
+}
+
+*,
+body,
+button,
+input,
+textarea,
+select {
+  text-rendering: optimizeLegibility;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+body,
+div,
+dl,
+dt,
+dd,
+ul,
+ol,
+li,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+pre,
+form,
+fieldset,
+button,
+input,
+textarea,
+p,
+blockquote,
+th,
+td {
+  margin: 0;
+  padding: 0;
+}
+
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+fieldset,
+img {
+  border: 0;
+}
+
+address,
+caption,
+cite,
+code,
+dfn,
+em,
+th,
+var {
+  font-style: normal;
+  font-weight: normal;
+}
+
+strong {
+  font-weight: 800;
+}
+
+ol,
+ul {
+  list-style: none;
+}
+
+caption,
+th {
+  text-align: left;
+}
+
+q:before,
+q:after {
+  content: '';
+}
+
+abbr,
+acronym {
+  border: 0;
+}
+
+svg {
+  flex-shrink: 0;
+}
+
+textarea,
+input:matches([type='email'], [type='number'], [type='password'], [type='search'], [type='tel'], [type='text'], [type='url']) {
+  -webkit-appearance: none;
+
+  &::-webkit-autofill,
+  &::-webkit-contacts-auto-fill-button,
+  &::-webkit-credentials-auto-fill-button {
+    visibility: hidden;
+    user-select: none;
+    display: none !important;
+    position: absolute;
+  }
+}
+
+input[type='number']::-webkit-inner-spin-button,
+input[type='number']::-webkit-outer-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+
+  &::-webkit-autofill,
+  &::-webkit-contacts-auto-fill-button,
+  &::-webkit-credentials-auto-fill-button {
+    visibility: hidden;
+    user-select: none;
+    display: none !important;
+    position: absolute;
+  }
+}

src/assets/styles/_typography.scss

@@ -0,0 +1,57 @@
+body,
+div,
+dl,
+dt,
+dd,
+ul,
+ol,
+li,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+pre,
+form,
+fieldset,
+button,
+input,
+textarea,
+p,
+blockquote,
+th,
+td {
+  font-family: $font-family;
+}
+
+p {
+  vertical-align: middle;
+  display: inline-block;
+  word-break: break-word;
+  font-size: pxToRem(16px);
+  line-height: 1.5;
+
+  @include media-below($bp-md) {
+    font-size: pxToRemMd(16px);
+  }
+}
+
+a {
+  font-size: inherit;
+  line-height: inherit;
+  color: inherit;
+}
+
+strong {
+  font-weight: bold;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-weight: 500;
+}

src/assets/styles/_variables.scss

@@ -0,0 +1,72 @@
+$base-font-size: 16px;
+$base-font-size-md: 14px;
+
+$font-family: 'Avenir Next';
+
+// Colors
+$color-primary: #024f86;
+$color-primary-light: #024f86;
+$color-primary-dark: #003246;
+$yellow: #ffeac1;
+$white: #ffffff;
+$grey: #f4f4f4;
+$grey-1: #ccced0;
+$grey-2: #fafafa;
+$grey-3: #c2c5c6;
+$grey-4: #d8d8d8;
+$grey-5: #808285;
+$grey-6: #c9d6db;
+$grey-7: rgba(128, 130, 133, 0.5);
+$grey-8: rgba(201, 214, 219, 0.25);
+$grey-9: #ebeff2;
+$grey-10: #f0f5f6;
+$grey-11: #8b8b8b;
+$grey-12: #b0bfc540;
+$grey-13: #9d9ea4;
+$grey-14: #f7fafa;
+$grey-15: #ebf2f2;
+$dark-blue: #003246;
+$blue: #4e7a8c;
+$blue-1: #6e8fae;
+$blue-2: #024f86;
+$blue-3: #0f85ec;
+$blue-4: #5c7e9f;
+$blue-5: #dde5e7;
+$black: #000;
+$black-1: rgba(0, 0, 0, 0.3);
+$black-2: rgba(32, 38, 43, 0.9);
+$black-4: #172029;
+$black-5: #272727;
+$black-6: #1d2731;
+$red: #ff5028;
+$success: #09846b;
+$success-1: #00876a;
+$success-2: #008a68;
+
+// Shadow
+$button-shadow-hover: 0 5px 6px 0 rgba(112, 120, 135, 0.24);
+$button-shadow-pressed: 0 2px 4px 0 rgba(112, 120, 135, 0.24);
+$box-shadow: 0 3px 8px 0 rgba(112, 120, 135, 0.24);
+$account-dropdown-shadow: 0 6px 38px 0 rgba(112, 120, 135, 0.56);
+
+// Border Radius
+$border-radius: 4px;
+$border-radius-md: 8px;
+
+// Breakpoints
+$bp-xxs: 325px;
+$bp-xs: 400px;
+$bp-sm: 576px;
+$bp-md: 768px;
+$bp-lg: 992px;
+$bp-xl: 1200px;
+$bp-xxl: 1350px;
+
+// z-index
+$index-xxs: 1;
+$index-xs: 2;
+$index-sm: 3;
+$index-md: 4;
+$index-lg: 5;
+$index-xl: 6;
+$index-xxl: 7;

src/index.js

@@ -3,9 +3,9 @@ import ReactDOM from "react-dom";
 import { Provider } from "react-redux";
 import { HelmetProvider } from "react-helmet-async";
 
-import "./main.scss";
 import App from "./App";
 import { store, persistor } from "./store";
+import GlobalStyle from "./themes/primaryTheme/globalStyles";
 
 import "./i18n";
 import ColorModeProvider from "./context/ColorModeContext";
@@ -17,6 +17,7 @@ ReactDOM.render(
       <Provider store={store}>
         <ColorModeProvider>
           <PersistGate loading={null} persistor={persistor}>
+            <GlobalStyle/>
             <App />
           </PersistGate>
         </ColorModeProvider>

src/themes/primaryTheme/base.js

@@ -1,10 +1,10 @@
-import { createGlobalStyle } from "styled-components";
+import { css } from "styled-components";
 import { pxToRemMd } from "./helper";
 import selectedTheme from "..";
 import { variables } from './variables';
 
 
-export const BaseStyle = createGlobalStyle`
+export const BaseStyle = css`
 body {
     margin: 0;
     -webkit-font-smoothing: antialiased;

src/themes/primaryTheme/customClasses.js

@@ -0,0 +1,13 @@
+import { css } from "styled-components";
+import { uButtonClear, uFlexCenter, uOutlineNone } from "./utility";
+
+export const customClasses = css`
+.c-icon-button {
+    
+    ${uFlexCenter}
+    ${uOutlineNone}
+    ${uButtonClear}
+    user-select: none;
+    cursor: pointer;
+  }
+`;

src/themes/primaryTheme/globalStyles.js

@@ -0,0 +1,41 @@
+import { createGlobalStyle } from 'styled-components';
+import OpenSans from "./fonts/OpenSans-Regular.ttf"
+import Poppins from "./fonts/Poppins-Regular.ttf"
+import Mulish from "./fonts/Mulish-Regular.ttf"
+import { BaseStyle } from './base';
+import { ResetStyle } from './reset';
+import { LayoutStyle } from './layout';
+import { customClasses } from './customClasses';
+const GlobalStyle = createGlobalStyle`
+
+
+
+@font-face {
+    font-family: 'Open Sans';
+    src: url(${OpenSans}) format('truetype');
+    font-weight: 400;
+    font-style: normal;
+    font-display: auto;
+  }
+  @font-face {
+    font-family: 'Poppins';
+    src: url(${Poppins}) format('truetype');
+    font-weight: 400;
+    font-style: normal;
+    font-display: auto;
+  }
+  @font-face {
+    font-family: "Mulish";
+    src: url(${Mulish}) format('truetype');
+    font-weight: 400;
+    font-style: normal;
+    font-display: auto;
+  } }
+
+  ${ResetStyle}
+  ${BaseStyle}
+  ${LayoutStyle}
+  ${customClasses}
+`;
+
+export default GlobalStyle;

src/themes/primaryTheme/layout.js

@@ -1,6 +1,7 @@
-import { createGlobalStyle } from "styled-components";
+import { css } from "styled-components";
+import { variables } from "./variables";
 
-export const LayoutStyle = createGlobalStyle`
+export const LayoutStyle = css`
     .l-page {
         display: flex;
         flex-direction: column;

src/themes/primaryTheme/primaryTheme.js

@@ -18,7 +18,8 @@ const primary = {
         iconStrokeColor: "#8C8C8C",
         iconStrokeDisabledColor: '#C4C4C4',
         imagePickerBackground: "#E4E4E4",
-        iconYellowColor: "#FEB005"
+        iconYellowColor: "#FEB005",
+        red: "red"
     },
      fonts : {
         textFont: "Open Sans",

src/themes/primaryTheme/primaryThemeColors.js

@@ -18,5 +18,6 @@ export const primaryThemeColors = {
     // iconStrokeDisabledColor: "#818181"
     iconStrokeDisabledColor: '#C4C4C4',
     imagePickerBackground: "#E4E4E4",
-    iconYellowColor: "#FEB005"
+    iconYellowColor: "#FEB005",
+    red: "red"
 }

src/themes/primaryTheme/reset.js

@@ -1,6 +1,6 @@
-import { createGlobalStyle } from 'styled-components';
+import { css } from 'styled-components';
 
-export const ResetStyle = createGlobalStyle`
+export const ResetStyle = css`
 
 *,
 *:before,

src/themes/primaryTheme/utility.js

@@ -1,6 +1,6 @@
 import { css } from 'styled-components';
 import { mediaBelow, pxToRem } from './helper';
-import themeColors from './themeColors';
+import primary from './primaryTheme';
 import { variables } from './variables';
 
 export const uFlexCenter = css`
@@ -98,18 +98,18 @@ export const uHide = css`
 `;
 
 export const uDanger = css`
-  color: ${themeColors.colorRed};
+  color: ${primary.colors.red};
 
   > * {
-    color: ${themeColors.colorRed};
+    color: ${primary.colors.red};
   }
 `;
 
 export const uLabel = css`
-  color: ${themeColors.colorLabel};
+  color: ${primary.colors.borderNormal};
 
   > * {
-    color: ${themeColors.colorLabel};
+    color: ${primary.colors.borderNormal};
   }
 `;
 
@@ -122,10 +122,10 @@ export const uItalic = css`
 `;
 
 export const uPrimaryColor = css`
-  color: ${themeColors.colorPrimary};
+  color: ${primary.colors.primaryPurple};
 
   > * {
-    color: ${themeColors.colorPrimary};
+    color: ${primary.colors.primaryPurple};
   }
 `;
 

src/themes/primaryTheme/variables.js

@@ -44,6 +44,10 @@ export const variables = {
         },
       },
     },
+    sizes: {
+      baseFontSize: '14px',
+      baseFontSizeMd: '16px'
+    },
     shadow: {
       buttonShadowHover: '0 5px 6px 0 rgba(112, 120, 135, 0.24)',
       buttonShadowPressed: '0 2px 4px 0 rgba(112, 120, 135, 0.24)',