Merge pull request #1771 from kdembler/atlas-navbar-improvements

improve navbar styling

src/assets/logo.svg

@@ -1,19 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 109.61 139.62">
-    <defs>
-        <style>
-            .cls-1 {
-                fill: #4038ff;
-            }
-        </style>
-    </defs>
-    <g id="Layer_2" data-name="Layer 2">
-        <g id="Layer_10" data-name="Layer 10">
-            <path class="cls-1" d="M74,.07,86.75.1l-.16,59.67A57,57,0,0,1,72.1,97.63a67.18,67.18,0,0,0,1.73-15Z" />
-            <path class="cls-1" d="M33,104.13h0A34.14,34.14,0,0,1,6.9,116.75l3.84-12.68Z" />
-            <path class="cls-1" d="M40.8,81.29v1.27a34,34,0,0,1-2,11.42l-25-.07,3.82-12.69Z" />
-            <path class="cls-1" d="M96.91.13l12.7,0L109.51,37A57,57,0,0,1,95,74.86a67.18,67.18,0,0,0,1.73-15Z" />
-            <path class="cls-1"
-                d="M63.88,0l-.22,82.59a57.21,57.21,0,0,1-57.31,57H0l3.83-12.69H6.38A44.51,44.51,0,0,0,51,82.58L51.17,0Z" />
-        </g>
-    </g>
-</svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 109.61 139.62"><defs><style>.cls-1{fill:#4038ff}</style></defs><g id="Layer_2" data-name="Layer 2"><g id="Layer_10" data-name="Layer 10"><path class="cls-1" d="M74 .07L86.75.1l-.16 59.67A57 57 0 0172.1 97.63a67.18 67.18 0 001.73-15zM33 104.13a34.14 34.14 0 01-26.1 12.62l3.84-12.68zM40.8 81.29v1.27a34 34 0 01-2 11.42l-25-.07 3.82-12.69zM96.91.13h12.7l-.1 36.87A57 57 0 0195 74.86a67.18 67.18 0 001.73-15z"/><path class="cls-1" d="M63.88 0l-.22 82.59a57.21 57.21 0 01-57.31 57H0l3.83-12.69h2.55A44.51 44.51 0 0051 82.58L51.17 0z"/></g></g></svg>

src/components/Navbar/Navbar.style.tsx

@@ -2,35 +2,68 @@ import styled from '@emotion/styled'
 
 import { Icon, Searchbar } from '@/shared/components'
 import { breakpoints, colors, sizes } from '@/shared/theme'
-import { ReactComponent as UnstyledLogo } from '@/assets/logo.svg'
+import { ReactComponent as UnstyledShortLogo } from '@/assets/logo.svg'
+import { ReactComponent as UnstyledFullLogo } from '@/assets/full-logo.svg'
 import { Link } from '@reach/router'
 
 type NavbarStyleProps = {
   hasFocus: boolean
 }
 
-export const Logo = styled(UnstyledLogo)`
-  width: ${sizes.b12}px;
-  height: ${sizes.b12}px;
+export const StyledSearchbar = styled(Searchbar)`
+  transition: max-width 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
+  will-change: max-width;
+`
+
+export const Header = styled.header<NavbarStyleProps>`
+  display: grid;
+  width: 100%;
+
+  grid-template-columns: 1fr 2fr;
+
+  padding: ${sizes.b2}px ${sizes.b3}px;
+  @media screen and (min-width: ${breakpoints.small}) {
+    padding: ${sizes.b3}px ${sizes.b3}px;
+  }
+  background-color: ${(props) => (props.hasFocus ? colors.gray[900] : colors.black)};
+  transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
+
+  ${StyledSearchbar} {
+    width: 100%;
+    max-width: ${(props) => (props.hasFocus ? '100%' : '385px')};
+  }
+`
+
+export const LogoLink = styled(Link)`
+  padding: 0 ${sizes.b5}px;
+  margin-right: ${sizes.b2}px;
+  @media screen and (min-width: ${breakpoints.medium}) {
+    margin-right: ${sizes.b5}px;
+  }
+`
+
+export const ShortLogo = styled(UnstyledShortLogo)`
+  display: block;
+  height: ${sizes.b1 * 9}px;
+  @media screen and (min-width: ${breakpoints.medium}) {
+    display: none;
+  }
+`
+
+export const FullLogo = styled(UnstyledFullLogo)`
+  display: none;
+  height: ${sizes.b1 * 9}px;
+  @media screen and (min-width: ${breakpoints.medium}) {
+    display: block;
+  }
 `
 
 export const NavigationContainer = styled.div`
   display: flex;
   align-items: center;
   margin-right: ${sizes.b3}px;
