✨ Add new color palette and update components for dark mode consistency

Author: HassanZahirnia

resources/views/components/alert-beta.blade.php

@@ -1,5 +1,5 @@
 <div
-    class="relative z-0 mt-5 flex items-center gap-6 overflow-hidden rounded-2xl bg-yellow-50/50 px-6 py-5 ring-1 ring-black/5 dark:bg-gray-900/40"
+    class="dark:bg-mirage relative z-0 mt-5 flex items-center gap-6 overflow-hidden rounded-2xl bg-yellow-50/50 px-6 py-5 ring-1 ring-black/5"
     role="alert"
     aria-labelledby="beta-alert-title"
     aria-describedby="beta-alert-description"

resources/views/components/footer.blade.php

@@ -96,7 +96,7 @@ class="flex flex-wrap items-center justify-center gap-2.5 *:opacity-0"
         >
             <a
                 href="/newsletter"
-                class="group relative z-0 flex items-center gap-6 overflow-hidden rounded-2xl bg-cyan-50/50 py-5 pl-6 pr-7 ring-1 ring-black/5 transition duration-300 ease-in-out hover:bg-cyan-50 hover:ring-black/10 md:max-w-lg dark:bg-gray-900/40 dark:hover:bg-gray-900"
+                class="dark:bg-mirage dark:hover:ring-cloud dark:hover:bg-haiti group relative z-0 flex items-center gap-6 overflow-hidden rounded-2xl bg-cyan-50/50 py-5 pl-6 pr-7 ring-1 ring-black/5 transition duration-300 ease-in-out hover:bg-cyan-50 hover:ring-black/10 md:max-w-lg"
             >
                 {{-- Decorative circle --}}
                 <div

resources/views/components/icons/pinkary.blade.php

@@ -1,7 +1,16 @@
 <svg
     {{ $attributes }}
