@local-civics/mgmt-ui 0.1.95 → 0.1.97

package/dist/index.d.ts

@@ -18,6 +18,7 @@ interface NavbarProps {
     trial?: boolean;
     loading?: boolean;
     onLogout: () => void;
+    onGettingStarted: () => void;
     onSwitchAccounts?: () => void;
 }
 declare function Navbar(props: NavbarProps): JSX.Element;
@@ -582,13 +583,14 @@ declare const StartAnonymousLesson: (props: StartAnonymousLessonProps) => JSX.El
  */
 type BadgeGridProps = {
     badges: TaskCardProps[];
+    onAssign: (taskId: string) => void;
 };
 type TaskCardProps = {
+    taskId: string;
     title: string;
     description: string;
-    lessonsCompleted: number;
-    lessonsTotal: number;
     href: string;
+    onAssign: (taskId: string) => void;
 };
 
 /**
@@ -597,6 +599,7 @@ type TaskCardProps = {
 type TrialHomeProps = BadgeGridProps & {
     loading: boolean;
     name: string;
+    firstName: string;
     daysRemaining: number;
     upgradeHref: string;
 };

package/dist/index.js

@@ -62,7 +62,7 @@ var __objRest$2 = (source, exclude) => {
     }
   return target;
 };
-const useStyles$o = core.createStyles((theme) => ({
+const useStyles$p = core.createStyles((theme) => ({
   user: {
     display: "block",
     width: "100%",
@@ -73,7 +73,7 @@ const useStyles$o = core.createStyles((theme) => ({
 }));
 function UserButton(_a) {
   var _b = _a, { image, name, email, icon } = _b, others = __objRest$2(_b, ["image", "name", "email", "icon"]);
-  const { classes } = useStyles$o();
+  const { classes } = useStyles$p();
   return /* @__PURE__ */ React__namespace.createElement(core.Group, __spreadValues$9({ className: classes.user }, others), /* @__PURE__ */ React__namespace.createElement(core.Avatar, { src: image, radius: "xl" }), /* @__PURE__ */ React__namespace.createElement("div", { style: { flex: 1 } }, /* @__PURE__ */ React__namespace.createElement(core.Text, { size: "sm", weight: 500 }, name), /* @__PURE__ */ React__namespace.createElement(core.Text, { color: "dimmed", size: "xs" }, email)));
 }
 
@@ -84,7 +84,7 @@ const compact = (num) => {
   }).format(num || 0);
 };
 
