refactor: add a loading state to Button

1 files changed, 12 insertions, 6 deletions

diff --git a/src/components/Button.module.css b/src/components/Button.module.css
index 809e133..719a9aa 100644
--- a/src/components/Button.module.css
+++ b/src/components/Button.module.css
@@ -2,6 +2,7 @@
   -webkit-appearance: none;
   outline: none;
   user-select: none;
+  position: relative;
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -22,25 +23,22 @@
   }
 
   font-size: 0.85em;
-  padding: 5px 8px;
+  padding: 4px 7px;
   @media (--breakpoint-not-small) {
     font-size: 1em;
     padding: 6px 12px;
   }
 
-  &.plain {
-    border-radius: 100%;
-    padding: 0;
-    display: flex;
+  &.minimal {
     border-color: transparent;
     background: none;
     &:focus {
       border-color: var(--color-focus-blue);
     }
     &:hover {
+      color: #fff;
       background: #387cec;
       border: 1px solid #387cec;
-      color: #fff;
     }
   }
 }
@@ -51,3 +49,11 @@
   align-items: center;
   justify-content: center;
 }
+
+.loadingContainer {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  display: inline-flex;
+}