@unitedstatespowersquadrons/components 1.4.5 → 1.4.6-2

package/Admin/AdminLink.tsx

@@ -1,95 +1,58 @@
 import React from "react";
 import { createUseStyles } from "react-jss";
 import classNames from "classnames";
-import AdminItem from "./AdminItem";
 import Colors, { ButtonColorName } from "../Colors";
-import { FontAwesomeProps } from "../FontAwesomeIcon";
-import IconButton from "../IconButton";
+import FontAwesomeIcon, { FontAwesomeProps } from "../FontAwesomeIcon";
 import Styles from "../Styles";
 
 // Styles aren't tree-shaken, but keeping every color variant here means apps
 // can pass any ButtonColorName without needing to know which ones are wired up.
 const useStyles = createUseStyles({
   blue: {
-    "& button": { ...Styles.blue },
-    "&:hover": {
-      "& button": { ...Styles.hover.blue },
-      ...Styles.hover.blue,
-    },
+    "&:hover": { ...Styles.hover.blue },
     ...Styles.blue,
   },
   darkGray: {
-    "& button": { ...Styles.darkGray },
-    "&:hover": {
-      "& button": { ...Styles.darkGray },
-      ...Styles.darkGray,
-    },
+    "&:hover": { ...Styles.darkGray },
     ...Styles.darkGray,
   },
   gray: {
-    "& button": { ...Styles.gray },
-    "&:hover": {
-      "& button": { ...Styles.hover.gray },
-      ...Styles.hover.gray,
-    },
+    "&:hover": { ...Styles.hover.gray },
     ...Styles.gray,
   },
   green: {
-    "& button": { ...Styles.green },
-    "&:hover": {
-      "& button": { ...Styles.hover.green },
-      ...Styles.hover.green,
-    },
+    "&:hover": { ...Styles.hover.green },
     ...Styles.green,
   },
   item: {
-    "& > span": { display: "none" },
     "&:hover": { backgroundColor: Colors.shades._a },
-    "&:hover > span": { display: "inline-block" },
+    "&:not(:last-child)": { padding: "0.5em 0.1em" },
+    ...Styles.flexRow,
+    borderRadius: "0.5em",
     cursor: "pointer",
+    justifyContent: "left",
+    textAlign: "left",
+    textDecoration: "none",
+    width: "100%",
   },
-  left: { textAlign: "left" },
   orange: {
-    "& button": { ...Styles.orange },
-    "&:hover": {
-      "& button": { ...Styles.hover.orange },
-      ...Styles.hover.orange,
-    },
+    "&:hover": { ...Styles.hover.orange },
     ...Styles.orange,
   },
   purple: {
-    "& button": { ...Styles.purple },
-    "&:hover": {
-      "& button": { ...Styles.hover.purple },
-      ...Styles.hover.purple,
-    },
+    "&:hover": { ...Styles.hover.purple },
     ...Styles.purple,
   },
   red: {
-    "& button": { ...Styles.red },
-    "&:hover": {
-      "& button": { ...Styles.hover.red },
-      ...Styles.hover.red,
-    },
+    "&:hover": { ...Styles.hover.red },
     ...Styles.red,
   },
   subMenuIcon: {
     fontSize: "1.5em",
-    gap: "0",
-    paddingLeft: "0",
-    paddingRight: "0",
-  },
-  subMenuLink: {
-    color: "inherit",
-    cursor: "pointer",
-    flex: 1,
-    textDecoration: "none",
   },
   subMenuText: {
     animation: "fadeIn 100ms",
     fontSize: "1.5em",
-    gap: "0",
-    paddingRight: "0.5em",
   },
 });
 
@@ -105,23 +68,17 @@ const AdminLink = (props: Props) => {
   const { className, color, fa, href, icon, mode, style, subMenu, title } = props;
   const classes = useStyles();
 
-  const colorClassName = classes[color];
-
   return(
-    <AdminItem className={classNames(classes.item, classes.left, colorClassName)}>
-      <IconButton
-        className={classNames(classes.subMenuIcon, className)}
+    <a className={classNames(classes.item, classes[color])} href={href} title={title}>
+      <FontAwesomeIcon
+        css={classNames(classes.subMenuIcon, className)}
         fa={fa}
-        href={href}
         icon={icon}
         mode={mode}
         style={style}
-        title={title}
       />
-      <a className={classes.subMenuLink} href={href} title={title}>
-        <span className={classNames(classes.subMenuText, className)}>{subMenu}</span>
-      </a>
-    </AdminItem>
+      <span className={classNames(classes.subMenuText, className)}>{subMenu}</span>
+    </a>
   );
 };
 

package/package.json

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