Refactored styles of sidebar

app/components/button.hbs

@@ -3,7 +3,7 @@
   (hash
     primary='text-white bg-primary'
     default='text-white bg-gray'
-    outline='text-gray border-gray'
+    outline='text-gray'
   )
   (hash
     small='px-2.5 py-1.5 text-sm' default='px-3 py-2 leading-4 text-sm'

app/components/input-text.hbs

@@ -4,7 +4,7 @@
       {{@label}}
     </label>
   {{/if}}
-  <div class="relative flex items-center border rounded-md border-gray">
+  <div class="relative flex items-center border rounded-md">
     {{#if @prefixIcon}}
       <@prefixIcon class="h-8 w-8 pl-2" />
     {{/if}}

app/components/input-textarea.hbs

@@ -4,7 +4,7 @@
       {{@label}}
     </label>
   {{/if}}
-  <div class="relative flex items-center border rounded-md border-gray">
+  <div class="relative flex items-center border rounded-md">
     {{#if @prefixIcon}}
       <@prefixIcon class="h-8 w-8 pl-2" />
     {{/if}}

app/components/tab.hbs

@@ -2,7 +2,7 @@
   @route={{@route}}
   @model={{@model}}
   @activeClass="text-primary border-primary"
-  class="flex items-center h-10 px-4 py-2 -mb-px text-center bg-transparent border-gray border-b-2 -px-1 whitespace-nowrap focus:outline-none"
+  class="flex items-center h-10 px-4 py-2 -mb-px text-center bg-transparent border-b-2 -px-1 whitespace-nowrap focus:outline-none"
 >
   {{#if @icon}}
     <@icon class="mr-2" />

app/styles/app.css

@@ -4,13 +4,13 @@
 @import 'ember-basic-dropdown';
 
 .royal-table {
-  @apply table-auto border border-gray text-left mb-4;
+  @apply table-auto border text-left mb-4;
 
   thead {
     @apply bg-light;
 
     tr {
-      @apply border-b border-gray;
+      @apply border-b;
 
       th {
         @apply px-4 py-4 text-dark font-normal whitespace-nowrap;

app/templates/admin.hbs

@@ -1,22 +1,23 @@
 <div class="relative min-h-screen flex">
-  <div class="flex flex-col w-64 h-screen px-4 py-8 bg-dark border-r border-gray">
-    <h2 class="text-xl font-semibold text-light text-center flex items-center">
+  <div class="flex flex-col w-64 min-h-screen px-4 py-8 border-r">
+    <h2 class="flex items-center text-xl mb-8">
       <img src="/logo.svg" alt="MeiliSearch" class="w-8 h-8 mr-2">
       MeiliSearch Admin
     </h2>
 
-    <div class="flex flex-col justify-between flex-1 mt-6">
+    <div class="flex flex-col flex-1">
       <nav>
+        <div class="px-4 py-2 text-sm text-gray">Indexes</div>
         {{#each @model.indexes as |item|}}
-          <MenuItem
+          <LinkTo
             @route="admin.indexes.item"
             @model={{item}}
-            @name={{capitalize item.uid}}
-            class="flex flex-row items-center h-12 px-4"
-          />
+            class="flex items-center px-4 py-2 font-semibold text-lg text-gray-dark hover:text-black">
+            {{capitalize item.uid}}
+          </LinkTo>
         {{/each}}
       </nav>
-      <div class="flex flex-row items-center h-12 px-4">
+      <div class="flex flex-row items-center mt-auto px-4">
         <span class="mr-1 text-gray" title="The version of a running Meilisearch instance">v{{@model.version.pkgVersion}}</span>
         {{#if (eq @model.health.status "available")}}
           <this.CheckboxMarkedCircle class="text-green" @size={{18}} @title={{@model.health.status}}/>

app/templates/admin/indexes/item/settings.hbs

@@ -125,7 +125,7 @@ TODO: refactoting
   <div {{sortable-group onChange=this.reorderItems}}>
     {{#each @model.settings.rankingRules as |item|}}
       <div
-        class="flex items-center px-4 py-2 mb-2 border border-gray max-w-md"
+        class="flex items-center px-4 py-2 mb-2 border max-w-md"
         {{sortable-item model=item}}
       >
         <MdIcon::DragVertical class="mr-2 -ml-2 cursor-move" />

config/tailwind.config.js

@@ -15,9 +15,10 @@ const dark = '#1E1E1E';
 
 module.exports = {
   content: ['./app/**/*.html', './app/**/*.hbs'],
-  darkMode: false, // or 'media' or 'class'
+  darkMode: 'media',
   theme: {
     extend: {
+      borderColor: (theme) => theme('colors.gray.light'),
       colors: {
         light,
         // gray,
@@ -28,10 +29,18 @@ module.exports = {
           DEFAULT: colors.pink['500'],
           dark: colors.pink['800'],
         },
+        // gray: {
+        //   light: colors.gray['100'],
+        //   DEFAULT: colors.gray['500'],
+        //   dark: colors.gray['800'],
+        // },
         gray: {
-          light: colors.gray['100'],
-          DEFAULT: colors.gray['500'],
-          dark: colors.gray['800'],
+          light: '#e5eaef',
+          DEFAULT: '#A1A6B0',
+          dark: '#676d7c',
+        },
+        black: {
+          DEFAULT: '#222228',
         },
         yellow: {
           light: colors.yellow['100'],
@@ -45,7 +54,7 @@ module.exports = {
         },
       },
     },
-    // borderColor: gray,
+
     // emberPowerSelect: (theme) => ({
     //   default: {
     //     trigger: {