used tachyons to style landing page

relates to issue #3
yalla-coop · Oct 12, 2018 · ce20aaf · ce20aaf
1 parent a14450f
commit ce20aaf
Show file tree

Hide file tree

Showing 5 changed files with 41 additions and 36 deletions.
diff --git a/public/index.html b/public/index.html
@@ -1,16 +1,17 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="utf-8">
-    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
-    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <meta name="theme-color" content="#000000">
-    <!--
+
+<head>
+  <meta charset="utf-8">
+  <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
+  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+  <meta name="theme-color" content="#000000">
+  <!--
       manifest.json provides metadata used when your web app is added to the
       homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
     -->
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
-    <!--
+  <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
+  <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.
       Only files inside the `public` folder can be referenced from the HTML.
@@ -19,14 +20,15 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>React App</title>
-  </head>
-  <body>
-    <noscript>
-      You need to enable JavaScript to run this app.
-    </noscript>
-    <div id="root"></div>
-    <!--
+  <title>React App</title>
+</head>
+
+<body>
+  <noscript>
+    You need to enable JavaScript to run this app.
+  </noscript>
+  <div id="root"></div>
+  <!--
       This HTML file is a template.
       If you open it directly in the browser, you will see an empty page.
 
@@ -36,5 +38,6 @@
       To begin the development, run `npm start` or `yarn start`.
       To create a production bundle, use `npm run build` or `yarn build`.
     -->
-  </body>
-</html>
+</body>
+
+</html>
diff --git a/src/components/App.js b/src/components/App.js
@@ -1,16 +1,16 @@
-import React, { Component } from 'react';
-import styled from 'styled-components';
-import Header from './Header';
+import React, { Component } from "react";
+import styled from "styled-components";
+import Header from "./Header";
 
-import logo from './assets/logo.png';
+import logo from "./assets/logo.png";
 
 const LargeCenteredImage = styled.img.attrs({
-  className: 'w70 centered',
+  className: "h-75 "
 })``;
 
 class App extends Component {
   state = {
-    response: '',
+    response: ""
   };
 
   componentDidMount() {
@@ -29,7 +29,7 @@ class App extends Component {
   }
 
   callApi = async () => {
-    const response = await fetch('/api/get_locations');
+    const response = await fetch("/api/get_locations");
     const body = await response.json();
     if (response.status !== 200) throw Error(body.message);
     console.log(body);
@@ -38,9 +38,11 @@ class App extends Component {
 
   render() {
     return (
-      <div className="App">
+      <div className="App vh-100 vw-100">
         <Header />
-        <LargeCenteredImage src={logo} alt="East End Trades Guild" />
+        <div className=" debug flex justify-center items-center h-75 w-100 ">
+          <LargeCenteredImage src={logo} alt="East End Trades Guild" />
+        </div>
       </div>
     );
   }

diff --git a/src/components/Header.js b/src/components/Header.js
@@ -1,23 +1,23 @@
-import React from 'react';
-import styled from 'styled-components';
-import logo from './assets/logo.png';
-import burger from './assets/burger.png';
-import appTitle from './assets/app_title.png';
+import React from "react";
+import styled from "styled-components";
+import logo from "./assets/logo.png";
+import burger from "./assets/burger.png";
+import appTitle from "./assets/app_title.png";
 
 const MyHeader = styled.header.attrs({
-  className: 'w100 pa1 bg-dark-pink flex justify-between items-center',
+  className: "w100 pa1 flex justify-between items-center"
 })``;
 
 const HeaderLogo = styled.img.attrs({
-  className: 'h3 w3 pa1',
+  className: "h3 w3 pa1"
 })``;
 
 const HeaderTitle = styled.img.attrs({
-  className: 'w-40',
+  className: "w-50 mw5"
 })``;
 
 const NavBurger = styled.img.attrs({
-  className: 'pr2',
+  className: "pr2"
 })``;
 
 export default () => (

diff --git a/src/components/assets/app_title.png b/src/components/assets/app_title.png
diff --git a/src/components/assets/logo.png b/src/components/assets/logo.png