Update more modal designs

resources/views/components/modal-header.blade.php

@@ -1,13 +1,19 @@
 @props(['title'])
-<div class="flex flex-shrink-0 items-center justify-between rounded-t-md p-4 bg-rose-600">
+<div class="sticky top-0 z-10 flex items-center justify-between border-b border-neutral-200 bg-white/90 px-6 py-4 backdrop-blur dark:border-neutral-700 dark:bg-neutral-900/90">
-    <!--Modal title-->
+    <div>
-    <h5 class="text-xl font-medium leading-normal text-white">
+        <h2
+            id="modalGenresLabel"
+            class="text-xl font-semibold text-neutral-900 dark:text-white"
+        >
             {{ $title }} 
-    </h5>
+        </h2>
-    <!--Close button-->
+    </div>
-    <button type="button" class="box-content text-white rounded-none border-none hover:no-underline hover:opacity-75 focus:opacity-100 focus:shadow-none focus:outline-none" data-te-modal-dismiss aria-label="Close">
+
-        <svg  xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="h-6 w-6">
+    <button
-            <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
+        type="button"
-        </svg>
+        data-te-modal-dismiss
+        class="rounded-lg p-2 text-neutral-500 transition hover:bg-neutral-100 hover:text-black dark:hover:bg-neutral-800 dark:hover:text-white"
+    >
+        ✕
     </button>
 </div>

resources/views/modals/add-to-playlist.blade.php

@@ -1,8 +1,14 @@
 @auth
-<!--Verically centered modal-->
+<div
-<div data-te-modal-init class="fixed left-0 top-0 z-[1055] hidden h-full w-full overflow-y-auto overflow-x-hidden outline-none" id="modalAddToPlaylist" tabindex="-1" aria-labelledby="Playlist" aria-modal="true" role="dialog">
+    data-te-modal-init
-    <div data-te-modal-dialog-ref class="pointer-events-none relative flex min-h-[calc(100%-1rem)] w-auto translate-y-[-50px] items-center opacity-0 transition-all duration-300 ease-in-out min-[576px]:mx-auto min-[576px]:mt-7 min-[576px]:min-h-[calc(100%-3.5rem)] min-[576px]:max-w-[95%] md:min-[576px]:max-w-[90%] lg:min-[576px]:max-w-[80%] xl:min-[576px]:max-w-[70%]  2xl:min-[576px]:max-w-[30%]">
+    id="modalAddToPlaylist"
-        <div class="pointer-events-auto relative flex w-full flex-col rounded-md border-none bg-white bg-clip-padding text-current shadow-lg outline-none dark:bg-neutral-800">
+    tabindex="-1"
+    aria-modal="true"
+    role="dialog"
+    class="fixed inset-0 z-[1055] hidden overflow-y-auto bg-black/60 backdrop-blur-sm"
+>
+    <div data-te-modal-dialog-ref class="flex min-h-screen items-center justify-center p-4">
+        <div class="relative w-full max-w-2xl overflow-hidden rounded-2xl border border-neutral-200 bg-white shadow-2xl dark:border-neutral-700 dark:bg-neutral-900">
             <x-modal-header :title="__('Add to Playlist')" />
 
             <!--Modal body-->
@@ -26,11 +32,16 @@
                     <x-input-error :messages="$errors->get('playlist')" class="mt-2" />
                 </div>
                                
-                <div class="flex flex-shrink-0 flex-wrap items-center justify-end rounded-b-md p-4">
+                <div class="flex flex-shrink-0 flex-wrap items-center justify-end rounded-b-md p-4 gap-3">
-                    <a id="playlist-cancel" class="inline-block cursor-pointer rounded bg-primary-100 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-primary-700 transition duration-150 ease-in-out hover:bg-primary-accent-100 focus:bg-primary-accent-100 focus:outline-none focus:ring-0 active:bg-primary-accent-200" data-te-modal-dismiss data-te-ripple-init data-te-ripple-color="light">
+                    <a
+                        data-te-modal-dismiss
+                        id="playlist-cancel" 
+                        class="cursor-pointer rounded-xl border border-neutral-300 px-5 py-2.5 text-sm font-medium text-neutral-700 transition hover:bg-neutral-100 dark:border-neutral-600 dark:text-neutral-200 dark:hover:bg-neutral-800">
                         Cancel
                     </a>
