Formatting UI Markup (#854)

app/Http/Livewire/PowerGridTheme.php

@@ -3,9 +3,8 @@
 namespace App\Http\Livewire;
 
 use PowerComponents\LivewirePowerGrid\Themes\Components\{
-    Actions, Checkbox, ClickToCopy, Cols, Editable, FilterBoolean, FilterDatePicker,FilterInputText,
-    FilterMultiSelect, FilterNumber, FilterSelect, Footer, Table
-};
+    Actions, Checkbox, ClickToCopy, Cols, Editable, FilterBoolean, FilterDatePicker,
+    FilterInputText, FilterMultiSelect, FilterNumber, FilterSelect, Footer, Table};
 use PowerComponents\LivewirePowerGrid\Themes\{Theme, ThemeBase};
 
 class PowerGridTheme extends ThemeBase
@@ -15,7 +14,7 @@ class PowerGridTheme extends ThemeBase
     public function table(): Table
     {
         return Theme::table('rounded-lg min-w-full border border-slate-200 dark:bg-slate-600 dark:border-slate-500')
-            ->div('my-3 bg-white rounded-lg relative')
+            ->div('my-3 overflow-x-auto bg-white rounded-lg overflow-y-auto relative')
             ->thead('shadow-sm bg-slate-100 dark:bg-slate-800 border border-slate-200 dark:border-slate-500')
             ->tr('')
             ->trFilters('bg-white shadow-sm dark:bg-slate-700')
@@ -52,7 +51,7 @@ class PowerGridTheme extends ThemeBase
         return Theme::editable()
             ->view($this->root().'.editable')
             ->span('flex justify-between')
-            ->input('dark:bg-slate-700 bg-slate-50 text-black-700 border border-slate-400 rounded py-2 px-3 leading-tight focus:outline-none focus:bg-white focus:border-slate-500 dark:bg-slate-600 dark:text-slate-200 dark:placeholder-slate-200 dark:border-slate-500 p-2');
+            ->input('dark:bg-slate-700 bg-slate-50 text-black-700 border border-slate-200 rounded py-2 px-3 leading-tight focus:outline-none focus:bg-white focus:border-slate-200 dark:bg-slate-500 dark:text-slate-200 dark:placeholder-slate-200 dark:border-slate-500 shadow-md');
     }
 
     public function clickToCopy(): ClickToCopy

app/Http/Livewire/Table/AllUlrTable.php

@@ -1,6 +1,6 @@
 <?php
 
-namespace App\Http\Livewire;
+namespace App\Http\Livewire\Table;
 
 use App\Helpers\Helper;
 use App\Models\Url;
@@ -90,21 +90,23 @@ final class AllUlrTable extends PowerGridComponent
             })
             ->addColumn('keyword', function (Url $url) {
                 return
-                    '<a href="'.$url->short_url.'" target="_blank" class="font-semibold">'.$url->keyword.'</a>'
+                    '<a href="'.$url->short_url.'" target="_blank" class="font-light text-indigo-700">'.$url->keyword.'</a>'
                     .Blade::render('@svg(\'icon-open-in-new\', \'!h-[0.7em] ml-1\')');
             })
             ->addColumn('long_url', function (Url $url) {
                 return
-                    '<span title="'.$url->meta_title.'" class="font-semibold">'
+                    '<span title="'.$url->meta_title.'">'
                         .Str::limit($url->meta_title, 80).
                     '</span>
                     <br>
-                    <a href="'.$url->long_url.'" target="_blank" title="'.$url->long_url.'" rel="noopener noreferrer" class="text-slate-500">'
+                    <a href="'.$url->long_url.'" target="_blank" title="'.$url->long_url.'" rel="noopener noreferrer"
+                        class="text-slate-500"
+                    >'
                         .Helper::urlDisplay($url->long_url, false, 70)
                         .Blade::render('@svg(\'icon-open-in-new\', \'!h-[0.7em] ml-1\')').
                     '</a>';
             })
