Bug/60; New Login Design + Font

New Login Design + Font

src/components/SidebarLeft/style.scss

@@ -33,4 +33,4 @@ body {
     .sidebar_left {
         display: none;
     }
-}
+}

src/components/_Header_Searchfield/style.scss

@@ -1,5 +1,4 @@
 @import '../../scss/variables';
-
 @keyframes around {
     0% {
         transform: rotate(0deg);
@@ -8,6 +7,7 @@
         transform: rotate(360deg);
     }
 }
+
 .SearchField {
     height: 40px;
     width: 300px;
@@ -16,10 +16,8 @@
     transition: all 0.3s;
     z-index: 11;
     position: relative;
-
     form {
         height: 100%;
-
         input {
             height: 100%;
             background: #f7f7f7;
@@ -28,13 +26,12 @@
             border-radius: 7px;
             padding: 1px 10px;
             outline: 0;
-            font-family: 'Inter', sans-serif;
+            font-family: 'PT Sans', sans-serif;
             box-shadow: 0 0 transparent;
             border: 2px solid white;
             font-size: 16px !important;
-
             &::placeholder {
-                font-family: 'Inter', sans-serif;
+                font-family: 'PT Sans', sans-serif;
                 font-size: 16px !important;
                 color: #8c9aa2;
             }
@@ -58,24 +55,20 @@
             animation: around 0.7s linear infinite;
         }
     }
-
     &-expanded {
         input {
             padding: 1px 37px 1px 10px !important;
         }
     }
-
     &:focus-within {
         width: 400px;
-
         input {
             background: white;
             color: black;
             box-shadow: 0 3px 6px -4px #00182b6b;
             border: 2px solid $primary-color;
         }
     }
-
     &-Results {
         outline: 0;
         display: none;
@@ -88,11 +81,9 @@
         margin-left: 2px;
         border-radius: 5px;
         box-shadow: 0 3px 8px 0px #00182b40;
-
         &-visible {
             display: block;
         }
-
         span.divider {
             font-size: 12px;
             display: inline-block;
@@ -105,12 +96,10 @@
             margin-top: 6px;
             margin-bottom: 3px;
         }
-
         ul {
             margin: 0;
             padding: 0;
             list-style-type: none;
-
             a {
                 position: relative;
                 display: flex;
@@ -126,11 +115,9 @@
                 overflow: hidden;
                 white-space: nowrap;
                 transition: all 0.2s;
-
                 &:hover {
                     background-color: #eeeeee;
                     transform: scale(0.98);
-
                     small {
                         color: $primary-color;
                     }
@@ -139,7 +126,6 @@
                     transform: scale(0.95);
                     outline: none !important;
                 }
-
                 svg {
                     color: #a0b0b9;
                     margin-right: 10px;
@@ -163,28 +149,24 @@
                 }
             }
         }
-
         &-More {
             display: inline-block;
             width: 100%;
             text-align: center;
             padding: 7px 0px;
             color: $primary-color;
-
             &:hover {
                 text-decoration: underline;
             }
         }
     }
-
     &-mobile-visible {
         display: block;
         position: fixed;
         top: 5px;
         left: 5px;
         width: calc(100% - 10px);
         margin: 0;
-
         &:focus-within {
             width: calc(100% - 10px);
         }
@@ -193,6 +175,7 @@
         }
     }
 }
+
 .SearchFieldBackdrop {
     &-visible {
         position: fixed;
@@ -210,6 +193,7 @@
         display: none;
     }
 }
+
 @media (min-width: 911px) {
     .header__dropdown-button-search {
         display: none;

src/scss/style.scss

@@ -1,4 +1,4 @@
-@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=PT+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap');
 @import 'variables.scss';
 * {
     box-sizing: border-box;
@@ -8,7 +8,7 @@ html,
 body {
     margin: 0;
     padding: 0;
-    font-family: 'Inter', sans-serif !important;
+    font-family: 'PT Sans', sans-serif !important;
 }
 
 #root,
@@ -81,7 +81,6 @@ textarea {
         position: fixed;
         top: 0;
         left: 0;
-
         .nav-header {
             position: fixed !important;
             z-index: 10;
@@ -98,6 +97,33 @@ textarea {
 
 // Font overwriting
 .ui.button,
-.ui.modal > .header {
-    font-family: 'Inter', sans-serif !important;
+.ui.modal > .header,
+h1,
+h2,
+h3,
+h4,
+h5,
+input::placeholder,
+.ui.message .header,
+button,
+input,
+optgroup,
+select,
+textarea {
+    font-family: 'PT Sans', sans-serif !important;
+}
+
+// Button overwriting
+.ui.button {
+    box-shadow: 0 0 0px 0px rgba(224, 225, 226, 0.6) !important;
+    &:focus {
+        box-shadow: 0 0 0px 3px rgba(224, 225, 226, 0.6) !important;
+    }
+}
+
+.ui.button.primary {
+    box-shadow: 0 0 0px 0px rgba(33, 133, 208, 0.4) !important;
+    &:focus {
+        box-shadow: 0 0 0px 3px rgba(33, 133, 208, 0.4) !important;
+    }
 }

src/views/auth/LogOut/style.scss

@@ -1,26 +1,3 @@
 body {
     overflow: hidden;
 }
-.loginContainer {
-    margin: 50px auto;
-    width: 350px;
-    text-align: center;
-
-    img.logo {
-        height: 40px;
-    }
-
-    .formContainer {
-        margin-top: 40px;
-
-        .ui.button {
-            margin: 5px;
-        }
-
-        .or-text {
-            display: block;
-            font-size: 16px;
-            margin: 15px 0;
-        }
-    }
-}