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 {

resources/js/components/Others/PlanPricingTables.vue

@@ -144,6 +144,44 @@
     }
 
     @media (prefers-color-scheme: dark) {
+        .plan {
 
+            .plan-wrapper {
+                background: $dark_mode_foreground;
+            }
+
+            .plan-header {
+
+                .title {
+                    color: $dark_mode_text_primary;
+                }
+
+                .description {
+                    color: $dark_mode_text_secondary;
+                }
+            }
+
+            .plan-features {
+
+                .storage-size {
+                    color: $dark_mode_text_primary;
+                }
+
+                .storage-description {
+                    color: $dark_mode_text_primary;
+                }
+            }
+
+            .plan-footer {
+
+                .sign-in-button {
+                    background: rgba($theme, 0.1);
+
+                    /deep/ .content {
+                        color: $theme;
+                    }
+                }
+            }
+        }
     }
 </style>

resources/js/components/Others/StorageItemDetail.vue

@@ -182,7 +182,7 @@
 
         .detail-storage-item {
 
-            &.others {
+            &.others, &.disk {
 
                 .icon {
 

resources/js/components/Others/Tables/DatatableCellImage.vue

@@ -80,8 +80,22 @@
 
         .cell-image-thumbnail {
 
+            .image {
+
+                img {
+
+                    &.blurred {
+                        display: none;
+                    }
+                }
+            }
+
             .info {
 
+                .name {
+                    color: $dark_mode_text_primary;
+                }
+
                 .description {
                     color: $dark_mode_text_secondary;
                 }

resources/js/components/Others/Tables/DatatableWrapper.vue

@@ -239,7 +239,7 @@
         .table-body {
             tr {
                 border-radius: 8px;
-                border-bottom: 1px solid #f5f5f5;
+                //border-bottom: 1px solid #f5f5f5;
 
                 &:hover {
                     background: $light_background;