-            ->addColumn('clicks', fn (Url $url) => $url->clicks.Blade::render('@svg(\'icon-bar-chart\', \'ml-2\')'))
+            ->addColumn('clicks', fn (Url $url) => $url->clicks.Blade::render('@svg(\'icon-bar-chart\', \'ml-2 text-indigo-600\')'))
             ->addColumn('created_at_formatted', function (Url $url) {
                 /** @var \Carbon\Carbon */
                 $urlCreatedAt = $url->created_at;
@@ -116,16 +118,24 @@ final class AllUlrTable extends PowerGridComponent
             })
             ->addColumn('action', function (Url $url) {
                 return
-                    '<a role="button" href="'.route('short_url.stats', $url->keyword).'" target="_blank" title="'.__('Open front page').'" class="btn-icon btn-action">'
+                    '<a role="button" href="'.route('short_url.stats', $url->keyword).'" target="_blank" title="'.__('Open front page').'"
+                        class="btn-icon btn-icon-table"
+                    >'
                         .Blade::render('@svg(\'icon-open-in-new\')').
                     '</a>
-                    <a role="button" href="'.route('dashboard.duplicate', $url->keyword).'" title="'.__('Duplicate').'" class="btn-icon btn-action">'
+                    <a role="button" href="'.route('dashboard.duplicate', $url->keyword).'" title="'.__('Duplicate').'"
+                        class="btn-icon btn-icon-table"
+                    >'
                         .Blade::render('@svg(\'icon-clone-alt\')').
                     '</a>
-                    <a role="button" href="'.route('short_url.edit', $url->keyword).'" title="'.__('Edit').'" class="btn-icon btn-action">'
+                    <a role="button" href="'.route('short_url.edit', $url->keyword).'" title="'.__('Edit').'"
+                        class="btn-icon btn-icon-table"
+                    >'
                         .Blade::render('@svg(\'icon-edit-alt\')').
                     '</a>
-                    <a role="button" href="'.route('dashboard.delete', $url->getRouteKey()).'" title="'.__('Delete').'" class="btn-icon btn-action-delete">'
+                    <a role="button" href="'.route('dashboard.delete', $url->getRouteKey()).'" title="'.__('Delete').'"
+                        class="btn-icon btn-icon-table-delete"
+                    >'
                         .Blade::render('@svg(\'icon-trash-alt\')').
                     '</a>';
             });

app/Http/Livewire/Table/MyUrlTable.php

@@ -1,6 +1,6 @@
 <?php
 
-namespace App\Http\Livewire;
+namespace App\Http\Livewire\Table;
 
 use App\Helpers\Helper;
 use App\Models\Url;
@@ -85,12 +85,12 @@ final class MyUrlTable extends PowerGridComponent
         return PowerGrid::eloquent()
             ->addColumn('keyword', function (Url $url) {
                 return
-                    '<a href="'.$url->short_url.'" target="_blank" class="font-semibold">'.$url->keyword.'</a>'
+                    '<a href="'.$url->short_url.'" target="_blank" class="font-light text-indigo-700">'.$url->keyword.'</a>'
                     .Blade::render('@svg(\'icon-open-in-new\', \'!h-[0.7em] ml-1\')');
             })
             ->addColumn('long_url', function (Url $url) {
                 return
-                    '<span title="'.$url->meta_title.'" class="font-semibold">'
+                    '<span title="'.$url->meta_title.'">'
                         .Str::limit($url->meta_title, 80).
                     '</span>
                     <br>
@@ -99,7 +99,7 @@ final class MyUrlTable extends PowerGridComponent
                         .Blade::render('@svg(\'icon-open-in-new\', \'!h-[0.7em] ml-1\')').
                     '</a>';
             })
