phac-nml · ericenns · Jun 10, 2022 · May 24, 2022 · May 24, 2022 · May 24, 2022
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -4,6 +4,7 @@
 ## [Unreleased]
 * [Developer/UI]: Refreshed the create new user account page. See [PR 1285](https://github.com/phac-nml/irida/pull/1285) for more.
 * [Developer/UI]: Added in typescript support to webpack build, moving forward all new frontend development will use typescript. See [PR 1294](https://github.com/phac-nml/irida/pull/1294) for more.
+* [Developer/UI]: Removed `styled-components` from page header and replaced with CSS variables. See [PR 1284](https://github.com/phac-nml/irida/pull/1284)
 
 ## [22.05.1] - 2022/06/01
 * [UI]: Fixed bug where samples could not be removed from share page. See [PR 1296](https://github.com/phac-nml/irida/pull/1296) for more.
@@ -37,7 +38,7 @@
 * [UI]: Fixed: Excel output file preview displaying numeric values as a whole number rather than in scientific notation.
 * [UI]: Updated the sequence run page to use Ant Design.
 * [UI]: Updated `forgot password`, `account activation`, and `reset password` pages to use Ant Design.
-* [Developer/Workflow]: Fixed issue with deleting AnalysisSubmission raising null pointer execptions due to bean wiring issue (issue #1287).
+* [Developer/Workflow]: Fixed issue with deleting AnalysisSubmission raising null pointer executions due to bean wiring issue (issue #1287).
 
 ## [22.03.1] - 2022/04/05
 * [ALL]: Upgraded to Spring Boot 2.6.6 which fixes CVE-2022-22965.

diff --git a/src/main/webapp/pages/template/page.html b/src/main/webapp/pages/template/page.html
@@ -8,7 +8,7 @@
     window.breadcrumbs = /*[[${breadcrumbs}]]*/ [];
   </script>
 </head>
-<body>
+<body th:class="${session.siteTheme + '-theme'}">
 <th:block layout:fragment="content">
   <div class="ant-layout">
     <header class="js-page-header"></header>

diff --git a/src/main/webapp/resources/css/app.css b/src/main/webapp/resources/css/app.css
@@ -5,6 +5,22 @@
 @import "components/tables.css";
 @import "components/typography.css";
 
+:root {
+  --grey-1: #ffffff;
+  --grey-2: #fafafa;
+  --grey-3: #f5f5f5;
+  --grey-4: #f0f0f0;
+  --grey-5: #d9d9d9;
+  --grey-6: #bfbfbf;
+  --grey-7: #8c8c8c;
+  --grey-8: #595959;
+  --grey-9: #434343;
+  --grey-10: #262626;
+  --grey-11: #1f1f1f;
+  --grey-12: #141414;
+  --grey-13: #000000;
+}
+
 html,
 body {
   height: 100%;

diff --git a/src/main/webapp/resources/js/components/Header/MainNavigation/MainNavigation.css b/src/main/webapp/resources/js/components/Header/MainNavigation/MainNavigation.css
@@ -0,0 +1,55 @@
+.main-navigation {
+  display: flex;
+  align-content: center;
+  height: 64px;
+}
+
+.dark-theme.main-navigation {
+  background-color: #001529;
+}
+
+.light-theme.main-navigation {
+  background-color: #ffffff;
+}
+
+.main-navigation header {
+  position: fixed;
+  z-index: 1000;
+  display: flex;
+  width: 100%;
+}
+
+.main-navigation .ant-menu-item-active {
+  background-color: transparent;
+}
+
+.main-navigation .anticon {
+  font-size: 20px !important;
+}
+
+.dark-theme .main-navigation .anticon,
+.dark-theme .main-navigation .ant-menu-title-content a {
+  color: var(--grey-2);
+}
+
+.light-theme .main-navigation .anticon,
+.light-theme .main-navigation .ant-menu-title-content a {
+  color: var(--grey-11);
+}
+
+.main-navigation .ant-menu-title-content a {
+  font-weight: 600;
+  font-size: 1.5rem;
+}
+
+.dark-theme .main-navigation .ant-menu-title-content a:hover {
+  color: var(--grey-1);
+}
+
+.light-theme .main-navigation .ant-menu-title-content a:hover {
+  color: var(--grey-8);
+}
+
+.main-navigation .accessory-menu {
+  margin-left: 30px;
+}
diff --git a/...s/js/components/Header/MainNavigation.jsx → .../Header/MainNavigation/MainNavigation.jsx b/...s/js/components/Header/MainNavigation.jsx → .../Header/MainNavigation/MainNavigation.jsx
@@ -1,48 +1,20 @@
 import React from "react";
 import { Button, Layout, Menu } from "antd";
-import styled from "styled-components";
-import { grey1, grey10, grey2 } from "../../styles/colors";
-import { SPACE_LG, SPACE_MD } from "../../styles/spacing";
-import { theme } from "../../utilities/theme-utilities";
-import { setBaseUrl } from "../../utilities/url-utilities";
-import { IconUser } from "../icons/Icons";
-import { AnnouncementsSubMenu } from "./main-navigation/components/AnnouncementsSubMenu";
-import { CartLink } from "./main-navigation/components/CartLink";
-import { GlobalSearch } from "./main-navigation/components/GlobalSearch";
-import "./main-navigation/style.css";
+import { SPACE_LG, SPACE_MD } from "../../../styles/spacing";
+import { theme } from "../../../utilities/theme-utilities";
+import { setBaseUrl } from "../../../utilities/url-utilities";
+import { IconUser } from "../../icons/Icons";
+import { AnnouncementsSubMenu } from "./components/AnnouncementsSubMenu";
+import { CartLink } from "./components/CartLink";
+import { GlobalSearch } from "./components/GlobalSearch";
+import "./MainNavigation.css";
 
 const { Header } = Layout;
 
 const isAdmin = window.TL._USER.systemRole === "ROLE_ADMIN";
 const isManager = isAdmin || window.TL._USER.systemRole === "ROLE_MANAGER";
 const isTechnician = window.TL._USER.systemRole === "ROLE_TECHNICIAN";
 
-const StyledAnchor = styled.a`
-  color: ${grey2};
-  font-size: 1.5rem;
-  font-weight: 600;
-
-  &:hover {
-    color: ${grey1};
-  }
-`;
-
-const StyledHeader = styled(Header)`
-  position: fixed;
-  z-index: 1000;
-  width: 100%;
-  display: flex;
-
-  .ant-menu-item-active {
-    background-color: transparent !important;
-  }
-
-  .anticon {
-    font-size: 20px !important;
-    color: ${theme === "dark" ? grey1 : grey10};
-  }
-`;
-
 export function MainNavigation() {
   const [isLargeScreen, setIsLargeScreen] = React.useState(
     window.innerWidth > 1050
@@ -57,7 +29,7 @@ export function MainNavigation() {
   }, []);
 
   return (
-    <StyledHeader>
+    <Header className="main-navigation">
       <a href={setBaseUrl("/")}>
         <img
           style={{ height: 28, width: 129, marginRight: SPACE_LG }}
@@ -77,9 +49,7 @@ export function MainNavigation() {
           <Menu.SubMenu
             key="projects"
             title={
-              <StyledAnchor href={setBaseUrl(`/projects`)}>
-                {i18n("nav.main.projects")}
-              </StyledAnchor>
+              <a href={setBaseUrl(`/projects`)}>{i18n("nav.main.projects")}</a>
             }
           >
             <Menu.Item key="project:list">
@@ -105,9 +75,7 @@ export function MainNavigation() {
           <Menu.SubMenu
             key="analysis"
             title={
-              <StyledAnchor href={setBaseUrl(`/analysis`)}>
-                {i18n("nav.main.analysis")}
-              </StyledAnchor>
+              <a href={setBaseUrl(`/analysis`)}>{i18n("nav.main.analysis")}</a>
             }
           >
             <Menu.Item key="analyses:user">
@@ -134,9 +102,7 @@ export function MainNavigation() {
             <Menu.SubMenu
               key="users"
               title={
-                <StyledAnchor href={setBaseUrl("/users")}>
-                  {i18n("nav.main.users")}
-                </StyledAnchor>
+                <a href={setBaseUrl("/users")}>{i18n("nav.main.users")}</a>
               }
             >
               <Menu.Item key="user:users">
@@ -178,9 +144,7 @@ export function MainNavigation() {
           <Menu.SubMenu
             key="projects"
             title={
-              <StyledAnchor href={setBaseUrl(`/projects`)}>
-                {i18n("nav.main.projects")}
-              </StyledAnchor>
+              <a href={setBaseUrl(`/projects`)}>{i18n("nav.main.projects")}</a>
             }
           >
             <Menu.Item key="project:list">
@@ -206,9 +170,7 @@ export function MainNavigation() {
           <Menu.SubMenu
             key="analysis"
             title={
-              <StyledAnchor href={setBaseUrl(`/analysis`)}>
-                {i18n("nav.main.analysis")}
-              </StyledAnchor>
+              <a href={setBaseUrl(`/analysis`)}>{i18n("nav.main.analysis")}</a>
             }
           >
             <Menu.Item key="analyses:user">
@@ -235,9 +197,7 @@ export function MainNavigation() {
             <Menu.SubMenu
               key="users"
               title={
-                <StyledAnchor href={setBaseUrl("/users")}>
-                  {i18n("nav.main.users")}
-                </StyledAnchor>
+                <a href={setBaseUrl("/users")}>{i18n("nav.main.users")}</a>
               }
             >
               <Menu.Item key="user:users">
@@ -332,6 +292,6 @@ export function MainNavigation() {
           </Menu.Item>
         </Menu.SubMenu>
       </Menu>
-    </StyledHeader>
+    </Header>
   );
 }
diff --git a/...igation/components/AnnouncementsModal.jsx → ...igation/components/AnnouncementsModal.jsx b/...igation/components/AnnouncementsModal.jsx → ...igation/components/AnnouncementsModal.jsx
@@ -6,9 +6,9 @@ import { formatDate } from "../../../../utilities/date-utilities";
 import ReactMarkdown from "react-markdown";
 import { TYPES, useAnnouncements } from "./announcements-context";
 import {
+  readAndCloseAnnouncement,
   readAndNextAnnouncement,
   readAndPreviousAnnouncement,
-  readAndCloseAnnouncement,
 } from "./announcement-dispatch";
 
 const { Text } = Typography;

diff --git a/...ation/components/AnnouncementsSubMenu.jsx → ...ation/components/AnnouncementsSubMenu.jsx b/...ation/components/AnnouncementsSubMenu.jsx → ...ation/components/AnnouncementsSubMenu.jsx
diff --git a/...r/main-navigation/components/CartLink.jsx → ...er/MainNavigation/components/CartLink.jsx b/...r/main-navigation/components/CartLink.jsx → ...er/MainNavigation/components/CartLink.jsx
@@ -1,17 +1,10 @@
-import { Badge, Button, Menu } from "antd";
+import { Badge, Button } from "antd";
 import React from "react";
 import { getCartCount } from "../../../../apis/cart/cart";
 import { SPACE_MD } from "../../../../styles/spacing";
 import { CART } from "../../../../utilities/events-utilities";
 import { setBaseUrl } from "../../../../utilities/url-utilities";
 import { IconShoppingCart } from "../../../icons/Icons";
-import styled from "styled-components";
-
-const BadgeStyle = styled(Badge)`
-  margin-left: -5px !important;
-  margin-top: -5px !important;
-  position: fixed !important;
-`;
 
 /**
  * React component to display the cart icon and current counts in the

diff --git a/src/main/webapp/resources/js/components/Header/MainNavigation/components/GlobalSearch.css b/src/main/webapp/resources/js/components/Header/MainNavigation/components/GlobalSearch.css
@@ -0,0 +1,19 @@
+.global-search {
+  width: 300px;
+  margin-right: 15px;
+  background-color: transparent;
+}
+
+.light-theme .global-search {
+  color: var(--grey-1);
+}
+
+.dark-theme .global-search {
+  color: var(--grey-11);
+}
+
+.global-search .ant-input-prefix svg,
+.global-search .anticon-close-circle svg {
+  color: var(--grey-6);
+  font-size: 14px;
+}
diff --git a/src/main/webapp/resources/js/components/Header/MainNavigation/components/GlobalSearch.jsx b/src/main/webapp/resources/js/components/Header/MainNavigation/components/GlobalSearch.jsx
@@ -0,0 +1,25 @@
+import { Input } from "antd";
+import React from "react";
+import { setBaseUrl } from "../../../../utilities/url-utilities";
+import { IconSearch } from "../../../icons/Icons";
+import "./GlobalSearch.css";
+
+/**
+ * React component to render a global search input to the main navigation.
+ * @returns {JSX.Element}
+ * @constructor
+ */
+export function GlobalSearch() {
+  return (
+    <form className="global-search" method="get" action={setBaseUrl("/search")}>
+      <Input
+        name="query"
+        allowClear
+        autoComplete="off"
+        className="t-global-search"
+        prefix={<IconSearch />}
+        placeholder={i18n("nav.main.search")}
+      />
+    </form>
+  );
+}
diff --git a/...ation/components/announcement-dispatch.js → ...ation/components/announcement-dispatch.js b/...ation/components/announcement-dispatch.js → ...ation/components/announcement-dispatch.js
@@ -1,4 +1,6 @@
-import { markAnnouncementRead } from "../../../../apis/announcements/announcements";
+import {
+  markAnnouncementRead
+} from "../../../../apis/announcements/announcements";
 import { TYPES } from "./announcements-context";
 
 /**

diff --git a/...ation/components/announcements-context.js → ...ation/components/announcements-context.js b/...ation/components/announcements-context.js → ...ation/components/announcements-context.js
@@ -1,5 +1,7 @@
 import React from "react";
-import { getUnreadAnnouncements } from "../../../../apis/announcements/announcements";
+import {
+  getUnreadAnnouncements
+} from "../../../../apis/announcements/announcements";
 
 /**
  * The context provides access to shared announcement data and actions.

diff --git a/src/main/webapp/resources/js/components/Header/MainNavigation/index.js b/src/main/webapp/resources/js/components/Header/MainNavigation/index.js
@@ -0,0 +1 @@
+export { MainNavigation } from "./MainNavigation";
diff --git a/src/main/webapp/resources/js/components/Header/PageHeader.jsx b/src/main/webapp/resources/js/components/Header/PageHeader.jsx
@@ -6,8 +6,12 @@ import GalaxyAlert from "./GalaxyAlert";
 import { Breadcrumbs } from "./Breadcrumbs";
 import { setBaseUrl } from "../../utilities/url-utilities";
 import { MainNavigation } from "./MainNavigation";
-import { AnnouncementProvider } from "./main-navigation/components/announcements-context";
-import { AnnouncementsModal } from "./main-navigation/components/AnnouncementsModal";
+import {
+  AnnouncementProvider
+} from "./MainNavigation/components/announcements-context";
+import {
+  AnnouncementsModal
+} from "./MainNavigation/components/AnnouncementsModal";
 
 /*
 WEBPACK PUBLIC PATH:
@@ -27,9 +31,7 @@ export function PageHeader() {
   return (
     <>
       <AnnouncementProvider>
-        <div style={{ height: 64 }}>
-          <MainNavigation />
-        </div>
+        <MainNavigation />
         <AnnouncementsModal />
       </AnnouncementProvider>
       <Breadcrumbs crumbs={window.breadcrumbs} />
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		export { MainNavigation } from "./MainNavigation";