UI/UX improvements

resources/css/tailwind.css

@@ -11,7 +11,7 @@
 }
 
 .input-dark {
-    @apply w-full dark:bg-2x-dark-foreground bg-light-background py-3 px-5 rounded-lg appearance-none border-transparent text-base font-bold border
+    @apply w-full dark:bg-2x-dark-foreground bg-light-background py-3 sm:px-5 px-4 rounded-lg appearance-none border-transparent sm:text-base text-sm font-bold border
 }
 
 .text-limit {

resources/js/components/Admin/AppInputButton.vue

@@ -1,5 +1,5 @@
 <template>
-    <div :class="{ 'mb-7': !isLast }" class="w-full justify-between space-y-4 sm:flex sm:space-x-8 sm:space-x-2 sm:space-y-0">
+    <div :class="{ 'sm:mb-7 mb-6': !isLast }" class="w-full justify-between space-y-4 sm:flex sm:space-x-8 sm:space-x-2 sm:space-y-0">
         <!--Label for input-->
         <div class="leading-5">
             <label class="mb-1.5 block text-sm font-bold text-gray-700 dark:text-gray-200"> {{ title }}: </label>
@@ -15,7 +15,7 @@
 
         <!--Form element-->
         <div>
-            <slot></slot>
+            <slot />
         </div>
     </div>
 </template>

resources/js/components/Admin/AppInputSwitch.vue

@@ -1,5 +1,5 @@
 <template>
-    <div :class="{ 'mb-7': !isLast }" class="flex w-full items-center justify-between space-x-2 sm:space-x-8">
+    <div :class="{ 'sm:mb-7 mb-6': !isLast }" class="flex w-full items-center justify-between space-x-2 sm:space-x-8">
         <!--Label for input-->
         <div class="leading-5">
             <label class="mb-1.5 block text-sm font-bold text-gray-700 dark:text-gray-200"> {{ title }}: </label>
@@ -15,7 +15,7 @@
 
         <!--Form element-->
         <div>
-            <slot></slot>
+            <slot />
         </div>
     </div>
 </template>

resources/js/components/Admin/AppInputText.vue

@@ -1,10 +1,10 @@
 <template>
-    <div :class="{ 'mb-7': !isLast }">
+    <div :class="{ 'sm:mb-7 mb-6': !isLast }">
         <!--Label for input-->
         <label v-if="title" class="mb-1.5 block text-sm font-bold text-gray-700 dark:text-gray-200"> {{ title }}: </label>
 
         <!--Form element-->
-        <slot></slot>
+        <slot />
 
         <!--Input Description-->
         <span v-if="error" class="pt-2 text-xs text-red-800">

resources/js/components/FilesView/InfoSidebar.vue

@@ -43,7 +43,7 @@
 
             <!--Team-->
             <ListInfoItem v-if="singleFile.data.attributes.isTeamFolder" :title="$t('Shared with the Team')">
-                <div class="flex cursor-pointer items-center" @click="$updateTeamFolder(singleFile)">
+                <div class="flex cursor-pointer items-center z-0 relative" @click="$updateTeamFolder(singleFile)">
                     <TeamMembersPreview :folder="singleFile" :avatar-size="32" />
                     <Edit2Icon size="10" class="ml-2" />
                 </div>

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

@@ -1,198 +1,86 @@
 <template>
-    <div class="dropzone" :class="{ 'is-error': error }">
-        <div v-if="imagePreview" @click="resetImage" class="reset-image">
-            <x-icon size="14" class="close-icon text-theme" />
-        </div>
+    <div class="flex items-center justify-center rounded-lg relative h-[175px] bg-light-background" :class="{ 'is-error': error }">
 
-        <input ref="file" type="file" @change="showImagePreview($event)" class="dummy" />
-        <img ref="image" :src="imagePreview" class="image-preview" v-if="imagePreview" />
+		<!--Reset Image-->
+		<div
+			v-if="imagePreview"
+			@click="resetImage"
+			class="absolute z-10 right-0 top-0 flex h-7 w-7 cursor-pointer items-center justify-center rounded-md bg-white shadow-lg rounded-full -translate-y-3 translate-x-3"
+		>
+            <x-icon size="14" class="vue-feather" />
+		</div>
 
-        <div class="dropzone-message" v-show="!isData">
-            <image-icon size="28" class="icon-upload text-theme mx-auto mb-1" />
-            <span class="dropzone-title">
+        <input
+			@change="showImagePreview($event)"
+			ref="file"
+			type="file"
+			class="opacity-0 absolute top-0 left-0 right-0 bottom-0 z-10 w-full cursor-pointer"
+		/>
+
+		<!--Default image preview-->
+		<img v-if="imagePreview" :src="imagePreview" ref="image" class="absolute w-full h-full object-contain py-4 px-12" />
+
+		<!--Drop image zone-->
+        <div v-if="!isData" class="text-center">
+            <image-icon size="34" class="vue-feather text-theme inline-block mb-4" />
+
+			<b class="font-bold text-base block leading-3">
                 {{ $t('input_image.title') }}
-            </span>
-            <span class="dropzone-description">
+            </b>
+            <small class="text-xs text-gray-500">
                 {{ $t('input_image.supported') }}
-            </span>
+            </small>
         </div>
     </div>
 </template>
 
 <script>
-import { XIcon, ImageIcon } from 'vue-feather-icons'
+import {XIcon, ImageIcon} from 'vue-feather-icons'
 
 export default {
-    name: 'ImageInput',
-    props: ['image', 'error'],
-    components: {
-        ImageIcon,
-        XIcon,
-    },
-    data() {
-        return {
-            imagePreview: undefined,
-        }
-    },
-    computed: {
-        isData() {
-            return typeof this.imagePreview === 'undefined' || this.imagePreview === '' ? false : true
-        },
-    },
-    methods: {
-        resetImage() {
-            this.imagePreview = undefined
-            this.$emit('input', undefined)
-        },
-        showImagePreview(event) {
-            const imgPath = event.target.files[0].name,
-                extn = imgPath.substring(imgPath.lastIndexOf('.') + 1).toLowerCase()
+	name: 'ImageInput',
+	props: ['image', 'error'],
+	components: {
+		ImageIcon,
+		XIcon,
+	},
+	data() {
+		return {
+			imagePreview: undefined,
+		}
+	},
+	computed: {
+		isData() {
+			return !(typeof this.imagePreview === 'undefined' || this.imagePreview === '')
+		},
+	},
+	methods: {
+		resetImage() {
+			this.imagePreview = undefined
+			this.$emit('input', undefined)
+		},
+		showImagePreview(event) {
+			const imgPath = event.target.files[0].name,
+				extn = imgPath.substring(imgPath.lastIndexOf('.') + 1).toLowerCase()
 
-            if (['png', 'jpg', 'jpeg', 'svg'].includes(extn)) {
-                const file = event.target.files[0],
-                    reader = new FileReader()
+			if (['png', 'jpg', 'jpeg', 'svg'].includes(extn)) {
+				const file = event.target.files[0],
+					reader = new FileReader()
 
-                reader.onload = () => (this.imagePreview = reader.result)
+				reader.onload = () => (this.imagePreview = reader.result)
 
-                reader.readAsDataURL(file)
+				reader.readAsDataURL(file)
 
-                // Update user avatar
-                this.$emit('input', event.target.files[0])
-            } else {
-                alert(this.$t('validation_errors.wrong_image'))
-            }
-        },
-    },
-    created() {
-        // If has default image then load
-        if (this.image) this.imagePreview = this.image
-    },
+				// Update user avatar
+				this.$emit('input', event.target.files[0])
+			} else {
+				alert(this.$t('validation_errors.wrong_image'))
+			}
+		},
+	},
+	created() {
+		// If has default image then load
+		if (this.image) this.imagePreview = this.image
+	},
 }
 </script>
-
-<style lang="scss" scoped>
-@import '../../../../sass/vuefilemanager/variables';
-@import '../../../../sass/vuefilemanager/mixins';
-
-.dropzone {
-    border: 1px dashed #a1abc2;
-    border-radius: 8px;
-    position: relative;
-    text-align: center;
-    display: flex;
-    align-items: center;
-    min-height: 175px;
-
-    &.is-error {
-        border: 2px dashed rgba(253, 57, 122, 0.3);
-
-        .dropzone-title {
-            color: $danger;
-        }
-
-        .icon-upload {
-            rect,
-            circle,
-            polyline {
-                stroke: $danger;
-            }
-        }
-    }
-
-    input[type='file'] {
-        opacity: 0;
-        position: absolute;
-        top: 0;
-        left: 0;
-        right: 0;
-        bottom: 0;
-        z-index: 1;
-        width: 100%;
-        cursor: pointer;
-    }
-
-    .image-preview {
-        position: absolute;
-        width: 100%;
-        height: 100%;
-        object-fit: contain;
-        left: 0;
-        padding: 25px;
-        display: block;
-
-        &.fit-image {
-            object-fit: cover;
-            border-radius: 12px;
-            overflow: hidden;
-        }
-    }
-
-    .dropzone-message {
-        padding: 50px 0;
-        width: 100%;
-
-        .icon-upload {
-            rect,
-            circle,
-            polyline {
-                color: inherit;
-            }
-        }
-
-        .dropzone-title {
-            @include font-size(16);
-            font-weight: 700;
-            display: block;
-        }
-
-        .dropzone-description {
-            color: $text_muted;
-            @include font-size(12);
-        }
-    }
-
-    .reset-image {
-        z-index: 2;
-        background: white;
-        border-radius: 50px;
-        display: block;
-        position: absolute;
-        right: 0;
-        top: 0;
-        cursor: pointer;
-        @include transform(translateY(-50%) translateX(50%));
-        padding: 0px 4px;
-        box-shadow: 0 1px 5px rgba(0, 0, 0, 0.12);
-
-        .close-icon {
-            vertical-align: middle;
-
-            line {
-                path {
-                    fill: $text;
-                }
-            }
-        }
-    }
-}
-
-.dark {
-    .dropzone {
-        border-color: rgba(white, 0.2);
-
-        .dropzone-message {
-            .icon-upload {
-                path,
-                polyline,
-                line {
-                    color: inherit;
-                }
-            }
-
-            .dropzone-description {
-                color: $dark_mode_text_secondary;
-            }
-        }
-    }
-}
-</style>

resources/js/views/Admin/Users/UserCreate.vue

@@ -10,6 +10,13 @@
                 </AppInputText>
             </ValidationProvider>
 
+			<!--User Role-->
+            <ValidationProvider tag="div" mode="passive" name="permission" rules="required" v-slot="{ errors }">
+                <AppInputText :title="$t('admin_page_user.select_role')" :error="errors[0]">
+                    <SelectInput v-model="user.role" :options="$translateSelectOptions(roles)" :placeholder="$t('admin_page_user.select_role')" :isError="errors[0]" />
+                </AppInputText>
+            </ValidationProvider>
+
             <!--Email-->
             <ValidationProvider tag="div" mode="passive" name="email" rules="required" v-slot="{ errors }">
                 <AppInputText :title="$t('page_registration.label_email')" :error="errors[0]">
@@ -39,7 +46,7 @@
             <!--Password-->
             <div class="flex space-x-4">
                 <ValidationProvider tag="div" mode="passive" name="password" rules="required" v-slot="{ errors }" class="w-full">
-                    <AppInputText :title="$t('page_registration.label_pass')" :error="errors[0]">
+                    <AppInputText :title="$t('page_registration.label_pass')" :error="errors[0]" :is-last="true">
                         <input
                             v-model="user.password"
                             :placeholder="$t('page_registration.placeholder_pass')"
@@ -50,7 +57,7 @@
                     </AppInputText>
                 </ValidationProvider>
                 <ValidationProvider tag="div" mode="passive" name="password confirm" rules="required" v-slot="{ errors }" class="w-full">
-                    <AppInputText :title="$t('page_registration.label_confirm_pass')" :error="errors[0]">
+                    <AppInputText :title="$t('page_registration.label_confirm_pass')" :error="errors[0]" :is-last="true">
                         <input
                             v-model="user.password_confirmation"
                             :placeholder="$t('admin_page_user.create_user.label_conf_pass')"
@@ -62,33 +69,8 @@
                 </ValidationProvider>
             </div>
         </div>
-        <div class="card shadow-card">
-            <FormLabel>{{ $t('admin_page_user.create_user.group_settings') }}</FormLabel>
-
-            <!--User Role-->
-            <ValidationProvider tag="div" mode="passive" name="permission" rules="required" v-slot="{ errors }">
-                <AppInputText :title="$t('admin_page_user.select_role')" :error="errors[0]">
-                    <SelectInput v-model="user.role" :options="$translateSelectOptions(roles)" :placeholder="$t('admin_page_user.select_role')" :isError="errors[0]" />
-                </AppInputText>
-            </ValidationProvider>
-
-            <!--Storage Capacity-->
-            <ValidationProvider tag="div" mode="passive" name="storage capacity" rules="required" v-slot="{ errors }">
-                <AppInputText :title="$t('admin_page_user.label_change_capacity')" :error="errors[0]">
-                    <input
-                        v-model="user.max_storage_amount"
-                        min="1"
-                        max="999999999"
-                        :placeholder="$t('admin_page_user.label_change_capacity')"
-                        type="number"
-                        class="focus-border-theme input-dark"
-                        :class="{ 'border-red': errors[0] }"
-                    />
-                </AppInputText>
-            </ValidationProvider>
-        </div>
         <div class="form-group">
-            <ButtonBase :disabled="isLoading" :loading="isLoading" button-style="theme" type="submit">
+            <ButtonBase :disabled="isLoading" :loading="isLoading" button-style="theme" type="submit" class="w-full sm:w-auto">
                 {{ $t('admin_page_user.create_user.submit') }}
             </ButtonBase>
         </div>
@@ -160,7 +142,6 @@ export default {
             formData.append('role', this.user.role)
             formData.append('email', this.user.email)
             formData.append('password', this.user.password)
-            formData.append('max_storage_amount', this.user.max_storage_amount)
             formData.append('password_confirmation', this.user.password_confirmation)
 
             // Append avatar if exist

resources/js/views/User/Settings.vue

@@ -37,53 +37,6 @@
             </AppInputText>
         </div>
 
-        <div class="card shadow-card">
-            <FormLabel>
-                {{ $t('Appearance') }}
-            </FormLabel>
-
-            <AppInputText :title="$t('Theme Mode')" :description="$t('Set your theme mode on dark, light or based on your system settings.')" :is-last="!$isApple()">
-                <div class="items-center space-y-4 md:flex md:space-x-6 md:space-x-4 md:space-y-0">
-                    <div
-                        v-for="(theme, i) in themeSetup"
-                        :key="i"
-                        :title="theme.title"
-                        @click="$store.dispatch('toggleThemeMode', theme.type)"
-                        class="w-full cursor-pointer overflow-hidden rounded-xl border-3 shadow-lg"
-                        :class="{
-                            'border-theme': config.defaultThemeMode === theme.type,
-                            'border-transparent': config.defaultThemeMode !== theme.type,
-                        }"
-                    >
-                        <img :src="theme.image" :alt="theme.type" />
-                    </div>
-                </div>
-            </AppInputText>
-
-            <AppInputText
-                v-if="$isApple()"
-                :title="$t('Default Emojis')"
-                :description="$t('Set your default emojis for your folder custom icons. You can set Twemoji or default Apple emojis.')"
-                :is-last="true"
-            >
-                <div class="items-center space-y-4 md:flex md:space-x-6 md:space-x-4 md:space-y-0">
-                    <div
-                        v-for="(emoji, i) in emojiSetup"
-                        :key="i"
-                        :title="emoji.title"
-                        @click="$store.dispatch('toggleEmojiType', emoji.type)"
-                        class="w-full cursor-pointer overflow-hidden rounded-xl border-3 shadow-lg"
-                        :class="{
-                            'border-theme': currentEmojis === emoji.type,
-                            'border-transparent': currentEmojis !== emoji.type,
-                        }"
-                    >
-                        <img :src="isDarkMode ? emoji.image.dark : emoji.image.light" :alt="emoji.type" />
-                    </div>
-                </div>
-            </AppInputText>
-        </div>
-
         <div class="card shadow-card">
             <FormLabel>
                 {{ $t('user_settings.title_billing') }}