-                    <a id="playlist-add" class="ml-1 cursor-pointer inline-block rounded bg-rose-600 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white transition duration-150 ease-in-out hover:bg-rose-700 focus:bg-rose-600" data-te-ripple-init data-te-ripple-color="light">
+                    <a
+                        id="playlist-add" 
+                        class="cursor-pointer rounded-xl bg-rose-600 px-5 py-2.5 text-sm font-semibold text-white shadow-lg shadow-rose-600/20 transition hover:bg-rose-700">
                         Add
                     </a>
                 </div>
@@ -52,7 +63,9 @@
                 </div>
                 
                 <div class="flex flex-shrink-0 flex-wrap items-center justify-end rounded-b-md p-4">
-                    <a id="playlist-create-and-add" class="ml-1 cursor-pointer inline-block rounded bg-rose-600 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white transition duration-150 ease-in-out hover:bg-rose-700 focus:bg-rose-600" data-te-ripple-init data-te-ripple-color="light">
+                    <a 
+                        id="playlist-create-and-add" 
+                        class="cursor-pointer rounded-xl bg-rose-600 px-5 py-2.5 text-sm font-semibold text-white shadow-lg shadow-rose-600/20 transition hover:bg-rose-700">
                         Create and Add Episode
                     </a>
                 </div>

resources/views/modals/create-playlist.blade.php

@@ -1,7 +1,14 @@
-<!--Verically centered modal-->
+<div
-<div data-te-modal-init class="fixed left-0 top-0 z-[1055] hidden h-full w-full overflow-y-auto overflow-x-hidden outline-none" id="modalCreatePlaylist" tabindex="-1" aria-labelledby="Playlist" aria-modal="true" role="dialog">
+    data-te-modal-init
-    <div data-te-modal-dialog-ref class="pointer-events-none relative flex min-h-[calc(100%-1rem)] w-auto translate-y-[-50px] items-center opacity-0 transition-all duration-300 ease-in-out min-[576px]:mx-auto min-[576px]:mt-7 min-[576px]:min-h-[calc(100%-3.5rem)] min-[576px]:max-w-[95%] md:min-[576px]:max-w-[90%] lg:min-[576px]:max-w-[80%] xl:min-[576px]:max-w-[70%]  2xl:min-[576px]:max-w-[30%]">
+    id="modalCreatePlaylist"
-        <div class="pointer-events-auto relative flex w-full flex-col rounded-md border-none bg-white bg-clip-padding text-current shadow-lg outline-none dark:bg-neutral-800">
+    tabindex="-1"
+    aria-labelledby="modalCreatePlaylist"
+    aria-modal="true"
+    role="dialog"
+    class="fixed inset-0 z-[1055] hidden overflow-y-auto bg-black/60 backdrop-blur-sm"
+>
+    <div data-te-modal-dialog-ref class="flex min-h-screen items-center justify-center p-4">
+        <div class="relative w-full max-w-4xl overflow-hidden rounded-2xl border border-neutral-200 bg-white shadow-2xl dark:border-neutral-700 dark:bg-neutral-900">
             <x-modal-header :title="__('Create Playlist')" />
 
             <!--Modal body-->

resources/views/modals/download.blade.php

@@ -1,8 +1,15 @@
-<!--Verically centered modal-->
+<div
-<div data-te-modal-init class="fixed left-0 top-0 z-[1055] hidden h-full w-full overflow-y-auto overflow-x-hidden outline-none" id="modalDownload" tabindex="-1" aria-labelledby="Download" aria-modal="true" role="dialog">
+    data-te-modal-init
-  <div data-te-modal-dialog-ref class="pointer-events-none relative flex min-h-[calc(100%-1rem)] w-auto translate-y-[-50px] items-center opacity-0 transition-all duration-300 ease-in-out min-[576px]:mx-auto min-[576px]:mt-7 min-[576px]:min-h-[calc(100%-3.5rem)] min-[576px]:max-w-[95%] md:min-[576px]:max-w-[90%] lg:min-[576px]:max-w-[80%] xl:min-[576px]:max-w-[50%]  2xl:min-[576px]:max-w-[30%]">
+    id="modalDownload"
-    <div class="pointer-events-auto relative flex w-full flex-col rounded-md border-none bg-white bg-clip-padding text-current shadow-lg outline-none dark:bg-neutral-800">
+    tabindex="-1"
-        <x-modal-header :title='__("Download {$episode->title} - {$episode->episode}")' />
+    aria-labelledby="modalDownload"
+    aria-modal="true"
+    role="dialog"
+    class="fixed inset-0 z-[1055] hidden overflow-y-auto bg-black/60 backdrop-blur-sm"
+>
+    <div data-te-modal-dialog-ref class="flex min-h-screen items-center justify-center p-4">
+        <div class="relative w-full max-w-4xl overflow-hidden rounded-2xl border border-neutral-200 bg-white shadow-2xl dark:border-neutral-700 dark:bg-neutral-900">
+            <x-modal-header title="Download {{ $episode->title }} - {{ $episode->episode }}" />
 
             @php
                 $dldomains = config('hstream.download_domain');