-    viewBox="0 0 1024 1024" fill="none">
-    <circle cx="512" cy="512" r="512" fill="currentColor"/>
-    <path fill-rule="evenodd" clip-rule="evenodd" d="M375.022 782.938H385.585L388.504 772.787C398.2 739.062 408.734 701.557 420.107 660.277L420.117 660.242C430.551 621.984 441.163 583.726 451.952 545.468C459.439 545.219 468.939 544.603 480.341 543.653C496.01 542.347 513.484 539.967 532.73 536.546C552.862 533.044 572.949 527.799 592.987 520.829C613.395 513.731 632.329 504.389 649.748 492.785C668.139 480.818 683.061 465.944 694.293 448.16C706.045 429.552 711.61 407.7 711.61 383.228C711.61 360.057 705.43 339.287 692.671 321.539C680.899 304.178 665.246 290.011 646.011 278.988C627.549 267.755 607.365 259.479 585.534 254.119C563.876 248.384 542.511 245.479 521.468 245.479C501.989 245.479 482.531 247.471 463.109 251.444C444.074 255.338 426.237 260.117 409.618 265.802L409.563 265.821L409.509 265.84C393.722 271.387 379.742 276.759 367.603 281.962L359.101 285.605V294.855C359.101 302.344 362.725 308.746 366.475 313.567C370.135 318.273 374.328 322.466 379.035 326.127L379.314 326.344L379.603 326.546C382.092 328.289 384.664 329.879 387.238 331.08C389.608 332.186 393.095 333.5 397.115 333.5C401.138 333.5 405.052 332.434 408.337 331.251C411.797 330.005 415.532 328.268 419.459 326.189L419.737 326.042L420.008 325.883C426.54 322.04 435.277 317.652 446.368 312.723L446.563 312.636L446.756 312.544C449.831 311.063 453.133 309.652 456.668 308.316C445.353 334.018 434.841 358.926 425.133 383.039L425.104 383.112L425.075 383.185C412.412 415.687 400.171 448.189 388.351 480.694L388.333 480.742L388.316 480.791C376.911 512.894 365.511 546.462 354.116 581.491C342.751 616.005 330.546 653.252 317.501 693.23L317.464 693.343L317.429 693.456C315.782 698.808 313.922 704.595 311.847 710.82L311.712 711.227L311.601 711.642C309.662 718.912 308.603 726.031 308.603 732.931C308.603 749.453 317.664 762.126 331.69 770.758L331.79 770.819L331.891 770.879C345.313 778.833 359.763 782.938 375.022 782.938ZM615.889 423.985C605.825 438.893 592.099 451.594 574.375 462.004C556.626 472.253 536.548 480.43 514.052 486.456C498.109 490.726 482.19 493.892 466.291 495.961C477.084 459.602 488.321 424.611 500.001 390.987L500.016 390.944C512.485 354.67 525.4 323.063 538.731 296.052C553.277 297.171 567.056 300.298 580.123 305.398L580.176 305.418L580.229 305.438C595.921 311.416 608.16 319.997 617.399 331.012L617.483 331.112L617.569 331.211C626.251 341.179 631.163 354.709 631.163 373.128C631.163 392.812 626.014 409.517 616.024 423.788L615.955 423.886L615.889 423.985Z" fill="white"/>
-    <path d="M560.932 743.369C560.932 766.565 542.128 785.369 518.932 785.369C495.736 785.369 476.932 766.565 476.932 743.369C476.932 720.173 495.736 701.369 518.932 701.369C542.128 701.369 560.932 720.173 560.932 743.369Z" fill="white"/>
+    viewBox="0 0 1024 1024"
+    fill="none"
+>
+    <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M375.022 782.938H385.585L388.504 772.787C398.2 739.062 408.734 701.557 420.107 660.277L420.117 660.242C430.551 621.984 441.163 583.726 451.952 545.468C459.439 545.219 468.939 544.603 480.341 543.653C496.01 542.347 513.484 539.967 532.73 536.546C552.862 533.044 572.949 527.799 592.987 520.829C613.395 513.731 632.329 504.389 649.748 492.785C668.139 480.818 683.061 465.944 694.293 448.16C706.045 429.552 711.61 407.7 711.61 383.228C711.61 360.057 705.43 339.287 692.671 321.539C680.899 304.178 665.246 290.011 646.011 278.988C627.549 267.755 607.365 259.479 585.534 254.119C563.876 248.384 542.511 245.479 521.468 245.479C501.989 245.479 482.531 247.471 463.109 251.444C444.074 255.338 426.237 260.117 409.618 265.802L409.563 265.821L409.509 265.84C393.722 271.387 379.742 276.759 367.603 281.962L359.101 285.605V294.855C359.101 302.344 362.725 308.746 366.475 313.567C370.135 318.273 374.328 322.466 379.035 326.127L379.314 326.344L379.603 326.546C382.092 328.289 384.664 329.879 387.238 331.08C389.608 332.186 393.095 333.5 397.115 333.5C401.138 333.5 405.052 332.434 408.337 331.251C411.797 330.005 415.532 328.268 419.459 326.189L419.737 326.042L420.008 325.883C426.54 322.04 435.277 317.652 446.368 312.723L446.563 312.636L446.756 312.544C449.831 311.063 453.133 309.652 456.668 308.316C445.353 334.018 434.841 358.926 425.133 383.039L425.104 383.112L425.075 383.185C412.412 415.687 400.171 448.189 388.351 480.694L388.333 480.742L388.316 480.791C376.911 512.894 365.511 546.462 354.116 581.491C342.751 616.005 330.546 653.252 317.501 693.23L317.464 693.343L317.429 693.456C315.782 698.808 313.922 704.595 311.847 710.82L311.712 711.227L311.601 711.642C309.662 718.912 308.603 726.031 308.603 732.931C308.603 749.453 317.664 762.126 331.69 770.758L331.79 770.819L331.891 770.879C345.313 778.833 359.763 782.938 375.022 782.938ZM615.889 423.985C605.825 438.893 592.099 451.594 574.375 462.004C556.626 472.253 536.548 480.43 514.052 486.456C498.109 490.726 482.19 493.892 466.291 495.961C477.084 459.602 488.321 424.611 500.001 390.987L500.016 390.944C512.485 354.67 525.4 323.063 538.731 296.052C553.277 297.171 567.056 300.298 580.123 305.398L580.176 305.418L580.229 305.438C595.921 311.416 608.16 319.997 617.399 331.012L617.483 331.112L617.569 331.211C626.251 341.179 631.163 354.709 631.163 373.128C631.163 392.812 626.014 409.517 616.024 423.788L615.955 423.886L615.889 423.985Z"
+        fill="currentColor"
+    />
+    <path
+        d="M560.932 743.369C560.932 766.565 542.128 785.369 518.932 785.369C495.736 785.369 476.932 766.565 476.932 743.369C476.932 720.173 495.736 701.369 518.932 701.369C542.128 701.369 560.932 720.173 560.932 743.369Z"
+        fill="currentColor"
+    />
 </svg>

