🪟 🎉 New theme for Airbyte UI (#18817)

* New Webapp theme

* Remove debug banner

* Remove GlobalStyles from storybook

* Remove beige color palette

* Fix storybook styling

* Fix hover color in sidebar

* Improve transitions

Author: Tim Roes

airbyte-webapp/.storybook/preview.ts

@@ -3,6 +3,7 @@ import { addDecorator } from "@storybook/react";
 import { withProviders } from "./withProvider";
 
 import "!style-loader!css-loader!sass-loader!../public/index.css";
+import "../src/scss/global.scss";
 
 addDecorator(withProviders);
 

airbyte-webapp/.storybook/withProvider.tsx

@@ -7,7 +7,6 @@ import { QueryClientProvider, QueryClient } from "react-query";
 
 // TODO: theme was not working correctly so imported directly
 import { theme } from "../src/theme";
-import GlobalStyle from "../src/global-styles";
 import messages from "../src/locales/en.json";
 import { FeatureService } from "../src/hooks/services/Feature";
 import { ConfigServiceProvider, defaultConfig } from "../src/config";
@@ -45,7 +44,6 @@ export const withProviders = (getStory) => (
                 <ConfigServiceProvider defaultConfig={defaultConfig} providers={[]}>
                   <DocumentationPanelProvider>
                     <FeatureService features={[]}>
-                      <GlobalStyle />
                       {getStory()}
                     </FeatureService>
                   </DocumentationPanelProvider>

airbyte-webapp/public/simpleLogo.svg

@@ -25,17 +25,13 @@ import {
   ValueProvider,
   windowConfigProvider,
 } from "./config";
-import GlobalStyle from "./global-styles";
 import en from "./locales/en.json";
 import { Routing } from "./pages/routes";
 import { WorkspaceServiceProvider } from "./services/workspaces/WorkspacesService";
 import { theme } from "./theme";
 
 const StyleProvider: React.FC<React.PropsWithChildren<unknown>> = ({ children }) => (
-  <ThemeProvider theme={theme}>
-    <GlobalStyle />
-    {children}
-  </ThemeProvider>
+  <ThemeProvider theme={theme}>{children}</ThemeProvider>
 );
 
 const configProviders: ValueProvider<Config> = [envConfigProvider, windowConfigProvider];

airbyte-webapp/src/App.tsx

@@ -8,13 +8,13 @@ export const CreditsIcon = ({ color = theme.greyColor20 }: Props) => (
   <svg width="30" height="24" viewBox="0 0 30 24" fill={color}>
     <path
       d="M17 2C18.83 1.99913 20.6049 2.62567 22.0289 3.77513C23.4528 4.92458 24.4396 6.52748 24.8247 8.31647C25.2098 10.1055 24.9699 11.9724 24.1451 13.6059C23.3202 15.2395 21.9603 16.5408 20.292 17.293C19.7588 18.4719 18.9475 19.5039 17.9279 20.3004C16.9082 21.097 15.7106 21.6343 14.4376 21.8663C13.1647 22.0984 11.8545 22.0182 10.6194 21.6327C9.38423 21.2472 8.26104 20.5678 7.34611 19.6529C6.43119 18.738 5.75184 17.6148 5.36632 16.3796C4.9808 15.1445 4.90062 13.8343 5.13266 12.5614C5.3647 11.2884 5.90203 10.0908 6.69857 9.07114C7.49511 8.05148 8.52709 7.24024 9.706 6.707C10.3401 5.30389 11.3656 4.1135 12.6593 3.27861C13.9531 2.44371 15.4602 1.99976 17 2ZM13 8C12.2121 8 11.4319 8.1552 10.7039 8.45672C9.97595 8.75825 9.31451 9.20021 8.75736 9.75736C8.20021 10.3145 7.75825 10.9759 7.45673 11.7039C7.1552 12.4319 7 13.2121 7 14C7 14.7879 7.1552 15.5681 7.45673 16.2961C7.75825 17.0241 8.20021 17.6855 8.75736 18.2426C9.31451 18.7998 9.97595 19.2417 10.7039 19.5433C11.4319 19.8448 12.2121 20 13 20C14.5913 20 16.1174 19.3679 17.2426 18.2426C18.3679 17.1174 19 15.5913 19 14C19 12.4087 18.3679 10.8826 17.2426 9.75736C16.1174 8.63214 14.5913 8 13 8ZM17 4C16.1527 3.99901 15.3148 4.17794 14.5418 4.52496C13.7688 4.87198 13.0783 5.37918 12.516 6.013C13.6463 5.94439 14.7782 6.1165 15.837 6.51795C16.8958 6.9194 17.8573 7.54105 18.6579 8.34178C19.4586 9.14252 20.0801 10.1041 20.4814 11.1629C20.8828 12.2218 21.0547 13.3537 20.986 14.484C21.8952 13.6756 22.5372 12.6099 22.8268 11.4283C23.1164 10.2467 23.04 9.00491 22.6076 7.86772C22.1753 6.73053 21.4074 5.75164 20.4059 5.06088C19.4044 4.37013 18.2166 4.00014 17 4Z"
-      fill="white"
+      fill="currentColor"
     />
     <path
       fillRule="evenodd"
       clipRule="evenodd"
       d="M10.9338 10.8869C11.8855 9.81015 13.4616 9.49428 14.7573 10.1158C16.4788 10.9417 17.1068 13.0455 16.1696 14.6684L14.0611 18.3151C13.9433 18.5189 13.7494 18.6675 13.522 18.7285C13.2946 18.7894 13.0524 18.7576 12.8484 18.6401L15.4011 14.2243C16.0811 13.0464 15.6263 11.5197 14.3782 10.9186C13.4417 10.4676 12.2969 10.6929 11.6051 11.4685C11.2235 11.8943 11.0092 12.4441 11.0021 13.0158C10.9949 13.5875 11.1954 14.1425 11.5662 14.5777C11.6329 14.6558 11.7046 14.7294 11.7809 14.7981L10.2907 17.3806C10.2324 17.4816 10.1548 17.5701 10.0623 17.641C9.96985 17.712 9.8643 17.7641 9.7517 17.7942C9.6391 17.8244 9.52166 17.8321 9.40609 17.8169C9.29051 17.8017 9.17906 17.7639 9.0781 17.7056L10.6959 14.9019C10.4635 14.5669 10.2967 14.1909 10.2041 13.7938L9.2127 15.5153C9.09485 15.7191 8.90096 15.8678 8.67359 15.9287C8.44622 15.9897 8.20396 15.9579 8 15.8404L10.5637 11.3997C10.6704 11.2174 10.7944 11.0456 10.9338 10.8869ZM13.8928 12.3004C14.5103 12.657 14.7235 13.45 14.3662 14.0671L11.9078 18.3145C11.79 18.5183 11.5961 18.667 11.3687 18.7279C11.1413 18.7889 10.8991 18.7571 10.6951 18.6396L12.9778 14.6852C12.7947 14.6466 12.6221 14.5688 12.4719 14.457C12.3218 14.3453 12.1977 14.2023 12.1082 14.0379C12.0187 13.8735 11.966 13.6916 11.9536 13.5049C11.9413 13.3181 11.9696 13.1309 12.0366 12.9561C12.1037 12.7814 12.2078 12.6233 12.342 12.4927C12.4761 12.3621 12.6369 12.2622 12.8134 12.1999C12.9899 12.1375 13.1778 12.1142 13.3641 12.1316C13.5505 12.1489 13.7309 12.2065 13.8928 12.3004ZM12.9986 13.0986C12.9564 13.131 12.9209 13.1715 12.8943 13.2176H12.8942C12.8541 13.2871 12.8355 13.3669 12.8407 13.447C12.846 13.527 12.8748 13.6037 12.9237 13.6674C12.9725 13.731 13.0392 13.7787 13.1151 13.8045C13.1911 13.8303 13.273 13.833 13.3505 13.8122C13.428 13.7915 13.4976 13.7482 13.5505 13.6879C13.6034 13.6275 13.6372 13.5529 13.6477 13.4733C13.6581 13.3938 13.6448 13.3129 13.6093 13.241C13.5738 13.169 13.5178 13.1092 13.4483 13.0691C13.4022 13.0425 13.3513 13.0252 13.2985 13.0182C13.2457 13.0113 13.192 13.0148 13.1405 13.0286C13.0891 13.0424 13.0409 13.0662 12.9986 13.0986Z"
-      fill="white"
+      fill="currentColor"
     />
   </svg>
 );

airbyte-webapp/src/components/icons/CreditsIcon.tsx

@@ -16,8 +16,9 @@
   }
 }
 
