Code Review Fixes

packages/app/src/components/Navbar/Navbar.style.tsx

@@ -1,7 +1,7 @@
 import styled from '@emotion/styled'
 
 import { Searchbar, Icon } from '@/shared/components'
-import { colors } from '@/shared/theme'
+import { colors, sizes } from '@/shared/theme'
 import { ReactComponent as UnstyledLogo } from '@/assets/logo.svg'
 
 export const Header = styled.header<{ isSearching: boolean }>`
@@ -9,14 +9,14 @@ export const Header = styled.header<{ isSearching: boolean }>`
   grid-template-columns: ${(props) => (props.isSearching ? `134px 1fr 134px` : `repeat(3, 1fr)`)};
   grid-template-areas: ${(props) => (props.isSearching ? `". searchbar cancel"` : `"navigation searchbar ."`)};
   width: 100%;
-  padding: ${(props) => (props.isSearching ? '8px' : '12px 32px')};
+  padding: ${(props) => (props.isSearching ? `${sizes.b2}px` : `${sizes.b3}px ${sizes.b8}px`)};
   border-bottom: 1px solid ${colors.gray[800]};
   background-color: ${(props) => (props.isSearching ? colors.gray[900] : colors.black)};
 `
 
 export const Logo = styled(UnstyledLogo)`
-  width: 48px;
-  height: 48px;
+  width: ${sizes.b12}px;
+  height: ${sizes.b12}px;
 `
 
 export const NavigationContainer = styled.div`
@@ -24,7 +24,7 @@ export const NavigationContainer = styled.div`
   grid-area: navigation;
   align-items: center;
   > * + * {
-    margin-left: 24px;
+    margin-left: ${sizes.b6}px;
   }
 `
 
@@ -34,7 +34,7 @@ export const StyledSearchbar = styled(Searchbar)`
 `
 
 export const StyledIcon = styled(Icon)`
-  color: ${colors.gray[600]};
+  color: ${colors.gray[300]};
   &:hover {
     color: ${colors.white};
     cursor: pointer;
@@ -42,8 +42,8 @@ export const StyledIcon = styled(Icon)`
 `
 
 export const CancelButton = styled.div`
-  width: 48px;
-  height: 48px;
+  width: ${sizes.b12}px;
+  height: ${sizes.b12}px;
   color: ${colors.white};
   grid-area: cancel;
   display: flex;

packages/app/src/components/Navbar/Navbar.tsx

@@ -1,6 +1,7 @@
 import React, { useState } from 'react'
 import { navigate, Link, RouteComponentProps } from '@reach/router'
 
+import routes from '@/config/routes'
 import { Icon } from '@/shared/components'
 import { Header, NavigationContainer, StyledIcon, StyledSearchbar, CancelButton, Logo } from './Navbar.style'
 
@@ -14,7 +15,7 @@ const Navbar: React.FC<RouteComponentProps> = () => {
 
   const handleKeyPress = (e: React.KeyboardEvent<HTMLInputElement>) => {
     if (e.key === 'Enter' || (e.key === 'NumpadEnter' && search.trim() !== '')) {
-      navigate(`/search/${search}`)
+      navigate(routes.search(search))
     }
   }
 

packages/app/src/components/VideoGrid.tsx

@@ -28,6 +28,7 @@ const VideoGrid: React.FC<VideoGridProps> = ({ videos }) => {
           key={idx}
           title={v.title}
           channelName={v.channel.handle}
+          channelAvatarURL={v.channel.avatarPhotoURL}
           createdAt={v.publishedOnJoystreamAt}
           duration={v.duration}
           views={v.views}

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

@@ -1,10 +1,10 @@
 import styled from '@emotion/styled'
-import { colors } from '../../theme'
+import { colors, sizes } from '../../theme'
 
 export const Input = styled.input`
   border: unset;
-  padding: 14px 12px;
-  height: 48px;
+  padding: 14px ${sizes.b3}px;
+  height: ${sizes.b12}px;
   background-color: ${colors.gray[800]};
   color: ${colors.white};
   &::placeholder {

packages/app/src/shared/components/Searchbar/Searchbar.tsx

@@ -19,7 +19,6 @@ const Searchbar: React.FC<SearchbarProps> = ({
       placeholder={placeholder}
       type="search"
       autoSave="some_unique_value"
-      name="s"
       onChange={onChange}
       onFocus={onFocus}
       onBlur={onBlur}

packages/app/src/views/SearchView.tsx

@@ -1,7 +1,7 @@
 import React, { useState, useMemo } from 'react'
 import { css } from '@emotion/core'
 import styled from '@emotion/styled'
-import { spacing, typography } from '@/shared/theme'
+import { spacing, typography, sizes } from '@/shared/theme'
 import { RouteComponentProps, navigate } from '@reach/router'
 import { useQuery } from '@apollo/client'
 
@@ -47,9 +47,9 @@ const SearchView: React.FC<SearchViewProps> = ({ search = '' }) => {
   return (
     <Main
       containerCss={css`
-        margin: 1rem 0;
+        margin: ${sizes.b4} 0;
         & > * {
-          margin-bottom: 3rem;
+          margin-bottom: ${sizes.b12}px;
         }
       `}
     >

packages/app/src/views/VideoView/VideoView.style.tsx

@@ -1,5 +1,5 @@
 import styled from '@emotion/styled'
-import { ChannelAvatar, VideoPreview } from '@/shared/components'
+import { ChannelAvatar } from '@/shared/components'
 import theme from '@/shared/theme'
 
 export const Container = styled.div`