Migrate the settings page to Tailwind UI and Blade UI Kit

app/Http/Controllers/Settings/PasswordController.php

@@ -15,17 +15,12 @@ public function __construct()
         $this->middleware(Authenticate::class);
     }
 
-    public function edit()
-    {
-        return view('users.settings.password');
-    }
-
     public function update(UpdatePasswordRequest $request)
     {
         $this->dispatchNow(new UpdatePassword(Auth::user(), $request->newPassword()));
 
         $this->success('settings.password.updated');
 
-        return redirect()->route('settings.password');
+        return redirect()->route('settings.profile');
     }
 }

app/Http/Controllers/Settings/ProfileController.php

@@ -20,7 +20,7 @@ public function __construct()
 
     public function edit()
     {
-        return view('users.settings.profile');
+        return view('users.settings.settings');
     }
 
     public function update(UpdateProfileRequest $request)

config/blade-ui-kit.php

@@ -0,0 +1,125 @@
+<?php
+
+use BladeUIKit\Components;
+
+return [
+
+    /*
+    |--------------------------------------------------------------------------
+    | Components
+    |--------------------------------------------------------------------------
+    |
+    | Below you reference all components that should be loaded for your app.
+    | By default all components from Blade UI Kit are loaded in. You can
+    | disable or overwrite any component class or alias that you want.
+    |
+    */
+
+    'components' => [
+        // 'alert' => Components\Alerts\Alert::class,
+        'avatar' => Components\Support\Avatar::class,
+        // 'carbon' => Components\DateTime\Carbon::class,
+        // 'checkbox' => Components\Forms\Inputs\Checkbox::class,
+        // 'color-picker' => Components\Forms\Inputs\ColorPicker::class,
+        // 'countdown' => Components\DateTime\Countdown::class,
+        // 'cron' => Components\Support\Cron::class,
+        // 'dropdown' => Components\Navigation\Dropdown::class,
+        // 'easy-mde' => Components\Editors\EasyMDE::class,
+        'email' => Components\Forms\Inputs\Email::class,
+        // 'error' => Components\Forms\Error::class,
+        'form' => Components\Forms\Form::class,
+        // 'form-button' => Components\Buttons\FormButton::class,
+        // 'html' => Components\Layouts\Html::class,
+        'input' => Components\Forms\Inputs\Input::class,
+        'label' => Components\Forms\Label::class,
+        // 'logout' => Components\Buttons\Logout::class,
+        // 'mapbox' => Components\Maps\Mapbox::class,
+        // 'markdown' => Components\Markdown\Markdown::class,
+        'password' => Components\Forms\Inputs\Password::class,
+        // 'pikaday' => Components\Forms\Inputs\Pikaday::class,
+        // 'social-meta' => Components\Layouts\SocialMeta::class,
+        'textarea' => Components\Forms\Inputs\Textarea::class,
+        // 'toc' => Components\Markdown\ToC::class,
+        // 'trix' => Components\Editors\Trix::class,
+        // 'unsplash' => Components\Support\Unsplash::class,
+    ],
+
+    /*
+    |--------------------------------------------------------------------------
+    | Livewire Components
+    |--------------------------------------------------------------------------
+    |
+    | Below you reference all the Livewire components that should be loaded
+    | for your app. By default all components from Blade UI Kit are loaded in.
+    |
+    */
+
+    'livewire' => [
+        //
+    ],
+
+    /*
+    |--------------------------------------------------------------------------
+    | Components Prefix
+    |--------------------------------------------------------------------------
+    |
+    | This value will set a prefix for all Blade UI Kit components.
+    | By default it's empty. This is useful if you want to avoid
+    | collision with components from other libraries.
+    |
+    | If set with "buk", for example, you can reference components like:
+    |
+    | <x-buk-easy-mde />
+    |
+    */
+
+    'prefix' => '',
+
+    /*
+    |--------------------------------------------------------------------------
+    | Third Party Asset Libraries
+    |--------------------------------------------------------------------------
+    |
+    | These settings hold reference to all third party libraries and their
+    | asset files served through a CDN. Individual components can require
+    | these asset files through their static `$assets` property.
+    |
+    */
+
+    'assets' => [
+
+        'alpine' => 'https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.3.5/dist/alpine.min.js',
+
+        'easy-mde' => [
+            'https://unpkg.com/easymde/dist/easymde.min.css',
+            'https://unpkg.com/easymde/dist/easymde.min.js',
+        ],
+
+        'mapbox' => [
+            'https://api.mapbox.com/mapbox-gl-js/v1.8.1/mapbox-gl.css',
+            'https://api.mapbox.com/mapbox-gl-js/v1.8.1/mapbox-gl.js',
+        ],
+
+        'moment' => [
+            'https://cdn.jsdelivr.net/npm/moment@2.26.0/moment.min.js',
+            'https://cdn.jsdelivr.net/npm/moment-timezone@0.5.31/builds/moment-timezone-with-data.min.js',
+        ],
+
+        'pickr' => [
+            'https://cdn.jsdelivr.net/npm/@simonwep/pickr/dist/themes/classic.min.css',
+            'https://cdn.jsdelivr.net/npm/@simonwep/pickr/dist/pickr.min.js',
+        ],
+
+        'pikaday' => [
+            'https://cdn.jsdelivr.net/npm/pikaday/css/pikaday.css',
+            'https://cdn.jsdelivr.net/npm/pikaday/pikaday.js',
+        ],
+
+        'trix' => [
+            'https://unpkg.com/trix@1.2.3/dist/trix.css',
+            'https://unpkg.com/trix@1.2.3/dist/trix.js',
+        ],
+
+    ],
+
+];

