added assets and styles

package.json

@@ -14,6 +14,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-scripts": "5.0.1",
+    "scss": "^0.2.4",
     "typescript": "^4.4.2",
     "web-vitals": "^2.1.0"
   },

src/assets/images/chevron-down.svg

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <g id="Master" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round">
+        <g id="Icons" transform="translate(-40.000000, -151.000000)" stroke="#000000">
+            <g id="Icons-/-Chevron-/-Down" transform="translate(40.000000, 151.000000)">
+                <polyline id="Path" transform="translate(8.000000, 8.000000) rotate(-270.000000) translate(-8.000000, -8.000000) " points="5 2 11 8 5 14" stroke="#e2930a"></polyline>
+            </g>
+        </g>
+    </g>
+</svg>

src/assets/images/down.svg

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <g id="Master" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Buy-page" transform="translate(-136.000000, -852.000000)" stroke="currentColor">
+            <g id="Filter-item-Copy-16" transform="translate(136.000000, 848.000000)">
+                <g id="Icons-/-Checkbox-/-off" transform="translate(0.000000, 4.000000)">
+                    <polyline id="Path" transform="translate(8.000000, 8.000000) rotate(-270.000000) translate(-8.000000, -8.000000) " points="5 2 11 8 5 14"></polyline>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

src/assets/images/svg/caps-lock.svg

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <g id="Caps-Lock" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <path d="M17,19 L17,21 L7,21 L7,19 L17,19 Z M12,3 L21,10 L17,10 L17,17 L7,17 L7,10 L3,10 L12,3 Z" id="Combined-Shape" fill="currentColor"></path>
+    </g>
+</svg>

src/assets/images/svg/eye-off.svg

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <g id="Master" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Icons" transform="translate(-40.000000, -79.000000)" fill="currentColor">
+            <g id="eye-off-outline" transform="translate(40.000000, 79.000000)">
+                <path d="M2.47398116,3.99464566 L2.53252547,4.02549094 L13.8658588,11.3588243 C14.0358755,11.4688351 14.0845198,11.6958421 13.9745091,11.8658588 C13.8767217,12.0169847 13.6864928,12.0722116 13.5260188,12.0053543 L13.4674745,11.9745091 L2.1341412,4.64117572 C1.96412454,4.53116495 1.91548016,4.30415786 2.02549094,4.1341412 C2.1232783,3.98301528 2.31350719,3.92778845 2.47398116,3.99464566 Z M3.46302885,6.35365053 L4.1083929,6.7708723 C3.81029658,7.0585608 3.52305647,7.38077325 3.2494004,7.73654755 L3.04674798,8.0096561 L3.08366782,8.06547524 C4.27326632,9.84797951 6.06094208,10.962963 7.98004454,10.962963 C8.65722341,10.962963 9.32390587,10.8201119 9.95521088,10.5562937 L10.69564,11.0338727 C9.84843225,11.4648639 8.92701525,11.7037037 7.98004454,11.7037037 C5.75860617,11.7037037 3.72666166,10.4226157 2.40821861,8.41164019 C2.24142826,8.1600981 2.24649075,7.83544344 2.42215728,7.58739593 C2.74871545,7.13128497 3.09707817,6.71935421 3.46302885,6.35365053 Z M5.71548132,7.81273581 L6.50413753,8.32383034 C6.65572725,8.9862843 7.26257495,9.48148148 7.98812175,9.48148148 C8.07995333,9.48148148 8.1698834,9.47354859 8.25722954,9.45834774 L9.04753326,9.96841802 C8.73098269,10.1305066 8.37054437,10.2222222 7.98812175,10.2222222 C6.72856811,10.2222222 5.70749814,9.22729944 5.70749814,8 C5.70749814,7.93693045 5.7101946,7.87447455 5.71548132,7.81273581 Z M7.98004454,4.2962963 C9.10605419,4.2962963 10.2063142,4.63943012 11.2089405,5.27021664 C12.1313806,5.85055521 12.9459997,6.66069361 13.5686244,7.59770297 C13.7306028,7.84293225 13.7306028,8.15776219 13.569353,8.40188399 C13.2688682,8.86037696 12.9288642,9.28189795 12.5567195,9.65936669 L11.9125299,9.24126945 C12.2874179,8.87549361 12.6294637,8.45971211 12.9293712,8.00210112 C12.9300086,8.00103291 12.9300086,7.99966153 12.9300086,7.99944169 C11.736763,6.20380333 9.88220431,5.03703704 7.98004454,5.03703704 C7.33011363,5.03703704 6.68048528,5.17600946 6.04999663,5.44731057 L5.31648269,4.97253171 C6.16987895,4.52781301 7.07030912,4.2962963 7.98004454,4.2962963 Z M7.98812175,5.77777778 C9.24767539,5.77777778 10.2687454,6.77270056 10.2687454,8 C10.2687454,8.05834477 10.2664378,8.11616438 10.2619067,8.1733769 L9.4680009,7.65873003 C9.30983274,7.00504358 8.70728744,6.51851852 7.98812175,6.51851852 C7.90245898,6.51851852 7.81845084,6.52542142 7.73665123,6.53868749 L6.94186885,6.02489746 C7.25523458,5.8669741 7.61098796,5.77777778 7.98812175,5.77777778 Z" id="Combined-Shape"></path>
+            </g>
+        </g>
+    </g>
+</svg>

src/assets/images/svg/eye-on.svg

