Merge pull request #14 from dabigjoe6/enhance-frequency

Create header

src/components/header.tsx

@@ -0,0 +1,37 @@
+import * as React from 'react';
+import styled from 'styled-components';
+
+import logo from '../assets/logo.png';
+
+import SettingsBtn from './settings-button';
+
+interface HeaderProps {
+  showSettingsModal: () => void;
+}
+
+const Container = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-right: 5px;
+  padding-left: 5px;
+  margin-bottom: 20px;
+`;
+
+const Image = styled.img`
+  object-fit: center;
+  cursor: pointer;
+`;
+
+
+const Header = ({ showSettingsModal }: HeaderProps) => {
+  const handleLogoClick = () => {
+    window.open("https://synthesisapp.com")
+  }
+  return (<Container>
+    <Image src={logo} alt="Synthesis logo" width={20} onClick={handleLogoClick} />
+    <SettingsBtn onClick={showSettingsModal} />
+  </Container>)
+};
+
+export default Header;

src/components/index.ts

@@ -10,4 +10,4 @@ export { default as Footer } from './footer';
 export { default as PauseDigest } from './pause-digest';
 export { default as Frequency } from './frequency';
 export { default as SummarySettings } from './summary-settings';
-export { default as SettingsBtn } from './settings-button';
+export { default as Header } from './header';

src/components/settings-button.tsx

@@ -41,7 +41,7 @@ const SettingsBtn = ({ onClick }: SettingsBtnProps) => {
   return (
     <Container>
       <Wrapper onClick={onClick}>
-        <GiSettingsKnobs />
+        <GiSettingsKnobs style={{ marginRight: 5 }} />
         <Text>Settings</Text>
       </Wrapper>
     </Container>

src/pages/home.tsx

@@ -8,7 +8,7 @@ import {
   SubscriptionItem,
   Footer,
   Frequency,
-  SettingsBtn
+  Header
 } from "../components";
 import { FontSize } from "../components/text";
 import { FrequencyProvider } from "../contexts/Frequency";
@@ -25,15 +25,14 @@ const Container = styled.div`
 
 const SubscriptionsContainer = styled.div`
   height: 100vh;
-  padding-top: 50px;
+  padding-top: 40px;
   width: 100vw;
   max-width: 500px;
   padding-right: 15px;
   padding-left: 15px;
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
-  justify-content: space-between;
 scr`;
 
 const NewSubscribptionButton = styled(Button)`
@@ -76,14 +75,14 @@ const Home = () => {
           <Text>Loading...</Text>
         ) : subscriptions && subscriptions.length > 0 ? (
           <SubscriptionsContainer>
+            <Header showSettingsModal={showSettingsModal} />
             <div>
               <Text fontSize={FontSize.lg} align="center" bold>
                 Your subscriptions
               </Text>
               <FrequencyProvider>
                 <Frequency />
               </FrequencyProvider>
-              <SettingsBtn onClick={showSettingsModal} />
               <NewSubscribptionButton
                 label="Add new Subscription"
                 onClick={showSubscriptionModal}