Merge pull request #23 from unity-sds/features/update-navbar-styling

Features/update navbar styling

Author: anilnatha

CHANGELOG.md

@@ -5,6 +5,9 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [0.5.0] (unreleased)
+- Updated Navbar CSS styling to match Figma designs [#5](https://github.com/unity-sds/unity-ui/issues/5)
+
 ## [0.4.0] - 2023-12-13
 - Updated /job/new endpoint so it lists the applications for which jobs may be executed.
 - Moved chirp rebinning job form to /jobs/new/chirp

package.json

@@ -1,7 +1,7 @@
 {
   "name": "unity-ui",
   "private": true,
-  "version": "0.4.0",
+  "version": "0.5.0",
   "type": "module",
   "scripts": {
     "dev": "vite",

src/css/app.css

@@ -1,9 +1,9 @@
 /* @import './stellar.css'; */
 @import "@nasa-jpl/react-stellar/dist/esm/stellar.css";
-@import "unity-stellar.css";
 @import 'ag-grid-community/styles/ag-grid.min.css'; /* Core grid CSS, always needed */
 @import 'ag-grid-community/styles/ag-theme-alpine.min.css'; /* Optional grid theme CSS */
 @import 'ag-grid-stellar.css';
+@import "unity-stellar.css";
 
 #root {
    display: flex;

src/css/unity-stellar.css

@@ -8,8 +8,52 @@
 
 /* Menu */
 
-.st-react-menu-label {
-   text-transform: uppercase;
+.st-react-menu-content {
+  background: var(--st-gray-80);
+  border: 1px solid var(--st-white);
+  border-radius: 0;
+  padding: 0;
+}
+
+.st-react-menu-content .st-react-menu-arrow {
+  fill: var(--st-white);
+  filter: none;
+  stroke: var(--st-white);
+}
+
+.st-react-menu-content .st-react-menu-label {
+  color: var(--st-gray-10);
+  font-size: 1em;
+  font-weight: 700;
+  letter-spacing: 0.48;
+  padding: 10px 16px;
+  text-transform: uppercase;
+  word-wrap: break-word;
+}
+
+.st-react-menu-content .st-react-menu-item {
+  background-color: var(--st-gray-70);
+  border-radius: 0;
+  color: var(--st-gray-10);
+  font-weight: 400;
+  letter-spacing: 0.60px;
+  line-height: 1em;
+  margin-bottom: 1px;
+  padding: 16px 16px;
+  word-wrap: break-word;
+}
+
+.st-react-menu-content .st-react-menu-item:hover, .st-react-menu-content .st-react-menu-item:hover a {
+  background: var(--st-primary-20);
+  font-weight: 700;
+  color: var(--st-black);
+  cursor: pointer;
+}
+
+.st-react-menu-content .st-react-menu-item > a {
+  color: var(--st-gray-10);
+  text-decoration: none;
+  word-wrap: break-word;
 }
 
 /* Navbar */
@@ -40,4 +84,38 @@
 
 .st-react-navbar.st-react-navbar--mobile .st-button:hover.icon {
    color: var(--st-button-tertiary-color);
+}
+
+.st-react-navbar-mobile-menu {
+  background: var(--st-gray-80);
+  border: 0;
+  padding: 0;
+}
+
+.st-react-navbar-mobile-menu .st-react-menu-label {
+  font-size: 1em;
+  font-weight: 700;
+  color: var(--st-gray-10);
+  text-transform: uppercase;
+  padding: 10px 16px;
+  word-wrap: break-word;
+}
+
+.st-react-navbar-mobile-menu .st-react-navbar-link {
+  background-color: var(--st-gray-70);
+  border-radius: 0;
+  color: var(--st-gray-10);
+  font-weight: 400;
+  letter-spacing: 0.48px;
+  line-height: 1em;
+  padding: 10px 16px;
+  text-decoration: none;
+  word-wrap: break-word;
+}
+
+.st-react-navbar-mobile-menu .st-react-navbar-link:hover {
+  background: var(--st-primary-20);
+  font-weight: 700;
+  color: var(--st-black);
+  cursor: pointer;
 }