-const useStyles$n = core.createStyles((theme, _params, getRef) => {
+const useStyles$o = core.createStyles((theme, _params, getRef) => {
   const icon = getRef("icon");
   return {
     control: {
@@ -137,7 +137,7 @@ const useStyles$n = core.createStyles((theme, _params, getRef) => {
   };
 });
 function LinksGroup({ icon: Icon, href, label, initiallyOpened, links, active, notifications }) {
-  const { classes, theme, cx } = useStyles$n();
+  const { classes, theme, cx } = useStyles$o();
   const hasLinks = Array.isArray(links) && links.length > 0;
   const hasActiveLinks = Array.isArray(links) && links.map((l) => !!active && active === `${label}/${l.label}`).reduce((a, b) => a || b, false);
   const [opened, setOpened] = React.useState(initiallyOpened || hasActiveLinks || false);
@@ -201,7 +201,7 @@ var __spreadValues$8 = (a, b) => {
   return a;
 };
 var __spreadProps$5 = (a, b) => __defProps$5(a, __getOwnPropDescs$5(b));
-const useStyles$m = core.createStyles((theme, _params, getRef) => {
+const useStyles$n = core.createStyles((theme, _params, getRef) => {
   const icon = getRef("icon");
   return {
     navbar: {
@@ -300,7 +300,7 @@ const TRIAL_PAGES = [
   "Badges"
 ];
 function Navbar(props) {
-  const { classes, cx } = useStyles$m();
+  const { classes, cx } = useStyles$n();
   const [burgerOpen, setBurgerOpen] = React__namespace.useState(false);
   const toggle = () => setBurgerOpen(!burgerOpen);
   const links = data.map((item) => {
@@ -331,7 +331,10 @@ function Navbar(props) {
       name: props.name,
       email: props.email
     }
-  ), /* @__PURE__ */ React__namespace.createElement(core.Navbar.Section, { grow: true, className: classes.links, component: core.ScrollArea }, /* @__PURE__ */ React__namespace.createElement("div", { className: classes.linksInner }, links)), !props.loading && /* @__PURE__ */ React__namespace.createElement(core.Navbar.Section, { className: classes.footer }, !!props.onSwitchAccounts && /* @__PURE__ */ React__namespace.createElement("a", { href: "#", className: classes.link, onClick: (event) => {
+  ), /* @__PURE__ */ React__namespace.createElement(core.Navbar.Section, { grow: true, className: classes.links, component: core.ScrollArea }, /* @__PURE__ */ React__namespace.createElement("div", { className: classes.linksInner }, links)), !props.loading && /* @__PURE__ */ React__namespace.createElement(core.Navbar.Section, { className: classes.footer }, props.trial && /* @__PURE__ */ React__namespace.createElement("a", { href: "#", className: classes.link, onClick: (event) => {
+    event.preventDefault();
+    props.onGettingStarted();
+  } }, /* @__PURE__ */ React__namespace.createElement(icons.IconVideo, { className: classes.linkIcon, stroke: 1.5 }), /* @__PURE__ */ React__namespace.createElement("span", null, "Getting started")), !!props.onSwitchAccounts && /* @__PURE__ */ React__namespace.createElement("a", { href: "#", className: classes.link, onClick: (event) => {
     event.preventDefault();
     props.onSwitchAccounts && props.onSwitchAccounts();
   } }, /* @__PURE__ */ React__namespace.createElement(icons.IconSwitchHorizontal, { className: classes.linkIcon, stroke: 1.5 }), /* @__PURE__ */ React__namespace.createElement("span", null, "Change account")), /* @__PURE__ */ React__namespace.createElement("a", { href: "#", className: classes.link, onClick: (event) => {
@@ -340,7 +343,7 @@ function Navbar(props) {
   } }, /* @__PURE__ */ React__namespace.createElement(icons.IconLogout, { className: classes.linkIcon, stroke: 1.5 }), /* @__PURE__ */ React__namespace.createElement("span", null, "Logout"))))));
 }
 
-const useStyles$l = core.createStyles((theme) => ({
+const useStyles$m = core.createStyles((theme) => ({
   title: {
     fontSize: 34,
     fontWeight: 900,
@@ -381,7 +384,7 @@ const useStyles$l = core.createStyles((theme) => ({
   }
 }));
 const SwitchAccount = (props) => {
-  const { classes, theme } = useStyles$l();
+  const { classes, theme } = useStyles$m();
   const options = props.accounts.map((a) => {
     return /* @__PURE__ */ React__namespace.createElement(core.UnstyledButton, { onClick: () => props.onClick && props.onClick(a.accountId), key: a.accountId, p: theme.spacing.md }, /* @__PURE__ */ React__namespace.createElement(core.Card, { withBorder: true, shadow: "md", radius: "md", className: classes.card, p: "xl" }, a.isAdmin && /* @__PURE__ */ React__namespace.createElement(React__namespace.Fragment, null, /* @__PURE__ */ React__namespace.createElement(icons.IconBatteryEco, { size: 50, stroke: 2, color: theme.fn.primaryColor() })), a.isGroupAdmin && !a.isAdmin && /* @__PURE__ */ React__namespace.createElement(React__namespace.Fragment, null, /* @__PURE__ */ React__namespace.createElement(icons.IconBooks, { size: 50, stroke: 2, color: theme.fn.primaryColor() })), !a.isAdmin && !a.isGroupAdmin && /* @__PURE__ */ React__namespace.createElement(React__namespace.Fragment, null, /* @__PURE__ */ React__namespace.createElement(icons.IconBackpack, { size: 50, stroke: 2, color: theme.fn.primaryColor() })), /* @__PURE__ */ React__namespace.createElement(core.Text, { size: "lg", weight: 500, className: classes.cardTitle, mt: "md" }, a.name), /* @__PURE__ */ React__namespace.createElement(core.Text, { size: "sm", color: "dimmed", mt: "sm" }, a.isAdmin ? "Admin" : a.isGroupAdmin ? "Educator" : "Student")));
   });
@@ -398,7 +401,7 @@ const SwitchAccount = (props) => {
   );
 };
 
-const useStyles$k = core.createStyles((theme) => ({
+const useStyles$l = core.createStyles((theme) => ({
   root: {
     display: "flex",
     backgroundImage: `linear-gradient(-60deg, ${theme.colors[theme.primaryColor][4]} 0%, ${theme.colors[theme.primaryColor][7]} 100%)`,
@@ -442,7 +445,7 @@ const useStyles$k = core.createStyles((theme) => ({
   }
 }));
 const StatsGroup = ({ data, footer }) => {
-  const { classes } = useStyles$k();
+  const { classes } = useStyles$l();
   const stats = data.map((stat) => {
     const value = (() => {
       if (stat.unit === "%") {
@@ -461,7 +464,7 @@ const Tabs = (props) => {
   return /* @__PURE__ */ React__namespace.createElement(core.Tabs, { value: props.value, onTabChange: props.onChange }, /* @__PURE__ */ React__namespace.createElement(core.Tabs.List, null, tabs));
 };
 
-const useStyles$j = core.createStyles((theme) => ({
+const useStyles$k = core.createStyles((theme) => ({
   button: {
     borderTopRightRadius: 0,
     borderBottomRightRadius: 0,
@@ -476,7 +479,7 @@ const useStyles$j = core.createStyles((theme) => ({
   }
 }));
 const SplitButton$3 = (props) => {
-  const { classes, theme } = useStyles$j();
+  const { classes, theme } = useStyles$k();
   const menuIconColor = theme.colors[theme.primaryColor][theme.colorScheme === "dark" ? 5 : 6];
   return /* @__PURE__ */ React__namespace.createElement(core.Group, { noWrap: true, spacing: 0 }, /* @__PURE__ */ React__namespace.createElement(
     core.Button,
@@ -513,7 +516,7 @@ const SplitButton$3 = (props) => {
   ))));
 };
 
-const useStyles$i = core.createStyles((theme) => ({
+const useStyles$j = core.createStyles((theme) => ({
   wrapper: {
     display: "flex",
     alignItems: "center",
@@ -564,7 +567,7 @@ const useStyles$i = core.createStyles((theme) => ({
   }
 }));
 const PlaceholderBanner = (props) => {
-  const { classes } = useStyles$i();
+  const { classes } = useStyles$j();
   const title = props.title || "Nothing to display";
   const description = props.description || "We don't have anything to show you here just yet. Add data, check back later, or adjust your search.";
   return /* @__PURE__ */ React__namespace.createElement("div", { className: classes.wrapper }, /* @__PURE__ */ React__namespace.createElement("div", { className: classes.body }, /* @__PURE__ */ React__namespace.createElement(core.Title, { className: classes.title }, props.loading ? "Loading..." : title), /* @__PURE__ */ React__namespace.createElement(core.Text, { size: "sm", color: "dimmed" }, props.loading ? "Hold on, we're loading your data." : description)), /* @__PURE__ */ React__namespace.createElement(core.Image, { src: `https://cdn.localcivics.io/illustrations/${props.icon}.svg`, className: classes.image }));
@@ -636,7 +639,7 @@ function Table$f(props) {
   return /* @__PURE__ */ React__namespace.createElement(core.ScrollArea.Autosize, { maxHeight: 600 }, /* @__PURE__ */ React__namespace.createElement(core.Table, { verticalSpacing: "sm", sx: { minWidth: 700 }, highlightOnHover: true, striped: true }, /* @__PURE__ */ React__namespace.createElement("thead", null, /* @__PURE__ */ React__namespace.createElement("tr", null, /* @__PURE__ */ React__namespace.createElement("th", null, "Lesson Name"), /* @__PURE__ */ React__namespace.createElement("th", null, "Lesson Completion"))), /* @__PURE__ */ React__namespace.createElement("tbody", null, rows)));
 }
 
-const useStyles$h = core.createStyles((theme) => ({
+const useStyles$i = core.createStyles((theme) => ({
   title: {
     fontSize: 34,
     fontWeight: 900,
@@ -649,7 +652,7 @@ const useStyles$h = core.createStyles((theme) => ({
   }
 }));
 const Badge = (props) => {
-  const { classes } = useStyles$h();
+  const { classes } = useStyles$i();
   const [tab, setTab] = React.useState("lessons");
   const numberOfStudents = props.students.length;
   const percentageOfBadgesEarned = numberOfStudents > 0 ? props.students.filter((u) => u.isComplete).length / numberOfStudents : 0;
@@ -746,7 +749,7 @@ function Table$e(props) {
   return /* @__PURE__ */ React__namespace.createElement(core.ScrollArea.Autosize, { maxHeight: 600 }, /* @__PURE__ */ React__namespace.createElement(core.Table, { horizontalSpacing: 0, verticalSpacing: 0, sx: { minWidth: 700 } }, /* @__PURE__ */ React__namespace.createElement("tbody", null, rows)));
 }
 
-const useStyles$g = core.createStyles((theme) => ({
+const useStyles$h = core.createStyles((theme) => ({
   title: {
     fontSize: 34,
     fontWeight: 900,
@@ -759,7 +762,7 @@ const useStyles$g = core.createStyles((theme) => ({
   }
 }));
 const Badges = (props) => {
-  const { classes } = useStyles$g();
+  const { classes } = useStyles$h();
   return /* @__PURE__ */ React__namespace.createElement(core.Container, { size: "lg", py: "xl" }, /* @__PURE__ */ React__namespace.createElement(core.Stack, { spacing: "md" }, /* @__PURE__ */ React__namespace.createElement(core.Grid, null, /* @__PURE__ */ React__namespace.createElement(core.Grid.Col, { sm: "auto" }, /* @__PURE__ */ React__namespace.createElement(core.Badge, { variant: "filled", size: "lg" }, "Badges"), /* @__PURE__ */ React__namespace.createElement(core.Title, { order: 2, className: classes.title, mt: "md" }, "Badges and micro-credentials"), /* @__PURE__ */ React__namespace.createElement(core.Text, { color: "dimmed", className: classes.description, mt: "sm" }, "Project-sized skills acquisition and standards alignment."))), /* @__PURE__ */ React__namespace.createElement(
     core.Autocomplete,
     {
@@ -1033,7 +1036,7 @@ var __spreadValues$7 = (a, b) => {
   return a;
 };
 var __spreadProps$4 = (a, b) => __defProps$4(a, __getOwnPropDescs$4(b));
-const useStyles$f = core.createStyles((theme) => ({
+const useStyles$g = core.createStyles((theme) => ({
   title: {
     fontSize: 34,
     fontWeight: 900,
@@ -1066,7 +1069,7 @@ const useStyles$f = core.createStyles((theme) => ({
   }
 }));
 const Class = (props) => {
-  const { classes } = useStyles$f();
+  const { classes } = useStyles$g();
   const form$1 = form.useForm({
     initialValues: {
       classId: "",
@@ -1166,7 +1169,7 @@ const Class = (props) => {
   ))))));
 };
 const DropzoneButton$1 = (props) => {
-  const { classes, theme } = useStyles$f();
+  const { classes, theme } = useStyles$g();
   const openRef = React__namespace.useRef(null);
   const [loading, setLoading] = React__namespace.useState(false);
   const onDrop = React__namespace.useCallback((acceptedFiles) => {
@@ -1252,7 +1255,7 @@ var __spreadValues$6 = (a, b) => {
     }
   return a;
 };
-const useStyles$e = core.createStyles((theme) => ({
+const useStyles$f = core.createStyles((theme) => ({
   title: {
     fontSize: 34,
     fontWeight: 900,
@@ -1265,7 +1268,7 @@ const useStyles$e = core.createStyles((theme) => ({
   }
 }));
 const Classes = (props) => {
-  const { classes } = useStyles$e();
+  const { classes } = useStyles$f();
   const form$1 = form.useForm({
     initialValues: {
       classId: "",
@@ -1336,7 +1339,7 @@ const Classes = (props) => {
   ))))));
 };
 
-const useStyles$d = core.createStyles((theme) => ({
+const useStyles$e = core.createStyles((theme) => ({
   title: {
     fontSize: 34,
     fontWeight: 900,
@@ -1350,7 +1353,7 @@ const useStyles$d = core.createStyles((theme) => ({
   }
 }));
 const UserInfo = (props) => {
-  const { classes } = useStyles$d();
+  const { classes } = useStyles$e();
   return /* @__PURE__ */ React__namespace.createElement(React__namespace.Fragment, null, /* @__PURE__ */ React__namespace.createElement(core.Title, { className: classes.title }, props.name), /* @__PURE__ */ React__namespace.createElement(core.Text, { color: "dimmed", className: classes.description, mt: "xs" }, props.impactStatement));
 };
 
@@ -1488,7 +1491,7 @@ const Student = (props) => {
   ))))));
 };
 
-const useStyles$c = core.createStyles((theme, props) => {
+const useStyles$d = core.createStyles((theme, props) => {
   const from = props.from || "blue";
   const to = props.to || "green";
   return {
@@ -1516,7 +1519,7 @@ const useStyles$c = core.createStyles((theme, props) => {
   };
 });
 function CardGradient(props) {
-  const { classes } = useStyles$c(props);
+  const { classes } = useStyles$d(props);
   const from = props.from || "blue";
   const to = props.to || "green";
   const icon = props.icon || /* @__PURE__ */ React__namespace.createElement(icons.IconColorSwatch, { size: 28, stroke: 1.5 });
@@ -1560,7 +1563,7 @@ var __objRest$1 = (source, exclude) => {
     }
   return target;
 };
-const useStyles$b = core.createStyles((theme) => ({
+const useStyles$c = core.createStyles((theme) => ({
   card: {
     height: 240,
     backgroundSize: "cover",
@@ -1576,11 +1579,6 @@ const useStyles$b = core.createStyles((theme) => ({
     right: 0,
     left: 0
   },
-  action: {
-    position: "absolute",
-    bottom: theme.spacing.xl,
-    right: theme.spacing.xl
-  },
   title: {
     color: theme.white,
     marginBottom: theme.spacing.xs / 2
@@ -1595,18 +1593,16 @@ const TenantBanner = (_a) => {
     title,
     description,
     image,
-    action,
     style,
     className
   } = _b, others = __objRest$1(_b, [
     "title",
     "description",
     "image",
-    "action",
     "style",
     "className"
   ]);
-  const { classes, cx, theme } = useStyles$b();
+  const { classes, cx, theme } = useStyles$c();
   return /* @__PURE__ */ React__namespace.createElement(
     core.Card,
     __spreadValues$5({
@@ -1617,24 +1613,12 @@ const TenantBanner = (_a) => {
     /* @__PURE__ */ React__namespace.createElement(
       core.Overlay,
       {
-        gradient: `linear-gradient(105deg, ${theme.black} 20%, #312f2f 50%, ${theme.colors.gray[4]} 100%)`,
+        gradient: `linear-gradient(105deg, ${theme.black} 20%, #312f2f 50%, ${theme.colors.gray[6]} 100%)`,
         opacity: 0.55,
         zIndex: 0
       }
     ),
-    /* @__PURE__ */ React__namespace.createElement("div", { className: classes.content }, /* @__PURE__ */ React__namespace.createElement(core.Text, { size: "lg", weight: 700, className: classes.title }, title), /* @__PURE__ */ React__namespace.createElement(core.Text, { size: "sm", className: classes.description }, description), /* @__PURE__ */ React__namespace.createElement(
-      core.Button,
-      {
-        className: classes.action,
-        variant: "white",
-        color: "dark",
-        component: "a",
-        size: "xs",
-        href: action.link,
-        target: "_blank"
-      },
-      action.label
-    ))
+    /* @__PURE__ */ React__namespace.createElement("div", { className: classes.content }, /* @__PURE__ */ React__namespace.createElement(core.Text, { size: "lg", weight: 700, className: classes.title }, title), /* @__PURE__ */ React__namespace.createElement(core.Text, { size: "sm", className: classes.description }, description))
   );
 };
 
@@ -1651,11 +1635,7 @@ const Home = (props) => {
     {
       title: props.organization.name,
       description: props.organization.description,
-      image: props.organization.image,
-      action: {
-        label: "Visit website",
-        link: props.organization.website
-      }
+      image: props.organization.image
     }
   ))), /* @__PURE__ */ React__namespace.createElement(core.Grid, { gutter: "md" }, /* @__PURE__ */ React__namespace.createElement(core.Grid.Col, null, /* @__PURE__ */ React__namespace.createElement(
     CardGradient,
@@ -1704,7 +1684,7 @@ function Table$3(props) {
   return /* @__PURE__ */ React__namespace.createElement(core.ScrollArea.Autosize, { maxHeight: 600 }, /* @__PURE__ */ React__namespace.createElement(core.Table, { verticalSpacing: "sm", sx: { minWidth: 700 }, highlightOnHover: true, striped: true }, /* @__PURE__ */ React__namespace.createElement("thead", null, /* @__PURE__ */ React__namespace.createElement("tr", null, /* @__PURE__ */ React__namespace.createElement("th", null, "Student Name"), /* @__PURE__ */ React__namespace.createElement("th", null, "Reflection"), /* @__PURE__ */ React__namespace.createElement("th", null, "Rating"))), /* @__PURE__ */ React__namespace.createElement("tbody", null, rows)));
 }
 
-const useStyles$a = core.createStyles((theme) => ({
+const useStyles$b = core.createStyles((theme) => ({
   button: {
     borderTopRightRadius: 0,
     borderBottomRightRadius: 0,
@@ -1719,7 +1699,7 @@ const useStyles$a = core.createStyles((theme) => ({
   }
 }));
 const SplitButton$1 = (props) => {
-  const { classes, theme } = useStyles$a();
+  const { classes, theme } = useStyles$b();
   const menuIconColor = theme.colors[theme.primaryColor][theme.colorScheme === "dark" ? 5 : 6];
   return /* @__PURE__ */ React__namespace.createElement(core.Stack, { spacing: "sm" }, /* @__PURE__ */ React__namespace.createElement(
     core.Button,
@@ -1872,7 +1852,7 @@ function Stack(props) {
 }
 const truncateWithEllipses = (text, max) => text.substr(0, max - 1) + (text.length > max ? "…" : "");
 
-const useStyles$9 = core.createStyles((theme) => ({
+const useStyles$a = core.createStyles((theme) => ({
   title: {
     fontSize: 34,
     fontWeight: 900,
@@ -1885,7 +1865,7 @@ const useStyles$9 = core.createStyles((theme) => ({
   }
 }));
 const Lesson = (props) => {
-  const { classes } = useStyles$9();
+  const { classes } = useStyles$a();
   const [tab, setTab] = React.useState("question");
   const numberOfStudents = props.students.length;
   const percentageOfLessonsCompleted = numberOfStudents > 0 ? props.students.filter((u) => u.isComplete).length / numberOfStudents : 0;
@@ -2028,7 +2008,7 @@ function Table$1(props) {
   return /* @__PURE__ */ React__namespace.createElement(core.ScrollArea.Autosize, { maxHeight: 600 }, /* @__PURE__ */ React__namespace.createElement(core.Table, { horizontalSpacing: 0, verticalSpacing: 0, sx: { minWidth: 700 } }, /* @__PURE__ */ React__namespace.createElement("tbody", null, rows)));
 }
 
-const useStyles$8 = core.createStyles((theme) => ({
+const useStyles$9 = core.createStyles((theme) => ({
   title: {
     fontSize: 34,
     fontWeight: 900,
@@ -2041,7 +2021,7 @@ const useStyles$8 = core.createStyles((theme) => ({
   }
 }));
 const Lessons = (props) => {
-  const { classes } = useStyles$8();
+  const { classes } = useStyles$9();
   return /* @__PURE__ */ React__namespace.createElement(core.Container, { size: "lg", py: "xl" }, /* @__PURE__ */ React__namespace.createElement(core.Stack, { spacing: "md" }, /* @__PURE__ */ React__namespace.createElement(core.Grid, null, /* @__PURE__ */ React__namespace.createElement(core.Grid.Col, { sm: "auto" }, /* @__PURE__ */ React__namespace.createElement(core.Badge, { variant: "filled", size: "lg" }, "Lessons"), /* @__PURE__ */ React__namespace.createElement(core.Title, { order: 2, className: classes.title, mt: "md" }, "Lessons"), /* @__PURE__ */ React__namespace.createElement(core.Text, { color: "dimmed", className: classes.description, mt: "sm" }, "Explore units of instruction and/or see corresponding class progress."))), /* @__PURE__ */ React__namespace.createElement(
     core.Autocomplete,
     {
@@ -2058,7 +2038,7 @@ const Lessons = (props) => {
   ))));
 };
 
-const useStyles$7 = core.createStyles((theme) => ({
+const useStyles$8 = core.createStyles((theme) => ({
   title: {
     fontSize: 22,
     fontWeight: 900,
@@ -2077,7 +2057,7 @@ const useStyles$7 = core.createStyles((theme) => ({
   }
 }));
 function AccessCode(props) {
-  const { classes } = useStyles$7();
+  const { classes } = useStyles$8();
   return /* @__PURE__ */ React__namespace.createElement(core.Container, { mx: "0", px: "0", size: 460, my: 30 }, /* @__PURE__ */ React__namespace.createElement(core.Title, { className: classes.title }, "Access code"), /* @__PURE__ */ React__namespace.createElement(core.Text, { color: "dimmed", size: "sm" }, "Grant access to join your organization"), /* @__PURE__ */ React__namespace.createElement(core.Paper, { withBorder: true, shadow: "md", p: 30, radius: "md", mt: "xl" }, /* @__PURE__ */ React__namespace.createElement(core.TextInput, { value: props.value, readOnly: true }), /* @__PURE__ */ React__namespace.createElement(core.Group, { position: "apart", mt: "lg", className: classes.controls }, /* @__PURE__ */ React__namespace.createElement(
     core.Anchor,
     {
@@ -2105,7 +2085,7 @@ const monthNames = [
   "November",
   "December"
 ];
-const useStyles$6 = core.createStyles((theme) => ({
+const useStyles$7 = core.createStyles((theme) => ({
   title: {
     fontSize: 34,
     fontWeight: 900,
@@ -2135,7 +2115,7 @@ const useStyles$6 = core.createStyles((theme) => ({
   }
 }));
 const Organization = (props) => {
-  const { classes } = useStyles$6();
+  const { classes } = useStyles$7();
   return /* @__PURE__ */ React__namespace.createElement(React__namespace.Fragment, null, /* @__PURE__ */ React__namespace.createElement(core.Container, { size: "lg", py: "xl" }, /* @__PURE__ */ React__namespace.createElement(core.Stack, { spacing: "md" }, /* @__PURE__ */ React__namespace.createElement(core.Grid, null, /* @__PURE__ */ React__namespace.createElement(core.Grid.Col, { sm: "auto" }, /* @__PURE__ */ React__namespace.createElement(core.UnstyledButton, { onClick: props.onBackClick }, /* @__PURE__ */ React__namespace.createElement(
     core.Badge,
     {
@@ -2161,7 +2141,7 @@ const Organization = (props) => {
   ] }))))));
 };
 
-const useStyles$5 = core.createStyles((theme) => ({
+const useStyles$6 = core.createStyles((theme) => ({
   button: {
     borderTopRightRadius: 0,
     borderBottomRightRadius: 0,
@@ -2176,7 +2156,7 @@ const useStyles$5 = core.createStyles((theme) => ({
   }
 }));
 const SplitButton = (props) => {
-  const { classes, theme } = useStyles$5();
+  const { classes, theme } = useStyles$6();
   const menuIconColor = theme.colors[theme.primaryColor][theme.colorScheme === "dark" ? 5 : 6];
   const hasMenu = !!props.withOrganizationLink;
   return /* @__PURE__ */ React__namespace.createElement(core.Group, { noWrap: true, spacing: 0 }, /* @__PURE__ */ React__namespace.createElement(
@@ -2257,7 +2237,7 @@ var __spreadValues$4 = (a, b) => {
   return a;
 };
 var __spreadProps$3 = (a, b) => __defProps$3(a, __getOwnPropDescs$3(b));
-const useStyles$4 = core.createStyles((theme) => ({
+const useStyles$5 = core.createStyles((theme) => ({
   title: {
     fontSize: 34,
     fontWeight: 900,
@@ -2287,7 +2267,7 @@ const useStyles$4 = core.createStyles((theme) => ({
   }
 }));
 const People = (props) => {
-  const { classes } = useStyles$4();
+  const { classes } = useStyles$5();
   const form$1 = form.useForm({
     initialValues: {
       userId: "",
@@ -2391,7 +2371,7 @@ const People = (props) => {
   ))))));
 };
 const DropzoneButton = (props) => {
-  const { classes, theme } = useStyles$4();
+  const { classes, theme } = useStyles$5();
   const openRef = React__namespace.useRef(null);
   const [loading, setLoading] = React__namespace.useState(false);
   const onDrop = React__namespace.useCallback((acceptedFiles) => {
@@ -2437,7 +2417,7 @@ const DropzoneButton = (props) => {
   } }, "Select file"));
 };
 
-const useStyles$3 = core.createStyles((theme) => ({
+const useStyles$4 = core.createStyles((theme) => ({
   form: {
     backgroundColor: theme.white,
     padding: theme.spacing.xl,
@@ -2500,7 +2480,7 @@ const useStyles$3 = core.createStyles((theme) => ({
   }
 }));
 const StartAnonymousLesson = (props) => {
-  const { classes } = useStyles$3();
+  const { classes } = useStyles$4();
   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,
@@ -2534,23 +2514,52 @@ var __spreadValues$3 = (a, b) => {
 };
 const BadgeGrid = (props) => {
   const badges = props.badges.map((b) => /* @__PURE__ */ React__namespace.createElement(TaskCard, __spreadValues$3({ key: b.title }, b)));
-  return /* @__PURE__ */ React__namespace.createElement(core.SimpleGrid, { cols: 3, breakpoints: [{ maxWidth: "sm", cols: 1 }] }, badges);
+  return /* @__PURE__ */ React__namespace.createElement(core.SimpleGrid, { cols: 4, breakpoints: [{ maxWidth: "sm", cols: 1 }, { maxWidth: "md", cols: 3 }] }, badges);
 };
 function TaskCard(props) {
-  const isComplete = props.lessonsCompleted >= props.lessonsTotal;
-  return /* @__PURE__ */ React__namespace.createElement(core.Card, { withBorder: true, radius: "md" }, /* @__PURE__ */ React__namespace.createElement(core.Group, { position: "apart", mb: 20 }, /* @__PURE__ */ React__namespace.createElement(core.ThemeIcon, { size: "lg", variant: "gradient", gradient: { from: "indigo", to: "cyan" } }, /* @__PURE__ */ React__namespace.createElement(icons.IconBadge, { size: 20 })), !!props.lessonsTotal && isComplete && /* @__PURE__ */ React__namespace.createElement(core.Badge, { variant: "gradient", gradient: { from: "indigo", to: "cyan" } }, "Complete"), !!props.lessonsTotal && !isComplete && /* @__PURE__ */ React__namespace.createElement(core.Badge, { variant: "filled" }, "Incomplete")), /* @__PURE__ */ React__namespace.createElement(core.UnstyledButton, { component: reactRouterDom.Link, to: props.href, mt: "md", sx: { ":hover": { textDecoration: "underline" } } }, /* @__PURE__ */ React__namespace.createElement(core.Text, { size: "lg", weight: 500 }, props.title)), /* @__PURE__ */ React__namespace.createElement(core.Text, { size: "sm", color: "dimmed", mt: 5, mb: 50 }, props.description), !!props.lessonsCompleted && /* @__PURE__ */ React__namespace.createElement(core.Text, { color: "dimmed", size: "sm", mt: "md" }, "Lessons completed:", " ", /* @__PURE__ */ React__namespace.createElement(
-    core.Text,
+  return /* @__PURE__ */ React__namespace.createElement(core.Card, { withBorder: true, radius: "md" }, /* @__PURE__ */ React__namespace.createElement(core.UnstyledButton, { component: reactRouterDom.Link, to: props.href, sx: { ":hover": { textDecoration: "underline" } } }, /* @__PURE__ */ React__namespace.createElement(core.Text, { size: "md", weight: 500 }, props.title)), /* @__PURE__ */ React__namespace.createElement(core.Text, { size: "sm", color: "dimmed", mt: 5, mb: 25, h: 100, sx: { overflowY: "scroll" } }, props.description), /* @__PURE__ */ React__namespace.createElement(
+    core.Button,
     {
-      span: true,
-      weight: 500,
-      sx: (theme) => ({ color: theme.colorScheme === "dark" ? theme.white : theme.black })
+      variant: "gradient",
+      size: "xs",
+      leftIcon: /* @__PURE__ */ React__namespace.createElement(icons.IconClipboardCopy, { size: 14 }),
+      onClick: () => props.onAssign(props.taskId)
     },
-    props.lessonsCompleted
-  )), !!props.lessonsTotal && /* @__PURE__ */ React__namespace.createElement(core.Progress, { value: props.lessonsCompleted / props.lessonsTotal * 100, mt: 5 }));
+    "Assign"
+  ));
 }
 
+const useStyles$3 = core.createStyles((theme) => ({
+  action: {
+    ":hover": {
+      textDecoration: "underline"
+    }
+  },
+  title: {
+    color: theme.colorScheme === "dark" ? theme.white : theme.black,
+    fontFamily: `Greycliff CF, ${theme.fontFamily}`,
+    fontSize: theme.fontSizes.xl,
+    lineHeight: 1.5,
+    fontWeight: 900,
+    [theme.fn.smallerThan("xs")]: {
+      fontSize: theme.fontSizes.md
+    }
+  }
+}));
 const TrialHome = (props) => {
-  return /* @__PURE__ */ React__namespace.createElement(core.Container, { size: "lg" }, /* @__PURE__ */ React__namespace.createElement(core.Badge, null, props.daysRemaining, " day", props.daysRemaining !== 1 ? "s" : "", " left"), /* @__PURE__ */ React__namespace.createElement(core.Stack, { spacing: "sm" }, /* @__PURE__ */ React__namespace.createElement(core.Stack, { spacing: 0 }, /* @__PURE__ */ React__namespace.createElement(
+  const { classes } = useStyles$3();
+  return /* @__PURE__ */ React__namespace.createElement(core.Container, { size: "lg" }, /* @__PURE__ */ React__namespace.createElement(core.Badge, null, props.daysRemaining, " day", props.daysRemaining !== 1 ? "s" : "", " left"), /* @__PURE__ */ React__namespace.createElement(
+    core.Button,
+    {
+      className: classes.action,
+      variant: "white",
+      component: "a",
+      size: "xs",
+      href: props.upgradeHref,
+      target: "_blank"
+    },
+    "UPGRADE NOW"
+  ), /* @__PURE__ */ React__namespace.createElement(core.Stack, { spacing: "sm" }, /* @__PURE__ */ React__namespace.createElement(core.Stack, { spacing: 0 }, /* @__PURE__ */ React__namespace.createElement(
     UserInfo,
     {
       variant: "compact",
@@ -2561,14 +2570,10 @@ const TrialHome = (props) => {
     TenantBanner,
     {
       title: "Trial Account",
-      description: "Welcome to Local Civics! You are currently interacting with our trial experience.",
-      image: "https://cdn.localcivics.io/hub/landing.jpg",
-      action: {
-        label: "UPGRADE NOW",
-        link: props.upgradeHref
-      }
+      description: `Welcome to your Local Civics Trial Account${props.firstName ? ", " + props.firstName : ""}!`,
+      image: "https://cdn.localcivics.io/hub/landing.jpg"
     }
-  )), /* @__PURE__ */ React__namespace.createElement(BadgeGrid, { badges: props.badges })));
+  )), /* @__PURE__ */ React__namespace.createElement(core.Title, { mb: 20, mt: 20, className: classes.title }, "Based on the tags you selected,", /* @__PURE__ */ React__namespace.createElement("br", null), " check out these lessons to get started with your students!"), /* @__PURE__ */ React__namespace.createElement(BadgeGrid, { onAssign: props.onAssign, badges: props.badges })));
 };
 
 var __defProp$2 = Object.defineProperty;