- creating a dynamic color palette

- implementing actions section

src/components/shared/Button.module.css

@@ -1,16 +1,31 @@
 .container {
-  padding: 6px 24px;
-  @apply flex items-center cursor-pointer inline-flex rounded font-semibold bg-primary border border-primary text-inverse;
+  font-size: 11px;
+  padding: 6px 18px;
+  @apply relative flex items-center cursor-pointer rounded font-semibold bg-primary-900 border border-primary-900 text-primary-50;
+  @apply transition-colors duration-200 ease-in-out;
 }
 
 .container:hover {
-  @apply bg-primary-dark;
+  @apply bg-primary-700 border-primary-700;
+  @apply transition-colors duration-200 ease-in-out;
+}
+
+.container:active {
+  top: 1px;
+}
+
+.container:focus {
+  @apply outline-none;
 }
 
 .container.outline {
-  @apply border border-primary bg-inverse text-primary;
+  @apply border border-primary-900 bg-transparent text-primary-900;
 }
 
 .container.outline:hover {
-  @apply bg-inverse-dark;
+  @apply bg-primary-200;
+}
+
+.container.outline:focus {
+  @apply outline-none;
 }