frontend/backend update

resources/sass/app.scss

@@ -28,18 +28,36 @@
 
   #page-content {
     margin: 0 auto;
+    padding-bottom: 50px;
 
     &.full-width {
       max-width: 100%;
     }
 
     &.medium-width {
-      max-width: 1024px;
+      max-width: 920px;
+    }
+
+    &.large-width {
+      max-width: 1190px;
     }
 
     &.small-width {
       max-width: 690px;
     }
+
+    &.center-page {
+      height: 100%;
+      padding-top: 20px;
+      padding-bottom: 0;
+      display: grid;
+      width: 100%;
+
+      .content-page {
+        margin: auto;
+        width: 100%;
+      }
+    }
   }
 }
 
@@ -48,8 +66,9 @@
 }
 
 .form-group-label {
-  @include font-size(17);
-  font-weight: 500;
+  @include font-size(18);
+  font-weight: 800;
+  letter-spacing: 0.3px;
   margin-bottom: 25px;
   display: block;
 }
@@ -249,6 +268,7 @@
   .cell-item {
     white-space: nowrap;
     color: $text;
+    font-weight: 700;
   }
 }
 

resources/sass/vue-file-manager/_forms.scss

@@ -33,14 +33,14 @@
     }
 
     .block-wrapper {
-      margin-bottom: 20px;
+      margin-bottom: 15px;
 
       label {
         @include font-size(14);
-        color: $text-muted;
+        color: rgba($text, 0.7);
         font-weight: 600;
         display: block;
-        margin-bottom: 5px;
+        margin-bottom: 7px;
       }
 
       &:last-child {
@@ -57,6 +57,19 @@
     display: flex;
     align-items: center;
     justify-content: space-between;
+
+    .switch-label {
+      .input-help {
+        padding-top: 0;
+      }
+
+      .input-label {
+        font-weight: 700;
+        color: $text;
+        @include font-size(16);
+        margin-bottom: 5px;
+      }
+    }
   }
 
   .input-help {
@@ -85,16 +98,16 @@ input[type="password"],
 input[type="text"],
 input[type="number"],
 input[type="email"] {
-  border: 1px solid #ebebeb;
+  border: 1px solid transparent;
   @include transition(150ms);
-  @include font-size(14);
+  @include font-size(16);
   border-radius: 8px;
   padding: 13px 20px;
   appearance: none;
-  font-weight: 600;
+  font-weight: 700;
   outline: 0;
   width: 100%;
-  background: $light_mode_input_background;
+  background: hsla(210, 10%, 98%, 1);
 
   &.is-error {
     border-color: $danger;

resources/sass/vue-file-manager/_variables.scss

@@ -1,5 +1,5 @@
 // Colors
-$text: #1c1d1f;
+$text: #1b2539;
 $text-muted: rgba($text, 0.7);
 
 $theme: #00BC7E;
@@ -13,11 +13,11 @@ $purple: #9D66FE;
 $light_mode_border: #F8F8F8;
 $danger: #fd397a;
 $light_text: #A4ADB6;
-$light_background: #f6f6f6;
+$light_background: #f4f5f6;
 $dark_background: #EBEBEB;
 $shadow: 0 7px 25px 1px rgba(0, 0, 0, 0.12);
 
-$light_mode_input_background: hsl(0, 0%, 98%);
+$light_mode_input_background: #f4f5f6;
 $light_mode_popup_shadow: 0 15px 50px 10px rgba(26,38,74,0.12);
 $light_mode_vignette: rgba(9, 8, 12, 0.35);