@@ -0,0 +1,4 @@
+<svg  viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.98049 4.29626C5.93884 4.29626 3.94406 5.4623 2.4226 7.58736C2.24693 7.83541 2.24187 8.16007 2.40866 8.41161C3.7271 10.4226 5.75905 11.7037 7.98049 11.7037C10.1878 11.7037 12.2564 10.406 13.5698 8.40185C13.731 8.15773 13.731 7.8429 13.5691 7.59767C12.9464 6.66066 12.1318 5.85052 11.2094 5.27018C10.2068 4.6394 9.1065 4.29626 7.98049 4.29626ZM7.98049 5.03701C9.88265 5.03701 11.7372 6.20377 12.9305 7.99941C12.9305 7.99963 12.9305 8.001 12.9298 8.00207C11.746 9.80837 9.90566 10.9629 7.98049 10.9629C6.06138 10.9629 4.27371 9.84795 3.08411 8.06544L3.04719 8.00962C4.43378 6.07295 6.20601 5.03701 7.98049 5.03701Z" fill="currentColor"/>
+<path d="M7.98765 5.77771C6.7281 5.77771 5.70703 6.77263 5.70703 7.99993C5.70703 9.22723 6.7281 10.2222 7.98765 10.2222C9.24721 10.2222 10.2683 9.22723 10.2683 7.99993C10.2683 6.77263 9.24721 5.77771 7.98765 5.77771ZM7.98765 6.51845C8.82736 6.51845 9.50807 7.18173 9.50807 7.99993C9.50807 8.81813 8.82736 9.48141 7.98765 9.48141C7.14795 9.48141 6.46724 8.81813 6.46724 7.99993C6.46724 7.18173 7.14795 6.51845 7.98765 6.51845Z" fill="currentColor"/>
+</svg>

src/assets/images/svg/search.svg

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <g id="Master" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Icons" transform="translate(-136.000000, -79.000000)" stroke="currentColor">
+            <g id="Icons/search" transform="translate(136.000000, 79.000000)">
+                <path d="M7,3 C4.790861,3 3,4.790861 3,7 C3,9.209139 4.790861,11 7,11 C9.209139,11 11,9.209139 11,7 C10.9998594,4.79091925 9.20908075,3.00014061 7,3 Z M10,10 L13,13" id="Combined-Shape"></path>
+            </g>
+        </g>
+    </g>
+</svg>

src/assets/styles/_base.scss

@@ -0,0 +1,46 @@
+body {
+  margin: 0;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  overflow-anchor: none;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+html {
+  min-height: 100%;
+  font-size: 16px;
+
+  @include media-below($bp-xxl) {
+    font-size: 14px;
+  }
+
+  @include media-below($bp-xs) {
+    font-size: 13px;
+  }
+
+  @include media-below($bp-xxs) {
+    font-size: 10.5px;
+  }
+}
+
+html,
+body,
+#root {
+  @include flex-column;
+  flex: 1 0 auto;
+}
+
+input[type="search"]::-webkit-search-decoration,
+input[type="search"]::-webkit-search-cancel-button,
+input[type="search"]::-webkit-search-results-button,
+input[type="search"]::-webkit-search-results-decoration {
+  -webkit-appearance: none;
+}
+
+ul {
+  list-style: none;
+  padding: 0;
+}

src/assets/styles/_functions.scss

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

src/assets/styles/_layout.scss

@@ -0,0 +1,17 @@
+.l-page {
+  @include flex-column;
+  flex: 1 1 auto;
+  padding-bottom: 7rem;
+  position: relative;
+  @include media-below($bp-xl) {
+    padding-bottom: 4rem;
+  }
+}
+
+.l-section {
+  padding: 0 3.25rem;
+
+  @include media-below($bp-xl) {
+    padding: 0;
+  }
+}

src/assets/styles/_mixins.scss

