chore: update webapp Heading component (#14915)

airbytehq · Jan 3, 2025 · 5daae1a · 5daae1a
1 parent 8c9137f
commit 5daae1a
Show file tree

Hide file tree

Showing 8 changed files with 51 additions and 75 deletions.
diff --git a/airbyte-webapp/src/components/connection/ConnectionOnboarding/ConnectionOnboarding.tsx b/airbyte-webapp/src/components/connection/ConnectionOnboarding/ConnectionOnboarding.tsx
@@ -125,7 +125,7 @@ export const ConnectionOnboarding: React.FC<ConnectionOnboardingProps> = () => {
 
   return (
     <div className={styles.container}>
-      <Heading as="h2" size="lg" centered className={styles.heading}>
+      <Heading as="h2" size="lg" className={styles.heading}>
         <FormattedMessage id="connection.onboarding.title" />
       </Heading>
       <div className={styles.connectors}>

diff --git a/airbyte-webapp/src/components/source/SelectConnector/SuggestedConnectors.tsx b/airbyte-webapp/src/components/source/SelectConnector/SuggestedConnectors.tsx
@@ -5,7 +5,6 @@ import { ConnectorButton } from "components/source/SelectConnector/ConnectorButt
 import { Box } from "components/ui/Box";
 import { Button } from "components/ui/Button";
 import { FlexContainer } from "components/ui/Flex";
-import { Heading } from "components/ui/Heading";
 import { Icon } from "components/ui/Icon";
 import { Text } from "components/ui/Text";
 
@@ -73,9 +72,9 @@ export const SuggestedConnectorsUnmemoized: React.FC<SuggestedConnectorsProps> =
       >
         <Icon type="cross" />
       </Button>
-      <Heading as="h2" size="xs">
+      <Text size="lg" bold>
         <FormattedMessage id={titleKey} />
-      </Heading>
+      </Text>
       <div className={styles.suggestedConnectors__grid}>
         {definitions.map((definition) => (
           <ConnectorButton

diff --git a/airbyte-webapp/src/components/ui/Heading/Heading.module.scss b/airbyte-webapp/src/components/ui/Heading/Heading.module.scss
@@ -5,50 +5,31 @@
   margin: 0;
   padding: 0;
 
-  &.inverse {
-    color: colors.$foreground;
+  &--darkBlue {
+    color: colors.$dark-blue;
   }
-}
-
-// sizes
-.xs {
-  font-size: 14px;
-  font-weight: 600;
-  line-height: 1.2em;
-}
-
-.sm {
-  font-size: 16px;
-  line-height: 1.2em;
-}
-
-.md,
-.lg,
-.xl {
-  line-height: 1.3em;
-}
-
-.md {
-  font-size: 20px;
-}
 
-.lg {
-  font-size: 24px;
-}
+  &--blue {
+    color: colors.$blue;
+  }
 
-.xl {
-  font-size: 32px;
-}
+  &--sm {
+    font-size: 16px;
+    line-height: 1.2em;
+  }
 
-// colors
-.darkBlue {
-  color: colors.$dark-blue;
-}
+  &--md {
+    font-size: 20px;
+    line-height: 1.3em;
+  }
 
-.blue {
-  color: colors.$blue;
-}
+  &--lg {
+    font-size: 24px;
+    line-height: 1.3em;
+  }
 
-.centered {
-  text-align: center;
+  &--xl {
+    font-size: 32px;
+    line-height: 1.3em;
+  }
 }
diff --git a/airbyte-webapp/src/components/ui/Heading/Heading.tsx b/airbyte-webapp/src/components/ui/Heading/Heading.tsx
@@ -3,7 +3,7 @@ import React, { HTMLAttributes } from "react";
 
 import styles from "./Heading.module.scss";
 
-type HeadingSize = "xs" | "sm" | "md" | "lg" | "xl";
+type HeadingSize = "sm" | "md" | "lg" | "xl";
 type HeadingColor = "darkBlue" | "blue";
 type HeadingElementType = "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
 
@@ -13,32 +13,22 @@ type HeadingProps = HTMLAttributes<HTMLHeadingElement> & {
   as: HeadingElementType;
   size?: HeadingSize;
   color?: HeadingColor;
-  inverseColor?: boolean;
 };
 
 const sizes: Record<HeadingSize, string> = {
-  xs: styles.xs,
-  sm: styles.sm,
-  md: styles.md,
-  lg: styles.lg,
-  xl: styles.xl,
+  sm: styles["heading--sm"],
+  md: styles["heading--md"],
+  lg: styles["heading--lg"],
+  xl: styles["heading--xl"],
 };
 
 const colors: Record<HeadingColor, string> = {
-  darkBlue: styles.darkBlue,
-  blue: styles.blue,
+  darkBlue: styles["heading--darkBlue"],
+  blue: styles["heading--blue"],
 };
 
-const getHeadingClassNames = ({
-  size,
-  color,
-  centered,
-  inverseColor,
-}: Required<Pick<HeadingProps, "size" | "color" | "centered" | "inverseColor">>) =>
-  classNames(styles.heading, sizes[size], colors[color], {
-    [styles.centered]: centered,
-    [styles.inverse]: inverseColor,
-  });
+const getHeadingClassNames = ({ size, color }: Required<Pick<HeadingProps, "size" | "color" | "centered">>) =>
+  classNames(styles.heading, sizes[size], colors[color]);
 
 export const Heading: React.FC<React.PropsWithChildren<HeadingProps>> = React.memo(
   ({
@@ -48,10 +38,9 @@ export const Heading: React.FC<React.PropsWithChildren<HeadingProps>> = React.me
     className: classNameProp,
     size = "md",
     color = "darkBlue",
-    inverseColor = false,
     ...remainingProps
   }) => {
-    const className = classNames(getHeadingClassNames({ centered, size, color, inverseColor }), classNameProp);
+    const className = classNames(getHeadingClassNames({ centered, size, color }), classNameProp);
 
     return React.createElement(as, {
       ...remainingProps,

diff --git a/airbyte-webapp/src/packages/cloud/views/auth/SignupPage/SignupPage.tsx b/airbyte-webapp/src/packages/cloud/views/auth/SignupPage/SignupPage.tsx
@@ -32,9 +32,11 @@ const SignupPage: React.FC<SignupPageProps> = () => {
   return (
     <FlexContainer direction="column" gap="xl" justifyContent="center" className={styles.container}>
       <HeadTitle titles={[{ id: "login.signup" }]} />
-      <Heading as="h1" centered>
-        <FormattedMessage id="signup.title" />
-      </Heading>
+      <FlexContainer justifyContent="center">
+        <Heading as="h1">
+          <FormattedMessage id="signup.title" />
+        </Heading>
+      </FlexContainer>
 
       <FlexContainer direction="column" justifyContent="center" alignItems="flex-start" className={styles.details}>
         <Detail>

diff --git a/airbyte-webapp/src/packages/cloud/views/workspaces/WorkspacesPage/CloudWorkspacesPage.tsx b/airbyte-webapp/src/packages/cloud/views/workspaces/WorkspacesPage/CloudWorkspacesPage.tsx
@@ -70,9 +70,11 @@ export const CloudWorkspacesPageInner: React.FC = () => {
           </Button>
         )}
       </FlexContainer>
-      <Heading as="h1" size="lg" centered>
-        <FormattedMessage id="workspaces.title" />
-      </Heading>
+      <FlexContainer justifyContent="center">
+        <Heading as="h1" size="lg">
+          <FormattedMessage id="workspaces.title" />
+        </Heading>
+      </FlexContainer>
       {showNoWorkspacesContent ? (
         <NoWorkspacePermissionsContent organizations={organizationsMemberOnly} />
       ) : (

diff --git a/airbyte-webapp/src/pages/SetupPage/SetupPage.tsx b/airbyte-webapp/src/pages/SetupPage/SetupPage.tsx
@@ -5,6 +5,7 @@ import { HeadTitle } from "components/HeadTitle";
 import { PageViewContainer } from "components/PageViewContainer";
 import { SetupForm } from "components/settings/SetupForm";
 import { Box } from "components/ui/Box";
+import { FlexContainer } from "components/ui/Flex";
 import { Heading } from "components/ui/Heading";
 
 import { useTrackPage, PageTrackingCodes } from "core/services/analytics";
@@ -15,9 +16,11 @@ export const SetupPage: React.FC = () => {
   return (
     <PageViewContainer>
       <HeadTitle titles={[{ id: "preferences.headTitle" }]} />
-      <Heading as="h1" size="lg" centered>
-        <FormattedMessage id="preferences.title" />
-      </Heading>
+      <FlexContainer justifyContent="center">
+        <Heading as="h1" size="lg">
+          <FormattedMessage id="preferences.title" />
+        </Heading>
+      </FlexContainer>
       <Box mt="2xl">
         <SetupForm />
       </Box>

diff --git a/...bapp/src/pages/connectorBuilder/ConnectorBuilderCreatePage/ConnectorBuilderCreatePage.tsx b/...bapp/src/pages/connectorBuilder/ConnectorBuilderCreatePage/ConnectorBuilderCreatePage.tsx
@@ -243,7 +243,7 @@ const Tile: React.FC<TileProps> = ({ image, title, description, buttonText, butt
           {image}
         </FlexContainer>
         <FlexContainer direction="column" alignItems="center" gap="md" className={styles.tileText}>
-          <Heading as="h2" size="sm" centered>
+          <Heading as="h2" size="sm">
             <FormattedMessage id={title} />
           </Heading>
           <FlexContainer direction="column" justifyContent="center" className={styles.tileDescription}>