@local-civics/mgmt-ui 0.1.102 → 0.1.104

package/dist/index.mjs

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { useState } from 'react';
-import { createStyles, Group, Avatar, Text, Box, Badge as Badge$1, ThemeIcon, Collapse, Navbar as Navbar$1, Center, Image, Code, Burger, ScrollArea, UnstyledButton, Card, Modal, Loader, SimpleGrid, Tabs as Tabs$1, Button, Menu, ActionIcon, Title, Grid, Table as Table$h, Container, Stack as Stack$3, LoadingOverlay, Select, Autocomplete, Drawer, Divider, TextInput, Tooltip, Paper, Overlay, Anchor, Checkbox, createEmotionCache, MantineProvider, AppShell } from '@mantine/core';
+import { createStyles, Group, Avatar, Text, Box, Badge as Badge$1, ThemeIcon, Collapse, Navbar as Navbar$1, Center, Image, Code, Burger, ScrollArea, Modal, Loader, Container, Button, Title, UnstyledButton, Card, SimpleGrid, Tabs as Tabs$1, Menu, ActionIcon, Grid, Table as Table$h, Stack as Stack$3, LoadingOverlay, Select, Autocomplete, Drawer, Divider, TextInput, Tooltip, Paper, Overlay, Anchor, Checkbox, createEmotionCache, MantineProvider, AppShell } from '@mantine/core';
 import { IconChevronRight, IconChevronLeft, IconVideo, IconSwitchHorizontal, IconLogout, IconHome2, IconGauge, IconCategory2, IconAlbum, IconLambda, IconBuilding, IconBatteryEco, IconBooks, IconBackpack, IconChevronDown, IconClipboardCopy, IconTableExport, IconArrowLeft, IconPlaylistAdd, IconCheck, IconTrash, IconDownload, IconX, IconCloudUpload, IconInfoCircle, IconColorSwatch, IconPointer, IconScribble, IconSchool, IconPodium, IconBriefcase, IconPresentation, IconNews, IconTools, IconBrandInstagram, IconBrandLinkedin, IconBrandFacebook } from '@tabler/icons';
 import { Link } from 'react-router-dom';
 import { NotificationsProvider } from '@mantine/notifications';
@@ -42,7 +42,7 @@ var __objRest$2 = (source, exclude) => {
     }
   return target;
 };
