Merge pull request #208 from scientist-softserv/207-menu-button-color

207 menu button color

Author: labradford

src/assets/svg/ToggleIcon.jsx

@@ -0,0 +1,21 @@
+import * as React from 'react'
+import themeColors from '../theme/default-colors.module.scss'
+
+const ToggleIcon = ({ linkColor }, props) => (
+  <svg
+    xmlns='http://www.w3.org/2000/svg'
+    xmlSpace='preserve'
+    style={{
+      enableBackground: 'new 0 0 227 163.3',
+    }}
+    viewBox='0 0 227 163.3'
+    fill={themeColors[linkColor]}
+    width={25}
+    height={25}
+    {...props}
+  >
+    <path d='M113.1 33h-95C5.8 33-2.1 22.1 2.2 11.3 4.6 5.2 9.3 1.8 15.8 1.1c1.5-.2 3-.1 4.5-.1h185.5c2.2 0 4.4-.1 6.5.3 8.1 1.6 13.6 9.2 12.7 17.2-.8 8.1-7.5 14.3-15.9 14.3-21 .1-42 0-63 .1-11 .1-22 .1-33 .1zM113 65h95c12.7 0 20.7 11.7 15.6 22.6-3.1 6.6-8.5 9.4-15.7 9.4H18.4C5.8 97-2.2 86 2.2 75.1c2.6-6.4 8.3-10 16.3-10.1H113zM113.3 129c31.7 0 63.3-.1 95 0 13.2 0 21.1 13.3 14.5 24.1-3.5 5.8-9 7.9-15.7 7.9-45.8-.1-91.7 0-137.5 0H19.1c-10.7 0-17.9-6.4-18-15.9C1 135.5 8.3 129 19.3 129h94z' />
+  </svg>
+)
+
+export default ToggleIcon

src/assets/theme/bootstrap-preview.scss

@@ -1,17 +1,5 @@
-// these colors and variables match what is in the webstore's theme.module.scss file. this file enables us to see the preview of what these overrides will look like without actually importing these from here into the webstore project. In order to see a preview in storybook of how components will look with custom colors, these values must be updated.
-
-$primary: #333333;
-$secondary: #CCCCCC;
-$success: #666666;
-$info: #999999;
-$warning: #2A2A2A;
-$danger: #606060;
-$light: #F8F9FA;
-$dark: #212529;
-$white: #FFFFFF;
-$black: #000000;
-
-// these imports must be AFTER the theme color overrides above in order to properly override bootstrap's colors, but before the theme maps.
+@import './default-colors.module.scss';
+// these imports must be AFTER the theme colors override import above in order to properly override bootstrap's colors, but before the theme maps.
 @import '../../../node_modules/bootstrap/scss/functions';
 @import '../../../node_modules/bootstrap/scss/variables';
 @import '../../../node_modules/bootstrap/scss/mixins';

src/assets/theme/default-colors.module.scss

@@ -0,0 +1,28 @@
+/**
+ * This file contains the color variables for the theme. Matching those in each webstore instance's "theme.module.scss" file.
+ *
+ * They exist in a "module.scss" file so that they can be imported into our ".scss" AND ".jsx" files.
+ */
+$primary: #614570;
+$secondary: #936AAA;
+$light: #F2F2F2;
+$dark: #070818;
+$success: #B0E298;
+$info: #8eb3fc;
+$warning: #E9DF00;
+$danger: #D20000;
+$black: #000000;
+$white: #FFFFFF;
+
+:export {
+  primary: $primary;
+  secondary: $secondary;
+  success: $success;
+  info: $info;
+  warning: $warning;
+  danger: $danger;
+  light: $light;
+  dark: $dark;
+  black: $black;
+  white: $white;
+}

src/compounds/Header/Header.jsx

@@ -1,23 +1,28 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import { Container, Nav, Navbar } from 'react-bootstrap'
+import ToggleIcon from '../../assets/svg/ToggleIcon'
 import Logo from '../Logo/Logo'
 import './styles.scss'
 
 const Header = ({ auth, linkColor, logo, navLinks, userSession }) => {
   const { src, alt } = logo
 
   return (
-    <Navbar bg='primary' expand='lg'>
+    <Navbar bg='primary' expand='md'>
       <Container>
-        <Navbar.Brand className='w-75 custom-navbar-brand'>
+        <Navbar.Brand className='w-50 custom-navbar-brand'>
           <Logo src={src} alt={alt} height='auto' addClass='mw-100 mh-100' />
         </Navbar.Brand>
-        <Navbar.Toggle aria-controls='basic-navbar-nav' />
+        <Navbar.Toggle aria-controls='basic-navbar-nav'>
+          <ToggleIcon linkColor={linkColor} />
+        </Navbar.Toggle>
         <Navbar.Collapse id='basic-navbar-nav'>
           <Nav className='ms-auto'>
             {navLinks.map((nav) => (
               <Nav.Link
+              // ref https://github.com/twbs/bootstrap/blob/v5.2.3/scss/helpers/_colored-links.scss
+              // for how this className works
                 className={`link-${linkColor}`}
                 href={nav.path}
                 key={`${nav.label}-nav-link`}
@@ -43,7 +48,9 @@ Header.propTypes = {
     signIn: PropTypes.func.isRequired,
     signOut: PropTypes.func.isRequired,
   }).isRequired,
-  linkColor: PropTypes.string,
+  linkColor: PropTypes.oneOf([
+    'primary', 'secondary', 'success', 'info', 'warning', 'danger', 'light', 'dark', 'black', 'white'
+  ]),
   logo: PropTypes.shape({
     src: PropTypes.string.isRequired,
     alt: PropTypes.string,

src/compounds/Header/styles.scss

@@ -1,3 +1,11 @@
 .custom-navbar-brand {
   height: 45px;
 }
+
+.navbar-toggler:focus {
+  text-decoration: none;
+  outline: 0;
+  // overriding the below to lessen the spread radius
+  // I would like to make it the same color as the icon, but that isn't possible dynamically with scss
+  box-shadow: 0 0 0 1px;
+}