resources/views/modals/share.blade.php

@@ -1,12 +1,15 @@
-<!--Verically centered modal-->
+<div
-<div data-te-modal-init
+    data-te-modal-init
-    class="fixed left-0 top-0 z-[1055] hidden h-full w-full overflow-y-auto overflow-x-hidden outline-none"
+    id="modalShare"
-    id="modalShare" tabindex="-1" aria-labelledby="Share" aria-modal="true" role="dialog">
+    tabindex="-1"
-    <div data-te-modal-dialog-ref
+    aria-labelledby="Share"
-        class="pointer-events-none relative flex min-h-[calc(100%-1rem)] w-auto translate-y-[-50px] items-center opacity-0 transition-all duration-300 ease-in-out min-[576px]:mx-auto min-[576px]:mt-7 min-[576px]:min-h-[calc(100%-3.5rem)] min-[576px]:max-w-[95%] md:min-[576px]:max-w-[90%] lg:min-[576px]:max-w-[80%] xl:min-[576px]:max-w-[50%] 2xl:min-[576px]:max-w-[25%]">
+    aria-modal="true"
-        <div
+    role="dialog"
-            class="pointer-events-auto relative flex w-full flex-col rounded-md border-none bg-white bg-clip-padding text-current shadow-lg outline-none dark:bg-neutral-800">
+    class="fixed inset-0 z-[1055] hidden overflow-y-auto bg-black/60 backdrop-blur-sm"
-            <x-modal-header :title='__("Share {$episode->title} - {$episode->episode}")' />
+>
+    <div data-te-modal-dialog-ref class="flex min-h-screen items-center justify-center p-4">
+        <div class="relative w-full max-w-2xl overflow-hidden rounded-2xl border border-neutral-200 bg-white shadow-2xl dark:border-neutral-700 dark:bg-neutral-900">
+            <x-modal-header title="Share {{ $episode->title }} - {{ $episode->episode }}" />
 
             <!--Modal body-->
             <div class="relative p-4">
@@ -15,8 +18,8 @@
                     $currentUrl = url()->current();
                     $text = 'Watch ' . $episode->title . ' - ' . $episode->episode . ' in 4k on hstream.moe!';
                 @endphp
-                <div class="flex flex-wrap justify-stretch">
+                <div class="flex flex-wrap justify-stretch gap-3">
-                    <a class="border-2 duration-200 ease inline-flex items-center mb-1 mr-1 transition py-3 px-5 rounded-lg text-white border-rose-600 bg-rose-600 hover:bg-rose-700 hover:border-rose-700"
+                    <a class="cursor-pointer inline-flex items-center rounded-xl bg-rose-600 px-5 py-2.5 text-sm font-semibold text-white shadow-lg shadow-rose-600/20 transition hover:bg-rose-700"
                         target="_blank" rel="noopener"
                         href="https://facebook.com/sharer/sharer.php?u={{ $currentUrl }}"
                         aria-label="Share on Facebook" draggable="false">
@@ -29,7 +32,7 @@
                         </svg>
                         <span class="ml-2">Facebook</span>
                     </a>
