Update styles

Author: condef5

client/src/components/navbar.js

@@ -8,7 +8,7 @@ function Navbar() {
       css={{
         background: "#fff",
         borderBottom: "1px solid #e5edef",
-        padding: "10px 15px",
+        padding: "15px",
         marginBottom: "2em"
       }}
     >
@@ -18,8 +18,21 @@ function Navbar() {
           margin: "auto"
         }}
       >
-        <Link to="/">
-          <h2>Kampu</h2>
+        <Link to="/" css={{ textDecoration: "none" }}>
+          <h2
+            css={{
+              textDecoration: "none",
+              margin: "0",
+              fontSize: "35px",
+              fontWeight: "500",
+              backgroundImage:
+                "-webkit-gradient(linear, 0% 0%, 25% 100%,from(#c5e9a1), to(#00b7c6))",
+              WebkitBackgroundClip: "text",
+              WebkitTextFillColor: "transparent"
+            }}
+          >
+            Kampu
+          </h2>
         </Link>
       </div>
     </nav>

client/src/components/owner-club-circle.js

@@ -12,7 +12,8 @@ function OwnerClubCircle({ id, active, name, activeClub, setActiveClub }) {
     display: "flex",
     cursor: "pointer",
     border: "solid #ffffff00 0.5em",
-    flex: "0 0 80px"
+    flex: "0 0 80px",
+    textAlign: "center"
   };
 
   const styleActive = {

client/src/components/owner-create-button.js

@@ -1,6 +1,7 @@
 /** @jsx jsx */
 import React from "react";
 import { jsx } from "@emotion/core";
+import { Link } from "@reach/router";
 
 function OwnerCreateButton() {
   const [active, setActive] = React.useState(false);
@@ -59,6 +60,8 @@ function OwnerCreateButton() {
 
   const styleButton = {
     background: "none",
+    display: "block",
+    textDecoration: "none",
     color: "inherit",
     border: "none",
     padding: "0",
@@ -80,8 +83,12 @@ function OwnerCreateButton() {
   return (
     <div css={active ? styleListContainer : styleButtonContainer}>
       <div css={active ? styleButtonsContainerActive : styleButtonsContainer}>
-        <button css={styleButton}>Create Club</button>
-        <button css={styleButton}>Create Sport Field</button>
+        <Link to="/create-club" css={styleButton}>
+          Create Club
+        </Link>
+        <Link to="/create-sport-field" css={styleButton}>
+          Create Sport Field
+        </Link>
       </div>
       <button css={active ? styleIconActive : styleIcon} onClick={handleClick}>
         +

client/src/index.js

@@ -25,7 +25,7 @@ function App() {
           maxWidth: "900px",
           margin: "0 auto",
           boxSizing: "border-box",
-          "@media (max-width: 480px)": {
+          "@media (max-width: 720px)": {
             padding: "0px 15px"
           }
         }}

client/src/views/owner-home.js

@@ -8,7 +8,7 @@ import OwnerCreateButton from "../components/owner-create-button";
 import { useSetClubs, useSetSportFields } from "../actions/action-hooks";
 import { useClubs, useSportFields } from "../selectors/selectors";
 import { getClubs } from "../services/club";
-import { getSportFields } from "../services/sportField";
+import { getSportFields } from "../services/sport-field";
 
 function OwnerHome() {
   const clubs = useClubs();
@@ -43,15 +43,15 @@ function OwnerHome() {
       setClubs(clubs);
       setActiveClub(clubs.length ? clubs[0].id : null);
     });
-  }, [setClubs]);
+  }, []);
 
   React.useEffect(() => {
     if (activeClub) {
       getSportFields().then(sportFields => {
         setSportFields(sportFields);
       });
     }
-  }, [setSportFields]);
+  }, [activeClub]);
 
   const styleSportFieldsContainer = {
     display: "flex",
@@ -84,11 +84,10 @@ function OwnerHome() {
       </div>
       <Title>Sport Fields</Title>
       <div css={styleSportFieldsContainer}>
-        {sportFields ? (
+        {sportFields.length ? (
           sportFields
             .filter(sportField => sportField.club_id === activeClub)
             .map(sportField => {
-              //This is a temporal progress
               const progress = `${Math.floor(Math.random() * 100) + 1}%`;
               return (
                 <OwnerSportFieldCard

client/src/views/signup.js

@@ -123,8 +123,8 @@ function Signup() {
         <Link
           to="/login"
           style={{
-            color: "Black",
-            fontSize: "10px",
+            color: "#000",
+            fontSize: "14px",
             textDecoration: "none",
             display: "flex",
             justifyContent: "flex-end"