Profile page

- Created a mock profile page

layouts/default.vue

@@ -83,8 +83,8 @@
             <div class="mt-5 flex-1 h-0 overflow-y-auto">
               <nav class="px-2">
                 <div class="space-y-1">
-                  <a
+                  <nuxt-link
-                    href="#"
+                    to="/"
                     class="group flex items-center px-2 py-2 text-base leading-5 font-medium rounded-md text-gray-900 bg-gray-100 hover:text-gray-900 hover:bg-gray-100 focus:bg-gray-200 focus:outline-none transition ease-in-out duration-150"
                   >
                     <!-- Heroicon name: home -->
@@ -103,7 +103,7 @@
                       />
                     </svg>
                     Home
-                  </a>
+                  </nuxt-link>
 
                   <a
                     href="#"
@@ -242,11 +242,11 @@
                       <h2
                         class="text-gray-900 text-sm leading-5 font-medium truncate"
                       >
-                        Jessy Schwarz
+                       {{ currentUser.profile.displayName || 'N/A' }}
                       </h2>
-                      <p class="text-gray-500 text-sm leading-5 truncate">
+<!--                      <p class="text-gray-500 text-sm leading-5 truncate">-->
-                        @jessyschwarz
+<!--                        @jessyschwarz-->
-                      </p>
+<!--                      </p>-->
                     </div>
                   </div>
                   <!-- Heroicon name: selector -->
@@ -295,11 +295,11 @@
                   aria-labelledby="options-menu"
                 >
                   <div class="py-1">
-                    <a
+                    <nuxt-link
-                      href="#"
+                      to="/profile"
                       class="block px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900"
                       role="menuitem"
-                      >View profile</a
+                      >View profile</nuxt-link
                     >
                     <a
                       href="#"
@@ -377,8 +377,8 @@
           <!-- Navigation -->
           <nav class="px-3 mt-6">
             <div class="space-y-1">
-              <a
+              <nuxt-link
-                href="#"
+                to="/"
                 class="group flex items-center px-2 py-2 text-sm leading-5 font-medium rounded-md text-gray-900 bg-gray-200 focus:outline-none focus:bg-gray-50 transition ease-in-out duration-150"
               >
                 <!-- Heroicon name: home -->
@@ -397,7 +397,7 @@
                   />
                 </svg>
                 Home
-              </a>
+              </nuxt-link>
 
               <a
                 href="#"
@@ -590,11 +590,11 @@
                     aria-labelledby="user-menu"
                   >
                     <div class="py-1">
-                      <a
+                      <nuxt-link
-                        href="#"
+                        to="/profile"
                         class="block px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900"
                         role="menuitem"
-                        >View profile</a
+                        >View profile</nuxt-link
                       >
                       <a
                         href="#"
