From e0e32bef10d64def972e7af88e9d4a99f0e3e17c Mon Sep 17 00:00:00 2001 From: Edmundo Ruiz Ghanem <168664+edmundito@users.noreply.github.com> Date: Wed, 30 Nov 2022 11:42:57 -0500 Subject: [PATCH] =?UTF-8?q?=F0=9F=AA=9F=20=F0=9F=8E=A8=20=F0=9F=A7=B9=20Up?= =?UTF-8?q?date=20border=20radius=20to=20use=20SCSS=20vars=20(#19429)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * 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 --- .../ArrayOfObjectsEditor.module.scss | 6 +++--- .../components/GroupControls/GroupControls.module.scss | 2 +- .../StreamTestingPanel/StreamSelector.module.scss | 2 +- .../StreamTestingPanel/StreamTestingPanel.module.scss | 2 +- .../connection/CatalogTree/BulkHeader.module.scss | 3 ++- .../connection/CatalogTree/CatalogSection.module.scss | 5 +++-- .../connection/CatalogTree/StreamFieldTable.module.scss | 3 ++- .../CatalogTree/next/StreamDetailsPanel.module.scss | 2 +- .../src/components/ui/Button/Button.module.scss | 5 +++-- airbyte-webapp/src/components/ui/Card/Card.module.scss | 4 ++-- airbyte-webapp/src/components/ui/Input/Input.module.scss | 5 +++-- .../src/components/ui/ListBox/ListBox.module.scss | 4 ++-- .../src/components/ui/Markdown/Markdown.module.scss | 9 +++++---- .../src/components/ui/Markdown/admonitions.module.scss | 5 +++-- .../components/ui/NumberBadge/NumberBadge.module.scss | 3 ++- .../src/components/ui/PillSelect/PillButton.module.scss | 2 +- .../ui/ResizablePanels/ResizablePanels.module.scss | 2 +- .../ui/StepsIndicator/StepsIndicator.module.scss | 2 +- .../src/components/ui/Switch/Switch.module.scss | 6 +++--- .../src/components/ui/TagInput/TagInput.module.scss | 2 +- .../src/components/ui/TextArea/TextArea.module.scss | 6 +++--- .../ui/TextInputContainer/TextInputContainer.module.scss | 6 +++--- .../src/components/ui/Tooltip/Tooltip.module.scss | 4 ++-- .../cloud/views/auth/OAuthLogin/OAuthLogin.module.scss | 2 +- .../cloud/views/layout/SideBar/SideBar.module.scss | 2 +- .../WorkspacesPage/components/WorkspaceItem.module.scss | 3 ++- .../pages/ConnectionItemPage/ConnectionName.module.scss | 8 ++++---- .../pages/ConnectionItemPage/StatusMainInfo.module.scss | 8 ++++---- .../ConnectorBuilderPage.module.scss | 4 ++-- airbyte-webapp/src/scss/_variables.scss | 8 ++++++-- .../components/DiffFieldTable.module.scss | 6 +++--- .../CatalogDiffModal/components/FieldRow.module.scss | 2 +- .../CatalogDiffModal/components/StreamRow.module.scss | 2 +- .../ConnectorServiceTypeControl.module.scss | 6 +++--- .../FrequentlyUsedConnectorsCard.module.scss | 4 ++-- .../components/Property/LabelInfo.module.scss | 5 +++-- .../StartWithDestinationCard.module.scss | 6 +++--- .../ConnectorForm/components/WarningMessage.module.scss | 2 +- .../src/views/layout/SideBar/SideBar.module.scss | 4 ++-- 39 files changed, 88 insertions(+), 74 deletions(-) diff --git a/airbyte-webapp/src/components/ArrayOfObjectsEditor/ArrayOfObjectsEditor.module.scss b/airbyte-webapp/src/components/ArrayOfObjectsEditor/ArrayOfObjectsEditor.module.scss index 37f2047a4c50e..a8dd2d449d096 100644 --- a/airbyte-webapp/src/components/ArrayOfObjectsEditor/ArrayOfObjectsEditor.module.scss +++ b/airbyte-webapp/src/components/ArrayOfObjectsEditor/ArrayOfObjectsEditor.module.scss @@ -1,5 +1,5 @@ -@use "../../scss/colors"; -@use "../../scss/variables"; +@use "scss/colors"; +@use "scss/variables"; .container { margin-bottom: variables.$spacing-xl; @@ -7,5 +7,5 @@ .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 index 5b897968b56bf..ee2ad793203b6 100644 --- 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 index 4768d440fe128..7f297b2eb5cf7 100644 --- 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 index 30a5b84802279..43a610209f84b 100644 --- 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 index e5d290ce2c3d7..aa91ae6c59bf9 100644 --- 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 index ab6bdcf4c2b0a..5c4731091cc5c 100644 --- a/airbyte-webapp/src/components/connection/CatalogTree/CatalogSection.module.scss +++ b/airbyte-webapp/src/components/connection/CatalogTree/CatalogSection.module.scss @@ -1,4 +1,5 @@ @use "scss/colors"; +@use "scss/variables"; .streamFieldTableContainer { margin-left: 85px; @@ -6,9 +7,9 @@ } .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 index c47665eda94af..4e0b393565817 100644 --- 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 index 706de7384422f..e62fa68b3b79d 100644 --- 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 index 60ca8d52fc70a..3ac76b37cd6e7 100644 --- 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 index 2464435ac7206..d2cca0a3e3d99 100644 --- 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 index f906c7222ce08..1d6d0f9f7a6f1 100644 --- 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 index e674dc1e9173a..f033d34d7cb07 100644 --- 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 index 4b28391fbd839..360da7e42029a 100644 --- 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 index e6691d7c00e93..c3307a3f4ae92 100644 --- 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 index ddb7ab7616b89..83a0681d48217 100644 --- 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 index 3cf05bde64ae5..50dd7a1368bd3 100644 --- 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 index 9c1e536caf2b0..d73b158f15c98 100644 --- 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 index 37f20661ea4ff..3f197ee907fd7 100644 --- 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 index afb8a5227d7ad..3cfc6177a1e75 100644 --- 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 index 36d3521be8f1c..1618544024498 100644 --- 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 index 0841f0864278e..a0f877f3db70a 100644 --- 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 index a7fa203693a3f..eccc89e2c1b4e 100644 --- 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 index ffb4d4521286f..4dd592176544a 100644 --- 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 index 311bfd566727a..bbe1cea8a1128 100644 --- 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 index f1682b72b58a6..a5f6c198c723e 100644 --- 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/airbyte-webapp/src/packages/cloud/views/workspaces/WorkspacesPage/components/WorkspaceItem.module.scss b/airbyte-webapp/src/packages/cloud/views/workspaces/WorkspacesPage/components/WorkspaceItem.module.scss index 5f3096bab5576..07ff6b27099bc 100644 --- a/airbyte-webapp/src/packages/cloud/views/workspaces/WorkspacesPage/components/WorkspaceItem.module.scss +++ b/airbyte-webapp/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 index d53a708b12bee..bca89e2280045 100644 --- 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,7 +58,7 @@ 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 { @@ -66,7 +66,7 @@ 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 @@ -74,7 +74,7 @@ } .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 index 0600e7479c57e..240473fdd2bd2 100644 --- 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 { diff --git a/airbyte-webapp/src/pages/ConnectorBuilderPage/ConnectorBuilderPage.module.scss b/airbyte-webapp/src/pages/ConnectorBuilderPage/ConnectorBuilderPage.module.scss index 79758f7179f84..79e8dc13b02b0 100644 --- a/airbyte-webapp/src/pages/ConnectorBuilderPage/ConnectorBuilderPage.module.scss +++ b/airbyte-webapp/src/pages/ConnectorBuilderPage/ConnectorBuilderPage.module.scss @@ -6,8 +6,8 @@ } .rightPanel { - border-top-left-radius: variables.$border-radius-md; - border-bottom-left-radius: variables.$border-radius-md; + border-top-left-radius: variables.$border-radius-lg; + border-bottom-left-radius: variables.$border-radius-lg; background-color: colors.$white; } diff --git a/airbyte-webapp/src/scss/_variables.scss b/airbyte-webapp/src/scss/_variables.scss index c34301973701b..4b747c9047711 100644 --- a/airbyte-webapp/src/scss/_variables.scss +++ b/airbyte-webapp/src/scss/_variables.scss @@ -4,10 +4,14 @@ $transition-out: $transition ease-out; $border-thin: 1px; $border-thick: 2px; +$border-radius-2xs: 3px; $border-radius-xs: 4px; -$border-radius-sm: 8px; -$border-radius-md: 10px; +$border-radius-sm: 6px; +$border-radius-md: 8px; +$border-radius-lg: 10px; +$border-radius-xl: 12px; $border-radius-2xl: 15px; +$border-radius-pill: 500px; $spacing-xs: 3px; $spacing-sm: 5px; diff --git a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffFieldTable.module.scss b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffFieldTable.module.scss index edeef872b6bce..69e182521d278 100644 --- a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffFieldTable.module.scss +++ b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffFieldTable.module.scss @@ -17,14 +17,14 @@ border-spacing: 0; & tbody > tr:first-of-type > td:nth-of-type(2) { - border-radius: variables.$border-radius-sm variables.$border-radius-sm 0 0; + border-radius: variables.$border-radius-md variables.$border-radius-md 0 0; } & tbody > tr:last-of-type > td:nth-of-type(2) { - border-radius: 0 0 variables.$border-radius-sm variables.$border-radius-sm; + border-radius: 0 0 variables.$border-radius-md variables.$border-radius-md; } & tbody > tr:only-of-type > td:nth-of-type(2) { - border-radius: variables.$border-radius-sm; + border-radius: variables.$border-radius-md; } } diff --git a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/FieldRow.module.scss b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/FieldRow.module.scss index 8d9c8968bf6d1..53db6af71da29 100644 --- a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/FieldRow.module.scss +++ b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/FieldRow.module.scss @@ -64,7 +64,7 @@ tr:last-child .content { span { background-color: rgba(98, 94, 255, 10%); padding: variables.$spacing-sm; - border-radius: variables.$border-radius-sm; + border-radius: variables.$border-radius-xs; } } } diff --git a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/StreamRow.module.scss b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/StreamRow.module.scss index adbb2651fd932..9f5c6b74c712e 100644 --- a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/StreamRow.module.scss +++ b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/StreamRow.module.scss @@ -53,7 +53,7 @@ .syncModeBox { font-size: 11px; line-height: 12px; - border-radius: variables.$border-radius-sm; + border-radius: variables.$border-radius-md; padding: variables.$spacing-sm variables.$spacing-md; width: 226px; opacity: 0.5; diff --git a/airbyte-webapp/src/views/Connector/ConnectorForm/components/Controls/ConnectorServiceTypeControl/ConnectorServiceTypeControl.module.scss b/airbyte-webapp/src/views/Connector/ConnectorForm/components/Controls/ConnectorServiceTypeControl/ConnectorServiceTypeControl.module.scss index a8f3738b326eb..530470fee870e 100644 --- a/airbyte-webapp/src/views/Connector/ConnectorForm/components/Controls/ConnectorServiceTypeControl/ConnectorServiceTypeControl.module.scss +++ b/airbyte-webapp/src/views/Connector/ConnectorForm/components/Controls/ConnectorServiceTypeControl/ConnectorServiceTypeControl.module.scss @@ -1,5 +1,5 @@ -@use "../../../../../../scss/colors"; -@use "../../../../../../scss/variables" as vars; +@use "scss/colors"; +@use "scss/variables" as vars; .connectorListFooter { width: 100%; @@ -37,7 +37,7 @@ background: colors.$grey-100; color: colors.$dark-blue; text-transform: uppercase; - border-radius: 25px; + border-radius: vars.$border-radius-pill; font-weight: 500; font-size: 8px; line-height: 10px; diff --git a/airbyte-webapp/src/views/Connector/ConnectorForm/components/FrequentlyUsedConnectors/FrequentlyUsedConnectorsCard.module.scss b/airbyte-webapp/src/views/Connector/ConnectorForm/components/FrequentlyUsedConnectors/FrequentlyUsedConnectorsCard.module.scss index a3c25af364dfb..3f0f628bf50f9 100644 --- a/airbyte-webapp/src/views/Connector/ConnectorForm/components/FrequentlyUsedConnectors/FrequentlyUsedConnectorsCard.module.scss +++ b/airbyte-webapp/src/views/Connector/ConnectorForm/components/FrequentlyUsedConnectors/FrequentlyUsedConnectorsCard.module.scss @@ -2,7 +2,7 @@ @use "../../../../../scss/variables"; .container { - border-radius: variables.$border-radius-sm; + border-radius: variables.$border-radius-md; overflow: hidden; } @@ -10,7 +10,7 @@ cursor: pointer; background: colors.$white; border: variables.$border-thin solid colors.$grey-100; - border-radius: variables.$border-radius-sm; + border-radius: variables.$border-radius-md; min-height: 70px; width: 100%; diff --git a/airbyte-webapp/src/views/Connector/ConnectorForm/components/Property/LabelInfo.module.scss b/airbyte-webapp/src/views/Connector/ConnectorForm/components/Property/LabelInfo.module.scss index f0238d25b1696..9215d04fa8725 100644 --- a/airbyte-webapp/src/views/Connector/ConnectorForm/components/Property/LabelInfo.module.scss +++ b/airbyte-webapp/src/views/Connector/ConnectorForm/components/Property/LabelInfo.module.scss @@ -1,4 +1,5 @@ -@use "../../../../../scss/colors"; +@use "scss/colors"; +@use "scss/variables"; .container { display: flex; @@ -34,5 +35,5 @@ max-width: 100%; padding: 3px 6px; background-color: colors.$dark-blue-400; - border-radius: 9px; + border-radius: variables.$border-radius-md; } diff --git a/airbyte-webapp/src/views/Connector/ConnectorForm/components/StartWithDestination/StartWithDestinationCard.module.scss b/airbyte-webapp/src/views/Connector/ConnectorForm/components/StartWithDestination/StartWithDestinationCard.module.scss index d59a5905e63a2..6c1c18e7ddee3 100644 --- a/airbyte-webapp/src/views/Connector/ConnectorForm/components/StartWithDestination/StartWithDestinationCard.module.scss +++ b/airbyte-webapp/src/views/Connector/ConnectorForm/components/StartWithDestination/StartWithDestinationCard.module.scss @@ -1,5 +1,5 @@ -@use "../../../../../scss/colors"; -@use "../../../../../scss/variables" as vars; +@use "scss/colors"; +@use "scss/variables" as vars; .button { cursor: pointer; @@ -7,7 +7,7 @@ padding: 0; margin: 0; width: 100%; - border-radius: 10px; + border-radius: vars.$border-radius-lg; } .connectorCardWrapper { diff --git a/airbyte-webapp/src/views/Connector/ConnectorForm/components/WarningMessage.module.scss b/airbyte-webapp/src/views/Connector/ConnectorForm/components/WarningMessage.module.scss index 20f4e7cbddfbb..7738eda819a46 100644 --- a/airbyte-webapp/src/views/Connector/ConnectorForm/components/WarningMessage.module.scss +++ b/airbyte-webapp/src/views/Connector/ConnectorForm/components/WarningMessage.module.scss @@ -4,7 +4,7 @@ .container { padding: vars.$spacing-md vars.$spacing-lg; background: colors.$yellow-100; - border-radius: vars.$border-radius-md; + border-radius: vars.$border-radius-lg; white-space: break-spaces; margin-top: vars.$spacing-lg; } diff --git a/airbyte-webapp/src/views/layout/SideBar/SideBar.module.scss b/airbyte-webapp/src/views/layout/SideBar/SideBar.module.scss index d692eccf13a3f..1d3154762feaa 100644 --- a/airbyte-webapp/src/views/layout/SideBar/SideBar.module.scss +++ b/airbyte-webapp/src/views/layout/SideBar/SideBar.module.scss @@ -46,7 +46,7 @@ background: transparent; border: 0; cursor: pointer; - border-radius: variables.$border-radius-md; + border-radius: variables.$border-radius-lg; color: inherit; text-decoration: none; transition: all variables.$transition-out; @@ -72,7 +72,7 @@ color: colors.$dark-blue; width: 100%; cursor: pointer; - border-radius: 12px; + border-radius: variables.$border-radius-xl; height: 70px; display: flex; flex-direction: column;