v1.7 alpha.2

resources/js/components/FilesView/ButtonBase.vue

@@ -36,16 +36,13 @@
         white-space: nowrap;
         display: flex;
         align-items: center;
+        justify-content: center;
 
         .icon {
             line-height: 1;
             margin-right: 10px;
         }
 
-        .content {
-            width: 100%;
-        }
-
         &:active {
             transform: scale(0.95);
         }

resources/js/components/Index/IndexPageHeader.vue

@@ -16,7 +16,7 @@
             </div>
             <div class="feature">
                 <hard-drive-icon size="19" class="feature-icon"></hard-drive-icon>
-                <b class="feature-title">{{ $t('page_index.sign_feature_2', {defaultSpace: config.storageDefaultSpace}) }}</b>
+                <b class="feature-title">{{ $t('page_index.sign_feature_2', {defaultSpace: config.storageDefaultSpaceFormatted}) }}</b>
             </div>
         </div>
     </header>

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

@@ -82,16 +82,16 @@
     @media (prefers-color-scheme: dark) {
 
         .info-box {
-            background: rgba($yellow, 0.1);
+            background: $dark_mode_foreground;
 
             p {
-                color: $yellow;
+                color: $dark_mode_text_primary;
             }
 
             ul {
 
                 li {
-                    color: $yellow;
+                    color: $dark_mode_text_primary;
                 }
             }
         }

resources/js/components/Others/PlanPricingTables.vue

@@ -144,8 +144,12 @@
         justify-content: center;
     }
 
-    @media only screen and (max-width: 1024px) {
+    @media only screen and (max-width: 960px) {
 
+        .plans-wrapper {
+            display: block;
+            margin: 0;
+        }
     }
 
     @media (prefers-color-scheme: dark) {

resources/js/components/Others/Popup/Confirm.vue

@@ -118,6 +118,12 @@
         }
     }
 
+    @media only screen and (max-width: 690px){
+        .content {
+            top: 110px;
+        }
+    }
+
     @media (prefers-color-scheme: dark) {
 
         .content {

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

@@ -3,7 +3,7 @@
         <table v-if="hasData" class="table">
             <thead class="table-header">
             <tr>
-                <td
+                <th
                         v-for="(column, index) in columns"
                         @click="sort(column.field, column.sortable, index)"
                         :key="index"
@@ -13,7 +13,7 @@
                     <span>{{ column.label }}</span>
 
                     <chevron-up-icon v-if="false" :class="{ 'arrow-down': filter.sort === 'ASC' }" size="14" class="filter-arrow"></chevron-up-icon>
-                </td>
+                </th>
             </tr>
             </thead>
 
@@ -174,12 +174,12 @@
     .table {
         width: 100%;
         border-collapse: collapse;
-        table-layout: fixed;
+        overflow-x: auto;
 
         tr {
             width: 100%;
 
-            td {
+            td, th {
                 &:first-child {
                     padding-left: 15px;
                 }
@@ -195,8 +195,9 @@
             margin-bottom: 10px;
 
             tr {
-                td {
+                td, th {
                     padding: 12px;
+                    text-align: left;
 
                     span {
                         color: $theme;
@@ -245,7 +246,7 @@
                     background: $light_background;
                 }
 
-                td {
+                td, th {
                     padding: 12px;
 
                     &:last-child {
@@ -354,7 +355,7 @@
             .table-header {
 
                 tr {
-                    td {
+                    td, th {
 
                         span {
                             color: $theme;
@@ -364,7 +365,7 @@
             }
 
             .table-body {
-                tr {
+                tr, th {
                     &:hover {
                         background: $dark_mode_foreground;
                     }