styling

airbytehq · Jan 13, 2023 · 076205c · 076205c
1 parent db083d2
commit 076205c
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 33 deletions.
diff --git a/...ages/cloud/components/experiments/FreeConnectorProgram/LargeEnrollmentCallout.module.scss b/...ages/cloud/components/experiments/FreeConnectorProgram/LargeEnrollmentCallout.module.scss
@@ -3,7 +3,7 @@
 
 .container {
   margin: variables.$spacing-lg 0;
-  padding: variables.$spacing-xl;
+  padding: variables.$spacing-lg variables.$spacing-xl;
   width: 100%;
   background-image: url("./longtail-connectors.svg");
   background-repeat: no-repeat;
@@ -17,7 +17,10 @@
 
 .flexRow {
   width: 100%;
-  padding-left: 100px;
+}
+
+.enrollButton {
+  margin-left: auto;
 }
 
 .textContainer {

diff --git a/...src/packages/cloud/components/experiments/FreeConnectorProgram/LargeEnrollmentCallout.tsx b/...src/packages/cloud/components/experiments/FreeConnectorProgram/LargeEnrollmentCallout.tsx
@@ -3,7 +3,7 @@ import { FormattedMessage } from "react-intl";
 
 import { Button } from "components/ui/Button";
 import { Callout } from "components/ui/Callout";
-import { FlexContainer } from "components/ui/Flex";
+import { FlexContainer, FlexItem } from "components/ui/Flex";
 import { Heading } from "components/ui/Heading";
 import { Text } from "components/ui/Text";
 
@@ -30,17 +30,19 @@ export const EnrollLink: React.FC<PropsWithChildren<unknown>> = ({ children }) =
 export const LargeEnrollmentCallout: React.FC = () => {
   return (
     <Callout variant="blueBold" className={styles.container}>
-      <FlexContainer direction="row" justifyContent="space-between" alignItems="center" className={styles.flexRow}>
-        <FlexContainer direction="column" gap="xs" className={styles.textContainer}>
+      <FlexContainer direction="row" alignItems="center" className={styles.flexRow}>
+        <FlexItem grow={false} alignSelf="center">
           <ConnectorsBadges />
+        </FlexItem>
+        <FlexContainer direction="column" gap="xs" className={styles.textContainer}>
           <Heading size="sm" className={styles.title} as="h3">
             <FormattedMessage id="freeConnectorProgram.title" />
           </Heading>
           <Text size="sm">
             <FormattedMessage id="freeConnectorProgram.enroll.description" />
           </Text>
         </FlexContainer>
-        <Button variant="dark">
+        <Button variant="dark" className={styles.enrollButton}>
           <FormattedMessage id="freeConnectorProgram.enrollNow" />
         </Button>
       </FlexContainer>

diff --git a/...ackages/cloud/components/experiments/FreeConnectorProgram/connectors-badges.svg b/...ackages/cloud/components/experiments/FreeConnectorProgram/connectors-badges.svg