Added Create Custom, Random, Gmail Generation

resources/css/app.css

@@ -1,11 +1,52 @@
 @import 'tailwindcss';
 
+
+@import '../../vendor/livewire/flux/dist/flux.css';
 @source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php';
 @source '../../storage/framework/views/*.php';
 @source '../**/*.blade.php';
 @source '../**/*.js';
 
+
+@custom-variant dark (&:where(.dark, .dark *));
+
+/*@theme {*/
+/*    --font-sans: 'Instrument Sans', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',*/
+/*        'Segoe UI Symbol', 'Noto Color Emoji';*/
+/*}*/
+
 @theme {
-    --font-sans: 'Instrument Sans', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
-        'Segoe UI Symbol', 'Noto Color Emoji';
+    --font-sans: Inter, sans-serif;
 }
+
+/* Re-assign Flux's gray of choice... */
+@theme {
+    --color-zinc-50: var(--color-gray-50);
+    --color-zinc-100: var(--color-gray-100);
+    --color-zinc-200: var(--color-gray-200);
+    --color-zinc-300: var(--color-gray-300);
+    --color-zinc-400: var(--color-gray-400);
+    --color-zinc-500: var(--color-gray-500);
+    --color-zinc-600: var(--color-gray-600);
+    --color-zinc-700: var(--color-gray-800);
+    --color-zinc-800: var(--color-gray-800);
+    --color-zinc-900: var(--color-gray-900);
+    --color-zinc-950: var(--color-gray-950);
+    /*--color-white: var(--color-gray-100);*/
+}
+
+@theme {
+    --color-accent: var(--color-gray-900);
+    --color-accent-content: var(--color-gray-900);
+    --color-accent-foreground: var(--color-white);
+}
+
+@layer theme {
+    .dark {
+        --color-accent: var(--color-white);
+        --color-accent-content: var(--color-white);
+        --color-accent-foreground: var(--color-gray-900);
+    }
+}
+
+

resources/css/boil.css

@@ -1,3 +1,60 @@
-.art {
-    color: orange;
+.inbox-btn {
+    background-color: #F14743;
+    color: white;
+    transition: background-color 0.3s ease;
+}
+
+.inbox-btn:hover {
+    background-color: #f72a25;
+}
+
+.btn-primary {
+    color: white;
+    background-color: #4361ee;
+}
+
+.btn-warning {
+    color: white;
+    background-color: #e2a03f;
+}
+.btn-success {
+    background-color: #00AB55;
+    color: white;
+}
+.inbox-list {
+    margin-bottom: 10px;
+}
+.inbox-new {
+    background-color: #00AB55;
+}
+
+.iframe-min-height {
+    min-height: 70vh;
+}
+@keyframes slide-in {
+    from {
+        transform: translateY(-1rem);
+        opacity: 0;
+    }
+    to {
+        transform: translateY(0);
+        opacity: 1;
+    }
+}
+
+@keyframes progress {
+    from {
+        width: 100%;
+    }
+    to {
+        width: 0%;
+    }
+}
+
+.animate-slide-in {
+    animation: slide-in 0.3s ease-out;
+}
+
+.animate-progress {
+    animation: progress 4s linear forwards;
 }