-            ->addColumn('clicks', fn (Url $url) => $url->clicks.Blade::render('@svg(\'icon-bar-chart\', \'ml-2\')'))
+            ->addColumn('clicks', fn (Url $url) => $url->clicks.Blade::render('@svg(\'icon-bar-chart\', \'ml-2 text-indigo-600\')'))
             ->addColumn('created_at_formatted', function (Url $url) {
                 /** @var \Carbon\Carbon */
                 $urlCreatedAt = $url->created_at;
@@ -111,16 +111,24 @@ final class MyUrlTable extends PowerGridComponent
             })
             ->addColumn('action', function (Url $url) {
                 return
-                    '<a role="button" href="'.route('short_url.stats', $url->keyword).'" target="_blank" title="'.__('Go to front page').'" class="btn-icon btn-action">'
+                    '<a role="button" href="'.route('short_url.stats', $url->keyword).'" target="_blank" title="'.__('Go to front page').'"
+                        class="btn-icon btn-icon-table"
+                    >'
                         .Blade::render('@svg(\'icon-open-in-new\')').
                     '</a>
-                    <a role="button" href="'.route('dashboard.duplicate', $url->keyword).'" title="'.__('Duplicate').'" class="btn-icon btn-action" >'
+                    <a role="button" href="'.route('dashboard.duplicate', $url->keyword).'" title="'.__('Duplicate').'"
+                        class="btn-icon btn-icon-table"
+                    >'
                         .Blade::render('@svg(\'icon-clone-alt\')').
                     '</a>
-                    <a role="button" href="'.route('short_url.edit', $url->keyword).'" title="'.__('Edit').'" class="btn-icon btn-action" >'
+                    <a role="button" href="'.route('short_url.edit', $url->keyword).'" title="'.__('Edit').'"
+                        class="btn-icon btn-icon-table"
+                    >'
                         .Blade::render('@svg(\'icon-edit-alt\')').
                     '</a>
-                    <a role="button" href="'.route('dashboard.delete', $url->getRouteKey()).'" title="'.__('Delete').'" class="btn-icon btn-action-delete" >'
+                    <a role="button" href="'.route('dashboard.delete', $url->getRouteKey()).'" title="'.__('Delete').'"
+                        class="btn-icon btn-icon-table-delete"
+                    >'
                         .Blade::render('@svg(\'icon-trash-alt\')').
                     '</a>';
             });

app/Http/Livewire/Table/UserTable.php

@@ -1,6 +1,6 @@
 <?php
 
-namespace App\Http\Livewire;
+namespace App\Http\Livewire\Table;
 
 use App\Models\User;
 use Illuminate\Database\Eloquent\Builder;
@@ -100,10 +100,14 @@ final class UserTable extends PowerGridComponent
             })
             ->addColumn('action', function (User $user) {
                 return
-                    '<a role="button" href="'.route('user.edit', $user->name).'" title="'.__('Details').'" class="btn-icon btn-action">'
+                    '<a role="button" href="'.route('user.edit', $user->name).'" title="'.__('Details').'"
+                        class="btn-icon btn-icon-table"
+                    >'
                         .Blade::render('@svg(\'icon-user-edit\')').
                     '</a>
-                    <a role="button" href="'.route('user.change-password', $user->name).'" title="'.__('Change Password').'" class="btn-icon btn-action">'
+                    <a role="button" href="'.route('user.change-password', $user->name).'" title="'.__('Change Password').'"
+                        class="btn-icon btn-icon-table"
+                    >'
                         .Blade::render('@svg(\'icon-key\')').
                     '</a>';
             });

resources/css/base.css

@@ -40,11 +40,22 @@
 }
 
 .btn-icon {
-  @apply px-2 py-1 rounded-md bg-stone-50 hover:bg-stone-200 active:bg-stone-50 text-gray-500 hover:text-gray-600 active:text-gray-500;
+  @apply px-2 py-1 rounded-md;
+  @apply text-gray-500 hover:text-gray-600 active:text-gray-500 ;
+  @apply bg-stone-50 hover:bg-stone-200 active:bg-stone-50 ;
   box-shadow: 0px 1.6px 2px rgba(0,0,0,0.13), 0px 0px 2px rgba(0,0,0,0.11);
+
+  &-table-delete {
+    @apply text-red-700 hover:text-red-800 active:text-red-700;
+  }
 }
 
 .form-input {
   @apply block w-full;
   @apply border-slate-200 focus:ring-uh-indigo-400 focus:border-uh-indigo-400 rounded
 }
