design tweaks

RBND-studio · Jun 25, 2024 · d93b514 · d93b514
1 parent ec72eb2
commit d93b514
Show file tree

Hide file tree

Showing 3 changed files with 56 additions and 28 deletions.
diff --git a/apps/app/src/app/welcome/newsletter/page.tsx b/apps/app/src/app/welcome/newsletter/page.tsx
@@ -1,4 +1,4 @@
-import { Box, Flex } from "@flows/styled-system/jsx";
+import { Flex } from "@flows/styled-system/jsx";
 import { Text } from "ui";
 
 import { SubscribeForm } from "./subscribe-form";
@@ -8,13 +8,12 @@ export default function WelcomeSubscribePage(): JSX.Element {
     <Flex flexDirection="column" gap="space24" maxW="400px" width="100%">
       <Flex alignItems="center" flexDirection="column" gap="space4">
         <Text variant="titleL">Subscribe to updates</Text>
-        <Text color="muted">
+        <Text color="muted" align="center">
           Flows are improving every month. These are the best ways to stay in the loop.
         </Text>
       </Flex>
-      <Box borderRadius="radius12" cardWrap="-" padding="space24">
-        <SubscribeForm />
-      </Box>
+
+      <SubscribeForm />
     </Flex>
   );
 }
diff --git a/apps/app/src/app/welcome/newsletter/subscribe-form.tsx b/apps/app/src/app/welcome/newsletter/subscribe-form.tsx
@@ -1,13 +1,15 @@
 "use client";
 
-import { Flex } from "@flows/styled-system/jsx";
+import { css } from "@flows/styled-system/css";
+import { Box, Flex } from "@flows/styled-system/jsx";
 import { mutate } from "hooks/use-fetch";
 import { useSend } from "hooks/use-send";
 import { api } from "lib/api";
 import { useRouter } from "next/navigation";
 import { Controller, type SubmitHandler, useForm } from "react-hook-form";
 import { routes } from "routes";
-import { Button, Checkbox, Text } from "ui";
+import { links } from "shared";
+import { Button, Switch, Text } from "ui";
 
 type FormValues = {
   marketingConsent: boolean;
@@ -34,26 +36,53 @@ export const SubscribeForm = (): JSX.Element => {
 
   return (
     <form onSubmit={handleSubmit(onSubmit)}>
-      <Flex flexDirection="column" gap="space16">
-        <Controller
-          control={control}
-          name="marketingConsent"
-          render={({ field }) => (
-            <Checkbox
-              checked={field.value}
-              onCheckedChange={field.onChange}
-              label={
-                <>
-                  Subscribe to monthly newsletter
-                  <Text as="span" variant="bodyXs" display="block" color="muted">
-                    Email once a month about new features and changes
-                  </Text>
-                </>
-              }
+      <Flex flexDirection="column" alignItems="center" width="100%">
+        <Box borderRadius="radius12" cardWrap="-" mb="space24">
+          <Flex flexDirection="column" gap="space16" padding="space24" borBottom="1px">
+            <Controller
+              control={control}
+              name="marketingConsent"
+              render={({ field }) => (
+                <Switch
+                  checked={field.value}
+                  onChange={field.onChange}
+                  label={
+                    <>
+                      <Text weight="600" display="block">
+                        Subscribe to our newsletter
+                      </Text>
+                      <Text as="span" variant="bodyXs" display="block" color="muted">
+                        Email once a month about new features and changes
+                      </Text>
+                    </>
+                  }
+                />
+              )}
             />
-          )}
-        />
-        <Button loading={loading} size="default" type="submit">
+          </Flex>
+          <Flex justifyContent="space-between" alignItems="center" padding="space24">
+            <Flex flexDirection="column">
+              <Text weight="600">Follow us on Twitter</Text>
+              <Text variant="bodyXs" color="muted">
+                Tweets about features and tips
+              </Text>
+            </Flex>
+            <Button variant="secondary" asChild>
+              <a href={links.twitter} target="_blank" rel="noopener">
+                @flows_sh
+              </a>
+            </Button>
+          </Flex>
+        </Box>
+        <Button
+          className={css({
+            maxWidth: "200px",
+            width: "100%",
+          })}
+          loading={loading}
+          size="default"
+          type="submit"
+        >
           Continue
         </Button>
       </Flex>

diff --git a/packages/ui/src/switch/switch.tsx b/packages/ui/src/switch/switch.tsx
@@ -3,7 +3,7 @@
 import { cva } from "@flows/styled-system/css";
 import { Flex } from "@flows/styled-system/jsx";
 import * as RadixSwitch from "@radix-ui/react-switch";
-import { type FC, useId } from "react";
+import { type FC, type ReactNode, useId } from "react";
 
 import { Label } from "../label";
 
@@ -12,7 +12,7 @@ type Props = {
   onChange: (checked: boolean) => void;
   disabled?: boolean;
   id?: string;
-  label?: string;
+  label?: ReactNode;
   labelClassName?: string;
   className?: string;
 };