literally just working on various styling, made it look a lot more pr…

…etty. Going to now work more on logic.
RalphKemp · Feb 2, 2019 · 6ce4c80 · 6ce4c80
1 parent fd6483e
commit 6ce4c80
Show file tree

Hide file tree

Showing 6 changed files with 103 additions and 39 deletions.
diff --git a/public/index.html b/public/index.html
@@ -13,6 +13,8 @@
       homescreen on Android. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <link href="https://fonts.googleapis.com/css?family=Marmelad" rel="stylesheet">
+
     <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.
@@ -22,7 +24,7 @@
       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>
+    <title>WORDz</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/src/components/Homepage.js b/src/components/Homepage.js
@@ -8,17 +8,21 @@ const MainDiv = styled.div`
   height: 100vh;
   background-color: pink;
   display: flex;
-  justift-content: center;
+  justify-content: center;
   align-items: center;
+  flex-direction: column;
+  @media (min-width: 600px) {
+    flex-direction: row;
+  }
 `;
 
 const Homepage = () => {
   return (
-        <MainDiv>
+    <MainDiv>
       <Inputs />
       <Results />
     </MainDiv>
   );
-}
+};
 
 export default Homepage;
diff --git a/src/components/Inputs.js b/src/components/Inputs.js
@@ -1,26 +1,35 @@
-import React from "react";
-import Search from "./Search";
-import styled from "styled-components";
+import React from 'react';
+import Search from './Search';
+import styled from 'styled-components';
 
 const MainInputsDiv = styled.div`
-  height: 100vh;
-  width: 50vw;
-  background-color: grey;
+  height: 50vh;
+  width: 100vw;
+  background-color: #f1ecec;
   display: flex;
-  flex-direction: column;
-  justify-content: space-between;
+  justify-content: center;
   align-items: center;
-  input {
-    width: 30%;
-    height: 20px;
-    font-size: 20px;
+  @media (min-width: 600px) {
+    height: 100vh;
+    width: 50vw;
   }
 `;
 
+const SearchContainer = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100vw;
+  height: 50vh;
+  margin-bottom: 30px;
+`;
+
 const Inputs = () => {
   return (
     <MainInputsDiv>
-      <Search />
+      <SearchContainer>
+        <Search />
+      </SearchContainer>
     </MainInputsDiv>
   );
 };

diff --git a/src/components/Results.js b/src/components/Results.js
@@ -1,14 +1,18 @@
-import React, { Component } from "react";
-import { connect } from "react-redux";
-import styled from "styled-components";
-import { data } from "../data/words";
-import { puzzleSolver } from "../helpers/puzzleSolver";
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import styled from 'styled-components';
+import { data } from '../data/words';
+import { puzzleSolver } from '../helpers/puzzleSolver';
 
 const MainResultsDiv = styled.div`
-  min-height: 100vh;
-  width: 50vw;
+  min-height: 50vh;
+  width: 100vw;
   background-color: blue;
   color: white;
+  @media (min-width: 600px) {
+    height: 100vh;
+    width: 50vw;
+  }
 `;
 
 const WordsContainer = styled.div`
@@ -17,6 +21,16 @@ const WordsContainer = styled.div`
   justify-content: center;
 `;
 
+const Title = styled.div`
+  width: 100%;
+  text-align: center;
+  padding-top: 20px;
+`;
+
+const Words = styled.div`
+  margin: 20px 0px 0px 20px;
+`;
+
 class Results extends Component {
   renderWords(x, y) {
     return (
@@ -30,17 +44,17 @@ class Results extends Component {
   render() {
     return (
       <MainResultsDiv>
-        currently we're trying to go from COSY to RINK.
+        <Title>currently we're trying to go from COSY to RINK.</Title>
         {this.props.words ? (
-          <div>
+          <Words>
             {puzzleSolver(
               this.props.words.firstWord,
               this.props.words.secondWord,
               data
             ).map(x => {
               return <div key={x}>{x}</div>;
             })}
-          </div>
+          </Words>
         ) : null}
       </MainResultsDiv>
     );

diff --git a/src/components/Search.js b/src/components/Search.js
@@ -1,16 +1,50 @@
-import React, { Component } from "react";
-import { connect } from "react-redux";
-import * as actions from "../actions";
-import { Field, reduxForm } from "redux-form";
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import * as actions from '../actions';
+import { Field, reduxForm } from 'redux-form';
+import styled from 'styled-components';
+
+const Fields = styled.div`
+  display: flex;
+  * {
+    margin-right: 20px;
+    margin-top: 20px;
+    width: 40%;
+    height: 30px;
+    font-size: 16px;
+    padding-left: 6px;
+  }
+`;
+
+const Label = styled.label`
+  font-size: 20px;
+`;
+
+const Form = styled.form`
+  height: 80px;
+  width: 80%;
+`;
+
+const Button = styled.button`
+  idth: 155px;
+  height: 42px;
+  background-color: green;
+  color: white;
+  margin-top: 20px;
+  font-size: 16px;
+`;
 
 class Search extends Component {
   render() {
     const { handleSubmit, pristine, reset, submitting, setWords } = this.props;
     return (
-      <form onSubmit={handleSubmit(values => setWords(values))} autoComplete='off'>
+      <Form
+        onSubmit={handleSubmit(values => setWords(values))}
+        autoComplete="off"
+      >
+        <Label>Enter your two words</Label>
         <div>
-          <label>First Name</label>
-          <div>
+          <Fields>
             <Field
               name="firstWord"
               component="input"
@@ -23,14 +57,14 @@ class Search extends Component {
               type="text"
               placeholder="Second Word"
             />
-          </div>
+          </Fields>
           <div>
-            <button type="submit" disabled={pristine || submitting}>
+            <Button type="submit" disabled={pristine || submitting}>
               Submit
-            </button>
+            </Button>
           </div>
         </div>
-      </form>
+      </Form>
     );
   }
 }
@@ -40,7 +74,7 @@ export default connect(
   actions
 )(
   reduxForm({
-    form: "search"
+    form: 'search'
     // onSubmitSuccess: afterSubmit
   })(Search)
 );
diff --git a/src/index.css b/src/index.css
@@ -1,3 +1,4 @@
 body {
   margin: 0px;
+  font-family: "Marmelad", sans-serif;
 }