diff --git a/airbyte-webapp/.storybook/preview.ts b/airbyte-webapp/.storybook/preview.ts index c3ea6ed642fe2..2d3d9392e56b8 100644 --- a/airbyte-webapp/.storybook/preview.ts +++ b/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); diff --git a/airbyte-webapp/.storybook/withProvider.tsx b/airbyte-webapp/.storybook/withProvider.tsx index bbf184f559a93..8f5d0e54c2e80 100644 --- a/airbyte-webapp/.storybook/withProvider.tsx +++ b/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) => ( - {getStory()} diff --git a/airbyte-webapp/public/simpleLogo.svg b/airbyte-webapp/public/simpleLogo.svg deleted file mode 100644 index 4f4f23534f4fa..0000000000000 --- a/airbyte-webapp/public/simpleLogo.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - \ No newline at end of file diff --git a/airbyte-webapp/src/App.tsx b/airbyte-webapp/src/App.tsx index 8806625227e3a..4a18cf5bbaa8b 100644 --- a/airbyte-webapp/src/App.tsx +++ b/airbyte-webapp/src/App.tsx @@ -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> = ({ children }) => ( - - - {children} - + {children} ); const configProviders: ValueProvider = [envConfigProvider, windowConfigProvider]; diff --git a/airbyte-webapp/src/components/icons/CreditsIcon.tsx b/airbyte-webapp/src/components/icons/CreditsIcon.tsx index b2eafd7de614b..5529782ea8663 100644 --- a/airbyte-webapp/src/components/icons/CreditsIcon.tsx +++ b/airbyte-webapp/src/components/icons/CreditsIcon.tsx @@ -8,13 +8,13 @@ export const CreditsIcon = ({ color = theme.greyColor20 }: Props) => ( ); diff --git a/airbyte-webapp/src/components/ui/Banner/AlertBanner.module.scss b/airbyte-webapp/src/components/ui/Banner/AlertBanner.module.scss index f46bb95bc53a0..a784d1ef788f6 100644 --- a/airbyte-webapp/src/components/ui/Banner/AlertBanner.module.scss +++ b/airbyte-webapp/src/components/ui/Banner/AlertBanner.module.scss @@ -16,8 +16,9 @@ } } -.beige { - background-color: colors.$beige-100; +.default { + background-color: colors.$blue; + color: colors.$white; } .red { diff --git a/airbyte-webapp/src/components/ui/Banner/AlertBanner.tsx b/airbyte-webapp/src/components/ui/Banner/AlertBanner.tsx index 7e18fadf65a52..fe815af509e92 100644 --- a/airbyte-webapp/src/components/ui/Banner/AlertBanner.tsx +++ b/airbyte-webapp/src/components/ui/Banner/AlertBanner.tsx @@ -10,7 +10,7 @@ interface AlertBannerProps { export const AlertBanner: React.FC = ({ color, message }) => { const bannerStyle = classnames(styles.alertBannerContainer, { - [styles.beige]: color === "default" || !color, + [styles.default]: color === "default" || !color, [styles.red]: color === "warning", }); diff --git a/airbyte-webapp/src/components/ui/InfoBox/InfoBox.tsx b/airbyte-webapp/src/components/ui/InfoBox/InfoBox.tsx index f901c98e707a0..56ee1ad217ae8 100644 --- a/airbyte-webapp/src/components/ui/InfoBox/InfoBox.tsx +++ b/airbyte-webapp/src/components/ui/InfoBox/InfoBox.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; diff --git a/airbyte-webapp/src/components/ui/StepsMenu/Step.tsx b/airbyte-webapp/src/components/ui/StepsMenu/Step.tsx index 0b335dd8e353b..0ba16732bb14c 100644 --- a/airbyte-webapp/src/components/ui/StepsMenu/Step.tsx +++ b/airbyte-webapp/src/components/ui/StepsMenu/Step.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; diff --git a/airbyte-webapp/src/components/ui/Table/Table.tsx b/airbyte-webapp/src/components/ui/Table/Table.tsx index 94b5805d5a6ea..6d07ab6b8a0db 100644 --- a/airbyte-webapp/src/components/ui/Table/Table.tsx +++ b/airbyte-webapp/src/components/ui/Table/Table.tsx @@ -84,7 +84,7 @@ const Th = styled.th` 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")}; diff --git a/airbyte-webapp/src/global-styles.tsx b/airbyte-webapp/src/global-styles.tsx deleted file mode 100644 index 5ffa58405a812..0000000000000 --- a/airbyte-webapp/src/global-styles.tsx +++ /dev/null @@ -1,31 +0,0 @@ -import { createGlobalStyle, ThemeProps } from "styled-components"; - -import { Theme } from "./theme"; - -const GlobalStyle = createGlobalStyle>` - #__next, - html, - body, - #root { - height: 100%; - width: 100%; - padding: 0; - margin: 0; - font-weight: normal; - -webkit-font-smoothing: antialiased; - color: ${({ theme }) => theme.textColor}; - font-family: ${({ theme }) => theme.regularFont}; - background: ${({ theme }) => theme.backgroundColor}; - font-size: 14px; - } - - button, input, textarea { - font-family: ${({ theme }) => theme.regularFont}; - } - - * { - box-sizing: border-box; - } -`; - -export default GlobalStyle; diff --git a/airbyte-webapp/src/index.tsx b/airbyte-webapp/src/index.tsx index 751cd8a448c46..9299e3b2ddf9d 100644 --- a/airbyte-webapp/src/index.tsx +++ b/airbyte-webapp/src/index.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(); diff --git a/airbyte-webapp/src/locales/en.json b/airbyte-webapp/src/locales/en.json index d3b783c79e522..3c27c4288fed6 100644 --- a/airbyte-webapp/src/locales/en.json +++ b/airbyte-webapp/src/locales/en.json @@ -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", diff --git a/airbyte-webapp/src/packages/cloud/App.tsx b/airbyte-webapp/src/packages/cloud/App.tsx index f67a6ff606630..47c4bff50a647 100644 --- a/airbyte-webapp/src/packages/cloud/App.tsx +++ b/airbyte-webapp/src/packages/cloud/App.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> = ({ children }) => ( - - - {children} - + {children} ); const Services: React.FC> = ({ children }) => ( diff --git a/airbyte-webapp/src/packages/cloud/components/experiments/SpeedyConnection/SpeedyConnectionBanner/SpeedyConnectionBanner.module.scss b/airbyte-webapp/src/packages/cloud/components/experiments/SpeedyConnection/SpeedyConnectionBanner/SpeedyConnectionBanner.module.scss index 2519746129c06..c9168e02abc0a 100644 --- a/airbyte-webapp/src/packages/cloud/components/experiments/SpeedyConnection/SpeedyConnectionBanner/SpeedyConnectionBanner.module.scss +++ b/airbyte-webapp/src/packages/cloud/components/experiments/SpeedyConnection/SpeedyConnectionBanner/SpeedyConnectionBanner.module.scss @@ -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; diff --git a/airbyte-webapp/src/packages/cloud/views/credits/CreditsPage/components/RemainingCredits.tsx b/airbyte-webapp/src/packages/cloud/views/credits/CreditsPage/components/RemainingCredits.tsx index 359339ac10fb7..ff8f67af93fce 100644 --- a/airbyte-webapp/src/packages/cloud/views/credits/CreditsPage/components/RemainingCredits.tsx +++ b/airbyte-webapp/src/packages/cloud/views/credits/CreditsPage/components/RemainingCredits.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; 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 7441f3b09d250..f1682b72b58a6 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 @@ -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; diff --git a/airbyte-webapp/src/packages/cloud/views/layout/SideBar/SideBar.tsx b/airbyte-webapp/src/packages/cloud/views/layout/SideBar/SideBar.tsx index 46476daf7e0f9..b73e3961fa45b 100644 --- a/airbyte-webapp/src/packages/cloud/views/layout/SideBar/SideBar.tsx +++ b/airbyte-webapp/src/packages/cloud/views/layout/SideBar/SideBar.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 (