feat: Updates component styles

packages/frontend/components/navbar/index.tsx

@@ -1,39 +1,45 @@
-import React, { Fragment } from 'react'
-import { Box, Link } from '@chakra-ui/core'
-import { NextPage } from 'next'
-import { Button } from '@hasura-next/components';
+import React, { Fragment } from "react";
+import { Box, Link as _Link } from "@chakra-ui/core";
+import { NextPage } from "next";
+import Link from "next/link";
 
 interface iProps {
-  isAuthenticated: boolean
+  isAuthenticated: boolean;
 }
 
 const Navbar: NextPage<iProps> = ({ isAuthenticated }) => {
   return (
-    <Box
-      p={4}
-      display="flex"
-      justifyContent="space-between"
-      height={80}
-      shadow="md"
-    >
-      <Box display="flex" alignItems="center">
-        <Link>Logo</Link>
-      </Box>
-      <Box display="flex" alignItems="center">
-        <Link mr={4}>Documentation</Link>
-        {!isAuthenticated ? (
-          <Fragment>
-            <Link mr={4} href="/sign-in">
-              Sign In
-            </Link>
-            <Button>
-              Sign Up
-            </Button>
-          </Fragment>
-        ) : null}
+    <Box borderBottomWidth={1}>
+      <Box
+        maxW="6xl"
+        w="full"
+        mx="auto"
+        d="flex"
+        justifyContent="space-between"
+        p={4}
+        color="gray.700"
+      >
+        <Box display="flex" alignItems="center">
+          <Link href="/">
+            <_Link>Logo</_Link>
+          </Link>
+        </Box>
+        <Box display="flex" alignItems="center">
+          <_Link mr={4}>Documentation</_Link>
+          {!isAuthenticated ? (
+            <Fragment>
+              <_Link mr={4} href="/sign-in">
+                Sign In
+              </_Link>
+              <Link href="/sign-up">
+                <_Link>Sign Up</_Link>
+              </Link>
+            </Fragment>
+          ) : null}
+        </Box>
       </Box>
     </Box>
-  )
-}
+  );
+};
 
-export default Navbar
+export default Navbar;

packages/frontend/components/pages/index/index.tsx

