🪟 🧹 Remove unused/undefined styles (#11836)

airbytehq · Mar 28, 2024 · 4c30e5d · 4c30e5d
1 parent b046130
commit 4c30e5d
Show file tree

Hide file tree

Showing 8 changed files with 29 additions and 40 deletions.
diff --git a/airbyte-webapp/src/components/connection/syncCatalog/CellText/CellText.tsx b/airbyte-webapp/src/components/connection/syncCatalog/CellText/CellText.tsx
@@ -8,7 +8,6 @@ type Sizes = "xsmall" | "small" | "medium" | "large" | "fixed";
 export interface CellTextProps {
   size?: Sizes;
   className?: string;
-  withOverflow?: boolean;
 }
 
 // This lets us avoid the eslint complaint about unused styles
@@ -22,16 +21,12 @@ const STYLES_BY_SIZE: Readonly<Record<Sizes, string>> = {
 
 export const CellText: React.FC<React.PropsWithChildren<CellTextProps>> = ({
   size = "medium",
-  withOverflow,
   className,
   children,
   ...props
 }) => {
   return (
-    <div
-      className={classNames(styles.container, className, STYLES_BY_SIZE[size], { [styles.withOverflow]: withOverflow })}
-      {...props}
-    >
+    <div className={classNames(styles.container, className, STYLES_BY_SIZE[size])} {...props}>
       {children}
     </div>
   );

diff --git a/...app/src/components/connection/syncCatalog/StreamsConfigTable/StreamsConfigTableHeader.tsx b/...app/src/components/connection/syncCatalog/StreamsConfigTable/StreamsConfigTableHeader.tsx
@@ -27,7 +27,7 @@ import {
 import { CellText, CellTextProps } from "../CellText";
 
 const HeaderCell: React.FC<React.PropsWithChildren<CellTextProps>> = ({ children, ...tableCellProps }) => (
-  <CellText {...tableCellProps} withOverflow>
+  <CellText {...tableCellProps}>
     <Text size="sm" color="grey300">
       {children}
     </Text>
@@ -89,7 +89,7 @@ export const StreamsConfigTableHeader: React.FC<StreamsConfigTableHeaderProps> =
       className={styles.headerContainer}
       data-testid="catalog-tree-table-header"
     >
-      <CellText size="fixed" className={styles.syncCell} withOverflow>
+      <CellText size="fixed" className={styles.syncCell}>
         <Switch
           size="sm"
           indeterminate={isPartOfStreamsSyncEnabled()}

diff --git a/airbyte-webapp/src/components/ui/TextArea/TextArea.module.scss b/airbyte-webapp/src/components/ui/TextArea/TextArea.module.scss
@@ -8,3 +8,11 @@
 .textarea {
   overflow: auto;
 }
+
+.error {
+  color: colors.$red;
+}
+
+.light {
+  background-color: colors.$foreground;
+}
diff --git a/...e-webapp/src/packages/cloud/views/billing/BillingPage/components/ConnectorOptionLabel.tsx b/...e-webapp/src/packages/cloud/views/billing/BillingPage/components/ConnectorOptionLabel.tsx
@@ -1,5 +1,3 @@
-import classNames from "classnames";
-
 import { ConnectorIcon } from "components/common/ConnectorIcon";
 import { FlexContainer, FlexItem } from "components/ui/Flex";
 import { SupportLevelBadge } from "components/ui/SupportLevelBadge";
@@ -10,24 +8,16 @@ import { AvailableDestination, AvailableSource } from "./CreditsUsageContext";
 
 interface ConnectorOptionLabelProps {
   connector: AvailableSource | AvailableDestination;
-  disabled?: boolean;
 }
 
-export const ConnectorOptionLabel: React.FC<ConnectorOptionLabelProps> = ({ connector, disabled }) => {
-  return (
-    <FlexContainer
-      title={connector.name}
-      alignItems="center"
-      justifyContent="flex-start"
-      className={classNames(styles.labelContainer, { [styles.disabled]: disabled })}
-    >
-      <ConnectorIcon icon={connector.icon} />
-      <Text color={disabled ? "grey300" : "darkBlue"} className={styles.connectorName}>
-        {connector.name}
-      </Text>
-      <FlexItem>
-        <SupportLevelBadge supportLevel={connector.supportLevel} custom={connector.custom} />
-      </FlexItem>
-    </FlexContainer>
-  );
-};
+export const ConnectorOptionLabel: React.FC<ConnectorOptionLabelProps> = ({ connector }) => (
+  <FlexContainer title={connector.name} alignItems="center" justifyContent="flex-start">
+    <ConnectorIcon icon={connector.icon} />
+    <Text color="darkBlue" className={styles.connectorName}>
+      {connector.name}
+    </Text>
+    <FlexItem>
+      <SupportLevelBadge supportLevel={connector.supportLevel} custom={connector.custom} />
+    </FlexItem>
+  </FlexContainer>
+);
diff --git a/...ationPage/DbtCloudTransformations/DbtCloudErrorBoundary/DbtCloudErrorBoundary.module.scss b/...ationPage/DbtCloudTransformations/DbtCloudErrorBoundary/DbtCloudErrorBoundary.module.scss
diff --git a/...ransformationPage/DbtCloudTransformations/DbtCloudErrorBoundary/DbtCloudErrorBoundary.tsx b/...ransformationPage/DbtCloudTransformations/DbtCloudErrorBoundary/DbtCloudErrorBoundary.tsx
@@ -7,15 +7,13 @@ import { Text } from "components/ui/Text";
 
 import { TrackErrorFn } from "hooks/services/AppMonitoringService";
 
-import styles from "./DbtCloudErrorBoundary.module.scss";
-
 const DbtCloudErrorCard: React.FC<{ displayMessage?: string | null }> = ({ displayMessage }) => {
   const { formatMessage } = useIntl();
 
   return (
     <Card title={formatMessage({ id: "connection.dbtCloudJobs.cardTitle" })}>
       <FlexContainer alignItems="center" justifyContent="center">
-        <Text align="center" className={styles.cardBodyContainer}>
+        <Text align="center">
           {displayMessage ? (
             <FormattedMessage id="connection.dbtCloudJobs.dbtError" values={{ displayMessage }} />
           ) : (

diff --git a/.../ConnectionTransformationPage/DbtCloudTransformations/DbtCloudTransformations.module.scss b/.../ConnectionTransformationPage/DbtCloudTransformations/DbtCloudTransformations.module.scss
diff --git a/...ansformations/DbtCloudTransformationsForm/DbtCloudTransformationsFormControls.module.scss b/...ansformations/DbtCloudTransformationsForm/DbtCloudTransformationsFormControls.module.scss
@@ -1 +1,6 @@
-@forward "../DbtCloudTransformations.module";
+@use "scss/colors";
+@use "scss/variables";
+
+.cardBodyContainer {
+  background-color: colors.$grey-50;
+}