Polish v2 frontend design

client/components/NavBar.tsx

@@ -38,7 +38,7 @@ const NavBarOption = styled.a<any>`
   ${(props: any) =>
     props.isActive &&
     css`
-      color: ${colours.black};
+      color: ${colours.darkGrey};
     `};
   margin: 0px 32px;
 
@@ -53,7 +53,7 @@ const NavBarOption = styled.a<any>`
   }
 
   &:hover {
-    color: ${colours.black};
+    color: ${colours.darkGrey};
     cursor: pointer;
   }
 `

client/components/SearchInput.tsx

@@ -29,6 +29,13 @@ export const SearchInput = styled.input`
     width: 200px;
   }
 
+  @media ${smallerThan(width.mobile)} {
+    background-color: ${colours.neutralLight1};
+    padding-right: 12px;
+    margin-bottom: 8px;
+    width: 100%;
+  }
+
   :focus,
   :not(:placeholder-shown) {
     outline: none;

client/components/resource-details/Gallery.tsx

@@ -30,6 +30,7 @@ export const Gallery = styled(
               />
             )
           }}
+          // thumbnailPosition={'right'}
           renderRightNav={(onClick, disabled) => {
             return (
               <img
@@ -49,7 +50,4 @@ export const Gallery = styled(
   }
 )`
   width: 100%;
-  @media ${largerThan(width.laptop)} {
-    width: 60%;
-  }
 `

client/components/resource-details/ResourceInfo.tsx

@@ -25,17 +25,6 @@ const Name = styled(PageTitle)`
   margin-top: 32px;
 `
 
-const Metadata = styled.div`
-  margin-bottom: 16px;
-`
-
-const MemberCount = styled.p`
-  font-style: italic;
-  font-weight: ${fontWeight.bold};
-  margin-bottom: 0;
-  margin-top: 0;
-`
-
 const Description = styled.p`
   line-height: 1.3;
   flex: 1;
@@ -115,7 +104,7 @@ const AggregateRating = ({ criteria, value }: AggregateRatingProps) => {
 
 export const ResourceInfo = ({ resource }: ResourceInfoProps) => {
   const router = useRouter()
-  const { name, description, links, galleryImages, reviews, resourceSlug } = resource
+  const { name, description, location, links, galleryImages, reviews, resourceSlug } = resource
 
   const TotalReviews = styled.div`
     color: ${colours.primary2};
@@ -138,9 +127,7 @@ export const ResourceInfo = ({ resource }: ResourceInfoProps) => {
 
       <RatingDescription>
         <Description>
-          <Metadata>
-            <MemberCount>200-300 students</MemberCount>
-          </Metadata>
+          <h3>{location}</h3>
           {description}
         </Description>
         <Ratings>

client/components/resource-details/Reviews.tsx

@@ -2,7 +2,7 @@ import styled from 'styled-components'
 import { colours, largerThan, smallerThan, width } from '../../styles'
 import { Review, capitalizeFirstLetter } from '../../utils'
 import ReactStars from 'react-stars'
-import { formatRelative } from 'date-fns'
+import { formatDistanceToNowStrict } from 'date-fns'
 import { SubmitReview } from './SubmitReview'
 
 const ReviewHeading = styled.h1`
@@ -94,7 +94,7 @@ const Comment = styled(({ className, review }: { className?: string; review: Rev
     <div className={className}>
       <Description>{review.comment}</Description>
       <AuthorInfo>
-        — {review.faculty} {review.status}, {formatRelative(review.timestamp, Date.now())}
+        — {review.faculty} {review.status}, {formatDistanceToNowStrict(review.timestamp)} ago
       </AuthorInfo>
     </div>
   )

client/components/resource/ResourceList.tsx

@@ -9,6 +9,7 @@ import { SearchInput } from '../SearchInput'
 const ResourceListPage = styled.div`
   margin-top: 65px;
   margin-bottom: 24px;
+  color: ${colours.darkGrey};
 `
 
 const ResourceListGrid = styled.div`
@@ -56,15 +57,15 @@ const ResourceListTitleRow = styled.div`
   @media ${smallerThan(width.tablet)} {
     justify-content: start;
   }
-  height: 64px;
 `
 
 const ResourceListTitle = styled(PageTitle)`
   margin: 0;
   @media ${largerThan(width.mobile)} {
     white-space: nowrap;
-    margin-right: 16px;
+    margin-right: 24px;
   }
+  margin-bottom: 8px;
 `
 
 type sortPatternType = (first: Resource, second: Resource) => number

client/styles/colours.ts

@@ -20,6 +20,7 @@ const greyLight3 = "#DDDDDD";
 
 const greyDark1 = "#8C8C8C";
 const greyDark2 = "#666666";
+const greyDark3 = "#222222";
 
 const tagColours = {
     'Community': '#FCF4B1',
@@ -48,6 +49,7 @@ export const colours = Object.freeze({
     secondary5: greenLight,
     black: black,
     white: white,
+    darkGrey: greyDark3,
     neutralLight1: greyLight1,
     neutralLight2: greyLight2,
     neutralLight3: greyLight3,

client/styles/typography.ts

@@ -57,7 +57,7 @@ export const PageTitle = styled.h1`
   font-weight: ${fontWeight.semiBold};
   font-size: ${desktopFontSize.h1};
   line-height: 120%;
-  color: ${colours.black};
+  color: ${colours.darkGrey};
   @media ${smallerThan(width.tablet)} {
     font-size: ${mobileFontSize.h1};
   }