Update css for header buttons (#1422)

Author: paoloredis

layouts/partials/header.html

@@ -40,7 +40,7 @@
         href="https://cloud.redis.io/">Login</a>
       <a class="hidden lg:block py-1 transition-colors hover:text-redis-red-500" href="https://redis.io/meeting/">Book a
         meeting</a>
-      <a class="hidden lg:inline-flex transition-colors hover:duration-0 duration-500 ease-out items-center justify-center bg-redis-red-500 hover:bg-redis-yellow-500 hover:text-midnight-900 h-full px-[27px]"
+      <a class="hidden lg:inline-flex transition-colors hover:duration-0 duration-500 ease-out items-center justify-center bg-redis-red-700 hover:bg-redis-pen-900 text-redis-white-200 font-bold hover:text-midnight-900 h-full px-[22px]"
         href="https://redis.io/try-free/">Try Redis</a>
       <button data-menu-toggle aria-expanded="false" type="button"
         class="menu-toggle lg:hidden p-1 mt-1 transition-colors hover:text-redis-red-500">
@@ -81,7 +81,7 @@
     </ul>
     <ul class="pt-6">
       <li class="mx-auto flex w-11/12 text-center"><a
-          class="my-2 w-full rounded-md border border-redis-pen-600 bg-redis-yellow-500 py-3 text-black active:bg-redis-pen-800 active:text-white"
+          class="my-2 w-full rounded-md border border-redis-pen-600 bg-redis-red-700 py-3 text-redis-white-200 font-sans font-bold active:bg-redis-pen-900 active:text-white"
           href="https://redis.io/try-free/">Try Redis</a></li>
       <li class="mx-auto flex w-11/12 text-center"><a
           class="my-2 w-full rounded-md border border-redis-pen-600 py-3 active:bg-redis-pen-800 active:text-white"

layouts/partials/header/products-dropdown.html

@@ -54,7 +54,7 @@ <h2 class="mb-6 border-b border-redis-pencil-250 pb-2 text-xs font-medium upperc
     </div>
     <div class="mt-auto">
       <h2 class="mb-6 pb-2 text-xs font-medium uppercase tracking-[2px] text-gray-400">Get Redis</h2><a
-        class="w-9/12 rounded border border-redis-pen-600 bg-redis-yellow-500 px-6 py-4 font-mono font-normal hover:bg-redis-pen-800 hover:text-white"
+        class="w-9/12 rounded border-redis-pen-600 bg-redis-red-700 px-12 py-4 text-redis-white-200 font-sans font-bold text-[16px] weight-[400] hover:bg-redis-pen-900"
         href="https://redis.io/downloads/">Downloads</a>
     </div>
   </div>

layouts/partials/header/products-mobile.html

@@ -48,7 +48,7 @@ <h2 class="mb-6 pb-2 text-xs uppercase tracking-[2px] text-gray-400">Tools</h2>
         <div class="pt-4">
             <h2 class="mb-6 pb-2 text-xs uppercase tracking-[2px] text-gray-400">Get Redis</h2>
             <div class="flex text-center"><a
-                    class="w-full rounded border border-redis-pen-600 bg-redis-yellow-500 py-4 font-mono font-normal active:bg-redis-pen-800 active:text-white"
+                    class="w-full rounded border border-redis-pen-600 bg-redis-red-700 py-4 text-redis-white-200 font-sans font-bold active:bg-redis-pen-900 active:text-white"
                     href="https://redis.io/downloads/">Downloads</a></div>
         </div>
     </div>

layouts/partials/header/resources-dropdown.html

@@ -56,7 +56,7 @@ <h2 class="mb-6 border-b border-redis-pencil-250 pb-2 text-xs font-medium upperc
     </div>
     <div class="mt-auto">
       <h2 class="mb-6 pb-2 text-xs font-medium uppercase tracking-[2px] text-gray-400">See how it works</h2><a
-        class="w-9/12 rounded border border-redis-pen-600 bg-redis-yellow-500 p-4 font-mono font-normal hover:bg-redis-pen-800 hover:text-white"
+        class="w-9/12 rounded border-redis-pen-600 bg-redis-red-700 px-6 py-4 text-redis-white-200 font-sans font-bold text-[16px] weight-[400] hover:bg-redis-pen-900"
         href="https://redis.io/demo-center/"><span>Visit Demo Center</span></a>
     </div>
   </div>

layouts/partials/header/resources-mobile.html

@@ -51,7 +51,7 @@ <h2 class="pb-2 text-xs uppercase tracking-[2px] text-gray-400">Latest</h2>
         <div class="mb-4">
             <h2 class="mb-6 pb-2 text-xs uppercase tracking-[2px] text-gray-400">See how it works</h2>
             <div class="flex text-center"><a
-                    class="w-full rounded border border-redis-pen-600 bg-redis-yellow-500 py-4 font-mono font-normal active:bg-redis-pen-800 active:text-white"
+                    class="w-full rounded border border-redis-pen-600 bg-redis-red-700 py-4 text-redis-white-200 font-sans font-bold active:bg-redis-pen-900 active:text-white"
                     href="https://redis.io/demo-center/">Visit Demo Center</a></div>
         </div>
     </div>

tailwind.config.js

@@ -21,7 +21,8 @@ module.exports = {
 				},
 				'redis-red': {
 					500: '#FF4438',
-					600: '#D52D1F'
+					600: '#D52D1F',
+					700: '#E4291E',
 				},
 				'redis-yellow': {
 					100: '#FBFFE8',
@@ -38,7 +39,8 @@ module.exports = {
 					400: '#8A99A0',
 					600: '#5C707A',
 					700: '#2D4754',
-					800: '#163341'
+					800: '#163341',
+					900: '#8A221C',
 				},
 				'redis-pencil': {
 					200: '#E5E5E5',
@@ -61,6 +63,9 @@ module.exports = {
 					200: '#F9F9F9',
 					600: '#bfc2c4',
 					800: '#4E545B'
+				},
+				'redis-white': {
+					200: '#FFF',
 				}
 			},
       typography: (theme) => (  {