@unitedstatespowersquadrons/components 1.4.0-3 → 1.4.0-4

package/Colors.tsx

@@ -73,6 +73,41 @@ const shadesLegacy = {
 };
 /* eslint-enable sort-keys */
 
+const buttonColors = {
+  background: {
+    hover: {
+      blue: "#5588EE",
+      darkGray: shades._8,
+      gray: shades._b,
+      green: "#55BB55",
+      orange: "#EE8833",
+      purple: "#8844EE",
+      red: "#CC6666",
+    },
+    normal: {
+      blue: "#6699FF",
+      darkGray: shades._9,
+      gray: shades._c,
+      green: "#66CC66",
+      orange: "#FF9944",
+      purple: "#9955FF",
+      red: "#DD7777",
+    },
+    shadow: {
+      blue: "#4477DD",
+      darkGray: shades._7,
+      gray: shades._a,
+      green: "#44AA44",
+      orange: "#DD7722",
+      purple: "#7733DD",
+      red: "#BB5555",
+    },
+  },
+  border: "gray",
+  glow: "rgba(0, 200, 200, 0.5)",
+  shadow: shades._a,
+};
+
 export type ButtonColorName =
   | "blue"
   | "darkGray"
@@ -96,40 +131,7 @@ const specificColors = {
     purple: "#EECCFF",
     red: "#FFEEEE",
   },
-  button: {
-    background: {
-      hover: {
-        blue: "#5588EE",
-        darkGray: shades._8,
-        gray: shades._b,
-        green: "#55BB55",
-        orange: "#EE8833",
-        purple: "#8844EE",
-        red: "#CC6666",
-      },
-      normal: {
-        blue: "#6699FF",
-        darkGray: shades._9,
-        gray: shades._c,
-        green: "#66CC66",
-        orange: "#FF9944",
-        purple: "#9955FF",
-        red: "#DD7777",
-      },
-      shadow: {
-        blue: "#4477DD",
-        darkGray: shades._7,
-        gray: shades._a,
-        green: "#44AA44",
-        orange: "#DD7722",
-        purple: "#7733DD",
-        red: "#BB5555",
-      },
-    },
-    border: "gray",
-    glow: "rgba(0, 200, 200, 0.5)",
-    shadow: shades._a,
-  },
+  button: buttonColors,
   exam: {
     dragging: "#00CCCC",
     instructions: {
@@ -137,6 +139,12 @@ const specificColors = {
       selected: "#EEEEFF",
     },
   },
+  toast: {
+    broadcast: buttonColors.background.normal.purple,
+    error: "#CC0000",
+    notice: "#009900",
+    success: "#000099",
+  },
 };
 
 const Colors = {

package/Toasts/Toast.tsx

@@ -4,6 +4,7 @@ import { createUseStyles } from "react-jss";
 import { DismissFunc, Toast_Status, ToastProps } from "./types";
 import FontAwesomeIcon from "../FontAwesomeIcon";
 import Styles from "../Styles";
+import Colors from "../Colors";
 
 interface Props {
   allowedDomains?: string[] | undefined;
@@ -22,33 +23,20 @@ const isAllowedUrl = (url: string, allowedDomains?: string[]): boolean => {
 };
 
 const useStyles = createUseStyles({
-  broadcast: {
-    borderLeft: "4px solid #7A1FA2",
-  },
-  broadcastTag: {
-    backgroundColor: "#7A1FA2",
-    borderRadius: "0.25em",
-    color: "#FFFFFF",
-    fontSize: "0.75em",
-    fontWeight: "bold",
-    letterSpacing: "0.05em",
-    marginRight: "0.5em",
-    padding: "0.1em 0.4em",
-    textTransform: "uppercase",
-  },
+  broadcast: { borderLeft: `4px solid ${Colors.purple}` },
   dismissed: { opacity: "0" },
   error: {
-    borderColor: "#CC0000",
-    color: "#CC0000",
+    borderColor: Colors.toast.error,
+    color: Colors.toast.error,
   },
   italic: { fontStyle: "italic" },
   notice: {
-    borderColor: "#000099",
-    color: "#000099",
+    borderColor: Colors.toast.notice,
+    color: Colors.toast.notice,
   },
   success: {
-    borderColor: "#009900",
-    color: "#009900",
+    borderColor: Colors.toast.success,
+    color: Colors.toast.success,
   },
   toast: {
     "@media print, screen and (max-width: 1000px)": { maxWidth: "100%" },
@@ -142,6 +130,8 @@ const Toast = (props: Props) => {
   };
 
   const statusDetails = (): [string, string] => {
+    if (isBroadcast) return [classes.broadcast, "rss"];
+
     switch (status) {
     case Toast_Status.SUCCESS: return [classes.success, "check"];
     case Toast_Status.NOTICE: return [classes.notice, "circle-info"];
@@ -155,13 +145,9 @@ const Toast = (props: Props) => {
   const opacityClass = dismissed ? classes.dismissed : classes.visible;
 
   return (
-    <div
-      className={classNames(classes.toast, statusClassName, opacityClass, isBroadcast && classes.broadcast)}
-      key={`toast-${id}`}
-    >
+    <div className={classNames(classes.toast, statusClassName, opacityClass)} key={`toast-${id}`}>
       <div className={classes.toastTitle}>
         <FontAwesomeIcon fa="fw" icon={icon} mode="duotone" />
-        {isBroadcast && <span className={classes.broadcastTag}>Broadcast</span>}
         <span>{title}</span>
       </div>
       <div className={classes.toastBody}>{renderBody()}</div>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@unitedstatespowersquadrons/components",
-  "version": "1.4.0-3",
+  "version": "1.4.0-4",
   "description": "USPS shared React components library",
   "main": "index.tsx",
   "scripts": {