SaaS frontend update

resources/js/components/FilesView/MobileActionButton.vue

@@ -6,6 +6,7 @@
             <trash-icon v-if="icon === 'trash'" size="15" class="icon"></trash-icon>
             <grid-icon v-if="icon === 'th'" size="15" class="icon"></grid-icon>
             <user-plus-icon v-if="icon === 'user-plus'" size="15" class="icon"></user-plus-icon>
+            <plus-icon v-if="icon === 'plus'" size="15" class="icon"></plus-icon>
             <span class="label">
                 <slot></slot>
             </span>
@@ -14,7 +15,7 @@
 </template>
 
 <script>
-    import { FolderPlusIcon, ListIcon, GridIcon, TrashIcon, UserPlusIcon } from 'vue-feather-icons'
+    import { FolderPlusIcon, ListIcon, GridIcon, TrashIcon, UserPlusIcon, PlusIcon } from 'vue-feather-icons'
 
     export default {
         name: 'MobileActionButton',
@@ -25,6 +26,7 @@
             FolderPlusIcon,
             UserPlusIcon,
             TrashIcon,
+            PlusIcon,
             ListIcon,
             GridIcon,
         }

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

@@ -0,0 +1,83 @@
+ <template>
+     <div class="cell-image-thumbnail">
+         <div class="image" :class="imageSize" v-if="image">
+             <img :src="image" :alt="title">
+         </div>
+         <div class="info">
+             <b class="name" v-if="title">{{ title }}</b>
+             <span class="description" v-if="description">{{ description }}</span>
+         </div>
+     </div>
+</template>
+
+<script>
+    export default {
+        name:'DatatableCellImage',
+        props: ['image', 'title', 'description', 'image-size'],
+    }
+</script>
+
+<style lang="scss" scoped>
+    @import '@assets/vue-file-manager/_variables';
+    @import '@assets/vue-file-manager/_mixins';
+
+    .cell-image-thumbnail {
+        display: flex;
+        align-items: center;
+        cursor: pointer;
+
+        .image {
+            margin-right: 20px;
+            line-height: 0;
+
+            img {
+                line-height: 0;
+                width: 48px;
+                height: 48px;
+                border-radius: 8px;
+            }
+
+            &.small {
+                img {
+                    width: 32px;
+                    height: 32px;
+                }
+            }
+        }
+
+        .info {
+
+            .name, .description {
+                max-width: 150px;
+                white-space: nowrap;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                display: block;
+            }
+
+            .name {
+                @include font-size(15);
+                line-height: 1;
+                color: $text;
+            }
+
+            .description {
+                color: $text-muted;
+                @include font-size(12);
+            }
+        }
+    }
+
+    @media (prefers-color-scheme: dark) {
+
+        .cell-image-thumbnail {
+
+            .info {
+
+                .description {
+                    color: $dark_mode_text_secondary;
+                }
+            }
+        }
+    }
+</style>

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

@@ -198,7 +198,7 @@
                     padding: 12px;
 
                     span {
-                        color: #AFAFAF;
+                        color: $theme;
                         font-weight: 700;
                         @include font-size(12);
                         white-space: nowrap;
@@ -238,6 +238,7 @@
         .table-body {
             tr {
                 border-radius: 8px;
+                border-bottom: 1px solid #f5f5f5;
 
                 &:hover {
                     background: $light_background;

resources/js/components/Sidebar/MenuBar.vue

@@ -28,13 +28,13 @@
 
             <router-link :to="{name: 'Profile'}" :class="{'is-active': $isThisRoute($route, ['Password', 'Profile', 'Storage'])}" class="icon-navigation-item settings">
                 <div class="button-icon">
-                    <settings-icon size="19"></settings-icon>
+                    <user-icon size="19"></user-icon>
                 </div>
             </router-link>
 
             <router-link v-if="app.user.role === 'admin'" :to="{name: 'Users'}" :class="{'is-active': $isThisRoute($route, ['Users', 'User', 'UserDetail', 'UserStorage', 'UserPassword', 'UserDelete'])}" class="icon-navigation-item users">
                 <div class="button-icon">
-                    <users-icon size="19"></users-icon>
+                    <settings-icon size="19"></settings-icon>
                 </div>
             </router-link>
         </div>
@@ -57,7 +57,7 @@
         HardDriveIcon,
         SettingsIcon,
         Trash2Icon,
-        UsersIcon,
+        UserIcon,
         PowerIcon,
         ShareIcon,
     } from 'vue-feather-icons'
@@ -71,7 +71,7 @@
             Trash2Icon,
             PowerIcon,
             ShareIcon,
-            UsersIcon,
+            UserIcon,
         },
         computed: {
             ...mapGetters(['app']),