-
-  > * + * {
-    margin-left: ${sizes.b3}px;
-    @media screen and (min-width: ${breakpoints.small}) {
-      margin-left: ${sizes.b6}px;
-    }
-  }
 `
 
-export const StyledSearchbar = styled(Searchbar)`
-  transition: max-width 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
-  will-change: max-width;
-`
 export const SearchbarContainer = styled.div`
   display: flex;
   justify-content: flex-end;
@@ -41,9 +74,15 @@ export const SearchbarContainer = styled.div`
   width: 100%;
   max-width: 1156px;
 `
-export const StyledIcon = styled(Icon)`
+export const ActiveIcon = styled(Icon)`
+  display: none;
   color: ${colors.gray[300]};
 `
+
+export const InactiveIcon = styled(Icon)`
+  display: block;
+`
+
 export const StyledLink = styled(Link)`
   display: inline-flex;
   align-items: center;
@@ -54,7 +93,7 @@ export const StyledLink = styled(Link)`
 
   span {
     display: none;
-    margin-left: ${sizes.b2}px;
+    margin-left: ${sizes.b3}px;
   }
   @media screen and (min-width: ${breakpoints.small}) {
     span {
@@ -63,35 +102,31 @@ export const StyledLink = styled(Link)`
   }
 
   &[data-active='true'] {
-    ${StyledIcon} {
+    ${ActiveIcon} {
+      display: block;
       color: ${colors.gray[100]};
     }
+    ${InactiveIcon} {
+      display: none;
+    }
     color: ${colors.gray[100]};
   }
+
   &:hover {
-    ${StyledIcon} {
+    ${ActiveIcon} {
+      display: block;
       color: ${colors.white};
     }
+    ${InactiveIcon} {
+      display: none;
+    }
     color: ${colors.white};
   }
-`
 
-export const Header = styled.header<NavbarStyleProps>`
-  display: grid;
-  width: 100%;
-
-  grid-template-columns: 1fr 2fr;
-
-  padding: ${sizes.b2}px ${sizes.b4}px;
-  @media screen and (min-width: ${breakpoints.small}) {
-    padding: ${sizes.b2}px ${sizes.b8}px;
-  }
-  border-bottom: 1px solid ${colors.gray[800]};
-  background-color: ${(props) => (props.hasFocus ? colors.gray[900] : colors.black)};
-  transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
-
-  ${StyledSearchbar} {
-    width: 100%;
-    max-width: ${(props) => (props.hasFocus ? '100%' : '385px')};
+  & + & {
+    margin-left: ${sizes.b3}px;
+    @media screen and (min-width: ${breakpoints.small}) {
+      margin-left: ${sizes.b6}px;
+    }
   }
 `

src/components/Navbar/Navbar.tsx

@@ -1,15 +1,18 @@
 import React, { useState } from 'react'
-import { RouteComponentProps, Link, navigate, LinkGetProps } from '@reach/router'
+import { LinkGetProps, navigate, RouteComponentProps } from '@reach/router'
 
 import routes from '@/config/routes'
 import {
+  ActiveIcon,
+  FullLogo,
   Header,
+  InactiveIcon,
+  LogoLink,
   NavigationContainer,
-  StyledIcon,
-  StyledSearchbar,
   SearchbarContainer,
-  Logo,
+  ShortLogo,
   StyledLink,
+  StyledSearchbar,
 } from './Navbar.style'
 
 type NavbarProps = RouteComponentProps
@@ -45,15 +48,18 @@ const Navbar: React.FC<NavbarProps> = () => {
   return (
     <Header hasFocus={isFocused}>
       <NavigationContainer>
-        <Link to="/">
-          <Logo />
-        </Link>
+        <LogoLink to="/">
+          <ShortLogo />
+          <FullLogo />
+        </LogoLink>
         <StyledLink to="/" getProps={isActive}>
-          <StyledIcon name="home" />
+          <ActiveIcon name="home-fill" />
+          <InactiveIcon name="home" />
           <span>Home</span>
         </StyledLink>
         <StyledLink to={routes.browse()} getProps={isActive}>
-          <StyledIcon name="binocular" />
+          <ActiveIcon name="binocular-fill" />
+          <InactiveIcon name="binocular" />
           <span>Browse</span>
         </StyledLink>
       </NavigationContainer>

src/shared/components/Searchbar/Searchbar.style.tsx

@@ -1,13 +1,19 @@
 import styled from '@emotion/styled'
 import { colors, sizes } from '../../theme'
 import Button from '../Button'
+import { Icon } from '@/shared/components'
+
+export const StyledIcon = styled(Icon)`
+  height: 24px;
+  color: ${colors.white};
+`
 
 export const Input = styled.input`
   width: 100%;
   height: 100%;
   border: unset;
   padding: 14px ${sizes.b3}px;
-  background-color: ${colors.gray[800]};
+  background: none;
   color: ${colors.white};
 
   // override mobile Safari user agent styling
@@ -15,11 +21,7 @@ export const Input = styled.input`
   -webkit-appearance: none;
 
   ::placeholder {
-    color: ${colors.gray[400]};
-  }
-  :focus {
-    background-color: ${colors.gray[900]};
-    outline: 1px solid ${colors.gray[500]};
+    color: ${colors.gray[300]};
   }
   &::-webkit-search-cancel-button {
     -webkit-appearance: none;
@@ -47,5 +49,10 @@ export const Container = styled.div`
   position: relative;
   display: flex;
   align-items: center;
-  height: ${sizes.b12}px;
+  height: ${sizes.b1 * 14}px;
+  background-color: ${colors.gray[800]};
+  padding-left: ${sizes.b4}px;
+  :focus-within {
+    outline: 1px solid ${colors.gray[500]};
+  }
 `

src/shared/components/Searchbar/Searchbar.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react'
-import { Input, CancelButton, Container } from './Searchbar.style'
+import { CancelButton, Container, Input, StyledIcon } from './Searchbar.style'
 
 type SearchbarProps = {
   value: string
@@ -41,6 +41,7 @@ const Searchbar: React.FC<SearchbarProps> = ({
 
   return (
     <Container className={className}>
+      <StyledIcon name="search" />
       <Input
         value={controlled ? externalValue : value}
         placeholder={placeholder}

src/shared/icons/binocular-fill.svg

@@ -0,0 +1,11 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10 19V5H5L2 15V19" fill="currentColor"/>
+<path d="M10 19V5H5L2 15V19H10Z" stroke="white" stroke-width="2" stroke-miterlimit="10" stroke-linecap="square"/>
+<path d="M10 22H1" stroke="white" stroke-width="2" stroke-miterlimit="10" stroke-linecap="square"/>
+<path d="M10 2H7" stroke="white" stroke-width="2" stroke-miterlimit="10" stroke-linecap="square"/>
+<path d="M17 2H14" stroke="white" stroke-width="2" stroke-miterlimit="10" stroke-linecap="square"/>
+<path d="M14 19V5H19L22 15V19" fill="currentColor"/>
+<path d="M14 19V5H19L22 15V19H14Z" stroke="white" stroke-width="2" stroke-miterlimit="10" stroke-linecap="square"/>
+<path d="M14 22H23" stroke="white" stroke-width="2" stroke-miterlimit="10" stroke-linecap="square"/>
+<path d="M7 10H16" stroke="white" stroke-width="2" stroke-miterlimit="10" stroke-linecap="square"/>
+</svg>

src/shared/icons/home-fill.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1 11L12 2L23 11" stroke="white" stroke-width="2" stroke-miterlimit="10"/>
+<path d="M4 13L12 6.5L20 13V23H16V15H8V23H4V13Z" fill="currentColor" stroke="currentColor" stroke-width="2" stroke-miterlimit="10" stroke-linecap="square"/>
+</svg>

src/shared/icons/index.ts

@@ -1,6 +1,8 @@
 export { ReactComponent as Bars } from './bars.svg'
 export { ReactComponent as Home } from './home.svg'
+export { ReactComponent as HomeFill } from './home-fill.svg'
 export { ReactComponent as Binocular } from './binocular.svg'
+export { ReactComponent as BinocularFill } from './binocular-fill.svg'
 export { ReactComponent as Browse } from './browse.svg'
 export { ReactComponent as Books } from './books.svg'
 export { ReactComponent as Block } from './block.svg'
@@ -15,12 +17,15 @@ export { ReactComponent as PlayOutline } from './play-outline.svg'
 export { ReactComponent as Pause } from './pause.svg'
 export { ReactComponent as SoundOn } from './sound-on.svg'
 export { ReactComponent as SoundOff } from './sound-off.svg'
+export { ReactComponent as Search } from './search.svg'
 export { ReactComponent as Times } from './times.svg'
 
 const icons = [
   'bars',
   'home',
+  'home-fill',
   'binocular',
+  'binocular-fill',
   'browse',
   'books',
   'block',
@@ -33,6 +38,7 @@ const icons = [
   'play',
   'play-outline',
   'pause',
+  'search',
   'sound-on',
   'sound-off',
   'times',

src/shared/icons/search.svg

@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M19.9986 20L15.2617 15.2632" stroke="#7B8A95" stroke-width="2" stroke-miterlimit="10" stroke-linecap="square"/>
+<path d="M10 17C13.866 17 17 13.866 17 10C17 6.13401 13.866 3 10 3C6.13401 3 3 6.13401 3 10C3 13.866 6.13401 17 10 17Z" stroke="#7B8A95" stroke-width="2" stroke-miterlimit="10" stroke-linecap="square"/>
+</svg>
+

src/views/VideoView/VideoView.tsx

@@ -55,7 +55,7 @@ const VideoView: React.FC<RouteComponentProps> = () => {
     })
   }, [addVideoView, videoID])
 
-  if(error) {
+  if (error) {
     throw error
   }