make variables for button heights

airbytehq · Jan 31, 2023 · aeb9344 · aeb9344
1 parent 5dcaf69
commit aeb9344
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 4 deletions.
diff --git a/airbyte-webapp/src/components/EntityTable/components/StatusCellControl.module.scss b/airbyte-webapp/src/components/EntityTable/components/StatusCellControl.module.scss
@@ -1,5 +1,7 @@
+@use "scss/variables";
+
 .inProgressLabel {
-  height: 32px; /** Needs to match our Button height to avoid jumping around */
+  height: variables.$buttonHeightSm;
   display: flex;
   align-items: center;
 }
diff --git a/airbyte-webapp/src/components/ui/Button/Button.module.scss b/airbyte-webapp/src/components/ui/Button/Button.module.scss
@@ -106,7 +106,7 @@
   }
 
   &.sizeXS {
-    height: 32px;
+    height: variables.$buttonHeightXs;
     font-size: 12px;
     line-height: 15px;
     padding: 10px;
@@ -117,7 +117,7 @@
   }
 
   &.sizeS {
-    height: 36px;
+    height: variables.$buttonHeightSm;
     font-size: 12px;
     line-height: 15px;
     padding: 10px 14px;
@@ -128,7 +128,7 @@
   }
 
   &.sizeL {
-    height: 44px;
+    height: variables.$buttonHeightLg;
     font-size: 16px;
     line-height: 19px;
     padding: 10px 14px;

diff --git a/airbyte-webapp/src/scss/_variables.scss b/airbyte-webapp/src/scss/_variables.scss
@@ -37,3 +37,7 @@ $width-modal-sm: 492px;
 $width-modal-md: 585px;
 $width-modal-lg: 940px;
 $width-modal-xl: 1008px;
+
+$buttonHeightXs: 32px;
+$buttonHeightSm: 36px;
+$buttonHeightLg: 44px;