@local-civics/mgmt-ui 0.1.84 → 0.1.86

package/dist/index.d.ts

@@ -614,6 +614,7 @@ type TrialRegistrationProps = {
     onBegin: (data: {
         firstName: string;
         lastName: string;
+        schoolName: string;
         interests: string[];
     }) => void;
 };

package/dist/index.js

@@ -2401,40 +2401,55 @@ const DropzoneButton = (props) => {
 };
 
 const useStyles$3 = core.createStyles((theme) => ({
+  form: {
+    backgroundColor: theme.white,
+    padding: theme.spacing.xl,
+    border: `1px solid ${theme.colorScheme === "dark" ? theme.colors.dark[8] : theme.colors.gray[3]}`,
+    borderRadius: theme.radius.md,
+    boxShadow: theme.shadows.lg,
+    minWidth: 300,
+    height: "fit-content"
+  },
   wrapper: {
-    minHeight: 400,
-    height: "100%",
-    boxSizing: "border-box",
-    backgroundImage: `linear-gradient(-60deg, ${theme.colors[theme.primaryColor][4]} 0%, ${theme.colors[theme.primaryColor][7]} 100%)`,
-    padding: theme.spacing.xl * 2.5,
-    [`@media (max-width: ${theme.breakpoints.sm}px)`]: {
-      padding: theme.spacing.xl * 1.5
+    position: "relative",
+    paddingTop: 180,
+    paddingBottom: 130
+  },
+  content: {
+    maxWidth: 480,
+    marginRight: theme.spacing.xl * 3,
+    [theme.fn.smallerThan("md")]: {
+      maxWidth: "100%",
+      marginRight: 0
     }
   },
   title: {
+    color: theme.colorScheme === "dark" ? theme.white : theme.black,
     fontFamily: `Greycliff CF, ${theme.fontFamily}`,
-    color: theme.white,
-    lineHeight: 1
-  },
-  description: {
-    color: theme.colors[theme.primaryColor][0],
-    maxWidth: 300,
-    [`@media (max-width: ${theme.breakpoints.sm}px)`]: {
-      maxWidth: "100%"
+    fontSize: 44,
+    lineHeight: 1.2,
+    fontWeight: 900,
+    [theme.fn.smallerThan("xs")]: {
+      fontSize: 28
     }
   },
-  form: {
-    backgroundColor: theme.white,
-    padding: theme.spacing.xl,
-    borderRadius: theme.radius.md,
-    boxShadow: theme.shadows.lg
+  control: {
+    [theme.fn.smallerThan("xs")]: {
+      flex: 1
+    }
   },
-  social: {
-    color: theme.white,
-    "&:hover": {
-      color: theme.colors[theme.primaryColor][1]
+  image: {
+    flex: 1,
+    [theme.fn.smallerThan("md")]: {
+      display: "none"
     }
   },
+  highlight: {
+    position: "relative",
+    backgroundColor: theme.fn.variant({ variant: "light", color: theme.primaryColor }).background,
+    borderRadius: theme.radius.sm,
+    padding: "4px 12px"
+  },
   input: {
     backgroundColor: theme.white,
     borderColor: theme.colors.gray[4],
@@ -2445,14 +2460,12 @@ const useStyles$3 = core.createStyles((theme) => ({
   },
   inputLabel: {
     color: theme.black
-  },
-  control: {
-    backgroundColor: theme.colors[theme.primaryColor][6]
   }
 }));
 const StartAnonymousLesson = (props) => {
   const { classes } = useStyles$3();
-  return /* @__PURE__ */ React__namespace.createElement("div", { className: classes.wrapper }, /* @__PURE__ */ React__namespace.createElement(core.SimpleGrid, { maw: 960, ml: "auto", mr: "auto", cols: 2, spacing: 50, breakpoints: [{ maxWidth: "sm", cols: 1 }] }, /* @__PURE__ */ React__namespace.createElement("div", null, /* @__PURE__ */ React__namespace.createElement(core.Title, { className: classes.title }, props.title), /* @__PURE__ */ React__namespace.createElement(core.Text, { weight: "bold", className: classes.description, mt: "sm", mb: 30 }, "Instructor: ", props.educatorName), /* @__PURE__ */ React__namespace.createElement(core.Text, { className: classes.description, mt: "sm", mb: 30 }, props.description)), /* @__PURE__ */ React__namespace.createElement("div", { className: classes.form }, /* @__PURE__ */ React__namespace.createElement(
+  const [name, setName] = React__namespace.useState("");
+  return /* @__PURE__ */ React__namespace.createElement("div", { className: classes.wrapper }, /* @__PURE__ */ React__namespace.createElement(core.Container, null, /* @__PURE__ */ React__namespace.createElement(core.SimpleGrid, { maw: 960, cols: 2, spacing: 15, breakpoints: [{ maxWidth: "sm", cols: 1 }] }, /* @__PURE__ */ React__namespace.createElement("div", { className: classes.content }, /* @__PURE__ */ React__namespace.createElement(core.Badge, { color: "violet" }, "Community"), /* @__PURE__ */ React__namespace.createElement(core.Title, { className: classes.title }, props.title), /* @__PURE__ */ React__namespace.createElement(core.Text, { color: "dimmed", mt: "md" }, props.description), /* @__PURE__ */ React__namespace.createElement(core.Text, { color: "dimmed", mt: "md" }, "Instructed by ", props.educatorName, ".")), /* @__PURE__ */ React__namespace.createElement("div", { className: classes.form }, /* @__PURE__ */ React__namespace.createElement(
     core.TextInput,
     {
       label: "Name",
@@ -2460,9 +2473,10 @@ const StartAnonymousLesson = (props) => {
       defaultValue: props.studentName,
       readOnly: !!props.studentName,
       required: true,
+      onChange: (e) => setName(e.target.value),
       classNames: { input: classes.input, label: classes.inputLabel }
     }
-  ), /* @__PURE__ */ React__namespace.createElement(core.Group, { position: "right", mt: "md" }, /* @__PURE__ */ React__namespace.createElement(core.Button, { onClick: props.onStart, className: classes.control }, !props.studentName ? "Start lesson" : "Continue lesson")))));
+  ), /* @__PURE__ */ React__namespace.createElement(core.Group, { position: "right", mt: "md" }, /* @__PURE__ */ React__namespace.createElement(core.Button, { disabled: !name && !props.studentName, onClick: props.onStart, className: classes.control }, !props.studentName ? "Start lesson" : "Continue lesson"))))));
 };
 
 var __defProp$3 = Object.defineProperty;
@@ -2574,7 +2588,7 @@ const useStyles$2 = core.createStyles((theme, { checked }) => ({
     transition: "background-color 150ms ease, border-color 150ms ease",
     border: `1px solid ${checked ? theme.fn.variant({ variant: "outline", color: theme.primaryColor }).border : theme.colorScheme === "dark" ? theme.colors.dark[8] : theme.colors.gray[3]}`,
     borderRadius: theme.radius.sm,
-    padding: theme.spacing.lg,
+    padding: theme.spacing.xl,
     backgroundColor: checked ? theme.fn.variant({ variant: "light", color: theme.primaryColor }).background : theme.colorScheme === "dark" ? theme.colors.dark[8] : theme.white
   },
   body: {
@@ -2614,7 +2628,7 @@ function ImageCheckbox(_a) {
       className: cx(classes.button, className)
     }),
     /* @__PURE__ */ React__namespace.createElement(core.ThemeIcon, { variant: "light", size: "lg", color: "blue" }, /* @__PURE__ */ React__namespace.createElement(Icon, { size: 40 })),
-    /* @__PURE__ */ React__namespace.createElement("div", { className: classes.body }, /* @__PURE__ */ React__namespace.createElement(core.Text, { color: "dimmed", size: "xs", sx: { lineHeight: 1 }, mb: 5 }, description), /* @__PURE__ */ React__namespace.createElement(core.Text, { weight: 500, size: "sm", sx: { lineHeight: 1 } }, title)),
+    /* @__PURE__ */ React__namespace.createElement("div", { className: classes.body }, /* @__PURE__ */ React__namespace.createElement(core.Text, { color: "dimmed", size: "xs", sx: { lineHeight: 1 }, mb: 5 }, description), /* @__PURE__ */ React__namespace.createElement(core.Text, { weight: 500, size: "md", sx: { lineHeight: 1 } }, title)),
     /* @__PURE__ */ React__namespace.createElement(
       core.Checkbox,
       {
@@ -2672,7 +2686,7 @@ const useStyles$1 = core.createStyles((theme) => ({
     minHeight: 400,
     height: "100%",
     boxSizing: "border-box",
-    backgroundImage: `linear-gradient(-60deg, ${theme.colors[theme.primaryColor][4]} 0%, ${theme.colors[theme.primaryColor][7]} 100%)`,
+    backgroundImage: `linear-gradient(-60deg, #4e5561 0%, #222a39 100%)`,
     padding: theme.spacing.xl * 2.5,
     [`@media (max-width: ${theme.breakpoints.sm}px)`]: {
       padding: theme.spacing.xl * 1.5
@@ -2680,8 +2694,10 @@ const useStyles$1 = core.createStyles((theme) => ({
   },
   title: {
     fontFamily: `Greycliff CF, ${theme.fontFamily}`,
+    fontSize: 40,
     color: theme.white,
-    lineHeight: 1
+    lineHeight: 1,
+    maxWidth: 450
   },
   description: {
     color: theme.colors[theme.primaryColor][0],
@@ -2730,20 +2746,30 @@ const TrialRegistration = (props) => {
   const { classes } = useStyles$1();
   const [firstName, setFirstName] = React__namespace.useState("");
   const [lastName, setLastName] = React__namespace.useState("");
+  const [schoolName, setSchoolName] = React__namespace.useState("");
   const [interests, setInterests] = React__namespace.useState({});
   return /* @__PURE__ */ React__namespace.createElement("div", { className: classes.wrapper }, /* @__PURE__ */ React__namespace.createElement(core.SimpleGrid, { maw: 960, ml: "auto", mr: "auto", cols: 1, spacing: 15, breakpoints: [{ maxWidth: "sm", cols: 1 }] }, /* @__PURE__ */ React__namespace.createElement(core.Group, { spacing: "sm" }, /* @__PURE__ */ React__namespace.createElement(
     core.Image,
     {
-      height: 100,
+      height: 150,
       width: "auto",
       fit: "contain",
       src: "https://cdn.localcivics.io/brand/l.png"
     }
-  ), /* @__PURE__ */ React__namespace.createElement("div", null, /* @__PURE__ */ React__namespace.createElement(core.Title, { className: classes.title }, "Trial Educator"), /* @__PURE__ */ React__namespace.createElement(core.Text, { className: classes.description, mt: "sm" }, "Try out a few of the features we can bring to your classroom. No commitment required."))), /* @__PURE__ */ React__namespace.createElement("div", { className: classes.form }, /* @__PURE__ */ React__namespace.createElement(core.Group, { mb: "md", spacing: "md", grow: true }, /* @__PURE__ */ React__namespace.createElement(
+  ), /* @__PURE__ */ React__namespace.createElement("div", null, /* @__PURE__ */ React__namespace.createElement(core.Title, { className: classes.title }, "Are you an", " ", /* @__PURE__ */ React__namespace.createElement(
+    core.Text,
+    {
+      component: "span",
+      inherit: true,
+      variant: "gradient",
+      gradient: { from: "pink", to: "yellow" }
+    },
+    "educator"
+  ), " ", "interested in a free trial?"), /* @__PURE__ */ React__namespace.createElement(core.Text, { className: classes.description, mt: "sm" }, "Try out a few of the features we can bring to your classroom. No commitment required."))), /* @__PURE__ */ React__namespace.createElement("div", { className: classes.form }, /* @__PURE__ */ React__namespace.createElement(core.SimpleGrid, { cols: 2, spacing: 15, breakpoints: [{ maxWidth: "sm", cols: 1 }] }, /* @__PURE__ */ React__namespace.createElement(
     core.TextInput,
     {
       label: "First Name",
-      placeholder: "John",
+      placeholder: "Your first name",
       required: true,
       classNames: { input: classes.input, label: classes.inputLabel },
       onChange: (e) => setFirstName(e.target.value)
@@ -2752,11 +2778,19 @@ const TrialRegistration = (props) => {
     core.TextInput,
     {
       label: "Last Name",
-      placeholder: "Doe",
+      placeholder: "Your last name",
       required: true,
       classNames: { input: classes.input, label: classes.inputLabel },
       onChange: (e) => setLastName(e.target.value)
     }
+  ), /* @__PURE__ */ React__namespace.createElement(
+    core.TextInput,
+    {
+      label: "School Name (Optional)",
+      placeholder: "What school, if any, are you associated with?",
+      classNames: { input: classes.input, label: classes.inputLabel },
+      onChange: (e) => setSchoolName(e.target.value)
+    }
   )), /* @__PURE__ */ React__namespace.createElement(core.Text, { size: 14, weight: 500, mb: "md", mt: "xl" }, "What are you interested in teaching?"), /* @__PURE__ */ React__namespace.createElement(
     SelectGrid,
     {
@@ -2766,7 +2800,8 @@ const TrialRegistration = (props) => {
   ), /* @__PURE__ */ React__namespace.createElement(core.Group, { position: "right", mt: "md" }, /* @__PURE__ */ React__namespace.createElement(
     core.Button,
     {
-      onClick: () => props.onBegin({ firstName, lastName, interests: Object.keys(interests) }),
+      disabled: !firstName || !lastName,
+      onClick: () => props.onBegin({ firstName, lastName, schoolName, interests: Object.keys(interests) }),
       className: classes.control
     },
     "Begin trial"