@@ -144,6 +97,53 @@
                     class="focus-border-theme input-dark"
                 />
             </AppInputText>
+        </div>
+
+		<div class="card shadow-card">
+            <FormLabel>
+                {{ $t('Appearance') }}
+            </FormLabel>
+
+            <AppInputText :title="$t('Theme Mode')" :description="$t('Set your theme mode on dark, light or based on your system settings.')" :is-last="!$isApple()">
+                <div class="items-center space-y-4 md:flex md:space-x-6 md:space-x-4 md:space-y-0">
+                    <div
+						v-for="(theme, i) in themeSetup"
+						:key="i"
+						:title="theme.title"
+						@click="$store.dispatch('toggleThemeMode', theme.type)"
+						class="w-full cursor-pointer overflow-hidden rounded-xl border-3 shadow-lg"
+						:class="{
+                            'border-theme': config.defaultThemeMode === theme.type,
+                            'border-transparent': config.defaultThemeMode !== theme.type,
+                        }"
+					>
+                        <img :src="theme.image" :alt="theme.type" />
+                    </div>
+                </div>
+            </AppInputText>
+
+            <AppInputText
+				v-if="$isApple()"
+				:title="$t('Default Emojis')"
+				:description="$t('Set your default emojis for your folder custom icons. You can set Twemoji or default Apple emojis.')"
+				:is-last="true"
+			>
+                <div class="items-center space-y-4 md:flex md:space-x-6 md:space-x-4 md:space-y-0">
+                    <div
+						v-for="(emoji, i) in emojiSetup"
+						:key="i"
+						:title="emoji.title"
+						@click="$store.dispatch('toggleEmojiType', emoji.type)"
+						class="w-full cursor-pointer overflow-hidden rounded-xl border-3 shadow-lg"
+						:class="{
+                            'border-theme': currentEmojis === emoji.type,
+                            'border-transparent': currentEmojis !== emoji.type,
+                        }"
+					>
+                        <img :src="isDarkMode ? emoji.image.dark : emoji.image.light" :alt="emoji.type" />
+                    </div>
+                </div>
+            </AppInputText>
         </div>
     </div>
 </template>