resources/views/components/link-button.blade.php

@@ -1,6 +1,6 @@
 <a
     {{ $attributes }}
-    class="grid w-full max-w-72 grid-cols-1 gap-0.5 rounded-xl bg-zinc-100/80 p-5 transition duration-300 ease-in-out hover:bg-zinc-200/60 dark:bg-gray-900/40 dark:hover:bg-gray-900/60"
+    class="dark:bg-mirage dark:hover:ring-cloud dark:hover:bg-haiti grid w-full max-w-72 grid-cols-1 gap-0.5 rounded-xl bg-zinc-100/80 p-5 transition duration-300 ease-in-out hover:bg-zinc-200/60 dark:ring-1 dark:ring-transparent"
 >
     {{ $slot }}
 </a>

resources/views/components/mobile-pricing.blade.php

@@ -78,7 +78,7 @@ class="mt-10 grid grid-cols-[repeat(auto-fill,minmax(19rem,1fr))] items-start ga
     >
         {{-- Mini Plan --}}
         <div
-            class="rounded-2xl bg-gray-100 p-7 opacity-0 dark:bg-gray-900/40"
+            class="dark:bg-mirage rounded-2xl bg-gray-100 p-7 opacity-0"
             aria-labelledby="pro-plan-heading"
         >
             {{-- Plan Name --}}
@@ -121,7 +121,7 @@ class="size-5 shrink-0"
             {{-- Button --}}
             <a
                 href="https://checkout.anystack.sh/nativephp-ios/9e6a5f7c-1e71-4a1e-9cfa-33bb3c0ebb5d"
-                class="my-5 block w-full rounded-2xl bg-zinc-200 py-4 text-center text-sm font-medium transition duration-200 ease-in-out hover:bg-zinc-800 hover:text-white dark:bg-gray-900 dark:hover:bg-slate-700/40"
+                class="my-5 block w-full rounded-2xl bg-zinc-200 py-4 text-center text-sm font-medium transition duration-200 ease-in-out hover:bg-zinc-800 hover:text-white dark:bg-slate-700/30 dark:hover:bg-slate-700/40"
                 aria-label="Get started with Mini plan"
             >
                 Get started
@@ -185,7 +185,7 @@ class="space-y-2.5 text-sm"
             >
                 <div class="flex items-center gap-2">
                     <div
-                        class="grid size-7 place-items-center rounded-xl bg-[#D4FD7D] dark:bg-[#d68ffe] dark:text-black"
+                        class="grid size-7 shrink-0 place-items-center rounded-xl bg-[#D4FD7D] dark:bg-[#d68ffe] dark:text-black"
                         aria-hidden="true"
                     >
                         <x-icons.checkmark class="size-5 shrink-0" />
@@ -194,7 +194,7 @@ class="grid size-7 place-items-center rounded-xl bg-[#D4FD7D] dark:bg-[#d68ffe]
                 </div>
                 <div class="flex items-center gap-2">
                     <div
