From fc53449cad397108629ae4323026b1856b527d7a Mon Sep 17 00:00:00 2001
From: Stanislav Romanov <kaermorchen@gmail.com>
Date: Fri, 9 Sep 2022 14:04:38 +0300
Subject: [PATCH] Add styles for index page

---
 app/assets/styles.css            | 14 ++++----------
 app/components/headers/h1.hbs    |  2 +-
 app/components/headers/h2.hbs    |  2 +-
 app/components/stat.hbs          |  6 +++---
 app/components/theme-toggler.hbs |  4 ++--
 app/templates/admin/index.hbs    | 11 ++++-------
 app/templates/login.hbs          |  2 +-
 config/tailwind.config.js        |  4 +++-
 8 files changed, 19 insertions(+), 26 deletions(-)

diff --git a/app/assets/styles.css b/app/assets/styles.css
index 9fd354f..ff8f783 100644
--- a/app/assets/styles.css
+++ b/app/assets/styles.css
@@ -52,15 +52,13 @@
 }
 
 .royal-table {
-  @apply table-auto border text-left mb-4;
+  @apply table-auto text-left mb-4;
 
   thead {
-    @apply bg-base-4;
-
     tr {
-      @apply border-b;
-
       th {
+        @apply bg-base-6;
+        @apply first:rounded-l last:rounded-r;
         @apply px-4 py-4 text-base-2 font-normal whitespace-nowrap;
 
         &[type='button'] {
@@ -79,12 +77,8 @@
 
   tbody {
     tr {
-      &:nth-child(even) {
-        @apply bg-base-4;
-      }
-
       td {
-        @apply px-4 py-2 text-base-6 align-top;
+        @apply px-4 py-3 align-top;
       }
     }
   }
diff --git a/app/components/headers/h1.hbs b/app/components/headers/h1.hbs
index f4c98b2..e2b4c0f 100644
--- a/app/components/headers/h1.hbs
+++ b/app/components/headers/h1.hbs
@@ -1,4 +1,4 @@
-<h1 class='text-3xl mb-4' ...attributes>
+<h1 class='text-base-1 text-3xl mb-4' ...attributes>
   {{#if (has-block)}}
     {{yield}}
   {{else}}
diff --git a/app/components/headers/h2.hbs b/app/components/headers/h2.hbs
index 8dffb80..ae701aa 100644
--- a/app/components/headers/h2.hbs
+++ b/app/components/headers/h2.hbs
@@ -1,4 +1,4 @@
-<h2 class='text-2xl mb-4' ...attributes>
+<h2 class='text-base-1 text-2xl mb-4' ...attributes>
   {{#if (has-block)}}
     {{yield}}
   {{else}}
diff --git a/app/components/stat.hbs b/app/components/stat.hbs
index 2a09d3b..30fcbdc 100644
--- a/app/components/stat.hbs
+++ b/app/components/stat.hbs
@@ -1,14 +1,14 @@
 <div
-  class='px-4 py-5 base-7 shadow rounded-lg overflow-hidden sm:p-6'
+  class='px-4 py-5 bg-base-6 rounded overflow-hidden sm:p-6'
   ...attributes
 >
   <div class='flex items-center'>
     <div class="mr-2">{{yield to='icon'}}</div>
     <div>
-      <dt class='text-sm font-medium text-base-3 truncate'>
+      <dt class='text-sm font-medium text-base-2 truncate'>
         {{@title}}
       </dt>
-      <dd class='text-3xl font-semibold text-base-3'>
+      <dd class='text-3xl font-semibold text-base-1'>
         {{#if (has-block)}}
           {{yield}}
         {{else}}
diff --git a/app/components/theme-toggler.hbs b/app/components/theme-toggler.hbs
index 39e105f..0d39b2e 100644
--- a/app/components/theme-toggler.hbs
+++ b/app/components/theme-toggler.hbs
@@ -1,4 +1,4 @@
-<div class='grid grid-cols-3 gap-1 p-1 rounded bg-base-5'>
+<div class='grid grid-cols-3 gap-1 p-1 rounded bg-base-6'>
   {{#each this.themes as |item|}}
     {{#let (eq item.id this.theme) as |selected|}}
       <Button
@@ -6,7 +6,7 @@
         @icon={{item.icon}}
         @onClick={{fn this.changeTheme item.id}}
         @size='sm'
-        class='border-none {{if selected "base-7 shadow-sm"}}'
+        class='border-none {{if selected "bg-base-7 shadow-sm"}}'
       />
     {{/let}}
   {{/each}}
diff --git a/app/templates/admin/index.hbs b/app/templates/admin/index.hbs
index c4caa2a..e03dca2 100644
--- a/app/templates/admin/index.hbs
+++ b/app/templates/admin/index.hbs
@@ -6,7 +6,7 @@
     @value={{format-bytes @model.stats.databaseSize}}
   >
     <:icon>
-      <Icons::DatabaseOutline @size={{40}} />
+      <Icons::DatabaseOutline @size={{40}} class='fill-base-2' />
     </:icon>
   </Stat>
   <Stat
@@ -14,15 +14,12 @@
     @value={{date-time-format @model.stats.lastUpdate}}
   >
     <:icon>
-      <Icons::Calendar @size={{40}} />
+      <Icons::Calendar @size={{40}} class='fill-base-2' />
     </:icon>
   </Stat>
-  <Stat
-    @title='The version of the Meilisearch instance'
-    @value={{@model.version.pkgVersion}}
-  >
+  <Stat @title='The version' @value={{@model.version.pkgVersion}}>
     <:icon>
-      <Icons::SourceBranch @size={{40}} />
+      <Icons::SourceBranch @size={{40}} class='fill-base-2' />
     </:icon>
   </Stat>
 </dl>
diff --git a/app/templates/login.hbs b/app/templates/login.hbs
index 7f857cc..9729064 100644
--- a/app/templates/login.hbs
+++ b/app/templates/login.hbs
@@ -1,6 +1,6 @@
 <div class='min-h-screen flex flex-col justify-center py-12 sm:px-6 lg:px-8'>
   <div class='sm:mx-auto sm:w-full sm:max-w-md'>
-    <div class='base-7 py-8 px-4 shadow sm:rounded-lg sm:px-10 mb-6'>
+    <div class='bg-base-7 py-8 px-4 shadow sm:rounded-lg sm:px-10 mb-6'>
       <form class='space-y-6' {{on 'submit' this.authenticate}}>
         <Headers::H1 class='text-center' @title="MeiliAdmin"/>
 
diff --git a/config/tailwind.config.js b/config/tailwind.config.js
index 70c774a..0d6ca9f 100644
--- a/config/tailwind.config.js
+++ b/config/tailwind.config.js
@@ -5,7 +5,9 @@ module.exports = {
   darkMode: 'media',
   theme: {
     extend: {
-      borderColor: (theme) => theme('colors.base.5'),
+      borderColor: ({ theme }) => ({
+        DEFAULT: theme('colors.base.5'),
+      }),
       colors: {
         base: {
           1: 'rgb(var(--color-base-1) / <alpha-value>)',