dark mode update

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

@@ -41,4 +41,13 @@
         }
     }
 
+    @media (prefers-color-scheme: dark) {
+        .form-label {
+
+            .label {
+                color: $dark_mode_text_primary;
+            }
+        }
+    }
+
 </style>

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

@@ -53,7 +53,7 @@
                         .substring(imgPath.lastIndexOf('.') + 1)
                         .toLowerCase()
 
-                if (['png', 'jpg', 'jpeg'].includes(extn)) {
+                if (['png', 'jpg', 'jpeg', 'svg'].includes(extn)) {
                     const file = event.target.files[0],
                         reader = new FileReader()
 
@@ -156,6 +156,7 @@
 
     @media (prefers-color-scheme: dark) {
         .dropzone {
+            border-color: rgba(white, 0.2);
 
             .dropzone-message {
 

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

@@ -33,7 +33,7 @@
         p {
             @include font-size(15);
             line-height: 1.6;
-            word-break: break-all;
+            word-break: break-word;
             font-weight: 600;
         }
 
@@ -72,14 +72,24 @@
         .info-box {
             padding: 15px;
         }
-
     }
 
 
     @media (prefers-color-scheme: dark) {
 
         .info-box {
-            background: $dark_mode_foreground;
+            background: rgba($yellow, 0.1);
+
+            p {
+                color: $yellow;
+            }
+
+            ul {
+
+                li {
+                    color: $yellow;
+                }
+            }
         }
     }
 </style>

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

@@ -103,7 +103,6 @@
         .option-item {
             padding: 13px 20px;
             display: block;
-            //border-bottom: 1px solid #EBEBEB;
             cursor: pointer;
 
             &:hover {
@@ -202,8 +201,18 @@
                 border-bottom: none;
 
                 &:hover {
-                    color: $theme;
                     background: rgba($theme, .1);
+
+                    .option-value {
+                        color: $theme;
+                    }
+
+                    .option-icon {
+
+                        path, circle {
+                            stroke: $theme;
+                        }
+                    }
                 }
 
                 &:last-child {