-                        class="grid size-7 place-items-center rounded-xl bg-[#D4FD7D] dark:bg-[#d68ffe] dark:text-black"
+                        class="grid size-7 shrink-0 place-items-center rounded-xl bg-[#D4FD7D] dark:bg-[#d68ffe] dark:text-black"
                         aria-hidden="true"
                     >
                         <x-icons.checkmark class="size-5 shrink-0" />
@@ -205,7 +205,7 @@ class="grid size-7 place-items-center rounded-xl bg-[#D4FD7D] dark:bg-[#d68ffe]
                 </div>
                 <div class="flex items-center gap-2">
                     <div
-                        class="grid size-7 place-items-center rounded-xl bg-zinc-200 dark:bg-gray-700/50"
+                        class="grid size-7 shrink-0 place-items-center rounded-xl bg-zinc-200 dark:bg-gray-700/50"
                         aria-hidden="true"
                     >
                         <x-icons.xmark
@@ -216,7 +216,7 @@ class="size-2.5 shrink-0 dark:opacity-70"
                 </div>
                 <div class="flex items-center gap-2">
                     <div
-                        class="grid size-7 place-items-center rounded-xl bg-zinc-200 dark:bg-gray-700/50"
+                        class="grid size-7 shrink-0 place-items-center rounded-xl bg-zinc-200 dark:bg-gray-700/50"
                         aria-hidden="true"
                     >
                         <x-icons.xmark
@@ -227,7 +227,7 @@ class="size-2.5 shrink-0 dark:opacity-70"
                 </div>
                 <div class="flex items-center gap-2">
                     <div
-                        class="grid size-7 place-items-center rounded-xl bg-zinc-200 dark:bg-gray-700/50"
+                        class="grid size-7 shrink-0 place-items-center rounded-xl bg-zinc-200 dark:bg-gray-700/50"
                         aria-hidden="true"
                     >
                         <x-icons.xmark
@@ -241,7 +241,7 @@ class="size-2.5 shrink-0 dark:opacity-70"
 
         {{-- Pro Plan --}}
         <div
-            class="rounded-2xl bg-gray-100 p-7 opacity-0 dark:bg-gray-900/40"
+            class="dark:bg-mirage rounded-2xl bg-gray-100 p-7 opacity-0"
             aria-labelledby="teams-plan-heading"
         >
             {{-- Plan Name --}}
@@ -284,7 +284,7 @@ class="size-5 shrink-0"
             {{-- Button --}}
             <a
                 href="https://checkout.anystack.sh/nativephp-ios/9e02463f-0602-496c-ab33-073b899badae"
-                class="my-5 block w-full rounded-2xl bg-zinc-200 py-4 text-center text-sm font-medium transition duration-200 ease-in-out hover:bg-zinc-800 hover:text-white dark:bg-gray-900 dark:hover:bg-slate-700/40"
+                class="my-5 block w-full rounded-2xl bg-zinc-200 py-4 text-center text-sm font-medium transition duration-200 ease-in-out hover:bg-zinc-800 hover:text-white dark:bg-slate-700/30 dark:hover:bg-slate-700/40"
                 aria-label="Get started with Pro plan"
             >
                 Get started
@@ -348,7 +348,7 @@ class="space-y-2.5 text-sm"
             >
                 <div class="flex items-center gap-2">
                     <div
-                        class="grid size-7 place-items-center rounded-xl bg-[#D4FD7D] dark:bg-[#d68ffe] dark:text-black"
+                        class="grid size-7 shrink-0 place-items-center rounded-xl bg-[#D4FD7D] dark:bg-[#d68ffe] dark:text-black"
                         aria-hidden="true"
                     >
                         <x-icons.checkmark class="size-5 shrink-0" />
@@ -357,7 +357,7 @@ class="grid size-7 place-items-center rounded-xl bg-[#D4FD7D] dark:bg-[#d68ffe]
                 </div>
                 <div class="flex items-center gap-2">
                     <div
