diff --git a/client/src/components/Header/Header.test.js b/client/src/components/Header/Header.test.js index 14d1b84687..6f5852e7b7 100644 --- a/client/src/components/Header/Header.test.js +++ b/client/src/components/Header/Header.test.js @@ -23,16 +23,16 @@ describe('', () => { return acc; }, []); - const expectedLinks = ['/learn', '/portfolio']; + const expectedLinks = ['/learn', '/portfolio', '/news', '/forum']; it('renders to the DOM', () => { expect(root).toBeTruthy(); }); it('has 2 links', () => { - expect(aTags.length === 2).toBeTruthy(); + expect(aTags.length === 4).toBeTruthy(); }); - it('has links to learn and portfolio', () => { + it('has links to news, forum, learn and portfolio', () => { // checks if all links in expected links exist in links expect(expectedLinks.every(elem => links.indexOf(elem) > -1)).toBeTruthy(); }); diff --git a/client/src/components/Header/components/NavLinks.js b/client/src/components/Header/components/NavLinks.js index 3ff7f34ff5..54528cbe1f 100644 --- a/client/src/components/Header/components/NavLinks.js +++ b/client/src/components/Header/components/NavLinks.js @@ -14,6 +14,16 @@ function NavLinks({ displayMenu }) { className={'nav-list' + (displayMenu ? ' display-flex' : '')} role='menu' > +
  • + + News + +
  • +
  • + + Forum + +
  • Projects
  • diff --git a/client/src/components/Header/components/universalNav.css b/client/src/components/Header/components/universalNav.css index ea24788b97..630864b325 100644 --- a/client/src/components/Header/components/universalNav.css +++ b/client/src/components/Header/components/universalNav.css @@ -86,10 +86,6 @@ height: 38px; } -.nav-list li:hover { - background: var(--gray-00); -} - .nav-list li a:hover { color: var(--theme-color); text-decoration: none; @@ -101,6 +97,11 @@ color: white; } +.nav-list li a:focus:hover { + color: var(--theme-color); + background: white; +} + .universal-nav-right { flex-shrink: 0; display: flex; @@ -128,13 +129,14 @@ border: 1px solid var(--gray-00); } -@media (max-width: 265px) { +@media (max-width: 355px) { .nav-list li a { width: 50vw; + text-align: center; } } -@media (max-width: 799px) { +@media (max-width: 999px) { .site-header { padding-right: 0; padding-left: 0; @@ -200,7 +202,7 @@ } } -@media (min-width: 800px) { +@media (min-width: 1000px) { .universal-nav-middle { flex: 1 0 30%; margin-right: 0px; diff --git a/client/src/components/search/searchBar/searchbar.css b/client/src/components/search/searchBar/searchbar.css index 091d928d13..9cd313ea0e 100644 --- a/client/src/components/search/searchBar/searchbar.css +++ b/client/src/components/search/searchBar/searchbar.css @@ -30,7 +30,7 @@ } .fcc_searchBar .ais-Hits { - top: 71px; + top: 70px; width: calc(100vw - 30px); left: 15px; } @@ -122,7 +122,7 @@ and arrow keys */ right: 15px; } -@media (min-width: 800px) { +@media (min-width: 1000px) { .ais-SearchBox-input { width: 100%; max-width: 500px;