resources/css/forms.css

@@ -1,104 +1,104 @@
-.form-group {
+.standard .form-group {
     @apply flex flex-col mb-4;
 }
 
-label {
+.standard label {
     @apply mb-1 text-gray-600 block uppercase text-sm;
 }
 
-input[type='text'],
-input[type='password'],
-input[type='email'],
-select {
+.standard input[type='text'],
+.standard input[type='password'],
+.standard input[type='email'],
+.standard select {
     @apply h-12;
 }
 
-input[type='text'],
-input[type='password'],
-input[type='email'],
-textarea,
-select {
+.standard input[type='text'],
+.standard input[type='password'],
+.standard input[type='email'],
+.standard textarea,
+.standard select {
     @apply rounded border-2 p-3 w-full;
 }
 
-select {
+.standard select {
     @apply appearance-none;
 }
 
-input.nav-search {
+.standard input.nav-search {
     @apply pl-10 pr-3 py-2;
 }
 
-input[type='checkbox'] {
+.standard input[type='checkbox'] {
     @apply mr-1;
 }
 
-.help-block {
+.standard .help-block {
     @apply text-red-500 text-sm;
 }
 
 /** Markdown editor **/
-.form-group .editor {
+.standard .form-group .editor {
     @apply rounded-t-none;
 }
 
-.form-group .editor-toolbar {
+.standard .form-group .editor-toolbar {
     @apply border-2 border-b-0 rounded rounded-b-none border-gray-300;
 }
 
-.form-group .CodeMirror {
+.standard .form-group .CodeMirror {
     @apply border-2 rounded rounded-t-none border-gray-300;
 }
 
 /** Choices.js **/
-.choices__input.choices__input--cloned {
+.standard .choices__input.choices__input--cloned {
     @apply hidden;
 }
 
-.choices__inner {
+.standard .choices__inner {
     @apply rounded border-2 border-gray-300 w-full bg-white h-12 p-2 flex items-center !important;
 }
 
-.choices__list--dropdown {
+.standard .choices__list--dropdown {
     @apply border-2 border-gray-300 !important;
 }
 
-.choices__list--single {
+.standard .choices__list--single {
     @apply p-0 !important;
 }
 
-.choices__item {
+.standard .choices__item {
     @apply text-sm bg-gray-200 text-gray-700 cursor-pointer rounded px-2 py-1 my-0 border-0 !important;
 }
 
-.choices__item.choices__item--choice {
+.standard .choices__item.choices__item--choice {
     @apply rounded-none py-2 !important;
 }
 
-.choices__item.choices__item--choice.choices__item--selectable {
+.standard .choices__item.choices__item--choice.choices__item--selectable {
     @apply bg-white rounded-none text-gray-700 p-2 !important;
 }
 
-.choices__item.choices__item--choice.choices__item--selectable:hover {
+.standard .choices__item.choices__item--choice.choices__item--selectable:hover {
     @apply bg-gray-200 !important;
 }
 
-.choices__item.choices__item--selectable {
+.standard .choices__item.choices__item--selectable {
     @apply bg-lio-500 border-lio-500 text-white !important;
 }
 
-.choices__list--single > .choices__item.choices__item--selectable {
+.standard .choices__list--single > .choices__item.choices__item--selectable {
     @apply bg-white text-gray-700 !important;
 }
 
-.choices__item.is-highlighted {
+.standard .choices__item.is-highlighted {
     @apply bg-lio-600 border-lio-600 text-white !important;
 }
 
-.choices[data-type*='select-one']:after {
+.standard .choices[data-type*='select-one']:after {
     border-color: theme('colors.gray.500') transparent transparent transparent !important;
 }
 
-.choices[data-type*='select-one'] .choices__input {
+.standard .choices[data-type*='select-one'] .choices__input {
     @apply rounded-none border-b-2 border-gray-300 !important;
 }

resources/helpers.php

@@ -10,6 +10,16 @@ function active($routes, bool $condition = true): string
     }
 }
 
+if (! function_exists('is_active')) {
+    /**
+     * Determines if the given routes are active.
+     */
+    function is_active($routes): string
+    {
+        return call_user_func_array([app('router'), 'is'], (array) $routes);
+    }
+}
+
 if (! function_exists('md_to_html')) {
     /**
      * Convert Markdown to HTML.

resources/views/components/buttons/danger-button.blade.php

@@ -0,0 +1,7 @@
+@props(['type' => 'button'])
+
+<span class="inline-flex rounded-md shadow-sm">
+    <button type="{{ $type }}" class="bg-red-600 border border-transparent rounded-md py-2 px-4 inline-flex justify-center text-sm leading-5 font-medium text-white hover:bg-red-700 focus:outline-none focus:border-red-900 focus:shadow-outline-red active:bg-red-900 transition duration-150 ease-in-out" {{ $attributes }}>
+        {{ $slot }}
+    </button>
+</span>

resources/views/components/buttons/primary-button.blade.php

@@ -0,0 +1,7 @@
+@props(['type' => 'button'])
+
+<span class="inline-flex rounded-md shadow-sm">
+    <button type="{{ $type }}" class="bg-lio-600 border border-transparent rounded-md py-2 px-4 inline-flex justify-center text-sm leading-5 font-medium text-white hover:bg-lio-700 focus:outline-none focus:border-lio-900 focus:shadow-outline-lio active:bg-lio-900 transition duration-150 ease-in-out">
+        {{ $slot }}
+    </button>
+</span>

resources/views/layouts/base.blade.php

@@ -33,7 +33,7 @@
     @livewireStyles
 </head>
 
-<body class="{{ $bodyClass ?? '' }} font-sans bg-white" x-data="{ activeModal: null }">
+<body class="{{ $bodyClass ?? '' }} {{ isset($isTailwindUi) && $isTailwindUi ? '' : 'standard' }} font-sans bg-white" x-data="{ activeModal: null }">
 
 @include('layouts._ads._banner')
 @include('layouts._nav')