-                        class="grid size-7 place-items-center rounded-xl bg-[#D4FD7D] dark:bg-[#d68ffe] dark:text-black"
+                        class="grid size-7 shrink-0 place-items-center rounded-xl bg-[#D4FD7D] dark:bg-[#d68ffe] dark:text-black"
                         aria-hidden="true"
                     >
                         <x-icons.checkmark class="size-5 shrink-0" />
@@ -368,7 +368,7 @@ class="grid size-7 place-items-center rounded-xl bg-[#D4FD7D] dark:bg-[#d68ffe]
                 </div>
                 <div class="flex items-center gap-2">
                     <div
-                        class="grid size-7 place-items-center rounded-xl bg-zinc-200 dark:bg-gray-700/50"
+                        class="grid size-7 shrink-0 place-items-center rounded-xl bg-zinc-200 dark:bg-gray-700/50"
                         aria-hidden="true"
                     >
                         <x-icons.xmark
@@ -379,7 +379,7 @@ class="size-2.5 shrink-0 dark:opacity-70"
                 </div>
                 <div class="flex items-center gap-2">
                     <div
-                        class="grid size-7 place-items-center rounded-xl bg-zinc-200 dark:bg-gray-700/50"
+                        class="grid size-7 shrink-0 place-items-center rounded-xl bg-zinc-200 dark:bg-gray-700/50"
                         aria-hidden="true"
                     >
                         <x-icons.xmark
@@ -390,7 +390,7 @@ class="size-2.5 shrink-0 dark:opacity-70"
                 </div>
                 <div class="flex items-center gap-2">
                     <div
-                        class="grid size-7 place-items-center rounded-xl bg-zinc-200 dark:bg-gray-700/50"
+                        class="grid size-7 shrink-0 place-items-center rounded-xl bg-zinc-200 dark:bg-gray-700/50"
                         aria-hidden="true"
                     >
                         <x-icons.xmark
@@ -519,7 +519,7 @@ class="space-y-2.5 text-sm"
             >
                 <div class="flex items-center gap-2">
                     <div
-                        class="grid size-7 place-items-center rounded-xl bg-[#D4FD7D] dark:bg-[#d68ffe] dark:text-black"
+                        class="grid size-7 shrink-0 place-items-center rounded-xl bg-[#D4FD7D] dark:bg-[#d68ffe] dark:text-black"
                         aria-hidden="true"
                     >
                         <x-icons.checkmark class="size-5 shrink-0" />
@@ -530,7 +530,7 @@ class="grid size-7 place-items-center rounded-xl bg-[#D4FD7D] dark:bg-[#d68ffe]
                 </div>
                 <div class="flex items-center gap-2">
                     <div
-                        class="grid size-7 place-items-center rounded-xl bg-[#D4FD7D] dark:bg-[#d68ffe] dark:text-black"
+                        class="grid size-7 shrink-0 place-items-center rounded-xl bg-[#D4FD7D] dark:bg-[#d68ffe] dark:text-black"
                         aria-hidden="true"
                     >
                         <x-icons.checkmark class="size-5 shrink-0" />
@@ -539,7 +539,7 @@ class="grid size-7 place-items-center rounded-xl bg-[#D4FD7D] dark:bg-[#d68ffe]
                 </div>
                 <div class="flex items-center gap-2">
                     <div
-                        class="grid size-7 place-items-center rounded-xl bg-[#D4FD7D] dark:bg-[#d68ffe] dark:text-black"
+                        class="grid size-7 shrink-0 place-items-center rounded-xl bg-[#D4FD7D] dark:bg-[#d68ffe] dark:text-black"
                         aria-hidden="true"
                     >
                         <x-icons.checkmark class="size-5 shrink-0" />
@@ -548,7 +548,7 @@ class="grid size-7 place-items-center rounded-xl bg-[#D4FD7D] dark:bg-[#d68ffe]
                 </div>
                 <div class="flex items-center gap-2">
                     <div
