Design bits (#55)

* Update AdminPanelProvider.php

* Add styling for textareas

* Add "content" styles

* Update AdminPanelProvider.php

* Fix flaky register test for password

* Update RegisterControllerTest.php

Author: SebKay

app/Providers/Filament/AdminPanelProvider.php

@@ -9,7 +9,6 @@
 use Filament\Pages;
 use Filament\Panel;
 use Filament\PanelProvider;
-use Filament\Support\Colors\Color;
 use Filament\Widgets;
 use Illuminate\Cookie\Middleware\AddQueuedCookiesToResponse;
 use Illuminate\Cookie\Middleware\EncryptCookies;
@@ -29,7 +28,7 @@ public function panel(Panel $panel): Panel
             ->path('admin')
             ->login()
             ->colors([
-                'primary' => Color::Amber,
+                'primary' => '#1e293b',
             ])
             ->discoverResources(in: app_path('Filament/Resources'), for: 'App\\Filament\\Resources')
             ->discoverPages(in: app_path('Filament/Pages'), for: 'App\\Filament\\Pages')

resources/js/Components/Header.vue

@@ -24,7 +24,7 @@
                                         v-text="link.label"
                                         class="rounded-xl px-3 py-2 text-sm font-medium"
                                         :class="{
-                                            'bg-slate-100': link.components.includes($page.component),
+                                            'bg-slate-100 text-slate-800': link.components.includes($page.component),
                                             'text-slate-500 hover:text-slate-900': !link.components.includes($page.component),
                                         }"
                                     />
@@ -68,7 +68,7 @@
                             v-text="link.label"
                             class="rounded-xl px-3 py-2 text-base font-medium block"
                             :class="{
-                                'bg-slate-100': link.components.includes($page.component),
+                                'bg-slate-100 text-slate-800': link.components.includes($page.component),
                                 'text-slate-500 hover:text-slate-900': !link.components.includes($page.component),
                             }"
                             aria-current="page"

resources/scss/_content.scss

@@ -0,0 +1,100 @@
+.content {
+    @apply text-slate-700;
+
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6 {
+        @apply text-slate-800;
+
+        a {
+            @apply text-slate-800 hover:no-underline;
+        }
+    }
+
+    h1 {
+        @apply text-4xl md:text-5xl;
+    }
+
+    h2 {
+        @apply text-3xl;
+    }
+
+    h3 {
+        @apply text-2xl;
+    }
+
+    h4 {
+        @apply text-xl;
+    }
+
+    h5 {
+        @apply text-lg;
+    }
+
+    h6 {
+        @apply text-base;
+    }
+
+    li {
+        @apply ml-8;
+    }
+
+    a {
+        @apply hover:underline;
+    }
+
+    ul li {
+        @apply list-disc;
+    }
+
+    ol li {
+        @apply list-decimal;
+    }
+
+    strong {
+        @apply font-bold;
+    }
+
+    blockquote {
+        @apply pl-4 py-3 my-4 border-s-4 border-gray-300 text-xl italic;
+    }
+
+    table {
+        @apply w-full text-sm text-left;
+    }
+
+    th {
+        @apply p-4 text-slate-800 font-bold bg-slate-200;
+    }
+
+    td {
+        @apply p-4 font-medium text-slate-800;
+    }
+
+    tr:not(:last-child) td {
+        @apply border-b border-slate-200;
+    }
+
+    > * + * {
+        @apply mt-6;
+    }
+
+    * {
+        & + h1,
+        & + h2,
+        & + h3,
+        & + h4,
+        & + h5,
+        & + h6 {
+            @apply mt-12;
+        }
+    }
+
+    p code,
+    li code {
+        @apply rounded-full text-xs bg-slate-800 py-1 px-2 text-slate-200 inline-block;
+    }
+}

resources/scss/_forms.scss

@@ -1,19 +1,36 @@
+label {
+    &[for] {
+        @apply cursor-pointer;
+    }
+}
+
 .label {
-    @apply pb-2 block text-base font-medium leading-6 text-slate-800;
+    @apply pb-3 block text-base font-medium text-slate-800;
 }
 
 .small-label {
-    @apply block text-sm font-medium leading-6 text-slate-800;
+    @apply block text-sm font-medium text-slate-800;
 }
 
 .inline-label {
     @apply flex items-center gap-x-2;
 }
 
-.input {
-    @apply block w-full text-slate-800 rounded-md border-slate-300 shadow-sm focus:border-slate-300 focus:ring focus:ring-slate-200 focus:ring-opacity-50;
+.input,
+.textarea,
+.checkbox {
+    @apply block text-slate-800 rounded-md border-slate-300 shadow-sm focus:border-slate-300 focus:ring focus:ring-slate-200 focus:ring-opacity-50;
+}
+
+.input,
+.textarea {
+    @apply block text-base w-full;
+}
+
+.textarea {
+    @apply min-h-32;
 }
 
 .checkbox {
-    @apply h-5 w-5 text-slate-800 rounded-md border-slate-300 shadow-sm focus:border-slate-300 focus:ring focus:ring-slate-200 focus:ring-opacity-50;
+    @apply h-5 w-5 cursor-pointer;
 }

resources/scss/app.scss

@@ -2,4 +2,4 @@
 @tailwind components;
 @tailwind utilities;
 
-@import "forms";
+@import "forms", "content";

resources/views/app.blade.php

@@ -15,7 +15,7 @@
 
     @inertiaHead
 
-<body class="h-full">
+<body class="h-full font-sans text-slate-700">
     @inertia
 </body>
 

tests/Feature/Controllers/RegisterControllerTest.php

@@ -37,7 +37,7 @@
             'first_name' => fake()->firstName(),
             'last_name' => fake()->lastName(),
             'email' => $email,
-            'password' => fake()->password(15),
+            'password' => 'P$ssword12345#',
         ])
             ->assertRedirect(route('home'));
 
@@ -66,7 +66,7 @@
             'first_name' => fake()->firstName(),
             'last_name' => fake()->lastName(),
             'email' => $email,
-            'password' => fake()->password(15),
+            'password' => 'P$ssword12345#',
         ])
             ->assertSessionHasErrors('email');
     });