feat: implement screendesign

assets/styles/components/button.css

@@ -1,7 +1,8 @@
 .button {
-    @apply inline-flex items-center justify-center space-x-2 px-4 py-2 md:px-8 cursor-pointer;
+    @apply inline-flex items-center justify-center space-x-2 h-10 leading-10 px-4 md:px-8 cursor-pointer;
     @apply uppercase leading-none text-center;
     @apply transition-colors outline-none focus:outline-2 focus:outline-offset-2 focus:outline-primary-light;
+    @apply rounded-md;
 }
 
 .button--small {
@@ -12,38 +13,24 @@
     @apply block w-full;
 }
 
-.bg-button {
-    @apply bg-none bg-primary-dark text-white;
-    @apply hover:bg-badge-gradient;
+.button--secondary {
+    @apply bg-none bg-primary-light text-white;
+    @apply hover:bg-primary-light/80;
 }
 
-
-.bg-button--active,
-.bg-button--secondary {
-    @apply bg-badge-gradient text-white;
-    @apply hover:bg-none hover:bg-pink;
+.button--primary {
+    @apply bg-pink text-white;
+    @apply hover:bg-none hover:bg-pink/80;
 }
 
-.bg-button--muted {
+.button--muted {
     @apply bg-zinc-300 hover:bg-zinc-300;
 }
 
-.bg-button--dark {
+.button--dark {
     @apply bg-primary-dark;
 }
 
-.bg-button--light {
-    @apply bg-white border-2;
-    @apply font-bold;
-    @apply border-primary-light text-primary;
-}
-
-.bg-button--light:hover,
-.bg-button--light.button--active {
-    @apply bg-white;
-    @apply border-secondary text-secondary;
-}
-
 .button[disabled] {
     @apply cursor-not-allowed;
 }