Onboarding Flow (#503)

* wip

* wip

* db: schedule schema

* fix adding time goes into new day

fix adding new time not keeping updating ranges

fix updating ranges not maintaining changed values

* remove photo upload

* remove unused code

* remove more unused code

* undo time lib

* didnt actually change this

* dont show onboardi
ng flow for users created before sept 1 2021

* use more consistent max-widths

* align all inputs in scheduler component

* allow overriding of default styles

* match figma designs

implement goto previous step

* add more types, match figma

Co-authored-by: Bailey Pumfleet <pumfleet@hey.com>

components/ui/Text/Body/Body.tsx

@@ -3,9 +3,9 @@ import classnames from "classnames";
 import { TextProps } from "../Text";
 
 const Body: React.FunctionComponent<TextProps> = (props: TextProps) => {
-  const classes = classnames("text-lg leading-relaxed text-gray-900 dark:text-white");
+  const classes = classnames("text-lg leading-relaxed text-gray-900 dark:text-white", props?.className);
 
-  return <p className={classes}>{props.children}</p>;
+  return <p className={classes}>{props?.text || props.children}</p>;
 };
 
 export default Body;

components/ui/Text/Caption/Caption.tsx

@@ -3,9 +3,9 @@ import classnames from "classnames";
 import { TextProps } from "../Text";
 
 const Caption: React.FunctionComponent<TextProps> = (props: TextProps) => {
-  const classes = classnames("text-sm text-gray-500 dark:text-white leading-tight");
+  const classes = classnames("text-sm text-gray-500 dark:text-white leading-tight", props?.className);
 
-  return <p className={classes}>{props.children}</p>;
+  return <p className={classes}>{props?.text || props.children}</p>;
 };
 
 export default Caption;

components/ui/Text/Caption2/Caption2.tsx

@@ -3,9 +3,9 @@ import classnames from "classnames";
 import { TextProps } from "../Text";
 
 const Caption2: React.FunctionComponent<TextProps> = (props: TextProps) => {
-  const classes = classnames("text-xs italic text-gray-500 dark:text-white leading-tight");
+  const classes = classnames("text-xs italic text-gray-500 dark:text-white leading-tight", props?.className);
 
-  return <p className={classes}>{props.children}</p>;
+  return <p className={classes}>{props?.text || props.children}</p>;
 };
 
 export default Caption2;

components/ui/Text/Footnote/Footnote.tsx

@@ -3,9 +3,9 @@ import classnames from "classnames";
 import { TextProps } from "../Text";
 
 const Footnote: React.FunctionComponent<TextProps> = (props: TextProps) => {
-  const classes = classnames("text-base font-normal text-gray-900 dark:text-white");
+  const classes = classnames("text-xs font-medium text-gray-500 dark:text-white", props?.className);
 
-  return <p className={classes}>{props.children}</p>;
+  return <p className={classes}>{props?.text || props.children}</p>;
 };
 
 export default Footnote;

components/ui/Text/Headline/Headline.tsx

@@ -3,9 +3,9 @@ import classnames from "classnames";
 import { TextProps } from "../Text";
 
 const Headline: React.FunctionComponent<TextProps> = (props: TextProps) => {
-  const classes = classnames("text-xl font-bold text-gray-900 dark:text-white");
+  const classes = classnames("text-xl font-bold text-gray-900 dark:text-white", props?.className);
 
-  return <h1 className={classes}>{props.children}</h1>;
+  return <p className={classes}>{props?.text || props.children}</p>;
 };
 
 export default Headline;

components/ui/Text/Largetitle/Largetitle.tsx

@@ -3,9 +3,9 @@ import classnames from "classnames";
 import { TextProps } from "../Text";
 
 const Largetitle: React.FunctionComponent<TextProps> = (props: TextProps) => {
-  const classes = classnames("text-2xl font-normal text-gray-900 dark:text-white");
+  const classes = classnames("text-3xl font-extrabold text-gray-900 dark:text-white", props?.className);
 
-  return <p className={classes}>{props.children}</p>;
+  return <p className={classes}>{props?.text || props.children}</p>;
 };
 
 export default Largetitle;

components/ui/Text/Overline/Overline.tsx

@@ -4,10 +4,11 @@ import { TextProps } from "../Text";
 
 const Overline: React.FunctionComponent<TextProps> = (props: TextProps) => {
   const classes = classnames(
-    "text-sm uppercase font-semibold leading-snug tracking-wide text-gray-900 dark:text-white"
+    "text-sm uppercase font-semibold leading-snug tracking-wide text-gray-900 dark:text-white",
+    props?.className
   );
 
-  return <p className={classes}>{props.children}</p>;
+  return <p className={classes}>{props?.text || props.children}</p>;
 };
 
 export default Overline;

components/ui/Text/Subheadline/Subheadline.tsx

@@ -3,9 +3,9 @@ import classnames from "classnames";
 import { TextProps } from "../Text";
 
 const Subheadline: React.FunctionComponent<TextProps> = (props: TextProps) => {
-  const classes = classnames("text-xl text-gray-500 dark:text-white leading-relaxed");
+  const classes = classnames("text-xl text-gray-500 dark:text-white leading-relaxed", props?.className);
 
-  return <p className={classes}>{props.children}</p>;
+  return <p className={classes}>{props?.text || props.children}</p>;
 };
 
 export default Subheadline;

components/ui/Text/Subtitle/Subtitle.tsx

@@ -3,9 +3,9 @@ import classnames from "classnames";
 import { TextProps } from "../Text";
 
 const Subtitle: React.FunctionComponent<TextProps> = (props: TextProps) => {
-  const classes = classnames("ext-sm text-neutral-500 dark:text-white");
+  const classes = classnames("text-sm font-normal text-neutral-500 dark:text-white", props?.className);
 
-  return <p className={classes}>{props.children}</p>;
+  return <p className={classes}>{props?.text || props.children}</p>;
 };
 
 export default Subtitle;

components/ui/Text/Text.tsx

@@ -12,8 +12,6 @@ import Title from "./Title";
 import Title2 from "./Title2";
 import Title3 from "./Title3";
 
-import classnames from "classnames";
-
 type Props = {
   variant?:
     | "overline"
@@ -32,14 +30,12 @@ type Props = {
   text?: string;
   tx?: string;
   className?: string;
-  color?: string;
 };
 
 export type TextProps = {
   children: any;
   text?: string;
   tx?: string;
-  color?: string;
   className?: string;
 };
 
@@ -79,84 +75,82 @@ export type TextProps = {
  */
 
 const Text: React.FunctionComponent<Props> = (props: Props) => {
-  const classes = classnames(props?.className, props?.color);
-
   switch (props?.variant) {
     case "overline":
       return (
-        <Overline className={classes} {...props}>
+        <Overline text={props?.text} tx={props?.tx} className={props?.className}>
           {props.children}
         </Overline>
       );
     case "body":
       return (
-        <Body className={classes} {...props}>
+        <Body text={props?.text} tx={props?.tx} className={props?.className}>
           {props.children}
         </Body>
       );
     case "caption":
       return (
-        <Caption className={classes} {...props}>
+        <Caption text={props?.text} tx={props?.tx} className={props?.className}>
           {props.children}
         </Caption>
       );
     case "caption2":
       return (
-        <Caption2 className={classes} {...props}>
+        <Caption2 text={props?.text} tx={props?.tx} className={props?.className}>
           {props.children}
         </Caption2>
       );
     case "footnote":
       return (
-        <Footnote className={classes} {...props}>
+        <Footnote text={props?.text} tx={props?.tx} className={props?.className}>
           {props.children}
         </Footnote>
       );
     case "headline":
       return (
-        <Headline className={classes} {...props}>
+        <Headline text={props?.text} tx={props?.tx} className={props?.className}>
           {props.children}
         </Headline>
       );
     case "largetitle":
       return (
-        <Largetitle className={classes} {...props}>
+        <Largetitle text={props?.text} tx={props?.tx} className={props?.className}>
           {props.children}
         </Largetitle>
       );
     case "subheadline":
       return (
-        <Subheadline className={classes} {...props}>
+        <Subheadline text={props?.text} tx={props?.tx} className={props?.className}>
           {props.children}
         </Subheadline>
       );
     case "subtitle":
       return (
-        <Subtitle className={classes} {...props}>
+        <Subtitle text={props?.text} tx={props?.tx} className={props?.className}>
           {props.children}
         </Subtitle>
       );
     case "title":
       return (
-        <Title className={classes} {...props}>
+        <Title text={props?.text} tx={props?.tx} className={props?.className}>
           {props.children}
         </Title>
       );
     case "title2":
       return (
-        <Title2 className={classes} {...props}>
+        <Title2 text={props?.text} tx={props?.tx} className={props?.className}>
           {props.children}
         </Title2>
       );
     case "title3":
       return (
-        <Title3 className={classes} {...props}>
+        <Title3 text={props?.text} tx={props?.tx} className={props?.className}>
           {props.children}
         </Title3>
       );
     default:
       return (
-        <Body className={classes} {...props}>
+        <Body text={props?.text} tx={props?.tx} className={props?.className}>
           {props.children}
         </Body>
       );

components/ui/Text/Title/Title.tsx

@@ -3,9 +3,9 @@ import classnames from "classnames";
 import { TextProps } from "../Text";
 
 const Title: React.FunctionComponent<TextProps> = (props: TextProps) => {
-  const classes = classnames("font-medium text-neutral-900 dark:text-white");
+  const classes = classnames("font-medium text-neutral-900 dark:text-white", props?.className);
 
-  return <p className={classes}>{props.children}</p>;
+  return <p className={classes}>{props?.text || props.children}</p>;
 };
 
 export default Title;

components/ui/Text/Title2/Title2.tsx

@@ -3,9 +3,9 @@ import classnames from "classnames";
 import { TextProps } from "../Text";
 
 const Title2: React.FunctionComponent<TextProps> = (props: TextProps) => {
-  const classes = classnames("text-base font-normal text-gray-900 dark:text-white");
+  const classes = classnames("text-base font-normal text-gray-900 dark:text-white", props?.className);
 
-  return <p className={classes}>{props.children}</p>;
+  return <p className={classes}>{props?.text || props.children}</p>;
 };
 
 export default Title2;

components/ui/Text/Title3/Title3.tsx

@@ -3,9 +3,12 @@ import classnames from "classnames";
 import { TextProps } from "../Text";
 
 const Title3: React.FunctionComponent<TextProps> = (props: TextProps) => {
-  const classes = classnames("text-xs font-semibold leading-tight text-gray-900 dark:text-white");
+  const classes = classnames(
+    "text-xs font-semibold leading-tight text-gray-900 dark:text-white",
+    props?.className
+  );
 
-  return <p className={classes}>{props.children}</p>;
+  return <p className={classes}>{props?.text || props.children}</p>;
 };
 
 export default Title3;