Fixed primary button

Raccoon254 · May 24, 2024 · a394499 · a394499
1 parent 2ca8fc0
commit a394499
Show file tree

Hide file tree

Showing 6 changed files with 17 additions and 9 deletions.
diff --git a/app/Livewire/ProfileImageUploader.php b/app/Livewire/ProfileImageUploader.php
@@ -13,6 +13,12 @@ class ProfileImageUploader extends Component
 
     #[Validate('image|max:1024')]
     public $profilePhoto;
+    public $color = 'blue-500';
+
+    public function mount($color): void
+    {
+        $this->color = $color;
+    }
 
     public function save(): void
     {

diff --git a/resources/views/components/primary-button.blade.php b/resources/views/components/primary-button.blade.php
@@ -1,3 +1,3 @@
-<button {{ $attributes->merge(['type' => 'submit', 'class' => 'inline-flex items-center px-4 py-2 bg-gray-800 border border-transparent rounded-md font-semibold text-xs text-white uppercase tracking-widest hover:bg-gray-700 focus:bg-gray-700 active:bg-gray-900 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 transition ease-in-out duration-150']) }}>
+<button {{ $attributes->merge(['type' => 'submit', 'class' => 'custom-btn']) }}>
     {{ $slot }}
 </button>
diff --git a/resources/views/dashboard.blade.php b/resources/views/dashboard.blade.php
@@ -44,7 +44,7 @@ class="bg-blue-500 hover:bg-blue-600 text-white font-semibold py-2 px-4 rounded-
             <div class="md:w-1/3 md:absolute rounded-lg p-4 right-0 -top-8 bg-blue-500 md:h-[103vh]">
                 <div class="center mt-20">
                         <div class="center flex-col">
-                                <livewire:profile-image-uploader />
+                                <livewire:profile-image-uploader :color="'blue-500'" />
                             <div class="text-white text-center">
                                 <h4 class="mt-3 text-xl font-semibold">{{ auth()->user()->name }}</h4>
                                 <p class="text-xs text-gray-200">{{ auth()->user()->email }}</p>

diff --git a/resources/views/livewire/profile-image-uploader.blade.php b/resources/views/livewire/profile-image-uploader.blade.php
@@ -1,13 +1,13 @@
 <div class="avatar relative">
-    <div class="w-28 rounded-full border border-blue-500 ring-1 ring-offset-blue-500 ring-blue-200 ring-inset ring-offset-[6px]">
+    <div class="w-28 rounded-full border border-{{ $color }} ring-1 ring-offset-{{ $color }} ring-blue-200 ring-inset ring-offset-[6px]">
         <img src="{{ $profilePhoto ? $profilePhoto->temporaryUrl() : auth()->user()->profile_photo }}" alt="{{ auth()->user()->name }}" class="w-28 h-28 p-2 rounded-full">
         <div class="absolute top-0 left-0 w-28 h-28 rotate-[270deg] rounded-full overflow-visible">
             <svg class="w-full h-full">
                 <circle cx="50%" cy="50%" r="48%" fill="transparent" stroke="white" stroke-width="4" stroke-linecap="round" stroke-dashoffset="61px" stroke-dasharray="288.88px"></circle>
             </svg>
         </div>
         <!-- Camera Icon -->
-        <div class="absolute bottom-0 right-0 text-white rounded-full">
+        <div class="absolute bottom-2 right-1 text-white rounded-full">
             <label for="profilePhoto" class="btn btn-sm btn-circle btn-warning fas fa-camera cursor-pointer"></label>
             <input type="file" id="profilePhoto" wire:model="profilePhoto" class="hidden">
         </div>

diff --git a/resources/views/profile/edit.blade.php b/resources/views/profile/edit.blade.php
@@ -6,22 +6,22 @@
         </h2>
     </x-slot>
 
-    <div class="overflow-clip mx-4 max-w-xl rounded-lg h-[85vh]">
+    <div class="overflow-clip mx-4 md:w-2/3 rounded-lg h-[85vh]">
         <div class="h-[85vh] overflow-scroll flex flex-col gap-4">
             <div class="p-4 bg-white shadow-sm sm:rounded-lg">
-                <div class="max-w-xl">
+                <div class="w-full">
                     @include('profile.partials.update-profile-information-form')
                 </div>
             </div>
 
             <div class="p-4 bg-white shadow-sm sm:rounded-lg">
-                <div class="max-w-xl">
+                <div class="w-full">
                     @include('profile.partials.update-password-form')
                 </div>
             </div>
 
             <div class="p-4 bg-white shadow-sm sm:rounded-lg">
-                <div class="max-w-xl">
+                <div class="w-full">
                     @include('profile.partials.delete-user-form')
                 </div>
             </div>

diff --git a/resources/views/profile/partials/update-profile-information-form.blade.php b/resources/views/profile/partials/update-profile-information-form.blade.php
@@ -13,10 +13,12 @@
         @csrf
     </form>
 
-    <form method="post" action="{{ route('profile.update') }}" class="mt-6 space-y-6">
+    <form method="post" action="{{ route('profile.update') }}" class="space-y-6">
         @csrf
         @method('patch')
 
+        <livewire:profile-image-uploader :color="'white'" />
+
         <div>
             <x-input-label for="name" :value="__('Name')" />
             <x-text-input id="name" name="name" type="text" class="mt-1 block w-full" :value="old('name', $user->name)" required autofocus autocomplete="name" />