Redesign page user admin list

app/Http/Controllers/ProfileController.php

@@ -41,7 +41,7 @@ public function update(ProfileUpdateRequest $request): RedirectResponse
             "totem" => $request->totem ?? "",
             "tel" => $request->tel ?? "",
             "contactable" => intval($request->contactable),
-            "path" => $file ?? "profiles/none.svg",
+            "path" => $file ?? "profiles/none.webp",
         ]);
 
         return redirect(route('profile.edit'));

database/migrations/2025_01_27_223312_change_profile_none.php

@@ -0,0 +1,27 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\DB;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    /**
+     * Run the migrations.
+     */
+    public function up(): void
+    {
+        DB::table("users")->where("path", "profiles/none.svg")->update([
+            "path" => "profiles/none.webp"
+        ]);
+    }
+
+    /**
+     * Reverse the migrations.
+     */
+    public function down(): void
+    {
+        
+    }
+};

resources/js/Pages/Admin/User/Index.vue

@@ -61,8 +61,8 @@ const resetPassword = (id, email) => {
                     </div>
                     <div v-for="(user, index) in users" class="w-full grid p-2 border-b laptop:text-md text-sm boder text-center items-center"
                     style="grid-template-columns: repeat(15, minmax(0, 1fr));">
-                        <div class="w-10 rounded-full overflow-hidden col-span-1">
-                            <img :src="user.pic" class="h-10">
+                        <div class="desktop:w-14 desktop:h-14 laptop:w-12 laptop:h-12 w-10 h-10 rounded-full overflow-hidden col-span-1 flex items-center bg-black">
+                            <img :src="user.pic" :class="{ 'desktop:h-14 laptop:h-12 h-10': user.path !== 'profiles/none.webp'}">
                         </div>
                         <p class="col-span-2">{{ user.name }}</p>
                         <p class="col-span-2">{{ user.totem }}</p>
@@ -70,7 +70,10 @@ const resetPassword = (id, email) => {
                         <p class="col-span-2">{{ user.tel }}</p>
                         <p class="col-span-1">{{ user.contactable ? "Oui" : "Non" }}</p>
                         <p class="col-span-2">{{ user.created_at }}</p>
-                        <button :id="'reset-' + user.id" @click="resetPassword(user.id, user.email)" class="col-span-2 mx-auto bg-primary rounded pb-1 px-1 shadow shadow-gray-300"><img src="/icons/mail.svg" class="h-7 invert"></button>
+                        <button :id="'reset-' + user.id" @click="resetPassword(user.id, user.email)" class="col-span-2 mx-auto bg-primary rounded pb-1 
+                        px-1 shadow shadow-gray-300">
+                            <img src="/icons/mail.svg" class="invert desktop:h-9 laptop:h-8 h-7">
+                        </button>
                     </div>
                 </div>
             </div>