-const useStyles$p = createStyles((theme) => ({
+const useStyles$q = createStyles((theme) => ({
   user: {
     display: "block",
     width: "100%",
@@ -53,7 +53,7 @@ const useStyles$p = createStyles((theme) => ({
 }));
 function UserButton(_a) {
   var _b = _a, { image, name, email, icon } = _b, others = __objRest$2(_b, ["image", "name", "email", "icon"]);
-  const { classes } = useStyles$p();
+  const { classes } = useStyles$q();
   return /* @__PURE__ */ React.createElement(Group, __spreadValues$9({ className: classes.user }, others), /* @__PURE__ */ React.createElement(Avatar, { src: image, radius: "xl" }), /* @__PURE__ */ React.createElement("div", { style: { flex: 1 } }, /* @__PURE__ */ React.createElement(Text, { size: "sm", weight: 500 }, name), /* @__PURE__ */ React.createElement(Text, { color: "dimmed", size: "xs" }, email)));
 }
 
@@ -64,7 +64,7 @@ const compact = (num) => {
   }).format(num || 0);
 };
 
-const useStyles$o = createStyles((theme, _params, getRef) => {
+const useStyles$p = createStyles((theme, _params, getRef) => {
   const icon = getRef("icon");
   return {
     control: {
@@ -117,7 +117,7 @@ const useStyles$o = createStyles((theme, _params, getRef) => {
   };
 });
 function LinksGroup({ icon: Icon, href, label, initiallyOpened, links, active, notifications }) {
-  const { classes, theme, cx } = useStyles$o();
+  const { classes, theme, cx } = useStyles$p();
   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] = useState(initiallyOpened || hasActiveLinks || false);
@@ -181,7 +181,7 @@ var __spreadValues$8 = (a, b) => {
   return a;
 };
 var __spreadProps$5 = (a, b) => __defProps$5(a, __getOwnPropDescs$5(b));
-const useStyles$n = createStyles((theme, _params, getRef) => {
+const useStyles$o = createStyles((theme, _params, getRef) => {
   const icon = getRef("icon");
   return {
     navbar: {
@@ -280,7 +280,7 @@ const TRIAL_PAGES = [
   "Badges"
 ];
 function Navbar(props) {
-  const { classes, cx } = useStyles$n();
+  const { classes, cx } = useStyles$o();
   const [burgerOpen, setBurgerOpen] = React.useState(false);
   const toggle = () => setBurgerOpen(!burgerOpen);
   const links = data.map((item) => {
@@ -323,6 +323,56 @@ function Navbar(props) {
   } }, /* @__PURE__ */ React.createElement(IconLogout, { className: classes.linkIcon, stroke: 1.5 }), /* @__PURE__ */ React.createElement("span", null, "Logout"))))));
 }
 
+const useStyles$n = createStyles((theme) => ({
+  inner: {
+    paddingTop: theme.spacing.xl,
+    paddingBottom: theme.spacing.xl * 4
+  },
+  content: {
+    maxWidth: 600,
+    marginRight: theme.spacing.xl,
+    [theme.fn.smallerThan("md")]: {
+      maxWidth: "100%",
+      marginRight: 0
+    }
+  },
+  title: {
+    color: theme.colorScheme === "dark" ? theme.white : theme.black,
+    fontFamily: `Greycliff CF, ${theme.fontFamily}`,
+    fontSize: 44,
+    lineHeight: 1.2,
+    fontWeight: 900,
+    [theme.fn.smallerThan("xs")]: {
+      fontSize: 28
+    }
+  },
+  control: {
+    [theme.fn.smallerThan("xs")]: {
+      flex: 1
+    }
+  },
+  highlight: {
+    position: "relative",
+    backgroundColor: theme.fn.variant({ variant: "light", color: theme.primaryColor }).background,
+    borderRadius: theme.radius.sm,
+    padding: "4px 12px"
+  }
+}));
+const GettingStarted = (props) => {
+  const { classes } = useStyles$n();
+  return /* @__PURE__ */ React.createElement(
+    Modal,
+    {
+      centered: true,
+      fullScreen: true,
+      opened: props.opened,
+      onClose: () => props.onClose && props.onClose(),
+      size: "sm"
+    },
+    /* @__PURE__ */ React.createElement("div", { style: { position: "relative" } }, props.loading && /* @__PURE__ */ React.createElement(Center, { style: { height: 400 } }, /* @__PURE__ */ React.createElement(Loader, null)), !props.loading && /* @__PURE__ */ React.createElement(Container, null, /* @__PURE__ */ React.createElement(Group, { position: "center" }, /* @__PURE__ */ React.createElement("div", { className: classes.inner }, /* @__PURE__ */ React.createElement("div", { className: classes.content }, /* @__PURE__ */ React.createElement(Button, { onClick: props.onClose, radius: "xl", size: "md", className: classes.control }, "Skip tour"), /* @__PURE__ */ React.createElement(Title, { className: classes.title }, "An experience purpose built for educators like you!"), /* @__PURE__ */ React.createElement(Text, { color: "dimmed", mt: "md" }, "Hello! We're excited that you chose try out a few of the tools that Local Civics can bring to your classroom. Watch this short video tour to get a sense of how to navigate around the platform."), /* @__PURE__ */ React.createElement("video", { style: { marginTop: "20px", marginBottom: "20px" }, width: "600", height: "350", controls: true }, /* @__PURE__ */ React.createElement("source", { src: props.videoURL, type: "video/mp4" }), "Your browser does not support the video tag."))))))
+  );
+};
+
 const useStyles$m = createStyles((theme) => ({
   title: {
     fontSize: 34,
@@ -2497,7 +2547,7 @@ const BadgeGrid = (props) => {
   return /* @__PURE__ */ React.createElement(SimpleGrid, { cols: 4, breakpoints: [{ maxWidth: "sm", cols: 1 }, { maxWidth: "md", cols: 3 }] }, badges);
 };
 function TaskCard(props) {
-  return /* @__PURE__ */ React.createElement(Card, { withBorder: true, radius: "md" }, /* @__PURE__ */ React.createElement(UnstyledButton, { component: Link, to: props.href, sx: { ":hover": { textDecoration: "underline" } } }, /* @__PURE__ */ React.createElement(Text, { size: "md", weight: 500 }, props.title)), /* @__PURE__ */ React.createElement(Text, { size: "sm", color: "dimmed", mt: 5, mb: 25, h: 100, sx: { overflowY: "scroll" } }, props.description), /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React.createElement(Card, { withBorder: true, radius: "md" }, /* @__PURE__ */ React.createElement(UnstyledButton, { component: Link, to: props.href, sx: { ":hover": { textDecoration: "underline" } } }, /* @__PURE__ */ React.createElement(Text, { size: "md", weight: 500 }, props.title)), /* @__PURE__ */ React.createElement(Text, { size: "sm", color: "dimmed", mt: 5, mb: 25, h: 125, sx: { overflowY: "scroll" } }, props.description), /* @__PURE__ */ React.createElement(
     Button,
     {
       variant: "gradient",
@@ -2511,6 +2561,7 @@ function TaskCard(props) {
 
 const useStyles$3 = createStyles((theme) => ({
   action: {
+    backgroundColor: "inherit",
     ":hover": {
       textDecoration: "underline"
     }
@@ -2553,7 +2604,7 @@ const TrialHome = (props) => {
       description: `Welcome to your Local Civics Trial Account${props.firstName ? ", " + props.firstName : ""}!`,
       image: "https://cdn.localcivics.io/hub/landing.jpg"
     }
-  )), /* @__PURE__ */ React.createElement(Title, { mb: 20, mt: 20, className: classes.title }, "Based on the tags you selected,", /* @__PURE__ */ React.createElement("br", null), " check out these lessons to get started with your students!"), /* @__PURE__ */ React.createElement(BadgeGrid, { onAssign: props.onAssign, badges: props.badges })));
+  )), /* @__PURE__ */ React.createElement(Title, { maw: 500, mb: 20, mt: 20, className: classes.title }, "Based on the tags you selected, check out these lessons to get started with your students!"), /* @__PURE__ */ React.createElement(BadgeGrid, { onAssign: props.onAssign, badges: props.badges })));
 };
 
 var __defProp$2 = Object.defineProperty;
@@ -3050,5 +3101,5 @@ const useAccount = (account, accounts, onAccountChange) => {
   };
 };
 
-export { AdminProvider, App, Badge, Badges, Class, Classes, Dashboard, Home, Lesson, Lessons, Navbar, Organization, People, StartAnonymousLesson, Student, SwitchAccount, TrialHome, TrialRegistration };
+export { AdminProvider, App, Badge, Badges, Class, Classes, Dashboard, GettingStarted, Home, Lesson, Lessons, Navbar, Organization, People, StartAnonymousLesson, Student, SwitchAccount, TrialHome, TrialRegistration };
 //# sourceMappingURL=index.mjs.map