🪟 🎨 🧹 Update border radius to use SCSS vars (#19429)

* Update border radius to match design library Update existing uses * Update SCSS border-radius to use vars * Update border radius xl, add 2xl and pill radius and apply to files
airbytehq · Nov 30, 2022 · e0e32be · e0e32be
1 parent 56bfdaa
commit e0e32be
Show file tree

Hide file tree

Showing 39 changed files with 88 additions and 74 deletions.
diff --git a/airbyte-webapp/src/components/ArrayOfObjectsEditor/ArrayOfObjectsEditor.module.scss b/airbyte-webapp/src/components/ArrayOfObjectsEditor/ArrayOfObjectsEditor.module.scss
@@ -1,11 +1,11 @@
-@use "../../scss/colors";
-@use "../../scss/variables";
+@use "scss/colors";
+@use "scss/variables";
 
 .container {
   margin-bottom: variables.$spacing-xl;
 }
 
 .list {
   background-color: colors.$grey-50;
-  border-radius: 4px;
+  border-radius: variables.$border-radius-xs;
 }
diff --git a/airbyte-webapp/src/components/GroupControls/GroupControls.module.scss b/airbyte-webapp/src/components/GroupControls/GroupControls.module.scss
@@ -31,7 +31,7 @@ $border-width: variables.$border-thick;
   border-color: colors.$grey-100;
   border-style: solid;
   border-width: 0 $border-width $border-width;
-  border-radius: variables.$border-radius-md;
+  border-radius: variables.$border-radius-lg;
 
   // box-shadow is used for the top border, so that it overlaps with bottom border when height is 0
   box-shadow: 0 $border-width colors.$grey-100 inset;

diff --git a/airbyte-webapp/src/components/StreamTestingPanel/StreamSelector.module.scss b/airbyte-webapp/src/components/StreamTestingPanel/StreamSelector.module.scss
@@ -11,7 +11,7 @@
 .button {
   padding: variables.$spacing-md;
   background-color: transparent;
-  border-radius: variables.$border-radius-md;
+  border-radius: variables.$border-radius-lg;
   border: none;
   display: flex;
   justify-content: center;

diff --git a/airbyte-webapp/src/components/StreamTestingPanel/StreamTestingPanel.module.scss b/airbyte-webapp/src/components/StreamTestingPanel/StreamTestingPanel.module.scss
@@ -38,7 +38,7 @@ $buttonHeight: 36px;
   flex-direction: column;
   gap: variables.$spacing-md;
   background-color: colors.$blue-50;
-  border-radius: variables.$border-radius-sm;
+  border-radius: variables.$border-radius-md;
 }
 
 .loadingSpinner {

diff --git a/airbyte-webapp/src/components/connection/CatalogTree/BulkHeader.module.scss b/airbyte-webapp/src/components/connection/CatalogTree/BulkHeader.module.scss
@@ -1,10 +1,11 @@
 @use "scss/colors";
+@use "scss/variables";
 
 .schemaHeader {
   min-height: 41px;
   height: 41px;
   background: colors.$blue-400;
-  border-radius: 8px 8px 0 0;
+  border-radius: variables.$border-radius-md variables.$border-radius-md 0 0;
 }
 
 .actionButton {

diff --git a/airbyte-webapp/src/components/connection/CatalogTree/CatalogSection.module.scss b/airbyte-webapp/src/components/connection/CatalogTree/CatalogSection.module.scss
@@ -1,14 +1,15 @@
 @use "scss/colors";
+@use "scss/variables";
 
 .streamFieldTableContainer {
   margin-left: 85px;
   background: colors.$grey-50;
 }
 
 .catalogSection:first-of-type > div:nth-child(1) > div:nth-child(3) {
-  border-radius: 8px 8px 0 0;
+  border-radius: variables.$border-radius-md variables.$border-radius-md 0 0;
 }
 
 .catalogSection:last-of-type > div:nth-child(1) > div:nth-child(3) {
-  border-radius: 0 0 8px 8px;
+  border-radius: 0 0 variables.$border-radius-md variables.$border-radius-md;
 }
diff --git a/airbyte-webapp/src/components/connection/CatalogTree/StreamFieldTable.module.scss b/airbyte-webapp/src/components/connection/CatalogTree/StreamFieldTable.module.scss
@@ -1,7 +1,8 @@
 @use "scss/colors";
+@use "scss/variables";
 
 .rowsContainer {
   background: colors.$white;
-  border-radius: 8px;
+  border-radius: variables.$border-radius-md;
   margin: 0 10px 5px;
 }
diff --git a/airbyte-webapp/src/components/connection/CatalogTree/next/StreamDetailsPanel.module.scss b/airbyte-webapp/src/components/connection/CatalogTree/next/StreamDetailsPanel.module.scss
@@ -14,6 +14,6 @@
   width: calc(100% - variables.$width-size-menu);
   height: calc(100vh - 100px);
   background: colors.$white;
-  border-radius: 15px 15px 0 0;
+  border-radius: variables.$border-radius-2xl variables.$border-radius-2xl 0 0;
   box-shadow: 0 0 22px rgba(colors.$dark-blue-900, 12%);
 }
diff --git a/airbyte-webapp/src/components/ui/Button/Button.module.scss b/airbyte-webapp/src/components/ui/Button/Button.module.scss
@@ -1,4 +1,5 @@
-@use "../../../scss/colors";
+@use "scss/colors";
+@use "scss/variables";
 
 .button {
   display: inline-flex;
@@ -7,7 +8,7 @@
   font-size: 12px;
   line-height: 15px;
   color: colors.$grey;
-  border-radius: 6px;
+  border-radius: variables.$border-radius-sm;
   border: 0;
   font-weight: 600;
   cursor: pointer;

diff --git a/airbyte-webapp/src/components/ui/Card/Card.module.scss b/airbyte-webapp/src/components/ui/Card/Card.module.scss
@@ -7,7 +7,7 @@
 
   width: auto;
   background: colors.$white;
-  border-radius: 10px;
+  border-radius: variables.$border-radius-lg;
 
   &.fullWidth {
     width: 100%;
@@ -32,7 +32,7 @@
   }
 
   &.roundedBottom {
-    border-radius: 10px;
+    border-radius: variables.$border-radius-lg;
   }
 
   &.withDescription {

diff --git a/airbyte-webapp/src/components/ui/Input/Input.module.scss b/airbyte-webapp/src/components/ui/Input/Input.module.scss
@@ -1,11 +1,12 @@
-@use "../../../scss/colors";
+@use "scss/colors";
+@use "scss/variables";
 
 .container {
   width: 100%;
   position: relative;
   background-color: colors.$grey-50;
   border: 1px solid colors.$grey-50;
-  border-radius: 4px;
+  border-radius: variables.$border-radius-xs;
 
   &.light {
     background-color: colors.$white;

diff --git a/airbyte-webapp/src/components/ui/ListBox/ListBox.module.scss b/airbyte-webapp/src/components/ui/ListBox/ListBox.module.scss
@@ -13,7 +13,7 @@
 
 .optionsMenu {
   background-color: colors.$white;
-  border-radius: variables.$border-radius-md;
+  border-radius: variables.$border-radius-lg;
   box-shadow: 0 7px 15px -5px colors.$grey;
   padding: variables.$spacing-md;
   margin-top: 0;
@@ -31,7 +31,7 @@
 
 .optionValue {
   padding: variables.$spacing-lg variables.$spacing-md;
-  border-radius: variables.$border-radius-md;
+  border-radius: variables.$border-radius-lg;
   cursor: pointer;
 }
 

diff --git a/airbyte-webapp/src/components/ui/Markdown/Markdown.module.scss b/airbyte-webapp/src/components/ui/Markdown/Markdown.module.scss
@@ -1,5 +1,6 @@
-@use "../../../scss/colors";
-@use "../../../scss/fonts";
+@use "scss/colors";
+@use "scss/fonts";
+@use "scss/variables";
 
 .markdown {
   * {
@@ -75,8 +76,8 @@
     display: block;
     padding: 15px;
     overflow: auto;
-    border-radius: 8px;
-    border-bottom: 2px solid colors.$grey-100;
+    border-radius: variables.$border-radius-md;
+    border-bottom: variables.$border-thick solid colors.$grey-100;
   }
 
   img {

diff --git a/airbyte-webapp/src/components/ui/Markdown/admonitions.module.scss b/airbyte-webapp/src/components/ui/Markdown/admonitions.module.scss
@@ -1,7 +1,8 @@
-@use "../../../scss/colors";
+@use "scss/colors";
+@use "scss/variables";
 
 .admonition {
-  border-radius: 8px;
+  border-radius: variables.$border-radius-md;
   border-left: 8px solid colors.$grey-300;
   padding: 1px 16px 1px 48px;
   margin: -1px 0 15px;

diff --git a/airbyte-webapp/src/components/ui/NumberBadge/NumberBadge.module.scss b/airbyte-webapp/src/components/ui/NumberBadge/NumberBadge.module.scss
@@ -1,11 +1,12 @@
 @use "scss/colors";
 @use "scss/fonts";
+@use "scss/variables";
 
 .circle {
   height: 20px;
   width: fit-content;
   min-width: 20px;
-  border-radius: 10px;
+  border-radius: variables.$border-radius-lg;
   padding: 0 4px;
   text-align: center;
   overflow: hidden;

diff --git a/airbyte-webapp/src/components/ui/PillSelect/PillButton.module.scss b/airbyte-webapp/src/components/ui/PillSelect/PillButton.module.scss
@@ -27,7 +27,7 @@
   padding: 3px 10px;
   gap: variables.$spacing-sm;
   border: none;
-  border-radius: 20px;
+  border-radius: variables.$border-radius-pill;
   cursor: pointer;
   transition: background-color variables.$transition-out, color variables.$transition-out;
 

diff --git a/airbyte-webapp/src/components/ui/ResizablePanels/ResizablePanels.module.scss b/airbyte-webapp/src/components/ui/ResizablePanels/ResizablePanels.module.scss
@@ -56,7 +56,7 @@
 
 .handleIcon {
   background-color: colors.$grey-100;
-  border-radius: variables.$border-radius-sm;
+  border-radius: variables.$border-radius-md;
 }
 
 .handleIconVertical {

diff --git a/airbyte-webapp/src/components/ui/StepsIndicator/StepsIndicator.module.scss b/airbyte-webapp/src/components/ui/StepsIndicator/StepsIndicator.module.scss
@@ -15,7 +15,7 @@
   display: inline-block;
   width: 35px;
   height: 4px;
-  border-radius: 3px;
+  border-radius: variables.$border-radius-2xs;
   background-color: colors.$grey-300;
 
   // Give the element a bit larger hover area for the tooltip to show

diff --git a/airbyte-webapp/src/components/ui/Switch/Switch.module.scss b/airbyte-webapp/src/components/ui/Switch/Switch.module.scss
@@ -1,5 +1,5 @@
-@use "../../../scss/colors";
-@use "../../../scss/variables";
+@use "scss/colors";
+@use "scss/variables";
 
 @mixin knob-transform($position, $small: false) {
   @if $position == left {
@@ -31,7 +31,7 @@
     bottom: 0;
     background: colors.$grey-100;
     transition: variables.$transition;
-    border-radius: 20px;
+    border-radius: variables.$border-radius-pill;
     border: 1px solid colors.$grey-200;
 
     &.small::before {

diff --git a/airbyte-webapp/src/components/ui/TagInput/TagInput.module.scss b/airbyte-webapp/src/components/ui/TagInput/TagInput.module.scss
@@ -4,6 +4,6 @@
 :export {
   backgroundColor: colors.$dark-blue-800;
   fontColor: colors.$white;
-  borderRadius: variables.$border-radius-sm;
+  borderRadius: variables.$border-radius-md;
   paddingLeft: variables.$spacing-sm;
 }
diff --git a/airbyte-webapp/src/components/ui/TextArea/TextArea.module.scss b/airbyte-webapp/src/components/ui/TextArea/TextArea.module.scss
@@ -1,12 +1,12 @@
-@use "../../../scss/colors";
-@use "../../../scss/variables";
+@use "scss/colors";
+@use "scss/variables";
 
 .textarea {
   outline: none;
   resize: none;
   width: 100%;
   padding: 7px 8px;
-  border-radius: 4px;
+  border-radius: variables.$border-radius-xs;
   font-size: 14px;
   line-height: 20px;
   font-weight: normal;

diff --git a/airbyte-webapp/src/components/ui/TextInputContainer/TextInputContainer.module.scss b/airbyte-webapp/src/components/ui/TextInputContainer/TextInputContainer.module.scss
@@ -1,12 +1,12 @@
-@use "../../../scss/colors";
-@use "../../../scss/variables";
+@use "scss/colors";
+@use "scss/variables";
 
 .container {
   width: 100%;
   position: relative;
   background-color: colors.$grey-50;
   border: 1px solid colors.$grey-50;
-  border-radius: 4px;
+  border-radius: variables.$border-radius-xs;
 
   &.light {
     background-color: colors.$white;

diff --git a/airbyte-webapp/src/components/ui/Tooltip/Tooltip.module.scss b/airbyte-webapp/src/components/ui/Tooltip/Tooltip.module.scss
@@ -1,7 +1,7 @@
 @use "scss/colors";
+@use "scss/mixins";
 @use "scss/variables";
 @use "scss/z-indices";
-@use "scss/mixins";
 
 .container {
   display: inline;
@@ -14,7 +14,7 @@
   font-size: 12px;
   line-height: initial;
   padding: variables.$spacing-md;
-  border-radius: 6px;
+  border-radius: variables.$border-radius-sm;
   max-width: 300px;
   z-index: z-indices.$tooltip;
   background: rgba(colors.$dark-blue, 0.9);

diff --git a/airbyte-webapp/src/packages/cloud/views/auth/OAuthLogin/OAuthLogin.module.scss b/airbyte-webapp/src/packages/cloud/views/auth/OAuthLogin/OAuthLogin.module.scss
@@ -34,7 +34,7 @@
   margin: vars.$spacing-sm auto;
   padding: vars.$spacing-md;
   gap: vars.$spacing-md;
-  border-radius: vars.$border-radius-sm;
+  border-radius: vars.$border-radius-md;
   transition: all vars.$transition;
   cursor: pointer;
 

diff --git a/airbyte-webapp/src/packages/cloud/views/layout/SideBar/SideBar.module.scss b/airbyte-webapp/src/packages/cloud/views/layout/SideBar/SideBar.module.scss
@@ -12,7 +12,7 @@ $sidebar-workspace-font-weight: 400;
   height: 21px;
   width: 100%;
   border: variables.$border-thin solid colors.$grey-100;
-  border-radius: variables.$border-radius-md;
+  border-radius: variables.$border-radius-lg;
   background-color: rgba(255, 255, 255, 20%);
   margin-top: variables.$spacing-md;
   padding: 0 variables.$spacing-md;

diff --git a/...p/src/packages/cloud/views/workspaces/WorkspacesPage/components/WorkspaceItem.module.scss b/...p/src/packages/cloud/views/workspaces/WorkspacesPage/components/WorkspaceItem.module.scss
@@ -1,5 +1,6 @@
 @use "scss/colors";
 @use "scss/mixins";
+@use "scss/variables";
 
 .button {
   @include mixins.shadow;
@@ -12,7 +13,7 @@
   cursor: pointer;
   width: 100%;
   background: colors.$white;
-  border-radius: 10px;
+  border-radius: variables.$border-radius-lg;
   border: none;
 }
 

diff --git a/airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/ConnectionName.module.scss b/airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/ConnectionName.module.scss
@@ -30,7 +30,7 @@
   composes: textContainer;
   background-color: colors.$grey-100;
   border: variables.$border-thin solid colors.$grey-100;
-  border-radius: variables.$border-radius-sm;
+  border-radius: variables.$border-radius-md;
   padding: 0 variables.$spacing-xl;
 
   div {
@@ -58,23 +58,23 @@
   composes: textContainer;
   background-color: colors.$white;
   border: variables.$border-thin solid colors.$blue;
-  border-radius: variables.$border-radius-sm;
+  border-radius: variables.$border-radius-md;
 }
 
 .inputContainer {
   height: 50px;
   width: 100%;
 
   div {
-    border-radius: variables.$border-radius-sm;
+    border-radius: variables.$border-radius-md;
     border: none;
     box-shadow: none;
     background-color: colors.$white !important; // fix style import order issue
   }
 }
 
 .input {
-  border-radius: variables.$border-radius-sm;
+  border-radius: variables.$border-radius-md;
   background-color: colors.$white;
   font-size: 24px !important; // fix style import order issue
   height: 50px;

diff --git a/airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/StatusMainInfo.module.scss b/airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/StatusMainInfo.module.scss
@@ -1,10 +1,10 @@
-@use "../../../../scss/colors";
-@use "../../../../scss/variables";
+@use "scss/colors";
+@use "scss/variables";
 
 .connectorLink {
   cursor: pointer;
   text-decoration: none;
-  border-radius: 10px;
+  border-radius: variables.$border-radius-lg;
 
   &:hover {
     background-color: colors.$grey-50;
@@ -30,7 +30,7 @@
   flex-wrap: wrap;
   padding: variables.$spacing-md variables.$spacing-xl;
   background-color: white;
-  border-radius: 10px;
+  border-radius: variables.$border-radius-lg;
 }
 
 .enabledControlContainer {