-                        class="grid size-7 place-items-center rounded-xl bg-[#D4FD7D] dark:bg-[#d68ffe] dark:text-black"
+                        class="grid size-7 shrink-0 place-items-center rounded-xl bg-[#D4FD7D] dark:bg-[#d68ffe] dark:text-black"
                         aria-hidden="true"
                     >
                         <x-icons.checkmark class="size-5 shrink-0" />
@@ -557,7 +557,7 @@ class="grid size-7 place-items-center rounded-xl bg-[#D4FD7D] dark:bg-[#d68ffe]
                 </div>
                 <div class="flex items-center gap-2">
                     <div
-                        class="grid size-7 place-items-center rounded-xl bg-[#D4FD7D] dark:bg-[#d68ffe] dark:text-black"
+                        class="grid size-7 shrink-0 place-items-center rounded-xl bg-[#D4FD7D] dark:bg-[#d68ffe] dark:text-black"
                         aria-hidden="true"
                     >
                         <x-icons.checkmark class="size-5 shrink-0" />

resources/views/components/platform-switcher.blade.php

@@ -6,7 +6,7 @@
 
 <div
     {{ $attributes }}
-    class="mx-1 mb-3 rounded-xl bg-zinc-100/80 transition-all duration-300 ease-in-out dark:bg-gray-900/40"
+    class="dark:bg-mirage mx-1 mb-3 rounded-xl bg-zinc-100/80 transition-all duration-300 ease-in-out"
     :class="{
         'pb-4 pl-4 pr-5 pt-5' : !scrolled,
         'pb-2 pl-2 pr-3 pt-3' : scrolled
@@ -41,15 +41,15 @@ class="flex items-center gap-3 text-xs"
             href="{{ $desktopHref }}"
             @class([
                 'flex w-1/2 items-center justify-center gap-x-1.5 gap-y-1 rounded-xl transition duration-300 ease-in-out',
-                'bg-white dark:bg-gray-900' => ! $isMobile,
+                'bg-white dark:bg-slate-700/30' => ! $isMobile,
                 'hover:bg-zinc-200/50 dark:text-gray-400/80 dark:hover:bg-gray-900/80 dark:hover:text-white' => $isMobile,
             ])
             :class="{ 'flex-col p-2.5': !scrolled, 'flex-row p-2': scrolled }"
         >
             <div
                 @class([
-                    'grid size-9 place-items-center rounded-lg',
-                    'bg-blue-50 text-blue-500 dark:bg-black/20 dark:text-blue-400' => ! $isMobile,
+                    'grid h-9 w-10 place-items-center rounded-lg',
+                    'dark:bg-haiti bg-blue-50 text-blue-500 dark:text-blue-400' => ! $isMobile,
                 ])
             >
                 <x-icons.pc class="size-6 shrink-0" />
@@ -74,15 +74,15 @@ class="size-6 dark:text-gray-400/80"
             href="{{ $mobileHref }}"
             @class([
                 'flex w-1/2 items-center justify-center gap-x-1.5 gap-y-1 rounded-xl transition duration-300 ease-in-out',
-                'bg-white dark:bg-gray-900' => $isMobile,
+                'bg-white dark:bg-slate-700/30' => $isMobile,
                 'hover:bg-zinc-200/50 dark:text-gray-400/80 dark:hover:bg-gray-900/80 dark:hover:text-white' => ! $isMobile,
             ])
             :class="{ 'flex-col p-2.5': !scrolled, 'flex-row p-2': scrolled }"
         >
             <div
                 @class([
-                    'grid size-9 place-items-center rounded-lg',
-                    'bg-blue-50 text-blue-500 dark:bg-black/20 dark:text-blue-400' => $isMobile,
+                    'grid h-9 w-10 place-items-center rounded-lg',
+                    'dark:bg-haiti bg-blue-50 text-blue-500 dark:text-blue-400' => $isMobile,
                 ])
             >
                 <x-icons.device-mobile-phone class="size-5 shrink-0" />