-.beige {
-  background-color: colors.$beige-100;
+.default {
+  background-color: colors.$blue;
+  color: colors.$white;
 }
 
 .red {

airbyte-webapp/src/components/ui/Banner/AlertBanner.module.scss

@@ -10,7 +10,7 @@ interface AlertBannerProps {
 
 export const AlertBanner: React.FC<AlertBannerProps> = ({ color, message }) => {
   const bannerStyle = classnames(styles.alertBannerContainer, {
-    [styles.beige]: color === "default" || !color,
+    [styles.default]: color === "default" || !color,
     [styles.red]: color === "warning",
   });
 

airbyte-webapp/src/components/ui/Banner/AlertBanner.tsx

@@ -8,7 +8,7 @@ interface Props {
 }
 
 const Box = styled.div`
-  background: ${({ theme }) => theme.darkBeigeColor};
+  background: ${({ theme }) => theme.yellow100};
   border-radius: 8px;
   padding: 18px 25px 22px;
   font-size: 14px;

airbyte-webapp/src/components/ui/InfoBox/InfoBox.tsx

@@ -20,7 +20,7 @@ const StepView = styled.div<{
   min-width: ${({ lightMode }) => (lightMode ? "100px" : "auto")};
   min-height: 28px;
   padding: 6px 14px;
-  border-radius: 4px;
+  border-radius: 28px;
   pointer-events: ${({ isActive, nonClickable }) => (isActive || nonClickable ? "none" : "all")};
   cursor: ${({ nonClickable }) => (nonClickable ? "default" : "pointer")};
   text-align: center;

airbyte-webapp/src/components/ui/StepsMenu/Step.tsx

@@ -84,7 +84,7 @@ const Th = styled.th<TableHeaderProps>`
   font-size: ${({ light }) => (light ? 11 : 10)}px;
   line-height: 12px;
   color: ${({ theme, highlighted }) => (highlighted ? theme.whiteColor : theme.lightTextColor)};
-  border-bottom: ${({ theme, light }) => (light ? "none" : ` 1px solid ${theme.backgroundColor}`)};
+  border-bottom: none;
   width: ${({ collapse, customWidth }) => (customWidth ? `${customWidth}%` : collapse ? "0.0000000001%" : "auto")};
   font-weight: ${({ light }) => (light ? 400 : 600)};
   text-transform: ${({ light }) => (light ? "capitalize" : "uppercase")};

airbyte-webapp/src/components/ui/Table/Table.tsx

@@ -8,6 +8,7 @@ import { loadOsano } from "utils/dataPrivacy";
 import { loadSentry } from "utils/sentry";
 
 import "./globals";
+import "./scss/global.scss";
 
 // We do not follow default config approach since we want to init sentry/datadog asap
 loadSentry();

airbyte-webapp/src/global-styles.tsx

@@ -4,6 +4,7 @@
   "notifications.error.somethingWentWrong": "Something went wrong",
   "notifications.error.noMessage": "No error message",
 
+  "sidebar.homepage": "Homepage",
   "sidebar.sources": "Sources",
   "sidebar.destinations": "Destinations",
   "sidebar.admin": "Admin",

airbyte-webapp/src/index.tsx

@@ -1,4 +1,3 @@
-import GlobalStyle from "global-styles";
 import React, { Suspense } from "react";
 import { HelmetProvider } from "react-helmet-async";
 import { BrowserRouter as Router } from "react-router-dom";
@@ -28,10 +27,7 @@ import { IntercomProvider } from "./services/thirdParty/intercom/IntercomProvide
 const messages = { ...en, ...cloudLocales };
 
 const StyleProvider: React.FC<React.PropsWithChildren<unknown>> = ({ children }) => (
-  <ThemeProvider theme={theme}>
-    <GlobalStyle />
-    {children}
-  </ThemeProvider>
+  <ThemeProvider theme={theme}>{children}</ThemeProvider>
 );
 
 const Services: React.FC<React.PropsWithChildren<unknown>> = ({ children }) => (

airbyte-webapp/src/locales/en.json

@@ -9,11 +9,11 @@
   z-index: 3;
   font-size: 12px;
   line-height: 15px;
-  color: colors.$black;
   padding: 8px;
   display: flex;
   align-items: center;
-  background-color: colors.$beige-100;
+  background-color: colors.$blue;
+  color: colors.$white;
 
   @media (min-width: 1280px) {
     height: 50px;

airbyte-webapp/src/packages/cloud/App.tsx

@@ -24,7 +24,7 @@ interface Props {
 }
 
 const Block = styled.div`
-  background: ${({ theme }) => theme.darkBeigeColor};
+  background: ${({ theme }) => theme.blue50};
   border-radius: 8px;
   padding: 18px 25px 22px;
   font-size: 13px;

airbyte-webapp/src/packages/cloud/components/experiments/SpeedyConnection/SpeedyConnectionBanner/SpeedyConnectionBanner.module.scss

@@ -11,14 +11,13 @@ $sidebar-workspace-font-weight: 400;
   display: block;
   height: 21px;
   width: 100%;
-  border: 0;
+  border: variables.$border-thin solid colors.$grey-100;
   border-radius: variables.$border-radius-md;
   background-color: rgba(255, 255, 255, 20%);
   margin-top: variables.$spacing-md;
   padding: 0 variables.$spacing-md;
   font-size: $sidebar-workspace-font-size;
   font-weight: $sidebar-workspace-font-weight;
-  color: colors.$white;
   white-space: nowrap;
   text-overflow: ellipsis;
   text-align: center;

airbyte-webapp/src/packages/cloud/views/credits/CreditsPage/components/RemainingCredits.tsx

@@ -3,7 +3,7 @@ import { faEnvelope } from "@fortawesome/free-regular-svg-icons";
 import { faDesktop, faQuestionCircle } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import React from "react";
-import { FormattedMessage, FormattedNumber } from "react-intl";
+import { FormattedMessage, FormattedNumber, useIntl } from "react-intl";
 import { NavLink } from "react-router-dom";
 
 import { Link } from "components";
@@ -19,6 +19,7 @@ import { useIntercom } from "packages/cloud/services/thirdParty/intercom";
 import { useGetCloudWorkspace } from "packages/cloud/services/workspaces/CloudWorkspacesService";
 import { WorkspacePopout } from "packages/cloud/views/workspaces/WorkspacePopout";
 import { links } from "utils/links";
+import { ReactComponent as AirbyteLogo } from "views/layout/SideBar/airbyteLogo.svg";
 import ChatIcon from "views/layout/SideBar/components/ChatIcon";
 import ConnectionsIcon from "views/layout/SideBar/components/ConnectionsIcon";
 import DestinationIcon from "views/layout/SideBar/components/DestinationIcon";
@@ -40,6 +41,7 @@ const SideBar: React.FC = () => {
   const { show } = useIntercom();
   const handleChatUs = () => show();
   const hideOnboardingExperiment = useExperiment("onboarding.hideOnboarding", false);
+  const { formatMessage } = useIntl();
 
   return (
     <nav className={styles.nav}>
@@ -48,8 +50,9 @@ const SideBar: React.FC = () => {
           to={
             workspace.displaySetupWizard && !hideOnboardingExperiment ? RoutePaths.Onboarding : RoutePaths.Connections
           }
+          aria-label={formatMessage({ id: "sidebar.homepage" })}
         >
-          <img src="/simpleLogo.svg" alt="logo" height={33} width={33} />
+          <AirbyteLogo height={33} width={33} />
         </Link>
         <WorkspacePopout>
           {({ onOpen, value }) => (

airbyte-webapp/src/packages/cloud/views/layout/SideBar/SideBar.module.scss

@@ -28,8 +28,8 @@
 
 .nameContainer {
   composes: textContainer;
-  background-color: colors.$beige-100;
-  border: variables.$border-thin solid colors.$beige-100;
+  background-color: colors.$grey-100;
+  border: variables.$border-thin solid colors.$grey-100;
   border-radius: variables.$border-radius-sm;
   padding: 0 variables.$spacing-xl;
 

airbyte-webapp/src/packages/cloud/views/layout/SideBar/SideBar.tsx

@@ -7,7 +7,7 @@
 }
 
 .connectionTitle {
-  color: colors.$orange;
+  color: colors.$blue-500;
 }
 
 .connectionDeleted {

airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/ConnectionName.module.scss

@@ -27,7 +27,7 @@ const run = keyframes`
 const Bar = styled.div`
   width: 100%;
   height: 49px;
-  background: ${({ theme }) => theme.darkBeigeColor} url("/rectangle.svg");
+  background: #ffebd7 url("/rectangle.svg");
   color: ${({ theme }) => theme.redColor};
   border-radius: 15px;
   font-weight: 500;

airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/ConnectionPageTitle.module.scss

@@ -1,4 +1,6 @@
 /* stylelint-disable color-no-hex, color-hex-length  */
+$blue-30: #f4f4ff;
+$blue-40: #f0efff;
 $blue-50: #eae9ff;
 $blue-100: #cbc8ff;
 $blue-200: #a6a4ff;
@@ -74,10 +76,6 @@ $red-800: #bc0042;
 $red-900: #99003f;
 $red: $red-300;
 
-$beige-50: #fef9f4;
-$beige-100: #ffebd7;
-$beige: $beige-50;
-
 $black: #000000;
 $white: #ffffff;
 

airbyte-webapp/src/pages/OnboardingPage/components/ProgressBlock.tsx

@@ -84,10 +84,6 @@
   red900: colors.$red-900;
   red: colors.$red;
 
-  beige50: colors.$beige-50;
-  beige100: colors.$beige-100;
-  beige: colors.$beige;
-
   black: colors.$black;
   white: colors.$white;
 

airbyte-webapp/src/pages/OnboardingPage/components/images/video-background.svg

@@ -0,0 +1,25 @@
+@use "./colors";
+@use "./fonts";
+
+html,
+body,
+#root {
+  height: 100%;
+  width: 100%;
+  padding: 0;
+  margin: 0;
+  font-weight: normal;
+  -webkit-font-smoothing: antialiased;
+  color: colors.$dark-blue;
+  font-family: fonts.$primary;
+  background: colors.$grey-50;
+  font-size: 14px;
+}
+
+button, input, textarea {
+  font-family: fonts.$primary;
+}
+
+* {
+  box-sizing: border-box;
+}

airbyte-webapp/src/scss/_colors.scss

@@ -76,10 +76,6 @@ export const theme = {
   red900: scss.red900,
   red: scss.red,
 
-  beige50: scss.beige50,
-  beige100: scss.beige100,
-  beige: scss.beige,
-
   black: scss.black,
   white: scss.white,
 
@@ -115,7 +111,6 @@ export const theme = {
   dangerTransparentColor: scss.red50,
   successColor: scss.green,
   successColor20: scss.green50,
-  backgroundColor: scss.beige,
   shadowColor: scss.shadowColor,
   cardShadowColor: scss.cardShadowColor,
 
@@ -134,8 +129,6 @@ export const theme = {
 
   whiteColor: scss.white,
   blackColor: scss.black,
-  beigeColor: scss.beige,
-  darkBeigeColor: scss.beige100,
   borderTableColor: scss.grey100,
   lightTableColor: scss.grey50,
   darkGreyColor: scss.grey400,

airbyte-webapp/src/scss/export.module.scss

@@ -16,8 +16,6 @@
     margin-bottom: 24px;
   }
 
-  background: radial-gradient(35.57% 35.57% at 50% 50%, colors.$white 0%, colors.$white 55.87%, colors.$beige 100%);
-
   .content {
     max-width: 600px;
     text-align: center;