MMT-3490: PR feedback

static/src/css/vendor/bootstrap/_variables.scss

@@ -22,6 +22,8 @@
  * Included after `variables` and before `maps` as noted in the Bootstrap documentation
 */
 
+$grid-gutter-width: 2rem;
+
 /*
  * Color
 */
@@ -115,6 +117,14 @@ $nav-link-hover-color: map.get($theme-colors, "blue");
 $nav-pills-link-active-bg: map.get($theme-colors, "blue");
 $nav-pills-border-radius: 0;
 
+/*
+ * Border Radius
+*/
+
+$border-radius: .25rem;
+$border-radius-sm: 0.125rem;
+$border-radius-lg: 0.2rem;
+
 /*
  * Bootstrap utilities
 */

static/src/css/vendor/bootstrap/overrides/_navbar.scss

@@ -15,7 +15,7 @@
     &:hover {
       background: url("@/assets/images/logos/nasa-meatball-new.svg") no-repeat;
       background-position: left center;
-      background-size: 3.75rem 3.75rem;
+      background-size: 2rem 2rem;
       cursor: pointer;
     }
 

static/src/js/components/Button/Button.jsx

@@ -69,7 +69,6 @@ const Button = ({
           'd-flex align-items-center text-nowrap',
           {
             'button--naked': naked,
-            'fw-bold': !naked,
             [className]: className
           }
         ])

static/src/js/components/Page/Page.scss

@@ -5,18 +5,6 @@
     background-repeat: no-repeat;
     background-size: auto 20rem;
 
-    &::before {
-      position: absolute;
-      z-index: 0;
-      height: 20rem;
-      background: linear-gradient(
-        rgba(255 255 255 / 0%) 0%,
-        rgba(255 255 255 / 0%) 50%,
-        rgba(244 244 244 / 100%) 100%
-      ),;
-      content: " ";
-      inset: 0;
-    }
 
     .container {
       position: relative;

static/src/js/pages/HomePage/HomePage.jsx

@@ -28,9 +28,9 @@ const HomePagePanel = ({
   children,
   title
 }) => (
-  <Col className="d-flex mb-4" sm={12} md={6} lg={5}>
+  <Col className="d-flex mb-4" sm={12} md={6}>
     <div
-      className="home-page__panel-content bg-black text-white p-4 border-start border-4 border-pink"
+      className="home-page__panel-content bg-dark text-white p-4 border-start border-5 border-pink rounded-1"
       style={{ '--bs-text-opacity': 0.95 }}
     >
       <div className="d-flex align-items-center mb-3">
@@ -40,7 +40,7 @@ const HomePagePanel = ({
           {title}
         </h2>
       </div>
-      <p className="mb-0 small">{children}</p>
+      <p className="mb-0">{children}</p>
     </div>
   </Col>
 )
@@ -75,33 +75,7 @@ const HomePage = () => {
 
   return (
     <Page title="Home" navigation={false} hasBackgroundImage>
-      <Row className="mt-4">
-        <Col xs={12} sm={10} lg={5} className="mx-auto">
-          <div className="d-flex flex-column justify-content-center align-items-center">
-            <p className="home-page__intro-text text-white fw-bold h4 mb-4 text-center">
-              Manage NASA Common Metadata Repository metadata with the Metadata Management Tool
-            </p>
-            {
-              !user?.name && (
-                <Button
-                  className="shadow"
-                  size="lg"
-                  variant="success text-white"
-                  Icon={FaSignInAlt}
-                  onClick={
-                    () => {
-                      login()
-                    }
-                  }
-                >
-                  Log in with Launchpad
-                </Button>
-              )
-            }
-          </div>
-        </Col>
-      </Row>
-      <Row className="mt-5 justify-content-md-center">
+      <Row className="justify-content-md-center">
         <For each={panels}>
           {
             ({ title, body }) => (

static/src/js/pages/HomePage/HomePage.scss

@@ -1,11 +1,7 @@
 .home-page {
   &__panel-content {
-    --bs-bg-opacity: 0.7;
+    --bs-bg-opacity: 0.8;
 
-    text-shadow: 0 0 10px rgb(0 0 0 / 90%);
+    text-shadow: 0 0 10px rgb(0 0 0 / 30%);
   }
-
-  &__intro-text {
-    text-shadow: 0 0 10px rgb(0 0 0 / 80%);
-  }
-}
+}

static/src/js/pages/HomePage/__tests__/HomePage.test.js

@@ -4,7 +4,6 @@ import {
   screen,
   within
 } from '@testing-library/react'
-import userEvent from '@testing-library/user-event'
 
 import HomePage from '../HomePage'
 import AppContext from '../../../context/AppContext'
@@ -34,47 +33,6 @@ const setup = ({
 }
 
 describe('ManagePage component', () => {
-  describe('when the user is logged in', () => {
-    beforeEach(() => {
-      setup()
-    })
-
-    test('does not render the login button', async () => {
-      const newButton = screen.queryByRole('button', { name: 'Log in with Launchpad' })
-      expect(newButton).not.toBeInTheDocument()
-    })
-  })
-
-  describe('when the user is not logged in', () => {
-    test('renders the login button', async () => {
-      setup({
-        overrideContext: {
-          user: {}
-        }
-      })
-
-      const button = screen.getByRole('button', { name: 'Log in with Launchpad' })
-      expect(button).toBeInTheDocument()
-    })
-
-    describe('when the login button is clicked', () => {
-      test('calls the login function on the context', async () => {
-        const { context } = setup({
-          overrideContext: {
-            user: {}
-          }
-        })
-
-        const user = userEvent.setup()
-        const button = screen.getByRole('button', { name: 'Log in with Launchpad' })
-
-        await user.click(button)
-
-        expect(context.login).toHaveBeenCalledTimes(1)
-      })
-    })
-  })
-
   describe('when the about MMT section is displayed', () => {
     beforeEach(() => {
       setup()

static/src/js/pages/ManagePage/ManagePage.jsx

@@ -50,7 +50,7 @@ const ManagePage = () => {
                 sections: [
                   {
                     key: 'create-record',
-                    children: <Link className="btn btn-primary fw-bold" to={`/drafts/${type}/new`}>Create New Record</Link>,
+                    children: <Link className="btn btn-primary" to={`/drafts/${type}/new`}>Create New Record</Link>,
                     separate: true
                   },
                   {