+
+.common-card-style {
+  @apply bg-white sm:rounded-md;
+  @apply sm:shadow-[0px_1px_2px_rgba(25,39,52,0.05),0px_0px_4px_rgba(25,39,52,0.1)];
+}

resources/views/auth/confirm-password.blade.php

@@ -19,10 +19,9 @@
 
     <form method="POST" action="{{ route('password.confirm') }}">
     @csrf
-
         <div>
             <label>{{ __('Password') }}</label>
-            <input type="password" name="password" required autocomplete="current-password" />
+            <input type="password" name="password" autocomplete="current-password" required>
         </div>
 
         <div>

resources/views/auth/forgot-password.blade.php

@@ -33,7 +33,7 @@
     @csrf
         <div>
             <label class="block font-medium text-sm text-slate-700">{{ __('Email') }}</label>
-            <input class="form-input" type="email" id="email" name="email" value="{{ old('email') }}" required autofocus />
+            <input type="email" name="email" class="form-input" id="email" value="{{ old('email') }}" required autofocus>
         </div>
 
         <div class="flex items-center justify-center mt-4">

resources/views/auth/login.blade.php

@@ -19,8 +19,7 @@
         {{ session()->forget('login_error') }}
     @endif
 
-    <div class="w-full sm:max-w-md mt-6 px-12 py-8 overflow-hidden sm:rounded-lg
-        bg-white sm:shadow-md">
+    <div class="common-card-style w-full sm:max-w-md mt-6 px-12 py-8 overflow-hidden">
         <form method="POST" action="{{ route('login') }}" aria-label="{{__('Login')}}">
         @csrf
             <div>
@@ -32,16 +31,14 @@
                 <label for="email" class="block font-medium text-sm text-slate-700">
                     {{__('E-Mail / Username')}}
                 </label>
-                <input class="form-input mt-1" id="identity" name="identity" type="text" value="{{ old('identity') }}"
-                    required autofocus>
+                <input type="text" name="identity" class="form-input mt-1" value="{{ old('identity') }}" required autofocus>
             </div>
 
             <div class="mt-4">
                 <label for="password" class="block font-medium text-sm text-slate-700">
                     {{__('Password')}}
                 </label>
-                <input class="form-input mt-1" id="password" type="password" name="password" required="required"
-                    autocomplete="current-password">
+                <input type="password" name="password" class="form-input mt-1" autocomplete="current-password" required>
             </div>
 
             <div class="flex items-center justify-end mt-4">

resources/views/auth/register.blade.php

@@ -8,15 +8,14 @@
 <div class="flex flex-col min-h-screen sm:justify-center items-center pt-6 sm:pt-0">
     <div class="text-uh-blue font-bold text-4xl sm:text-6xl">{{appName()}}</div>
 
-    <div class="w-full sm:max-w-md mt-6 px-12 py-8 overflow-hidden sm:rounded-lg
-        bg-white sm:shadow-md">
+    <div class="common-card-style w-full sm:max-w-md mt-6 px-12 py-8 overflow-hidden">
         @if ( ! Config::get('urlhub.registration') )
             <p class="text-muted">{{__('Sorry, not allowed to register by administrator')}}</p>
         @else
             <form method="post" action="{{ route('register') }}" aria-label="{{__('Register')}}">
             @csrf
                 <label class="text-slate-700">{{__('Username')}}</label>
-                <input class="form-input mt-1" id="name" type="text" name="name" required autofocus>
+                <input type="text" name="name" class="form-input mt-1" id="name" required autofocus>
 
                 @if ($errors->has('name'))
                     <strong class="text-red-500">{{ $errors->first('name') }}</strong>
@@ -25,7 +24,7 @@
                 <div class="mt-4"></div>
 
                 <label class="text-slate-700">{{__('Email')}}</label>
-                <input class="form-input mt-1" id="email" type="email" name="email" required>
+                <input type="email" name="email" class="form-input mt-1" id="email" required>
 
                 @if ($errors->has('email'))
                     <strong class="text-red-500">{{ $errors->first('email') }}</strong>
@@ -34,7 +33,7 @@
                 <div class="mt-4"></div>
 
                 <label class="text-slate-700">{{__('Password')}}</label>