-                    <a class="border-2 duration-200 ease inline-flex items-center mb-1 mr-1 transition py-3 px-5 rounded-lg text-white border-rose-600 bg-rose-600 hover:bg-rose-700 hover:border-rose-700"
+                    <a class="cursor-pointer inline-flex items-center rounded-xl bg-rose-600 px-5 py-2.5 text-sm font-semibold text-white shadow-lg shadow-rose-600/20 transition hover:bg-rose-700"
                         target="_blank" rel="noopener"
                         href="https://twitter.com/intent/tweet?url={{ $currentUrl }}&amp;text={{ $text }}"
                         aria-label="Share on Twitter" draggable="false">
@@ -42,7 +45,7 @@
                         </svg>
                         <span class="ml-2">Twitter</span>
                     </a>
-                    <a class="border-2 duration-200 ease inline-flex items-center mb-1 mr-1 transition py-3 px-5 rounded-lg text-white border-rose-600 bg-rose-600 hover:bg-rose-700 hover:border-rose-700"
+                    <a class="cursor-pointer inline-flex items-center rounded-xl bg-rose-600 px-5 py-2.5 text-sm font-semibold text-white shadow-lg shadow-rose-600/20 transition hover:bg-rose-700"
                         target="_blank" rel="noopener"
                         href="https://reddit.com/submit/?url={{ $currentUrl }}&amp;resubmit=true&amp;title={{ $text }}"
                         aria-label="Share on Reddit" draggable="false">
@@ -55,7 +58,7 @@
                         </svg>
                         <span class="ml-2">Reddit</span>
                     </a>
-                    <a class="border-2 duration-200 ease inline-flex items-center mb-1 mr-1 transition py-3 px-5 rounded-lg text-white border-rose-600 bg-rose-600 hover:bg-rose-700 hover:border-rose-700"
+                    <a class="cursor-pointer inline-flex items-center rounded-xl bg-rose-600 px-5 py-2.5 text-sm font-semibold text-white shadow-lg shadow-rose-600/20 transition hover:bg-rose-700"
                         target="_blank" rel="noopener"
                         href="https://wa.me/?text={{ $text }}%20{{ $currentUrl }}"
                         aria-label="Share on Whatsapp" draggable="false" style="">
@@ -68,7 +71,7 @@
                         </svg>
                         <span class="ml-2">Whatsapp</span>
                     </a>
-                    <a class="border-2 duration-200 ease inline-flex items-center mb-1 mr-1 transition py-3 px-5 rounded-lg text-white border-rose-600 bg-rose-600 hover:bg-rose-700 hover:border-rose-700"
+                    <a class="cursor-pointer inline-flex items-center rounded-xl bg-rose-600 px-5 py-2.5 text-sm font-semibold text-white shadow-lg shadow-rose-600/20 transition hover:bg-rose-700"
                         target="_blank" rel="noopener"
                         href="https://telegram.me/share/url?text={{ $text }}&amp;url={{ $currentUrl }}"
                         aria-label="Share on Telegram" draggable="false">
@@ -81,7 +84,7 @@
                         </svg>
                         <span class="ml-2">Telegram</span>
                     </a>
-                    <a class="border-2 duration-200 ease inline-flex items-center mb-1 mr-1 transition py-3 px-5 rounded-lg text-white border-rose-600 bg-rose-600 hover:bg-rose-700 hover:border-rose-700"
+                    <a class="cursor-pointer inline-flex items-center rounded-xl bg-rose-600 px-5 py-2.5 text-sm font-semibold text-white shadow-lg shadow-rose-600/20 transition hover:bg-rose-700"
                         target="_blank" rel="noopener"
                         href="mailto:?subject={{ $text }}&amp;body={{ $currentUrl }}"
                         aria-label="Share by Email" draggable="false">
@@ -100,7 +103,7 @@
                     <div>
                         <button id="copy-button" type="button" data-te-clipboard-init
                             data-te-clipboard-target="#copy-target" data-te-ripple-init data-te-ripple-color="light"
-                            class="inline-block rounded border-rose-600 bg-rose-600 hover:bg-rose-700 hover:border-rose-700 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white transition duration-150 ease-in-out focus:bg-rose-600 focus:outline-none focus:ring-0 active:bg-rose-700">
+                            class="cursor-pointer rounded-xl bg-rose-600 px-5 py-2.5 text-sm font-semibold text-white shadow-lg shadow-rose-600/20 transition hover:bg-rose-700">
                             Copy
                         </button>
                     </div>