setup wizard init

resources/js/components/FilesView/Spinner.vue

@@ -36,11 +36,9 @@
     @keyframes loading-bar-spinner {
         0% {
             transform: rotate(0deg);
-            transform: rotate(0deg);
         }
         100% {
             transform: rotate(360deg);
-            transform: rotate(360deg);
         }
     }
 </style>

resources/js/components/Others/Forms/FormLabel.vue

@@ -0,0 +1,44 @@
+<template>
+    <div class="form-label">
+        <edit-2-icon size="22" class="icon"></edit-2-icon>
+        <b class="label">
+            <slot></slot>
+        </b>
+    </div>
+</template>
+
+<script>
+    import { Edit2Icon } from 'vue-feather-icons'
+
+    export default {
+        name: 'FormLabel',
+        components: {
+            Edit2Icon
+        }
+    }
+</script>
+
+<style lang="scss" scoped>
+    @import '@assets/vue-file-manager/_variables';
+    @import '@assets/vue-file-manager/_mixins';
+
+    .form-label {
+        display: flex;
+        align-items: center;
+        margin-bottom: 20px;
+
+        .icon {
+            margin-right: 10px;
+
+            path {
+                stroke: $theme;
+            }
+        }
+
+        .label {
+            @include font-size(18);
+            font-weight: 700;
+        }
+    }
+
+</style>

resources/js/components/Others/Forms/InfoBox.vue

@@ -0,0 +1,69 @@
+<template>
+    <div class="info-box">
+        <slot></slot>
+    </div>
+</template>
+
+<script>
+    export default {
+        name: 'InfoBox',
+    }
+</script>
+
+<style lang="scss" scoped>
+    @import '@assets/vue-file-manager/_variables';
+    @import '@assets/vue-file-manager/_mixins';
+
+    .info-box {
+        padding: 20px;
+        border-radius: 8px;
+        margin-bottom: 32px;
+        background: $light_background;
+        text-align: left;
+
+        p {
+            @include font-size(15);
+            line-height: 1.6;
+        }
+
+        a {
+            color: $theme;
+            font-weight: 700;
+            @include font-size(15);
+            line-height: 1.6;
+        }
+
+        ul {
+            margin-top: 15px;
+            display: block;
+
+            li {
+                display: block;
+
+                a {
+                    display: block;
+                }
+            }
+        }
+    }
+
+    @media only screen and (max-width: 960px) {
+
+    }
+
+    @media only screen and (max-width: 690px) {
+
+        .info-box {
+            padding: 15px;
+        }
+
+    }
+
+
+    @media (prefers-color-scheme: dark) {
+
+        .info-box {
+            background: $dark_mode_foreground;
+        }
+    }
+</style>

resources/js/components/Others/Forms/SelectInput.vue

@@ -88,7 +88,8 @@
     }
 
     .input-options {
-        background: $light_mode_input_background;
+        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.12);
+        background: white;
         border-radius: 8px;
         position: absolute;
         overflow: hidden;
@@ -96,16 +97,18 @@
         left: 0;
         right: 0;
         z-index: 9;
+        max-height: 295px;
+        overflow-y: auto;
 
         .option-item {
             padding: 13px 20px;
             display: block;
-            border-bottom: 1px solid #EBEBEB;
+            //border-bottom: 1px solid #EBEBEB;
             cursor: pointer;
 
             &:hover {
                 color: $theme;
-                background: rgba($theme, .1);
+                background: $light_background;
             }
 
             &:last-child {
@@ -117,7 +120,8 @@
     .input-area {
         border: 1px solid transparent;
         justify-content: space-between;
-        background: $light_mode_input_background;
+        box-shadow: 0 1px 5px rgba(0, 0, 0, 0.12);
+        //background: $light_mode_input_background;
         @include transition(150ms);
         align-items: center;
         border-radius: 8px;