Setup wizard update

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

@@ -14,7 +14,7 @@
         />
 
         <div class="dropzone-message" v-show="! isData">
-            <upload-icon size="19" class="icon-upload"></upload-icon>
+            <image-icon size="28" class="icon-upload"></image-icon>
             <span class="dropzone-title">
                 {{ $t('input_image.title') }}
             </span>
@@ -26,7 +26,7 @@
 </template>
 
 <script>
-    import { UploadIcon } from 'vue-feather-icons'
+    import ImageIcon from "vue-feather-icons/icons/ImageIcon";
 
     export default {
         name: 'ImageInput',
@@ -34,7 +34,7 @@
             'image', 'error'
         ],
         components: {
-            UploadIcon
+            ImageIcon,
         },
         data() {
             return {
@@ -86,7 +86,7 @@
         text-align: center;
         display: flex;
         align-items: center;
-        min-height: 210px;
+        min-height: 175px;
 
         &.is-error {
             border: 2px dashed rgba(253, 57, 122, 0.3);
@@ -95,8 +95,10 @@
                 color: $danger;
             }
 
-            .icon-upload path {
-                fill: $danger
+            .icon-upload {
+                rect, circle, polyline {
+                    stroke: $danger
+                }
             }
         }
 
@@ -133,6 +135,12 @@
             padding: 50px 0;
             width: 100%;
 
+            .icon-upload {
+                rect, circle, polyline {
+                    stroke: $theme
+                }
+            }
+
             .dropzone-title {
                 @include font-size(16);
                 font-weight: 700;

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

@@ -1,5 +1,5 @@
 <template>
-    <div class="info-box">
+    <div class="info-box" :class="type">
         <slot></slot>
     </div>
 </template>
@@ -7,6 +7,7 @@
 <script>
     export default {
         name: 'InfoBox',
+        props: ['type']
     }
 </script>
 
@@ -21,9 +22,18 @@
         background: $light_background;
         text-align: left;
 
+        &.error {
+            background: rgba($danger, 0.1);
+
+            p, a {
+                color: $danger;
+            }
+        }
+
         p {
             @include font-size(15);
             line-height: 1.6;
+            word-break: break-all;
         }
 
         a {