-                <input class="form-input mt-1" id="password" type="password" name="password" required>
+                <input type="password" name="password" class="form-input mt-1" id="password" required>
 
                 @if ($errors->has('password'))
                     <strong class="text-red-500">{{ $errors->first('password') }}</strong>
@@ -43,7 +42,7 @@
                 <div class="mt-4"></div>
 
                 <label class="text-slate-700">{{__('Password')}}</label>
-                <input class="form-input mt-1" id="password-confirm" type="password" name="password_confirmation" required>
+                <input type="password" name="password_confirmation" class="form-input mt-1" id="password-confirm" required>
 
                 <div class="flex items-center justify-end mt-8">
                     <button type="submit" class="btn btn-primary">{{__('Create Account')}}</button>

resources/views/auth/reset-password.blade.php

@@ -24,17 +24,17 @@
 
         <div>
         	<label>{{ __('Email') }}</label>
-        	<input type="email" name="email" value="{{ old('email', $email) }}" required autofocus />
+        	<input type="email" name="email" value="{{ old('email', $email) }}" required autofocus/>
         </div>
 
         <div>
             <label>{{ __('Password') }}</label>
-            <input type="password" name="password" required autocomplete="new-password" />
+            <input type="password" name="password" autocomplete="new-password" required/>
         </div>
 
         <div>
             <label>{{ __('Confirm Password') }}</label>
-            <input type="password" name="password_confirmation" required autocomplete="new-password" />
+            <input type="password" name="password_confirmation" autocomplete="new-password" required/>
         </div>
 
         <div>

resources/views/backend/all-url.blade.php

@@ -4,7 +4,7 @@
 
 @section('content')
 <main>
-    <div class="bg-white p-4 shadow sm:rounded-md">
+    <div class="common-card-style p-4">
         <div class="flex mb-8">
             <div class="w-1/2">
                 <span class="text-2xl text-uh-1">
@@ -21,7 +21,7 @@
 
         @include('partials/messages')
 
-        @livewire('all-ulr-table')
+        @livewire('table.all-ulr-table')
     </div>
 </main>
 @endsection

resources/views/backend/dashboard.blade.php

@@ -4,7 +4,7 @@
 
 @section('content')
 <main>
-    <div class="mb-4 bg-white p-4 shadow sm:rounded-md">
+    <div class="common-card-style mb-4 p-4">
         @role('admin')
             <div class="flex flex-wrap">
                 <div class="w-full sm:w-1/4">
@@ -60,7 +60,7 @@
         @endrole
     </div>
 
-    <div class="bg-white p-4 shadow sm:rounded-md">
+    <div class="common-card-style p-4">
         <div class="flex mb-8">
             <div class="w-1/2">
                 <span class="text-2xl text-uh-1">{{__('My URLs')}}</span>
@@ -75,7 +75,7 @@
 
         @include('partials/messages')
 
-        @livewire('my-url-table')
+        @livewire('table.my-url-table')
     </div>
 </main>
 @endsection

resources/views/backend/edit.blade.php

@@ -24,11 +24,10 @@
     <div class="w-full md:w-8/12 lg:w-6/12 mt-5 md:mt-0 md:ml-4">
         <form method="post" action="{{route('short_url.edit.post', $url->getRouteKey())}}">
         @csrf
-            <div class="px-4 py-5 sm:p-6 bg-white shadow sm:rounded-tl-md sm:rounded-tr-md">
+            <div class="common-card-style sm:rounded-b-none px-4 py-5 sm:p-6">
                 <div class="grid grid-cols-6 gap-6">
                     <div class="col-span-6 lg:col-span-4">