@@ -1,33 +1,34 @@
-import React, { Fragment } from 'react'
-import { withApollo, useSubscription } from 'react-apollo'
-import gql from 'graphql-tag'
+import React from "react";
+import { withApollo, useSubscription } from "react-apollo";
+import gql from "graphql-tag";
+import { Stack, Box } from "@chakra-ui/core";
 
 const fetchUsersSubscription = gql`
   subscription {
     user {
       id
     }
   }
-`
+`;
 
 const Index = () => {
-  const { data, loading, error } = useSubscription(fetchUsersSubscription)
+  const { data, loading, error } = useSubscription(fetchUsersSubscription);
 
   if (loading) {
-    return <div>Loading...</div>
+    return <div>Loading...</div>;
   }
 
   if (error) {
-    return <p>Error: {error.message}</p>
+    return <p>Error: {error.message}</p>;
   }
 
   return (
-    <Fragment>
+    <Stack spacing={4}>
       {data.user.map((user: { id: number }) => {
-        return <div key={user.id}>{user.id}</div>
+        return <Box key={user.id}>{user.id}</Box>;
       })}
-    </Fragment>
-  )
-}
+    </Stack>
+  );
+};
 
-export default withApollo(Index)
+export default withApollo(Index);

packages/frontend/components/pages/sign-up/index.tsx

@@ -1,101 +1,99 @@
-import React, { Fragment, useState, FormEvent } from 'react'
+import React, { useState, FormEvent } from "react";
 import {
   Box,
   Button,
   FormControl,
   FormLabel,
   Input,
   Alert,
-  AlertIcon,
-} from '@chakra-ui/core'
-import useFetch from 'use-http'
-import { useRouter } from 'next/router'
-import { NextPage } from 'next'
-import Head from 'next/head'
-import { cookieSetter } from '../../../lib/cookie'
+  AlertIcon
+} from "@chakra-ui/core";
+import useFetch from "use-http";
+import { useRouter } from "next/router";
+import { NextPage } from "next";
+import { cookieSetter } from "../../../lib/cookie";
 
 const SignUp: NextPage = () => {
-  const [email, setEmail] = useState('')
-  const [password, setPassword] = useState('')
-  const [errors, setErrors] = useState([])
-  const [request, response] = useFetch(`${process.env.AUTH_URL}`)
-  const router = useRouter()
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [errors, setErrors] = useState([]);
+  const [request, response] = useFetch(`${process.env.AUTH_URL}`);
+  const router = useRouter();
 
   const handleSubmit = async () => {
-    const res = await request.post('/signup', {
+    const res = await request.post("/signup", {
       email,
-      password,
-    })
+      password
+    });
 
-    cookieSetter('user-id', res.id)
-    cookieSetter('user-roles', res.roles)
-    cookieSetter('token', res.token)
+    cookieSetter("user-id", res.id);
+    cookieSetter("user-roles", res.roles);
+    cookieSetter("token", res.token);
 
     if (response.ok) {
-      router.push('/index')
+      router.push("/index");
     } else {
-      setErrors(res.data.columns)
+      setErrors(res.data.columns);
     }
-  }
+  };
 
   return (
-    <Fragment>
-      <Head>
-        <title>Sign Up Page</title>
-      </Head>
-      <Box
-        minHeight={`calc(100vh - 80px)`}
-        display="flex"
-        justifyContent="center"
-        alignItems="center"
-        flexDirection="column"
-      >
-        {errors.length ? (
-          <Alert status="error" variant="left-accent">
-            <AlertIcon />
-            There was an error processing your request. Please try again!
-          </Alert>
-        ) : null}
-        <Box minWidth="400px" p={4}>
-          <Box mb={8} as="form" onSubmit={handleSubmit}>
-            <FormControl isRequired mb={8}>
-              <FormLabel>Email address</FormLabel>
-              <Input
-                placeholder="john@doe.com"
-                value={email}
-                onChange={(e: FormEvent<HTMLInputElement>) =>
-                  setEmail(e.currentTarget.value)
-                }
-              />
-            </FormControl>
-            <FormControl isRequired>
-              <FormLabel>Password</FormLabel>
-              <Input
-                type="password"
-                placeholder="******"
-                size="md"
-                value={password}
-                onChange={(e: FormEvent<HTMLInputElement>) =>
-                  setPassword(e.currentTarget.value)
-                }
-              />
-            </FormControl>
-          </Box>
-          <Box display="flex" justifyContent="flex-end" p={0}>
-            <Button
-              variant="solid"
-              variantColor="messenger"
-              size="lg"
-              loadingText="Signing up..."
-              onClick={handleSubmit}
-            >
-              Sign Up
-            </Button>
-          </Box>
+    <Box
+      minHeight={`calc(100vh - 80px)`}
+      display="flex"
+      justifyContent="center"
+      alignItems="center"
+      flexDirection="column"
+    >
+      {errors.length ? (
+        <Alert status="error" variant="left-accent">
+          <AlertIcon />
+          There was an error processing your request. Please try again!
+        </Alert>
+      ) : null}
+      <Box minWidth="400px" p={4}>
+        <Box mb={8} as="form" onSubmit={handleSubmit}>
+          <FormControl isRequired mb={8}>
+            <FormLabel htmlFor="email">Email address</FormLabel>
+            <Input
+              type="email"
+              id="email"
+              aria-describedby="Email address"
+              placeholder="john@doe.com"
+              value={email}
+              onChange={(e: FormEvent<HTMLInputElement>) =>
+                setEmail(e.currentTarget.value)
+              }
+            />
+          </FormControl>
+          <FormControl isRequired>
+            <FormLabel htmlFor="password">Password</FormLabel>
+            <Input
+              type="password"
+              id="password"
+              aria-describedby="Password"
+              placeholder="******"
+              value={password}
+              onChange={(e: FormEvent<HTMLInputElement>) =>
+                setPassword(e.currentTarget.value)
+              }
+            />
+          </FormControl>
+        </Box>
+        <Box display="flex" justifyContent="flex-end" p={0}>
+          <Button
+            variantColor="blue"
+            size="lg"
+            loadingText="Signing up..."
+            onClick={handleSubmit}
+            w="full"
+          >
+            Sign Up
+          </Button>
         </Box>
       </Box>
-    </Fragment>
-  )
-}
+    </Box>
+  );
+};
 
-export default SignUp
+export default SignUp;

packages/frontend/pages/_app.tsx

@@ -1,29 +1,36 @@
-import React from 'react'
-import NextApp from 'next/app'
+import React from "react";
+import NextApp from "next/app";
 import {
   ThemeProvider,
   CSSReset,
   ColorModeProvider,
   theme,
-} from '@chakra-ui/core'
+  Box
+} from "@chakra-ui/core";
 
-import withApollo from '../lib/with-apollo'
-import Navbar from '../components/navbar'
+import withApollo from "../lib/with-apollo";
+import Navbar from "../components/navbar";
 
 class App extends NextApp {
   render() {
-    const { Component, pageProps } = this.props
+    const { Component, pageProps } = this.props;
 
     return (
       <ThemeProvider theme={theme}>
         <CSSReset />
         <ColorModeProvider>
-          <Navbar isAuthenticated={pageProps.isAuthenticated} />
-          <Component {...this.props} />
+          <Box fontSize="sm">
+            <Navbar isAuthenticated={pageProps.isAuthenticated} />
+            <Box bg="gray.50">
+              <Box minH="100vh" maxW="6xl" w="full" mx="auto" p={4}>
+                <Component {...this.props} />
+              </Box>
+            </Box>
+          </Box>
         </ColorModeProvider>
       </ThemeProvider>
-    )
+    );
   }
 }
 
-export default withApollo(App)
+export default withApollo(App);

packages/frontend/pages/sign-up.tsx

@@ -1,4 +1,18 @@
-import Page from '../components/pages/sign-up'
-import WithAuthentication from '../lib/with-authentication'
+import React, { Fragment } from "react";
+import Head from "next/head";
 
-export default WithAuthentication(Page)
+import Page from "../components/pages/sign-up";
+import WithAuthentication from "../lib/with-authentication";
+
+const IndexPage = () => {
+  return (
+    <Fragment>
+      <Head>
+        <title>Sign Up Page</title>
+      </Head>
+      <Page />
+    </Fragment>
+  );
+};
+
+export default WithAuthentication(IndexPage);