@@ -0,0 +1,81 @@
+@mixin desktop {
+  @media (min-width: 1280px) {
+    @content;
+  }
+}
+
+@mixin desktop-lg {
+  @media (min-width: 1480px) {
+    @content;
+  }
+}
+
+@mixin tablet {
+  @media (max-width: 1024px) {
+    @content;
+  }
+}
+
+@mixin media-up($media) {
+  @media only screen and (min-width: $media) {
+    @content;
+  }
+}
+
+@mixin media-below($media) {
+  @media only screen and (max-width: #{$media - 0.02px}) {
+    @content;
+  }
+}
+
+@mixin media-between($mediaMin, $mediaMax) {
+  @media screen and (min-width: $mediaMin) and (max-width: #{$mediaMax - 0.02px}) {
+    @content;
+  }
+}
+
+@mixin flex-center {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+@mixin flex-column {
+  display: flex;
+  flex-direction: column;
+}
+
+@mixin button-clear {
+  border: none;
+  padding: 0;
+  background-color: transparent;
+}
+
+@mixin outline-none {
+  &,
+  &:active,
+  &:focus {
+    outline: none;
+  }
+}
+
+@mixin reset-position {
+  position: relative;
+  top: initial;
+  left: initial;
+  right: initial;
+  bottom: initial;
+}
+
+@mixin text-ellipsis {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+@mixin line-clamp($lines) {
+  display: -webkit-box;
+  -webkit-line-clamp: $lines;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}

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/_utility.scss

@@ -0,0 +1,39 @@
+.u-mr-24 {
+  margin-right: 24px;
+}
+
+.u-ml-32 {
+  margin-left: pxToRem(32px);
+}
+
+.u-position-relative {
+  position: relative;
+}
+
+.u-column {
+  @include flex-column;
+}
+
+.u-display-none {
+  display: none;
+}
+
+.u-superscript {
+  font-size: pxToRem(14px);
+  font-weight: medium;
+}
+
+.u-text-align-right {
+  text-align: right;
+}
+
+.u-hide {
+  width: 0;
+  height: 0;
+  visibility: hidden;
+  display: none;
+  position: fixed;
+  top: -20px;
+  right: -20px;
+  z-index: -1;
+}

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/assets/styles/components/_app-button.scss

@@ -0,0 +1,60 @@
+.c-button {
+  display: inline-flex;
+  align-items: center;
+  border-radius: $border-radius;
+  background-color: $color-primary;
+  box-shadow: 0 2px 4px 0 rgba(112, 120, 135, 0.24);
+  border: transparent;
+  padding: 8px 0;
+  color: $white;
+  width: 100%;
+  text-align: center;
+  justify-content: center;
+  font-family: "Avenir Next";
+  font-size: pxToRem(18px);
+  font-weight: 600;
+  letter-spacing: 0;
+  line-height: 26px;
+  outline: none;
+  text-transform: uppercase;
+  transition: all 0.3s ease-in-out;
+  cursor: pointer;
+
+  &.c-button--clean {
+    background: transparent;
+    border: 1px solid $color-primary;
+    color: $color-primary;
+
+    &:hover {
+      border-color: $color-primary-light;
+      color: $color-primary-light;
+      background-color: transparent;
+    }
+
+    &:active {
+      border-color: $color-primary-dark;
+      color: $color-primary-dark;
+    }
+  }
+
+  &.c-button--dropdown {
+    justify-content: flex-end;
+    padding: 8px 14px;
+    background-image: url("../../images/down.svg");
+    background-repeat: no-repeat;
+    background-position: 8% 50%;
+  }
+
+  &[disabled] {
+    pointer-events: none;
+    opacity: 0.5;
+  }
+
+  &:hover {
+    background-color: $color-primary-light;
+  }
+
+  &:active {
+    background-color: $color-primary-dark;
+  }
+}

src/assets/styles/components/_auth-card.scss

@@ -0,0 +1,45 @@
+.c-auth-card {
+  max-width: pxToRem(624px);
+  width: 100%;
+  box-shadow: $box-shadow;
+  border-radius: $border-radius;
+  border: 1px solid $color-primary-light;
+  padding: pxToRem(24px) pxToRem(40px) pxToRem(32px);
+
+  @include media-below($bp-md) {
+    border: none;
+    box-shadow: none;
+    padding: 0;
+    max-width: 100%;
+
+    .c-auth-card__title {
+      text-align: left;
+      font-size: pxToRemMd(36px);
+      margin-bottom: pxToRemMd(6px);
+    }
+
+    .c-auth-card__subtitle {
+      font-size: pxToRemMd(16px);
+      text-align: left;
+    }
+  }
+}
+
+.c-auth-card__title {
+  text-align: left;
+  font-size: pxToRem(36px);
+  line-height: 1.22;
+  color: $dark-blue;
+  font-weight: 400;
+  margin-bottom: pxToRem(16px);
+}
+
+.c-auth-card__subtitle {
+  font-size: pxToRem(16px);
+  line-height: 1.5;
+  letter-spacing: 0;
+  color: $color-primary;
+  text-align: left;
+  width: 100%;
+  font-weight: 600;
+}

src/assets/styles/components/_auth.scss

@@ -0,0 +1,23 @@
+.c-auth {
+  @include flex-center;
+  flex-direction: column;
+  padding-bottom: pxToRem(56px);
+
+  @include media-below($bp-md) {
+    padding: 0 pxToRemMd(24px) pxToRemMd(92px);
+
+    .c-auth__title {
+      margin: pxToRemMd(48px) auto;
+      font-size: pxToRemMd(24px);
+      line-height: 1.35;
+    }
+  }
+}
+
+.c-auth__title {
+  margin: pxToRem(56px) auto pxToRem(80px);
+  font-size: pxToRem(36px);
+  line-height: 1.22;
+  color: $dark-blue;
+  font-weight: bold;
+}

src/assets/styles/components/_button.scss

@@ -0,0 +1,173 @@
+.c-btn {
+  @include outline-none;
+  @include button-clear;
+  @include flex-center;
+  font-size: pxToRem(18px);
+  line-height: 1.35;
+  padding: pxToRem(8px) pxToRem(8px);
+  border-radius: $border-radius;
+  box-shadow: $button-shadow-pressed;
+  color: inherit;
+  font-weight: 600;
+  letter-spacing: 0;
+  text-align: center;
+  text-transform: uppercase;
+  user-select: none;
+  white-space: nowrap;
+  min-width: pxToRem(120px);
+  flex-shrink: 0;
+  cursor: pointer;
+  transition: background-color 0.2s, color 0.2s;
+
+  &:disabled {
+    opacity: 0.5;
+    cursor: auto;
+  }
+
+  &.c-btn--primary {
+    background-color: $color-primary;
+    color: $white;
+    border: 1px solid $color-primary;
+
+    &:disabled {
+      &:hover {
+        background-color: $color-primary;
+        box-shadow: none;
+      }
+    }
+
+    &:hover {
+      background-color: $color-primary-light;
+      box-shadow: $button-shadow-hover;
+    }
+
+    &:focus,
+    &:active {
+      background-color: $color-primary-dark;
+      box-shadow: $button-shadow-pressed;
+    }
+  }
+
+  &.c-btn--primary-outlined {
+    background-color: transparent;
+    color: $color-primary;
+    border: 1px solid $color-primary;
+
+    &:disabled {
+      &:hover {
+        color: $color-primary;
+        border: 1px solid $color-primary;
+      }
+    }
+
+    &:hover {
+      color: $color-primary;
+      border: 1px solid $color-primary;
+    }
+
+    &:focus,
+    &:active {
+      color: $color-primary;
+      border: 1px solid $color-primary;
+    }
+  }
+
+  &.c-btn--blue {
+    background-color: $blue-3;
+    color: $white;
+    background-color: $blue-3;
+  }
+
+  &.c-btn--white {
+    background-color: $white;
+    color: $grey-3;
+    border: 1px solid $grey-4;
+    box-shadow: $box-shadow;
+
+    &:disabled {
+      &:hover {
+        background-color: $white;
+        color: $grey-3;
+      }
+    }
+
+    &:hover {
+      color: $grey-5;
+    }
+
+    &:focus,
+    &:active {
+      background-color: $grey;
+    }
+  }
+
+  &.c-btn--primary-clear {
+    background-color: transparent;
+    color: $color-primary;
+    border: none;
+    box-shadow: none;
+    padding: 0;
+  }
+
+  &.c-btn--auto {
+    min-width: auto;
+  }
+
+  &.c-btn--sm {
+    font-size: pxToRem(16px);
+    line-height: 1.5;
+    padding: pxToRem(4px) pxToRem(15px);
+  }
+
+  &.c-btn--capitalize {
+    text-transform: capitalize;
+  }
+
+  &.c-btn--bank-acount-card {
+    padding: 0 pxToRem(16px);
+    min-height: pxToRem(32px);
+    min-width: pxToRem(120px);
+    font-size: pxToRem(16px);
+    line-height: 1.5;
+  }
+
+  &.c-btn--hidden {
+    visibility: hidden;
+    height: 0;
+  }
+
+  @include media-below($bp-md) {
+    padding: pxToRemMd(4px) pxToRemMd(25px);
+    font-size: pxToRemMd(16px);
+    line-height: 1.5;
+    min-width: pxToRemMd(80px);
+
+    &.c-btn--auth {
+      padding: pxToRemMd(12px) pxToRemMd(25px);
+      line-height: 1.35;
+      font-size: pxToRemMd(18px);
+    }
+
+    &.c-btn--sm {
+      padding: pxToRemMd(4px) pxToRemMd(15px);
+    }
+
+    &.c-btn--bank-acount-card {
+      flex-grow: 1;
+      min-height: pxToRemMd(40px);
+      padding: pxToRemMd(8px) pxToRemMd(16px);
+      font-size: pxToRemMd(18px);
+      line-height: 1.33;
+    }
+
+    &.c-btn--lg {
+      padding: pxToRemMd(7.5px) pxToRemMd(15px);
+      font-size: pxToRemMd(18px);
+      line-height: 1.5;
+    }
+  }
+
+  @include media-below($bp-xs) {
+    white-space: unset;
+  }
+}

src/assets/styles/components/_error-page.scss

@@ -0,0 +1,46 @@
+.c-error-page {
+  margin-top: pxToRem(120px);
+
+  @include media-below($bp-md) {
+    margin-top: pxToRemMd(120px);
+
+    .c-error-page__title {
+      font-size: pxToRemMd(160px);
+      margin-bottom: pxToRemMd(27px);
+    }
+
+    .c-error-page__text {
+      margin-bottom: pxToRem(24px);
+    }
+  }
+}
+
+.c-error-page__content-container {
+  @include flex-center;
+}
+
+.c-error-page__content {
+  @include flex-column;
+  align-items: center;
+  padding: 0 pxToRem(32px);
+}
+
+.c-error-page__title {
+  font-size: pxToRem(160px);
+  line-height: 1.35;
+  color: $dark-blue;
+  margin-bottom: pxToRem(32px);
+  color: $color-primary;
+  font-weight: bold;
+}
+
+.c-error-page__text {
+  font-weight: 600;
+  margin-bottom: pxToRem(24px);
+  text-align: center;
+}
+
+.c-error-page__button {
+  margin-bottom: pxToRem(16px);
+  min-width: pxToRem(250px);
+}

src/assets/styles/components/_forgot-password.scss

@@ -0,0 +1,23 @@
+.c-reset-security {
+  padding-top: pxToRem(56px);
+
+  @include media-below($bp-md) {
+    padding-top: pxToRemMd(40px);
+
+    .c-reset-security__button {
+      width: 100%;
+      margin-top: pxToRemMd(44px);
+    }
+  }
+}
+
+.c-reset-security__question {
+  color: $dark-blue;
+  font-weight: 600;
+  margin-bottom: pxToRem(20px);
+}
+
+.c-reset-security__button {
+  width: 100%;
+  margin-top: pxToRem(48px);
+}

src/assets/styles/components/_icon-button.scss

@@ -0,0 +1,7 @@
+.c-icon-button {
+  @include flex-center;
+  @include outline-none;
+  @include button-clear;
+  user-select: none;
+  cursor: pointer;
+}

src/assets/styles/components/_input.scss

@@ -0,0 +1,479 @@
+.c-input {
+  @include flex-column;
+  position: relative;
+
+  &.c-input--error {
+    .c-input__field,
+    .c-select__control,
+    .c-select__control:hover {
+      border-color: $red;
+    }
+  }
+
+  &.c-input--password {
+    .c-input__icon {
+      position: absolute;
+      right: 0;
+      top: 50%;
+      transform: translate(0, -50%);
+      margin-right: pxToRem(12px);
+      width: pxToRem(24px);
+      height: pxToRem(24px);
+      display: flex;
+
+      svg {
+        width: pxToRem(24px);
+        height: pxToRem(24px);
+        color: $black;
+      }
+    }
+
+    .c-input__caps-lock {
+      position: absolute;
+      right: 0;
+      top: 50%;
+      transform: translate(0, -50%);
+      margin-right: pxToRem(40px);
+      width: pxToRem(24px);
+      height: pxToRem(24px);
+      display: flex;
+      width: pxToRem(24px);
+      height: pxToRem(24px);
+      color: $black;
+    }
+
+    .c-input__field {
+      padding-right: pxToRem(72px);
+    }
+  }
+
+  &.c-input--demi-bold {
+    .c-input__field {
+      font-weight: 600;
+    }
+  }
+
+  &.c-input--search {
+    position: relative;
+    width: 100%;
+
+    .c-input__icon {
+      width: pxToRem(24px);
+      height: pxToRem(24px);
+      position: absolute;
+      right: 0;
+      top: 50%;
+      transform: translate(0, -50%);
+      color: $blue-1;
+      margin-right: pxToRem(12px);
+    }
+
+    &.c-input--search-management {
+      max-width: pxToRem(344px);
+      margin-right: pxToRem(24px);
+
+      .c-input__field {
+        height: pxToRem(34px);
+        font-size: pxToRem(16px);
+        line-height: 1.5;
+        letter-spacing: 0;
+      }
+    }
+  }
+
+  &.c-input--center-text {
+    input {
+      text-align: center;
+    }
+  }
+
+  @include media-below($bp-xl) {
+    &.c-input--search {
+      &.c-input--search-management {
+        max-width: 100%;
+        margin-right: pxToRemMd(16px);
+
+        .c-input__field {
+          height: pxToRemMd(32px);
+          font-size: pxToRemMd(16px);
+          line-height: 1.5;
+          letter-spacing: 0;
+        }
+      }
+    }
+
+    .c-input__label {
+      font-size: pxToRemMd(16px);
+    }
+
+    .c-input__field {
+      font-size: pxToRemMd(16px);
+    }
+
+    .c-input__error {
+      font-size: pxToRemMd(14px);
+    }
+
+    .c-select__control {
+      &.c-select__control {
+        font-size: pxToRemMd(16px);
+        min-height: 0;
+
+        .c-select__input,
+        .c-select__placeholder {
+          font-size: pxToRemMd(16px);
+        }
+
+        .c-select__indicator {
+          > svg {
+            width: pxToRemMd(16px);
+            height: pxToRemMd(16px);
+          }
+        }
+      }
+    }
+
+    .c-select__menu {
+      .c-select__option,
+      .c-select__menu-notice {
+        font-size: pxToRemMd(16px);
+      }
+    }
+
+    .c-input__link {
+      a,
+      span {
+        font-size: pxToRemMd(16px);
+      }
+    }
+
+    //Overide
+    .c-password-strength__container {
+      font-size: pxToRemMd(16px);
+    }
+
+    .c-phone-number {
+      .PhoneInput {
+        font-size: pxToRemMd(16px);
+
+        &::placeholder {
+          font-size: pxToRemMd(16px);
+        }
+      }
+
+      .PhoneInputInput {
+        font-size: pxToRemMd(16px);
+      }
+    }
+  }
+
+  &.c-input--dropdown-full-height {
+    .c-select__menu {
+      max-height: initial;
+    }
+  }
+}
+
+.c-input__label {
+  color: $blue;
+  font-size: pxToRem(16px);
+  font-weight: 600;
+  letter-spacing: 0;
+  line-height: 1.75;
+  margin-bottom: pxToRem(4px);
+}
+
+.c-input__field-wrap {
+  width: 100%;
+  position: relative;
+}
+
+.c-input__field {
+  @include outline-none;
+  border: 1px solid $grey-6;
+  border-radius: $border-radius;
+  font-size: pxToRem(16px);
+  line-height: 1.75;
+  height: pxToRem(50px);
+  padding: 0 pxToRem(12px);
+  color: $blue;
+  background-color: $white;
+  width: 100%;
+
+  &:disabled {
+    background-color: $grey-8;
+    border-color: $grey-6;
+  }
+
+  &:focus {
+    border-color: $color-primary;
+  }
+}
+
+.c-input__error {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  right: 0;
+  color: $red;
+  font-size: pxToRem(14px);
+  line-height: 1.35;
+  font-weight: 500;
+  margin: pxToRem(4px) 0;
+}
+
+.c-select__control {
+  &.c-select__control {
+    @include outline-none;
+    border: 1px solid $grey-6;
+    border-radius: $border-radius;
+    font-size: pxToRem(16px);
+    line-height: 1.75;
+    height: pxToRem(50px);
+    padding: 0 pxToRem(12px);
+    color: $blue;
+    background-color: $white;
+    box-shadow: none;
+
+    &:hover {
+      border-color: $grey-6;
+    }
+
+    &.c-select__control--is-focused {
+      border-color: $color-primary;
+      box-shadow: none;
+
+      &:hover {
+        border-color: $color-primary;
+      }
+      &.c-select__control--menu-is-open {
+        .c-select__indicator {
+          svg {
+            transform: rotate(-180deg);
+          }
+        }
+      }
+    }
+
+    .css-1uccc91-singleValue {
+      color: $blue;
+      margin: 0;
+    }
+
+    .css-b8ldur-Input {
+      margin: 0;
+    }
+
+    .c-select__value-container {
+      height: 100%;
+      padding: 0;
+      padding-right: pxToRem(32px);
+    }
+
+    .c-select__input,
+    .c-select__placeholder {
+      font-size: pxToRem(16px);
+      line-height: 1.75;
+      letter-spacing: 0;
+      color: $blue;
+    }
+
+    .c-select__indicator-separator {
+      display: none;
+    }
+
+    .c-select__indicator {
+      padding: 0;
+
+      > svg {
+        width: pxToRem(16px);
+        height: pxToRem(16px);
+        color: $blue;
+        transform: rotate(0);
+        transition: transform 0.2s;
+      }
+    }
+
+    &.c-select__control--is-disabled {
+      background-color: $grey-8;
+    }
+  }
+}
+
+.c-select__menu {
+  @include flex-column;
+  position: absolute;
+  top: 100%;
+  left: 0;
+  right: 0;
+  margin-top: pxToRem(4px);
+  margin-bottom: pxToRem(4px);
+  border: 1px solid $grey-6;
+  border-radius: $border-radius;
+  box-shadow: $box-shadow;
+  max-height: pxToRem(150px);
+  overflow: auto;
+
+  .c-select__menu-list {
+    @include flex-column;
+    padding: 0;
+    flex-grow: 1;
+  }
+
+  .c-select__option,
+  .c-select__menu-notice {
+    padding: pxToRem(12px) pxToRem(15px);
+    font-size: pxToRem(16px);
+    line-height: 1.75;
+    letter-spacing: 0;
+    color: $blue;
+    text-align: left;
+
+    &:hover {
+      background-color: $grey-2;
+    }
+
+    &.c-select__option--is-selected {
+      background-color: $grey-2;
+    }
+
+    &.c-select__option--is-focused {
+      background-color: $grey-2;
+    }
+  }
+}
+
+.c-input__link {
+  position: absolute;
+  top: 0;
+  right: 0;
+
+  a,
+  span {
+    color: $grey-11;
+    font-size: pxToRem(16px);
+    letter-spacing: 0;
+    line-height: 1.15;
+    text-decoration: underline;
+    cursor: pointer;
+  }
+}
+
+//Overide
+.c-password-strength__container {
+  margin-top: pxToRem(8px);
+  font-size: pxToRem(16px);
+
+  & .c-password-strength__line--wrapper {
+    border-radius: 8px;
+    overflow: hidden;
+    background-color: $grey;
+    height: pxToRem(5px);
+
+    .c-password-strength__line {
+      height: pxToRem(5px);
+      left: 0;
+      top: 0;
+    }
+  }
+}
+
+.c-password {
+  min-height: pxToRem(110px);
+
+  @include media-below($bp-xl) {
+    min-height: pxToRemMd(110px);
+  }
+}
+
+.c-phone-number {
+  .PhoneInput {
+    @include outline-none;
+    box-sizing: border-box;
+    border: 1px solid $grey-6;
+    border-radius: $border-radius;
+    font-size: pxToRem(16px);
+    line-height: 1.75;
+    min-height: pxToRem(50px);
+    color: $blue;
+    background-color: $white;
+    box-shadow: none;
+    width: 100%;
+    overflow: hidden;
+
+    &::placeholder {
+      font-size: pxToRem(16px);
+      line-height: 1.75;
+    }
+
+    &:disabled {
+      background-color: $grey-8;
+      border-color: $grey-6;
+    }
+
+    &.PhoneInput--focus {
+      border-color: $color-primary;
+
+      .PhoneInputCountry {
+        border-color: $color-primary;
+      }
+    }
+  }
+
+  .PhoneInputCountry {
+    @include flex-center;
+    width: pxToRem(96px);
+    border-right: 1px solid $grey-6;
+  }
+
+  .PhoneInputCountryIcon {
+    margin-right: pxToRem(16px);
+    width: auto;
+    height: auto;
+    border: none;
+  }
+
+  .PhoneInputCountryIconImg {
+    width: pxToRem(36px);
+    object-fit: contain;
+  }
+
+  .PhoneInputCountrySelectArrow {
+    border: none;
+    width: 0;
+    height: 0;
+    transform: translate(0);
+    border-left: pxToRem(8px) solid transparent;
+    border-right: pxToRem(8px) solid transparent;
+    border-top: pxToRem(8px) solid $blue;
+  }
+
+  .PhoneInputInput {
+    @include outline-none;
+    border-color: transparent;
+    height: 100%;
+    font-size: pxToRem(16px);
+    line-height: 1.75;
+    padding: 0;
+    color: $blue;
+    background-color: $white;
+    width: 100%;
+    margin: 0;
+    padding: 0 pxToRem(26px);
+    height: pxToRem(50px);
+  }
+
+  .PhoneInputCountry {
+    margin-right: 0;
+  }
+
+  &.c-input--error {
+    .PhoneInput {
+      border-color: $red;
+
+      .PhoneInputCountry {
+        border-color: $red;
+      }
+    }
+  }
+}

src/assets/styles/components/_loader.scss

@@ -0,0 +1,72 @@
+.c-loader__wrapper {
+  @include flex-column;
+  flex: 1 1 auto;
+  position: relative;
+  min-height: 0;
+  min-width: 0;
+
+  &.c-loader__wrapper--block {
+    box-shadow: $box-shadow;
+
+    .c-loader {
+      position: relative;
+      top: unset;
+      left: unset;
+      right: unset;
+      bottom: unset;
+    }
+  }
+
+  &.c-loader__wrapper--full-height {
+    height: 100%;
+  }
+
+  &.c-loader__wrapper--no-shadow {
+    box-shadow: none;
+  }
+
+  .c-loader {
+    @include flex-center;
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    padding: pxToRem(15px) 0;
+    background-color: rgba(255, 255, 255, 0.4);
+    z-index: $index-lg;
+
+    &.c-loader--page {
+      position: fixed;
+
+      .c-loader__icon {
+        border: 20px solid transparent;
+        width: pxToRem(200px);
+        height: pxToRem(200px);
+        border-bottom-color: $color-primary;
+        border-top-color: $color-primary;
+      }
+    }
+  }
+
+  .c-loader__icon {
+    border-radius: 50%;
+    border: 10px solid transparent;
+    border-bottom-color: $color-primary;
+    border-top-color: $color-primary;
+    animation: 1s loader-animation linear infinite;
+    width: pxToRem(100px);
+    height: pxToRem(100px);
+  }
+
+  @keyframes loader-animation {
+    0% {
+      transform: rotate(0deg);
+    }
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+}

src/assets/styles/components/_login-card.scss

@@ -0,0 +1,31 @@
+.c-login-card {
+  border: 1px solid $color-primary-light;
+  border-radius: $border-radius;
+  box-shadow: $box-shadow;
+  max-width: pxToRem(624px);
+  width: 100%;
+  margin: pxToRem(28px) auto 0;
+  padding: pxToRem(36px) pxToRem(40px) pxToRem(32px);
+}
+
+.c-login-card__note {
+  color: $color-primary;
+  font-weight: 600;
+  margin-bottom: pxToRem(37px);
+}
+
+.c-login-card__form {
+  display: grid;
+  grid-row-gap: pxToRem(24px);
+}
+
+.c-login-card__submit {
+  margin-top: pxToRem(24px);
+  width: 100%;
+}
+
+.c-login-card__question {
+  color: $blue;
+  font-weight: 600;
+  margin-bottom: pxToRem(16px);
+}

src/assets/styles/components/_login.scss

@@ -0,0 +1,72 @@
+.c-login {
+  &.c-login--user {
+    .c-login__form {
+      .c-input:first-child {
+        margin-bottom: pxToRem(20px);
+      }
+    }
+  }
+
+  @include media-below($bp-xl) {
+    .c-login__link {
+      margin-top: pxToRemMd(70px);
+    }
+  }
+
+  @include media-below($bp-md) {
+    .c-login__form {
+      margin: pxToRemMd(36px) 0 0;
+    }
+
+    .c-login__button {
+      margin-bottom: pxToRemMd(40px);
+      margin-top: pxToRemMd(36px);
+    }
+
+    .c-login__link {
+      margin-top: pxToRemMd(80px);
+    }
+
+    &.c-login--user {
+      .c-login__form {
+        .c-input:first-child {
+          margin-bottom: pxToRemMd(20px);
+        }
+      }
+    }
+  }
+}
+
+.c-login__link {
+  color: $color-primary;
+  font-weight: 600;
+  margin-top: pxToRem(40px);
+  width: max-content;
+}
+
+.c-login__form {
+  margin: pxToRem(36px) 0 0;
+  > form {
+    @include flex-column;
+  }
+}
+
+.c-login__button {
+  width: 100%;
+  margin-top: pxToRem(68px);
+  margin-bottom: pxToRem(24px);
+}
+
+.c-login__text {
+  text-align: center;
+  width: 100%;
+  color: $blue;
+
+  a {
+    color: $color-primary;
+    font-weight: bold;
+    letter-spacing: inherit;
+    font-size: inherit;
+    line-height: inherit;
+  }
+}

src/assets/styles/components/_modal.scss

@@ -0,0 +1,169 @@
+$header-height-desktop: pxToRem(80px);
+$header-height-mobile: pxToRemMd(74px);
+
+.c-modal-wrap {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: $index-xl;
+  background-color: $black-1;
+
+  &.c-modal-wrap--no-bg {
+    background-color: transparent;
+  }
+
+  &.c-modal-wrap--over-modal {
+    background-color: transparent;
+    z-index: $index-xxl;
+  }
+
+  &.c-modal-wrap--sm {
+    .c-modal {
+      max-width: pxToRem(390px);
+      width: 100%;
+    }
+
+    .c-modal__header {
+      padding: pxToRem(12px);
+    }
+  }
+
+  .c-modal__header {
+    padding: pxToRem(12px);
+  }
+
+  &.c-modal-wrap--md {
+    .c-modal {
+      max-width: pxToRem(521px);
+      width: 100%;
+    }
+
+    .c-modal__header {
+      padding: pxToRem(12px) pxToRem(20px);
+    }
+  }
+
+  &.c-modal-wrap--lg {
+    .c-modal {
+      max-width: pxToRem(782px);
+      width: 100%;
+    }
+
+    .c-modal__header {
+      padding: pxToRem(12px) pxToRem(20px);
+    }
+  }
+
+  &.c-modal-wrap--close {
+    display: none;
+  }
+
+  @include media-below($bp-xl) {
+    &,
+    &.c-modal-wrap--sm,
+    &.c-modal-wrap--md {
+      .c-modal {
+        margin: $header-height-mobile auto $header-height-mobile;
+        max-height: calc(100vh - #{2 * $header-height-mobile});
+      }
+    }
+  }
+
+  @include media-below($bp-md) {
+    &,
+    &.c-modal-wrap--sm,
+    &.c-modal-wrap--md {
+      .c-modal__header {
+        padding: pxToRemMd(16px);
+      }
+
+      .c-modal__title {
+        font-size: pxToRemMd(16px);
+        line-height: 1.4;
+      }
+
+      .c-modal__close {
+        width: pxToRemMd(24px);
+        height: pxToRemMd(24px);
+      }
+
+      .c-modal__back {
+        width: pxToRemMd(24px);
+        height: pxToRemMd(24px);
+        margin-right: pxToRemMd(8px);
+      }
+
+      .c-modal__back-button {
+        margin-left: -#{pxToRemMd(8px)};
+      }
+
+      .c-modal,
+      &.c-modal-wrap--lg .c-modal {
+        max-width: 100%;
+        max-height: 100vh;
+        height: 100%;
+        margin: 0;
+        border-radius: 0;
+      }
+
+      &.c-modal-wrap--mobile-modal {
+        display: flex;
+        padding: 0 pxToRemMd(20px);
+
+        .c-modal {
+          height: auto;
+          margin: auto;
+          border-radius: 2px;
+        }
+      }
+    }
+  }
+}
+
+.c-modal {
+  @include flex-column;
+  box-shadow: $box-shadow;
+  border-radius: $border-radius;
+  background-color: $white;
+  margin: $header-height-desktop auto $header-height-desktop;
+  max-height: calc(100vh - #{2 * $header-height-desktop});
+  position: relative;
+}
+
+.c-modal__header {
+  display: flex;
+  align-items: center;
+  box-shadow: $box-shadow;
+  z-index: $index-xxs;
+}
+
+.c-modal__title {
+  @include text-ellipsis;
+  font-size: pxToRem(16px);
+  font-weight: 600;
+  line-height: 1.5;
+  color: $dark-blue;
+  padding-right: pxToRem(10px);
+  margin-right: auto;
+}
+
+.c-modal__close {
+  width: pxToRem(16px);
+  height: pxToRem(16px);
+  color: $dark-blue;
+}
+
+.c-modal__back {
+  width: pxToRem(16px);
+  height: pxToRem(16px);
+  color: $dark-blue;
+  margin-right: pxToRem(10px);
+}
+
+.c-modal__body {
+  @include flex-column;
+  flex: 1 1 auto;
+  overflow: auto;
+}

src/assets/styles/components/_radio.scss

@@ -0,0 +1,29 @@
+.c-radio {
+  display: flex;
+  cursor: pointer;
+
+  &.c-radio--selected {
+    border-color: $dark-blue;
+  }
+}
+
+.c-radio__field {
+  display: none;
+}
+
+.c-radio__indicator {
+  margin-top: pxToRem(4px);
+  margin-right: pxToRem(16px);
+}
+
+.c-radio__icon {
+  width: pxToRem(16px);
+  height: pxToRem(16px);
+}
+
+.c-radio__text {
+  font-size: pxToRem(14px);
+  line-height: 1.15;
+  color: $blue;
+  user-select: none;
+}

src/main.scss

@@ -0,0 +1,22 @@
+@import "./assets/styles/variables";
+@import "./assets/styles/mixins";
+@import "./assets/styles/functions";
+@import "./assets/styles/typography";
+@import "./assets/styles/base";
+@import "./assets/styles/reset";
+@import "./assets/styles/components/button";
+@import "./assets/styles/components/icon-button";
+@import "./assets/styles/components/app-button";
+@import "./assets/styles/components/loader";
+@import "./assets/styles/components/radio";
+@import "./assets/styles/components/modal";
+@import "./assets/styles/components/auth-card";
+@import "./assets/styles/components/auth";
+@import "./assets/styles/components/login";
+@import "./assets/styles/components/login-card";
+@import "./assets/styles/components/forgot-password";
+@import "./assets/styles/components/input";
+@import "./assets/styles/components/error-page";
+@import "./assets/styles/layout";
+@import "./assets/styles/overwrite";
+@import "./assets/styles/utility";

yarn.lock

@@ -6429,6 +6429,11 @@ obuf@^1.0.0, obuf@^1.1.2:
   resolved "https://registry.yarnpkg.com/obuf/-/obuf-1.1.2.tgz#09bea3343d41859ebd446292d11c9d4db619084e"
   integrity sha512-PX1wu0AmAdPqOL1mWhqmlOd8kOIZQwGZw6rh7uby9fTc5lhaOWFLX3I6R1hrF9k3zUY40e6igsLGkDXK92LJNg==
 
+ometa@0.2.2:
+  version "0.2.2"
+  resolved "https://registry.yarnpkg.com/ometa/-/ometa-0.2.2.tgz#f53c4735ba6d56af5a46b04dfb7c4334c596d44e"
+  integrity sha512-LZuoK/yjU3FvrxPjUXUlZ1bavCfBPqauA7fsNdwi+AVhRdyk2IzgP3JRnevvjzQ6fKHdUw8YISshf53FmpHrng==
+
 on-finished@2.4.1:
   version "2.4.1"
   resolved "https://registry.yarnpkg.com/on-finished/-/on-finished-2.4.1.tgz#58c8c44116e54845ad57f14ab10b03533184ac3f"
@@ -7835,6 +7840,13 @@ schema-utils@^4.0.0:
     ajv-formats "^2.1.1"
     ajv-keywords "^5.0.0"
 
+scss@^0.2.4:
+  version "0.2.4"
+  resolved "https://registry.yarnpkg.com/scss/-/scss-0.2.4.tgz#040d903ed37c5d4fa4ad33ae1fd389ac12a4e065"
+  integrity sha512-4u8V87F+Q/upVhUmhPnB4C1R11xojkRkWjExL2v0CX2EXTg18VrKd+9JWoeyCp2VEMdSpJsyAvVU+rVjogh51A==
+  dependencies:
+    ometa "0.2.2"
+
 select-hose@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/select-hose/-/select-hose-2.0.0.tgz#625d8658f865af43ec962bfc376a37359a4994ca"