vue frontend update

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

@@ -79,7 +79,7 @@ input[type="email"] {
   appearance: none;
   font-weight: 700;
   outline: 0;
-  min-width: 310px;
+  width: 100%;
 
   &.is-error {
     border-color: $danger;

resources/sass/vue-file-manager/_inapp-forms.scss

@@ -0,0 +1,57 @@
+// Forms
+.form-wrapper {
+  padding: 0 20px;
+}
+
+.input-wrapper {
+  margin-bottom: 20px;
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+
+  input {
+    width: 100%;
+    color: $text;
+
+    &.is-error {
+      border-color: $danger;
+      box-shadow: 0 0 7px rgba($danger, 0.3);
+    }
+  }
+}
+
+.inline-wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+
+  &.icon-append {
+
+    .input-text {
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0;
+    }
+
+    .icon {
+      background: $theme_light;
+      padding: 14px 18px;
+      border-top-right-radius: 8px;
+      border-bottom-right-radius: 8px;
+      @include font-size(16);
+      text-align: center;
+
+      svg path {
+        fill: white;
+      }
+    }
+  }
+}
+
+.input-label {
+  @include font-size(15);
+  color: $text;
+  font-weight: 700;
+  margin-bottom: 5px;
+  display: block;
+}

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

@@ -2,15 +2,17 @@
 $text: #1b2539;
 $text-muted: #667b90;
 
-$light_mode_border: rgba(0, 0, 0, 0.02);
 $theme: #00BC7E;
-$danger: #d22323;
+$theme_light: #4ECDA5;
+
+$light_mode_border: rgba(0, 0, 0, 0.02);
+$danger: #fd397a;
 $light_text: #A4ADB6;
 $light_background: #f6f6f6;
 $dark_background: #EBEBEB;
 $shadow: 0 7px 25px 1px rgba(0, 0, 0, 0.12);
-$light_mode_popup_shadow: 0 10px 50px rgba(0, 0, 0, .10);
-$light_mode_vignette: rgba(255, 255, 255, 0.80);
+$light_mode_popup_shadow: 0 15px 50px 10px rgba(26,38,74,0.12);
+$light_mode_vignette: rgba(9, 8, 12, 0.15);
 
 // Dark Mode
 $dark_mode_vignette: rgba(0, 0, 0, 0.3);