From 46230729a9dafcb8c101deb0f27b8528d29c6935 Mon Sep 17 00:00:00 2001
From: Igor Bari <mucsi96@gmail.com>
Date: Thu, 9 May 2024 11:06:49 +0000
Subject: [PATCH] switch to rem units

---
 src/Avatar/Avatar.css               | 4 ++--
 src/InputLabel/InputLabel.css       | 6 +++---
 src/Loader/Loader.css               | 8 ++++----
 src/Notifications/Notifications.css | 2 +-
 src/Table/Table.css                 | 6 +++---
 5 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/src/Avatar/Avatar.css b/src/Avatar/Avatar.css
index a46226d..a6c3d61 100644
--- a/src/Avatar/Avatar.css
+++ b/src/Avatar/Avatar.css
@@ -3,8 +3,8 @@ button[bt-avatar] {
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 40px;
-  height: 40px;
+  width: 2.5rem;
+  height: 2.5rem;
   overflow: hidden;
   background-color: hsl(215, 14%, 34%);
   border-radius: 9999px;
diff --git a/src/InputLabel/InputLabel.css b/src/InputLabel/InputLabel.css
index ba3c1f2..c0b9998 100644
--- a/src/InputLabel/InputLabel.css
+++ b/src/InputLabel/InputLabel.css
@@ -1,6 +1,6 @@
 label[bt] {
   display: flex;
-  gap: 8px;
+  gap: 0.5rem;
   flex-direction: column;
 
   color: var(--bt-strong-text-color);
@@ -12,8 +12,8 @@ label[bt] {
     color: var(--bt-strong-text-color);
     font-weight: 400;
     font-family: inherit;
-    padding: 10px;
-    border-radius: 8px;
+    padding: 0.625rem;
+    border-radius: 0.5rem;
     outline: none;
 
     &:focus {
diff --git a/src/Loader/Loader.css b/src/Loader/Loader.css
index 3649585..99f42ec 100644
--- a/src/Loader/Loader.css
+++ b/src/Loader/Loader.css
@@ -1,16 +1,16 @@
 [role='progressbar'][bt] {
   display: grid;
   justify-content: center;
-  height: 300px;
+  height: 18.75rem;
   align-items: center;
   grid-template-columns: repeat(5, auto);
-  gap: 3px;
+  gap: 0.25rem;
 
   div {
     background-color: var(--bt-strong-text-color);
     opacity: 0.85;
-    height: 60px;
-    width: 7px;
+    height: 3.75rem;
+    width: 0.5rem;
     display: inline-block;
     animation: bt-stretch-delay 1.2s infinite ease-in-out;
 
diff --git a/src/Notifications/Notifications.css b/src/Notifications/Notifications.css
index 3f9a188..05476f9 100644
--- a/src/Notifications/Notifications.css
+++ b/src/Notifications/Notifications.css
@@ -9,7 +9,7 @@ section[bt-notifications] {
   max-width: calc(100vw - 1rem);
   display: flex;
   flex-direction: column-reverse;
-  gap: 16px;
+  gap: 1rem;
   background-color: unset;
   border: none;
 }
diff --git a/src/Table/Table.css b/src/Table/Table.css
index 956f9ad..3b771b4 100644
--- a/src/Table/Table.css
+++ b/src/Table/Table.css
@@ -4,7 +4,7 @@ table[bt] {
   font-size: 0.85em;
 
   th {
-    padding: 12px 24px;
+    padding: 0.75rem 1.5rem;
     font-weight: 600;
     background-color: hsl(217, 19%, 27%);
     color: var(--bt-text-color);
@@ -35,11 +35,11 @@ table[bt] {
   }
 
   td {
-    padding: 0 24px;
+    padding: 0 1.5rem;
     border-bottom: 1px solid hsl(217, 19%, 27%);
 
     &:not([bt-row-selector]) {
-      line-height: 52px;
+      line-height: 3.25rem;
     }
 
     [aria-selected='true'] &[bt-row-selector] {