improve UI/UX

README.md

@@ -1,5 +1,7 @@
 # lepenseur
 
+![Lepenseur homepage](./screenshots/homepage.png)
+
 Online publishing platform similar to Medium but it’s “le penseur” with the ability to share content privately to an approved crowd. The idea is to provide entrepreneurs with the ability to sell their knowledge through paid articles. Users can pay monthly fees to follow the writer's private articles.
 
 ## Features

client/src/components/Banner.js

@@ -12,8 +12,8 @@ const Banner = () => {
     <Wrapper>
       <Container>
         <div>
-          <Title>Share the words</Title>
-          <SubTitle>Because every word counts, we have made a free speech platform where your audience can reward your work.</SubTitle>
+          <Title>Share your words</Title>
+          <SubTitle>In a matter of free speech, we believe every word counts.<br />Let your audience reward yours.</SubTitle>
           <ClickToAction onClick={handleClick}>Start reading</ClickToAction>
         </div>
       </Container>
@@ -22,17 +22,18 @@ const Banner = () => {
 }
 
 const Wrapper = styled.div`
-  background-color: ${COLORS.yellowOrange};
+  background-color: ${COLORS.turquoise};
   width: calc(100vw);
   margin-left: calc(-1 *(100vw - 950px + 32px)/2);
   margin-top: -16px;
-`;
+  border-bottom: 1px solid ${COLORS.dark};
+  `;
 const Container = styled.div`
   display: flex;
   /* flex-direction: column; */
   align-items: center;
+  min-height: 50vh;
   width: 100%;
-  min-height: 500px;
   max-width: 950px;
   margin: 0 auto;
   padding: 16px;

client/src/components/Navbar/Navbar.js

@@ -113,7 +113,7 @@ const Navbar = () => {
 }
 
 const Wrapper = styled.div`
-  background-color: ${ ({isHomepage}) => isHomepage ? COLORS.yellowOrange : COLORS.white };
+  background-color: ${ ({isHomepage}) => isHomepage ? COLORS.turquoise : COLORS.white };
   border-bottom: 1px solid ${COLORS.dark};
   position: fixed;
   width: 100%;
@@ -134,8 +134,10 @@ const Container = styled.div`
 const Logo = styled.div`
 `;
 const BrandTitle = styled.h1`
-  font-family: 'Mochiy Pop P One', sans-serif;
-  font-size: 24px;
+  /* font-family: 'Mochiy Pop P One', sans-serif; */
+  font-family: 'Playfair Display', serif;
+  font-weight: normal;
+  font-size: 28px;
   padding-bottom: 4px;
 `;
 const HomeLink = styled(NavLink)`
@@ -194,8 +196,5 @@ const NavItem = styled(NavLink)`
     color: ${COLORS.primary};
   }
 `;
-const NewStory = styled(NavItem)`
-  font-size: 20px;
-`;
 
 export default Navbar;

client/src/components/SearchInput.js

@@ -1,9 +1,12 @@
 import { useEffect, useRef, useState } from "react";
+import { useLocation } from "react-router-dom";
 import styled from "styled-components";
 import { COLORS } from "../constants";
-import { FaSearch } from "react-icons/fa";
+// import { FaSearch } from "react-icons/fa";
 
 const SearchInput = () => {
+  const location = useLocation();
+  const isHomepage = location.pathname === '/';
   const thisInput = useRef();
   const [clicked, setClicked] = useState();
   const [placeholder, setPlaceholder] = useState('Search');
@@ -34,6 +37,7 @@ const SearchInput = () => {
         clicked={clicked}
         ref={thisInput}
         placeholder={placeholder}
+        isHomepage={isHomepage}
       />
     </Wrapper>
   )
@@ -49,6 +53,7 @@ const SearchBox = styled.input`
   border: 1px solid ${({clicked}) => clicked ? COLORS.secondary : COLORS.grey};
   color: ${({clicked}) => clicked ? COLORS.secondary : COLORS.grey};
   transition: all 400ms ease;
+  background-color: ${({isHomepage}) => isHomepage ? COLORS.light : COLORS.white};
 
   &:hover {
     border: 1px solid ${COLORS.secondary};

client/src/constants.js

@@ -28,6 +28,10 @@ export const COLORS = {
   mediumAquamarine: "#63CFAF",
   linen: "#FFEDDF",
   yellowOrange: "#FEB548",
+
+  // LePenseur PaletteL
+  greenLight: '#f1faee',
+  turquoise: 'RGB(168, 217, 219)',
 };
 
 // For styled-components