@local-civics/mgmt-ui 0.1.84 → 0.1.85

package/dist/index.mjs

@@ -2381,40 +2381,55 @@ const DropzoneButton = (props) => {
 };
 
 const useStyles$3 = 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],
@@ -2425,14 +2440,12 @@ const useStyles$3 = createStyles((theme) => ({
   },
   inputLabel: {
     color: theme.black
-  },
-  control: {
-    backgroundColor: theme.colors[theme.primaryColor][6]
   }
 }));
 const StartAnonymousLesson = (props) => {
   const { classes } = useStyles$3();
-  return /* @__PURE__ */ React.createElement("div", { className: classes.wrapper }, /* @__PURE__ */ React.createElement(SimpleGrid, { maw: 960, ml: "auto", mr: "auto", cols: 2, spacing: 50, breakpoints: [{ maxWidth: "sm", cols: 1 }] }, /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(Title, { className: classes.title }, props.title), /* @__PURE__ */ React.createElement(Text, { weight: "bold", className: classes.description, mt: "sm", mb: 30 }, "Instructor: ", props.educatorName), /* @__PURE__ */ React.createElement(Text, { className: classes.description, mt: "sm", mb: 30 }, props.description)), /* @__PURE__ */ React.createElement("div", { className: classes.form }, /* @__PURE__ */ React.createElement(
+  const [name, setName] = React.useState("");
+  return /* @__PURE__ */ React.createElement("div", { className: classes.wrapper }, /* @__PURE__ */ React.createElement(Container, null, /* @__PURE__ */ React.createElement(SimpleGrid, { maw: 960, cols: 2, spacing: 15, breakpoints: [{ maxWidth: "sm", cols: 1 }] }, /* @__PURE__ */ React.createElement("div", { className: classes.content }, /* @__PURE__ */ React.createElement(Badge$1, { color: "violet" }, "Anonymous"), /* @__PURE__ */ React.createElement(Title, { className: classes.title }, props.title), /* @__PURE__ */ React.createElement(Text, { color: "dimmed", mt: "md" }, props.description), /* @__PURE__ */ React.createElement(Text, { color: "dimmed", mt: "md" }, "Instructed by ", props.educatorName, ".")), /* @__PURE__ */ React.createElement("div", { className: classes.form }, /* @__PURE__ */ React.createElement(
     TextInput,
     {
       label: "Name",
@@ -2440,9 +2453,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.createElement(Group, { position: "right", mt: "md" }, /* @__PURE__ */ React.createElement(Button, { onClick: props.onStart, className: classes.control }, !props.studentName ? "Start lesson" : "Continue lesson")))));
+  ), /* @__PURE__ */ React.createElement(Group, { position: "right", mt: "md" }, /* @__PURE__ */ React.createElement(Button, { disabled: !name && !props.studentName, onClick: props.onStart, className: classes.control }, !props.studentName ? "Start lesson" : "Continue lesson"))))));
 };
 
 var __defProp$3 = Object.defineProperty;
@@ -2554,7 +2568,7 @@ const useStyles$2 = 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: {
@@ -2594,7 +2608,7 @@ function ImageCheckbox(_a) {
       className: cx(classes.button, className)
     }),
     /* @__PURE__ */ React.createElement(ThemeIcon, { variant: "light", size: "lg", color: "blue" }, /* @__PURE__ */ React.createElement(Icon, { size: 40 })),
-    /* @__PURE__ */ React.createElement("div", { className: classes.body }, /* @__PURE__ */ React.createElement(Text, { color: "dimmed", size: "xs", sx: { lineHeight: 1 }, mb: 5 }, description), /* @__PURE__ */ React.createElement(Text, { weight: 500, size: "sm", sx: { lineHeight: 1 } }, title)),
+    /* @__PURE__ */ React.createElement("div", { className: classes.body }, /* @__PURE__ */ React.createElement(Text, { color: "dimmed", size: "xs", sx: { lineHeight: 1 }, mb: 5 }, description), /* @__PURE__ */ React.createElement(Text, { weight: 500, size: "md", sx: { lineHeight: 1 } }, title)),
     /* @__PURE__ */ React.createElement(
       Checkbox,
       {
@@ -2652,7 +2666,7 @@ const useStyles$1 = 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
@@ -2710,6 +2724,7 @@ const TrialRegistration = (props) => {
   const { classes } = useStyles$1();
   const [firstName, setFirstName] = React.useState("");
   const [lastName, setLastName] = React.useState("");
+  const [schoolName, setSchoolName] = React.useState("");
   const [interests, setInterests] = React.useState({});
   return /* @__PURE__ */ React.createElement("div", { className: classes.wrapper }, /* @__PURE__ */ React.createElement(SimpleGrid, { maw: 960, ml: "auto", mr: "auto", cols: 1, spacing: 15, breakpoints: [{ maxWidth: "sm", cols: 1 }] }, /* @__PURE__ */ React.createElement(Group, { spacing: "sm" }, /* @__PURE__ */ React.createElement(
     Image,
@@ -2719,11 +2734,20 @@ const TrialRegistration = (props) => {
       fit: "contain",
       src: "https://cdn.localcivics.io/brand/l.png"
     }
-  ), /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(Title, { className: classes.title }, "Trial Educator"), /* @__PURE__ */ React.createElement(Text, { className: classes.description, mt: "sm" }, "Try out a few of the features we can bring to your classroom. No commitment required."))), /* @__PURE__ */ React.createElement("div", { className: classes.form }, /* @__PURE__ */ React.createElement(Group, { mb: "md", spacing: "md", grow: true }, /* @__PURE__ */ React.createElement(
+  ), /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(Title, { className: classes.title }, "Are you an", " ", /* @__PURE__ */ React.createElement(
+    Text,
+    {
+      component: "span",
+      inherit: true,
+      variant: "gradient",
+      gradient: { from: "pink", to: "yellow" }
+    },
+    "educator"
+  ), " ", "interested in a free trial?"), /* @__PURE__ */ React.createElement(Text, { className: classes.description, mt: "sm" }, "Try out a few of the features we can bring to your classroom. No commitment required."))), /* @__PURE__ */ React.createElement("div", { className: classes.form }, /* @__PURE__ */ React.createElement(SimpleGrid, { cols: 2, spacing: 15, breakpoints: [{ maxWidth: "sm", cols: 1 }] }, /* @__PURE__ */ React.createElement(
     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)
@@ -2732,11 +2756,19 @@ const TrialRegistration = (props) => {
     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.createElement(
+    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.createElement(Text, { size: 14, weight: 500, mb: "md", mt: "xl" }, "What are you interested in teaching?"), /* @__PURE__ */ React.createElement(
     SelectGrid,
     {
@@ -2746,7 +2778,8 @@ const TrialRegistration = (props) => {
   ), /* @__PURE__ */ React.createElement(Group, { position: "right", mt: "md" }, /* @__PURE__ */ React.createElement(
     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"