@@ -672,6 +672,7 @@ export default {
     },
   },
   async mounted() {
+    console.log('mounted')
     const loggedIn = await this.$magic.user.isLoggedIn().catch((error) => {
       console.error(error)
       return false
@@ -680,18 +681,23 @@ export default {
       console.error(error)
       return null
     })
+    this.$store.commit('auth/setToken', token)
    if (loggedIn) {
-     const profile = await this.$api.$get('/api/profiles/1').catch(err => {
+     const profile = await this.$api.$get('/profile').catch(err => {
        console.error(err)
        return null;
      })
+
      if (profile) {
-       this.$store.commit('auth/setProfile', profile)
+       this.$store.commit('auth/setProfile', profile.data)
+       const redFrom = this.$store.state.routing.redirectedFrom
+       this.$store.commit('routing/setRedirectedFrom', null)
+       await this.$router.push(redFrom || '/')
      } else {
-       await this.$router.push('/profile/setup')
+       this.$store.commit('auth/setProfile', null)
+       await this.$router.push('/')
      }
    }
-    this.$store.commit('auth/setToken', token)
     this.$store.commit('auth/setLoggedIn', loggedIn)
   },
   methods: {
@@ -705,6 +711,7 @@ export default {
       await this.$magic.user.logout()
       this.$store.commit('auth/setToken', null)
       this.$store.commit('auth/setLoggedIn', false)
+      await this.$router.push('/')
     },
     async login() {
       const token = await this.$magic.auth.loginWithMagicLink({

pages/login.vue

@@ -168,15 +168,16 @@ export default {
       this.$store.commit('auth/setLoggedIn', token !== null)
 
       if (token) {
-        const profile = await this.$api.$get('/api/profiles/1').catch((err) => {
+        const profile = await this.$api.$get('/profile').catch((err) => {
-          console.log(err)
           return null
         })
         if (!profile) {
-          await this.$router.push('/profile/setup')
-        } else {
-          this.$store.commit('auth/setProfile', profile)
           await this.$router.push('/')
+        } else {
+          this.$store.commit('auth/setProfile', profile.data)
+          const redFrom = this.$store.state.routing.redirectedFrom
+          this.$store.commit('routing/setRedirectedFrom', null)
+          await this.$router.push(redFrom || '/')
         }
       }
     },

pages/profile.vue

@@ -0,0 +1,273 @@
+<template>
+  <div>
+    <div
+      class="border-b border-gray-200 px-4 py-4 sm:flex sm:items-center sm:justify-between sm:px-6 lg:px-8 mb-4"
+    >
+      <div class="flex-1 min-w-0">
+        <h1 class="text-lg font-medium leading-6 text-gray-900 sm:truncate">
+          Profile
+        </h1>
+      </div>
+      <div class="mt-4 flex sm:mt-0 sm:ml-4">
+        <span class="order-1 ml-3 shadow-sm rounded-md sm:order-0 sm:ml-0">
+          <button
+            type="button"
+            class="inline-flex items-center px-4 py-2 border border-gray-300 text-sm leading-5 font-medium rounded-md text-gray-700 bg-white hover:text-gray-500 focus:outline-none focus:shadow-outline-blue focus:border-blue-300 active:text-gray-800 active:bg-gray-50 transition duration-150 ease-in-out"
+          >
+            Share
+          </button>
+        </span>
+        <span class="order-0 sm:order-1 sm:ml-3 shadow-sm rounded-md">
+          <button
+            type="button"
+            class="inline-flex items-center px-4 py-2 border border-transparent text-sm leading-5 font-medium rounded-md text-white bg-purple-600 hover:bg-purple-500 focus:outline-none focus:shadow-outline-purple focus:border-purple-700 active:bg-indigo-700 transition duration-150 ease-in-out"
+          >
+            Create
+          </button>
+        </span>
+      </div>
+    </div>
+    <div v-if="profile" class="lg:mx-2 mt-4 border-2 border-gray-200 shadow-md rounded-md p-2 flex flex-col md:flex-row justify-between">
+      <label for="profile-image" class="lg: mr-2">
+        <img class="rounded-full" :src="profile.picture" alt="profile image" id="profile-image">
+        <span class="block mt-2">{{ profile.displayName }}</span>
+      </label>
+      <!--
+  Tailwind UI components require Tailwind CSS v1.8 and the @tailwindcss/ui plugin.
+  Read the documentation to get started: https://tailwindui.com/documentation
+-->
+      <div>
+        <h2 class="text-gray-500 text-xs font-medium uppercase tracking-wide">Most popular videos</h2>
+        <ul class="mt-3 grid grid-cols-1 gap-5 sm:gap-6 sm:grid-cols-2 lg:grid-cols-4">
+          <li class="col-span-1 flex shadow-sm rounded-md">
+            <div class="flex-shrink-0 flex items-center justify-center w-16 bg-pink-600 text-white text-sm leading-5 font-medium rounded-l-md">
+              GA
+            </div>
+            <div class="flex-1 flex items-center justify-between border-t border-r border-b border-gray-200 bg-white rounded-r-md truncate">
+              <div class="flex-1 px-4 py-2 text-sm leading-5 truncate">
+                <a href="#" class="text-gray-900 font-medium hover:text-gray-600 transition ease-in-out duration-150">Graph API</a>
+                <p class="text-gray-500">16 Members</p>
+              </div>
+              <div class="flex-shrink-0 pr-2">
+                <button class="w-8 h-8 inline-flex items-center justify-center text-gray-400 rounded-full bg-transparent hover:text-gray-500 focus:outline-none focus:text-gray-500 focus:bg-gray-100 transition ease-in-out duration-150">
+                  <!-- Heroicon name: dots-vertical -->
+                  <svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
+                    <path d="M10 6a2 2 0 110-4 2 2 0 010 4zM10 12a2 2 0 110-4 2 2 0 010 4zM10 18a2 2 0 110-4 2 2 0 010 4z" />
+                  </svg>
+                </button>
+              </div>
+            </div>
+          </li>
+
+          <li class="col-span-1 flex shadow-sm rounded-md">
+            <div class="flex-shrink-0 flex items-center justify-center w-16 bg-purple-600 text-white text-sm leading-5 font-medium rounded-l-md">
+              CD
+            </div>
+            <div class="flex-1 flex items-center justify-between border-t border-r border-b border-gray-200 bg-white rounded-r-md truncate">
+              <div class="flex-1 px-4 py-2 text-sm leading-5 truncate">
+                <a href="#" class="text-gray-900 font-medium hover:text-gray-600 transition ease-in-out duration-150">Component Design</a>
+                <p class="text-gray-500">12 Members</p>
+              </div>
+              <div class="flex-shrink-0 pr-2">
+                <button class="w-8 h-8 inline-flex items-center justify-center text-gray-400 rounded-full bg-transparent hover:text-gray-500 focus:outline-none focus:text-gray-500 focus:bg-gray-100 transition ease-in-out duration-150">
+                  <!-- Heroicon name: dots-vertical -->
+                  <svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
+                    <path d="M10 6a2 2 0 110-4 2 2 0 010 4zM10 12a2 2 0 110-4 2 2 0 010 4zM10 18a2 2 0 110-4 2 2 0 010 4z" />
+                  </svg>
+                </button>
+              </div>
+            </div>
+          </li>
+
+          <li class="col-span-1 flex shadow-sm rounded-md">
+            <div class="flex-shrink-0 flex items-center justify-center w-16 bg-orange-500 text-white text-sm leading-5 font-medium rounded-l-md">
+              T
+            </div>
+            <div class="flex-1 flex items-center justify-between border-t border-r border-b border-gray-200 bg-white rounded-r-md truncate">
+              <div class="flex-1 px-4 py-2 text-sm leading-5 truncate">
+                <a href="#" class="text-gray-900 font-medium hover:text-gray-600 transition ease-in-out duration-150">Templates</a>
+                <p class="text-gray-500">16 Members</p>
+              </div>
+              <div class="flex-shrink-0 pr-2">
+                <button class="w-8 h-8 inline-flex items-center justify-center text-gray-400 rounded-full bg-transparent hover:text-gray-500 focus:outline-none focus:text-gray-500 focus:bg-gray-100 transition ease-in-out duration-150">
+                  <!-- Heroicon name: dots-vertical -->
+                  <svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
+                    <path d="M10 6a2 2 0 110-4 2 2 0 010 4zM10 12a2 2 0 110-4 2 2 0 010 4zM10 18a2 2 0 110-4 2 2 0 010 4z" />
+                  </svg>
+                </button>
+              </div>
+            </div>
+          </li>
+
+          <li class="col-span-1 flex shadow-sm rounded-md">
+            <div class="flex-shrink-0 flex items-center justify-center w-16 bg-green-400 text-white text-sm leading-5 font-medium rounded-l-md">
+              RC
+            </div>
+            <div class="flex-1 flex items-center justify-between border-t border-r border-b border-gray-200 bg-white rounded-r-md truncate">
+              <div class="flex-1 px-4 py-2 text-sm leading-5 truncate">
+                <a href="#" class="text-gray-900 font-medium hover:text-gray-600 transition ease-in-out duration-150">React Components</a>
+                <p class="text-gray-500">8 Members</p>
+              </div>
+              <div class="flex-shrink-0 pr-2">
+                <button class="w-8 h-8 inline-flex items-center justify-center text-gray-400 rounded-full bg-transparent hover:text-gray-500 focus:outline-none focus:text-gray-500 focus:bg-gray-100 transition ease-in-out duration-150">
+                  <!-- Heroicon name: dots-vertical -->
+                  <svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
+                    <path d="M10 6a2 2 0 110-4 2 2 0 010 4zM10 12a2 2 0 110-4 2 2 0 010 4zM10 18a2 2 0 110-4 2 2 0 010 4z" />
+                  </svg>
+                </button>
+              </div>
+            </div>
+          </li>
+        </ul>
+      </div>
+    </div>
+    <div class="lg:mx-2 mt-4" v-if="stats">
+      <h3 class="text-lg leading-6 font-medium text-gray-900">
+        Last 30 days
+      </h3>
+      <div class="mt-5 grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-3">
+        <div class="bg-white overflow-hidden shadow rounded-lg">
+          <div class="px-4 py-5 sm:p-6">
+            <div class="flex items-center">
+              <div class="flex-shrink-0 bg-indigo-500 rounded-md p-3">
+                <!-- Heroicon name: users -->
+                <svg class="h-6 w-6 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z" />
+                </svg>
+              </div>
+              <div class="ml-5 w-0 flex-1">
+                <dl>
+                  <dt class="text-sm leading-5 font-medium text-gray-500 truncate">
+                    Total Subscribers
+                  </dt>
+                  <dd class="flex items-baseline">
+                    <div class="text-2xl leading-8 font-semibold text-gray-900">
+                      71,897
+                    </div>
+                    <div class="ml-2 flex items-baseline text-sm leading-5 font-semibold text-green-600">
+                      <svg class="self-center flex-shrink-0 h-5 w-5 text-green-500" fill="currentColor" viewBox="0 0 20 20">
+                        <path fill-rule="evenodd" d="M5.293 9.707a1 1 0 010-1.414l4-4a1 1 0 011.414 0l4 4a1 1 0 01-1.414 1.414L11 7.414V15a1 1 0 11-2 0V7.414L6.707 9.707a1 1 0 01-1.414 0z" clip-rule="evenodd" />
+                      </svg>
+                      <span class="sr-only">
+                    Increased by
+                  </span>
+                      122
+                    </div>
+                  </dd>
+                </dl>
+              </div>
+            </div>
+          </div>
+          <div class="bg-gray-50 px-4 py-4 sm:px-6">
+            <div class="text-sm leading-5">
+              <a href="#" class="font-medium text-indigo-600 hover:text-indigo-500 transition ease-in-out duration-150">
+                View all
+              </a>
+            </div>
+          </div>
+        </div>
+        <div class="bg-white overflow-hidden shadow rounded-lg">
+          <div class="px-4 py-5 sm:p-6">
+            <div class="flex items-center">
+              <div class="flex-shrink-0 bg-indigo-500 rounded-md p-3">
+                <!-- Heroicon name: mail-open -->
+                <svg class="h-6 w-6 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 19v-8.93a2 2 0 01.89-1.664l7-4.666a2 2 0 012.22 0l7 4.666A2 2 0 0121 10.07V19M3 19a2 2 0 002 2h14a2 2 0 002-2M3 19l6.75-4.5M21 19l-6.75-4.5M3 10l6.75 4.5M21 10l-6.75 4.5m0 0l-1.14.76a2 2 0 01-2.22 0l-1.14-.76" />
+                </svg>
+              </div>
+              <div class="ml-5 w-0 flex-1">
+                <dl>
+                  <dt class="text-sm leading-5 font-medium text-gray-500 truncate">
+                    Avg. Open Rate.
+                  </dt>
+                  <dd class="flex items-baseline">
+                    <div class="text-2xl leading-8 font-semibold text-gray-900">
+                      58.16%
+                    </div>
+                    <div class="ml-2 flex items-baseline text-sm leading-5 font-semibold text-green-600">
+                      <svg class="self-center flex-shrink-0 h-5 w-5 text-green-500" fill="currentColor" viewBox="0 0 20 20">
+                        <path fill-rule="evenodd" d="M5.293 9.707a1 1 0 010-1.414l4-4a1 1 0 011.414 0l4 4a1 1 0 01-1.414 1.414L11 7.414V15a1 1 0 11-2 0V7.414L6.707 9.707a1 1 0 01-1.414 0z" clip-rule="evenodd" />
+                      </svg>
+                      <span class="sr-only">
+                    Increased by
+                  </span>
+                      5.4%
+                    </div>
+                  </dd>
+                </dl>
+              </div>
+            </div>
+          </div>
+          <div class="bg-gray-50 px-4 py-4 sm:px-6">
+            <div class="text-sm leading-5">
+              <a href="#" class="font-medium text-indigo-600 hover:text-indigo-500 transition ease-in-out duration-150">
+                View all
+              </a>
+            </div>
+          </div>
+        </div>
+        <div class="bg-white overflow-hidden shadow rounded-lg">
+          <div class="px-4 py-5 sm:p-6">
+            <div class="flex items-center">
+              <div class="flex-shrink-0 bg-indigo-500 rounded-md p-3">
+                <!-- Heroicon name: cursor-click -->
+                <svg class="h-6 w-6 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 15l-2 5L9 9l11 4-5 2zm0 0l5 5M7.188 2.239l.777 2.897M5.136 7.965l-2.898-.777M13.95 4.05l-2.122 2.122m-5.657 5.656l-2.12 2.122" />
+                </svg>
+              </div>
+              <div class="ml-5 w-0 flex-1">
+                <dl>
+                  <dt class="text-sm leading-5 font-medium text-gray-500 truncate">
+                    Avg. Click Rate
+                  </dt>
+                  <dd class="flex items-baseline">
+                    <div class="text-2xl leading-8 font-semibold text-gray-900">
+                      24.57
+                    </div>
+                    <div class="ml-2 flex items-baseline text-sm leading-5 font-semibold text-red-600">
+                      <svg class="self-center flex-shrink-0 h-5 w-5 text-red-500" fill="currentColor" viewBox="0 0 20 20">
+                        <path fill-rule="evenodd" d="M14.707 10.293a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 111.414-1.414L9 12.586V5a1 1 0 012 0v7.586l2.293-2.293a1 1 0 011.414 0z" clip-rule="evenodd" />
+                      </svg>
+                      <span class="sr-only">
+                    Decreased by
+                  </span>
+                      3.2%
+                    </div>
+                  </dd>
+                </dl>
+              </div>
+            </div>
+          </div>
+          <div class="bg-gray-50 px-4 py-4 sm:px-6">
+            <div class="text-sm leading-5">
+              <a href="#" class="font-medium text-indigo-600 hover:text-indigo-500 transition ease-in-out duration-150">
+                View all
+              </a>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Profile',
+  middleware: 'authenticated',
+  data() {
+    return {
+      profile: null,
+      stats: true
+    }
+  },
+  mounted() {
+    this.profile = this.$store.state.auth.profile
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

pages/profile/setup.vue

@@ -1,92 +0,0 @@
-<template>
-  <!--
-  Tailwind UI components require Tailwind CSS v1.8 and the @tailwindcss/ui plugin.
-  Read the documentation to get started: https://tailwindui.com/documentation
--->
-  <div class="min-h-screen bg-gray-50 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">
-      <img class="mx-auto h-12 w-auto" src="https://tailwindui.com/img/logos/v1/workflow-mark-on-white.svg" alt="Workflow">
-      <h2 class="mt-6 text-center text-3xl leading-9 font-extrabold text-gray-900">
-        Setup your profile
-      </h2>
-    </div>
-
-    <div class="mt-8 sm:mx-auto sm:w-full sm:max-w-md">
-      <div class="bg-white py-8 px-4 shadow sm:rounded-lg sm:px-10">
-        <form action="#" method="POST" @submit.prevent="submit">
-          <div>
-            <label for="name" class="block text-sm font-medium leading-5 text-gray-700">
-              Display Name
-            </label>
-            <div class="mt-1 rounded-md shadow-sm">
-              <input v-model="displayName" id="name" type="text" required class="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md placeholder-gray-400 focus:outline-none focus:shadow-outline-blue focus:border-blue-300 transition duration-150 ease-in-out sm:text-sm sm:leading-5">
-            </div>
-          </div>
-
-          <div class="mt-6">
-            <label for="password" class="block text-sm font-medium leading-5 text-gray-700">
-              Password
-            </label>
-            <div class="mt-1 rounded-md shadow-sm">
-              <input id="password" type="password" required class="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md placeholder-gray-400 focus:outline-none focus:shadow-outline-blue focus:border-blue-300 transition duration-150 ease-in-out sm:text-sm sm:leading-5">
-            </div>
-          </div>
-
-          <div class="mt-6">
-          <span class="block w-full rounded-md shadow-sm">
-            <button type="submit" class="w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-500 focus:outline-none focus:border-indigo-700 focus:shadow-outline-indigo active:bg-indigo-700 transition duration-150 ease-in-out">
-              Save
-            </button>
-          </span>
-          </div>
-        </form>
-      </div>
-    </div>
-  </div>
-
-</template>
-
-<script>
-export default {
-  name: 'Setup',
-  head() {
-    return {
-      title: 'Profile Setup'
-    }
-  },
-  data() {
-    return {
-      displayName: '',
-      selectedCategories: [],
-      categories: [
-        {id:1, name: 'Sport'},
-        {id:2, name: 'Comedy'},
-        {id:3, name: 'News'},
-      ]
-    }
-  },
-  beforeCreate() {
-    if (!this.$store.state.auth.loggedIn) {
-      this.$router.push('/login')
-    }
-  },
-  methods: {
-    async submit() {
-      const profile = await this.$api.$post('/api/profiles', {
-        displayName: this.displayName
-      })
-
-      console.log(profile)
-
-      if (profile) {
-        this.$store.commit('auth/setProfile', profile.profile)
-        this.$router.push('/')
-      }
-    }
-  }
-}
-</script>
-
-<style scoped>
-
-</style>

plugins/axios.js

@@ -14,7 +14,7 @@ export default function ({ $axios, store }, inject) {
   api.onRequest(config => {
     config.headers = {
       ...config.headers,
-      Authorization: store.state.auth.token
+      Authorization: `Bearer ${store.state.auth.token}`
     }
   })
 

tailwind.config.js

@@ -12,6 +12,22 @@ module.exports = {
       xl: '1280px',
       xxl: '1920px',
     },
+    extend: {
+      colors: {
+        'light-blue': {
+          '50': '#f0f9ff',
+          '100': '#e0f2fe',
+          '200': '#bae6fd',
+          '300': '#7dd3fc',
+          '400': '#38bdf8',
+          '500': '#0ea5e9',
+          '600': '#0284c7',
+          '700': '#0369a1',
+          '800': '#075985',
+          '900': '#0c4a6e',
+        }
+      }
+    }
   },
   variants: {},
   plugins: [require('@tailwindcss/ui')],