-                        <label for="short-url" class="block font-medium text-sm text-slate-700">{{__('Short
-                            URL')}}</label>
+                        <label for="short-url" class="block font-medium text-sm text-slate-700">{{__('Short URL')}}</label>
                         <span class="short-url">{{urlDisplay($url->short_url, false)}}</span>
                     </div>
 
@@ -45,9 +44,9 @@
                     </div>
                 </div>
             </div>
-            <div class="flex items-center justify-end px-4 py-3 sm:px-6
-                text-right bg-bg-primary sm:bg-slate-50
-                border-t sm:rounded-bl-md sm:rounded-br-md sm:shadow"
+            <div class="common-card-style bg-bg-primary sm:bg-slate-50 sm:rounded-t-none
+                flex items-center justify-end px-4 py-3 sm:px-6
+                text-right border-t"
             >
                 <button type="submit" class="btn btn-primary btn-sm">
                     {{__('Save Changes')}}

resources/views/backend/user/changepassword.blade.php

@@ -19,20 +19,17 @@
     <div class="w-full md:w-8/12 lg:w-6/12 mt-5 md:mt-0 md:ml-4">
         <form method="post" action="{{route('user.change-password.post', $user->getRouteKey())}}">
         @csrf
-            <div class="px-4 py-5 sm:p-6 bg-white shadow sm:rounded-tl-md sm:rounded-tr-md">
+            <div class="common-card-style sm:rounded-b-none px-4 py-5 sm:p-6">
                 <div class="grid grid-cols-6 gap-6" x-data="{show: true}">
                     <div class="col-span-6 lg:col-span-4">
                         <label for="current-password" class="block font-medium text-sm text-slate-700">{{__('Your Password')}}</label>
-                        <input id="current-password" type="password" name="current-password"
-                            placeholder="Enter your password" class="form-input mt-1" required>
+                        <input type="password" name="current-password" placeholder="{{__('Enter your password')}}" class="form-input mt-1" required>
                     </div>
 
                     <div class="col-span-6 lg:col-span-4">
                         <label for="new-password" class="block font-medium text-sm text-slate-700">{{__('New Password')}}</label>
                         <div class="relative">
-                            <input :type="show ? 'password' : 'text'" id="new-password" name="new-password"
-                                aria-label="Enter a new password" placeholder="Enter a new password"
-                                class="form-input mt-1" required>
+                            <input name="new-password" :type="show ? 'password' : 'text'" placeholder="{{__('Enter a new password')}}" class="form-input mt-1" required>
                             <div class="absolute inset-y-0 right-0 pr-3 flex items-center text-sm leading-5">
                                 <x-icon-eye x-on:click="show=!show" ::class="{'!hidden': !show, 'block':show}" />
                                 <x-icon-eye-slash x-on:click="show=!show" ::class="{'block': !show, '!hidden':show}" />
@@ -56,9 +53,9 @@
                     </div>
                 </div>
             </div>
-            <div class="flex items-center justify-end px-4 py-3 sm:px-6
-                text-right bg-bg-primary sm:bg-slate-50
-                border-t sm:rounded-bl-md sm:rounded-br-md sm:shadow"
+            <div class="common-card-style bg-bg-primary sm:bg-slate-50 sm:rounded-t-none
+                flex items-center justify-end px-4 py-3 sm:px-6
+                text-right border-t"
             >
                 <button type="submit" class="btn btn-primary btn-sm">
                     {{__('Change Password')}}

resources/views/backend/user/index.blade.php

@@ -4,12 +4,12 @@
 
 @section('content')
 <main>
-    <div class="bg-white p-4 sm:rounded-md shadow">
+    <div class="common-card-style p-4">
         <div class="text-2xl text-uh-1 mb-8">
             <span>{{__('All Users')}}</span>
         </div>
 
-        @livewire('user-table')
+        @livewire('table.user-table')
     </div>
 </main>
 @endsection

resources/views/backend/user/profile.blade.php

@@ -19,23 +19,22 @@
     <div class="w-full md:w-8/12 lg:w-6/12 mt-5 md:mt-0 md:ml-4">
         <form method="post" action="{{route('user.update', $user->getRouteKey())}}">
         @csrf
-            <div class="px-4 py-5 sm:p-6 bg-white shadow sm:rounded-tl-md sm:rounded-tr-md">
+            <div class="common-card-style sm:rounded-b-none px-4 py-5 sm:p-6">
                 <div class="grid grid-cols-6 gap-6">
                     <div class="col-span-6 lg:col-span-4">
-                        <label for="name" class="block font-medium text-sm text-slate-700">{{__('Username')}}</label>
-                        <input value="{{$user->name}}" id="name" type="text" name="name"
-                            class="form-input bg-slate-100 text-slate-700 mt-1" disabled>
+                        <label class="block font-medium text-sm text-slate-700">{{__('Username')}}</label>
+                        <input type="text" name="name" value="{{$user->name}}" class="form-input bg-slate-100 text-slate-700 mt-1" disabled>
                         <small class="block text-red-400"><i>{{__('Usernames cannot be changed.')}}</i></small>
                     </div>
                     <div class="col-span-6 lg:col-span-4">
-                        <label for="email" class="block font-medium text-sm text-slate-700">{{__('E-mail Address')}}</label>
-                        <input value="{{$user->email}}" id="email" type="email" name="email" class="form-input mt-1">
+                        <label class="block font-medium text-sm text-slate-700">{{__('E-mail Address')}}</label>
+                        <input type="email" name="email" value="{{$user->email}}" class="form-input mt-1">
                     </div>
                 </div>
             </div>
-            <div class="flex items-center justify-end px-4 py-3 sm:px-6
-                text-right bg-bg-primary sm:bg-slate-50
-                border-t sm:rounded-bl-md sm:rounded-br-md sm:shadow"
+            <div class="common-card-style bg-bg-primary sm:bg-slate-50 sm:rounded-t-none
+                flex items-center justify-end px-4 py-3 sm:px-6
+                text-right border-t"
             >
                 <button type="submit" class="btn btn-primary btn-sm">
                     {{__('Save')}}

resources/views/frontend/homepage.blade.php

@@ -28,13 +28,13 @@
                 <form method="post" action="{{route('createshortlink')}}" class="mb-4 mt-12" id="formUrl">
                 @csrf
                     <div class="mt-1 text-center">
-                        <input type="text" name="long_url" id="inputSourceLink" value="{{ old('long_url') }}"
-                            placeholder="{{__('Shorten your link')}}"
+                        <input type="text" name="long_url" value="{{ old('long_url') }}" placeholder="{{__('Shorten your link')}}"
                             class="w-full md:w-4/6 px-2 md:px-4 h-12 sm:h-14
                                 text-xl outline-none border border-gray-200 focus:border-uh-indigo-300 rounded-t-md md:rounded-l-md md:rounded-r-none">
                         <button type="submit" id="actProcess"
                             class="w-full md:w-1/6 h-12 sm:h-14 align-top rounded-t-none md:rounded-l-none md:rounded-r-md
-                                text-lg text-white bg-uh-indigo-600 hover:bg-uh-indigo-700 focus:bg-uh-indigo-600">
+                                text-lg text-white bg-uh-indigo-600 hover:bg-uh-indigo-700 focus:bg-uh-indigo-600"
+                        >
                             {{__('Shorten')}}
                         </button>
                     </div>

resources/views/frontend/short.blade.php

@@ -39,7 +39,7 @@
         </div>
     </div>
 
-    <div class="flex flex-wrap mt-6 sm:mt-0 px-4 py-5 sm:p-6 bg-white shadow sm:rounded-md">
+    <div class="common-card-style flex flex-wrap mt-6 sm:mt-0 px-4 py-5 sm:p-6">
         @if (config('urlhub.qrcode'))
             <div class="w-full md:w-1/4 flex justify-center">
                 <img class="qrcode" src="{{$qrCode->getDataUri()}}" alt="QR Code">

resources/views/vendor/livewire-powergrid/components/frameworks/tailwind/table-base.blade.php

@@ -1,5 +1,5 @@
 <div class="power-grid flex flex-col">
-    <div class="-my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
+    <div class="-my-2 sm:-mx-6 lg:-mx-8">
         <div class="py-2 align-middle inline-block min-w-full w-full sm:px-6 lg:px-8">
 
             <div class="pg-header">

webpack.mix.js

@@ -15,7 +15,8 @@ mix.extract()
   .options({
     autoprefixer: true,
     processCssUrls: false,
-  });
+  })
+  .disableSuccessNotifications();
 
 if (!mix.inProduction()) {
   mix.webpackConfig({