Remove learn route and refactor styles

AllenInstitute · May 21, 2024 · 16ec93a · 16ec93a
1 parent cadb6d6
commit 16ec93a
Show file tree

Hide file tree

Showing 7 changed files with 37 additions and 42 deletions.
diff --git a/packages/web/src/components/Header/Header.module.css b/packages/web/src/components/Header/Header.module.css
@@ -57,3 +57,8 @@
   background-color: var(--aqua-secondary-hover);
   color: var(--aqua);
 }
+
+.upload-button-label { 
+  font-weight: 400; 
+  font-size: 14px;
+}
diff --git a/packages/web/src/components/Header/Help.module.css b/packages/web/src/components/Header/Help.module.css
@@ -41,3 +41,7 @@
   border: none !important;
 }
 
+.help-menu-label {
+  font-weight: 400;
+  font-size: 16px;
+}
diff --git a/packages/web/src/components/Header/Help.tsx b/packages/web/src/components/Header/Help.tsx
@@ -1,48 +1,28 @@
-import classNames from "classnames";
 import { DirectionalHint, IContextualMenuItem, PrimaryButton } from "@fluentui/react";
+import classNames from "classnames";
 import * as React from "react";
-import { useNavigate } from "react-router-dom";
 
 import styles from "./Help.module.css";
 
 interface Props {
     path: string;
 }
 
-// Banner for the splash page
 export default function HelpMenu(props: Props) {
-    const isApp: boolean = props.path == "/app";
-    const navigate = useNavigate();
-
-    function redirect(
-        ev?: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>,
-        item?: IContextualMenuItem
-    ): void {
-        if (item?.data) {
-            if (isApp) {
-                window.open(item.data, "_blank", "noreferrer"); // open in new tab while in app
-            } else navigate(item.data);
-        }
-    }
+    const isAppRoute: boolean = props.path == "/app";
 
     const helpMenuOptions: IContextualMenuItem[] = [
-        {
-            key: "learn",
-            text: "Learn",
-            data: "/learn", // path for router
-            onClick: redirect,
-        },
         {
             key: "tutorials",
             text: "In-app tutorials",
-            style: !isApp ? { display: "none" } : {},
+            style: !isAppRoute ? { display: "none" } : {},
         },
         {
             key: "reportissue",
             text: `Report issue in GitHub`,
             href: "https://github.com/AllenInstitute/aics-fms-file-explorer-app/issues",
             target: "_blank",
-            style: !isApp ? { display: "none" } : {},
+            style: !isAppRoute ? { display: "none" } : {},
         },
         {
             key: "github",
@@ -57,15 +37,15 @@ export default function HelpMenu(props: Props) {
         {
             key: "version",
             text: "Version info",
-            style: !isApp ? { display: "none" } : {},
+            style: !isAppRoute ? { display: "none" } : {},
         },
     ];
 
     return (
         <PrimaryButton
             ariaLabel="Help"
             className={classNames(styles.helpMenuButton, styles.headerOption)}
-            styles={{ label: { "font-weight": "400", "font-size": "16px" } }}
+            styles={{ label: styles.helpMenuLabel }}
             id="helpmenu"
             menuIconProps={{ iconName: "ChevronDown" }}
             text="Help"
@@ -74,12 +54,6 @@ export default function HelpMenu(props: Props) {
                 directionalHint: DirectionalHint.bottomAutoEdge,
                 shouldFocusOnMount: true,
                 items: helpMenuOptions,
-                styles: {
-                    container: {
-                        filter: "drop-shadow(black 100px 14px 18px)",
-                        "background-color": "green !important",
-                    },
-                },
             }}
         />
     );

diff --git a/packages/web/src/components/Header/index.tsx b/packages/web/src/components/Header/index.tsx
@@ -42,7 +42,7 @@ export default function Header() {
                     {currentPath !== "/app" && (
                         <DefaultButton
                             className={classNames(styles.uploadButton, styles.headerOption)}
-                            styles={{ label: { "font-weight": "400", "font-size": "14px" } }}
+                            styles={{ label: styles.uploadButtonLabel }}
                             ariaLabel="Upload file"
                             iconProps={{ iconName: "Upload" }}
                             title="Upload"

diff --git a/packages/web/src/components/Home/Features.module.css b/packages/web/src/components/Home/Features.module.css
@@ -1,5 +1,7 @@
 .flex-container {
     display: flex;
+    font-size: 16px;
+    font-weight: 400;
     flex: auto;
     height: 100%;
     overflow: hidden;
@@ -20,8 +22,6 @@
 
 .features {
     color: var(--aqua);
-    font-size: 16px;
-    font-weight: 300;
     width: 33%;
     flex: auto;
     margin-right: calc(2 * var(--margin));

diff --git a/packages/web/src/components/Home/Home.module.css b/packages/web/src/components/Home/Home.module.css
@@ -37,13 +37,15 @@
 
 .option-header {
     font-size: 18px;
+    font-weight: 600;
     padding: var(--margin);
     height: 50px;
     line-height: 1.25;
 }
 
 .option-body {
     font-size: 14px;
+    font-weight: 400;
     padding: var(--margin);
     margin: var(--margin) 0;
 }
@@ -54,7 +56,7 @@
 
 hr {
     border: none;
-    height: 1px;
+    height: 1px !important;
     color: var(--borders-light-grey); /* old IE */
     background-color: var(--borders-light-grey); /* Modern Browsers */
 }
@@ -71,4 +73,14 @@ hr {
 .button:focus {
     background-color: var(--bright-aqua);
     color: var(--white);
-}
+}
+
+.button-label { 
+    font-size: 14px;
+    font-weight: 400;
+}
+
+.button-icon { 
+    font-size: 15px;
+    font-weight: 500;
+}
diff --git a/packages/web/src/components/Home/index.tsx b/packages/web/src/components/Home/index.tsx
@@ -8,7 +8,7 @@ import Features from "./Features";
 
 import styles from "./Home.module.css";
 
-// Placeholder for the splash page
+// Public-facing splash page
 export default function Home() {
     const options = [
         {
@@ -19,8 +19,8 @@ export default function Home() {
                 <DefaultButton
                     className={classNames(styles.button)}
                     styles={{
-                        label: { "font-size": "14px", "font-weight": "400" },
-                        icon: { "font-size": "14px", "font-weight": "500" },
+                        label: styles.buttonLabel,
+                        icon: styles.buttonIcon,
                     }}
                     ariaLabel="Upload file"
                     iconProps={{ iconName: "Upload" }}
@@ -38,8 +38,8 @@ export default function Home() {
                     <DefaultButton
                         className={classNames(styles.button)}
                         styles={{
-                            label: { "font-size": "14px", "font-weight": "400" },
-                            icon: { "font-size": "14px", "font-weight": "500" },
+                            label: styles.buttonLabel,
+                            icon: styles.buttonIcon,
                         }}
                         ariaLabel="View datasets"
                         iconProps={{ iconName: "BulletedList" }}