Feat: Design for Footer, Form Update

Author: desktopofsamuel

src/components/footer.tsx

@@ -1,9 +1,11 @@
 import React, { useState } from 'react';
 import {
+  Container,
   Input,
   Button,
   Stack,
   Alert,
+  HStack,
   AlertIcon,
   FormControl,
   FormLabel,
@@ -36,7 +38,6 @@ const Newsletter = ({}) => {
   const [status, setStatus] = useState(null);
   const FORM_URL = `https://api.convertkit.com/v3/forms/1917969/subscribe`;
   const API = process.env.GATSBY_CONVERTKIT_API_KEY;
-  console.log(API);
   // const formik = useFormik({
   //   initialValues: {
   //     name: '',
@@ -87,12 +88,11 @@ const Newsletter = ({}) => {
         email: '',
       }}
       onSubmit={async (values, actions) => {
-        const data = {
+        const feed = JSON.stringify({
           api_key: API,
           email: values.email,
           first_name: values.name,
-        };
-        const feed = JSON.stringify(data);
+        });
         console.log(feed);
         fetch(FORM_URL, {
           method: 'POST',
@@ -142,39 +142,52 @@ const Newsletter = ({}) => {
               Sorry, API error has occured, please try again later.
             </Alert>
           )}
-          <Field name="name" validate={validateName}>
-            {({ field, form }) => (
-              <FormControl
-                isInvalid={form.errors.name && form.touched.name}
-                isRequired
-              >
-                <FormLabel htmlFor="name">First name</FormLabel>
-                <Input {...field} id="name" placeholder="你的名字" />
-                <FormErrorMessage>{form.errors.name}</FormErrorMessage>
-              </FormControl>
-            )}
-          </Field>
-          <Field name="email" validate={validateEmail}>
-            {({ field, form }) => (
-              <FormControl
-                isInvalid={form.errors.email && form.touched.email}
-                isRequired
-              >
-                <FormLabel htmlFor="email">E-mail</FormLabel>
-                <Input
-                  {...field}
-                  type="email"
-                  id="email"
-                  name="email"
-                  placeholder="你的電郵地址"
-                />
-                <FormErrorMessage>{form.errors.email}</FormErrorMessage>
-              </FormControl>
-            )}
-          </Field>
-          <Button mt={4} isLoading={props.isSubmitting} type="submit">
-            Submit
-          </Button>
+          <Stack
+            direction={{ base: 'column', md: 'row' }}
+            minHeight="80px"
+            my="4"
+          >
+            <Field name="name" validate={validateName}>
+              {({ field, form }) => (
+                <FormControl
+                  isInvalid={form.errors.name && form.touched.name}
+                  isRequired
+                >
+                  {/* <FormLabel htmlFor="name">First name</FormLabel> */}
+                  <Input {...field} id="name" placeholder="Your name" />
+                  <FormErrorMessage>{form.errors.name}</FormErrorMessage>
+                </FormControl>
+              )}
+            </Field>
+            <Field name="email" validate={validateEmail}>
+              {({ field, form }) => (
+                <FormControl
+                  isInvalid={form.errors.email && form.touched.email}
+                  isRequired
+                >
+                  {/* <FormLabel htmlFor="email">E-mail</FormLabel> */}
+                  <Input
+                    {...field}
+                    type="email"
+                    id="email"
+                    name="email"
+                    placeholder="Your email"
+                  />
+                  <FormErrorMessage>{form.errors.email}</FormErrorMessage>
+                </FormControl>
+              )}
+            </Field>
+            <Button
+              width="300px"
+              variant="brand"
+              mt={4}
+              isLoading={props.isSubmitting}
+              colorScheme={status === 'SUCCESS' ? 'green' : 'blue'}
+              type="submit"
+            >
+              Submit
+            </Button>
+          </Stack>
         </Form>
       )}
     </Formik>

src/components/newsletter-form.tsx

@@ -47,7 +47,7 @@ const PostList = ({ edges }: EdgesType) => (
           </Text>
         </HStack>
         <Link to={edge.node.fields.slug}>
-          <Heading as="h2" variant="title">
+          <Heading as="h2" variant="title" mt="0">
             {edge.node.frontmatter.title}
           </Heading>
         </Link>

src/components/post-list.tsx

@@ -10,7 +10,7 @@ import {
   VStack,
   SimpleGrid,
   useColorMode,
-  mode,
+  useColorModeValue,
   IconButton,
 } from '@chakra-ui/react';
 import {
@@ -52,16 +52,31 @@ const Sidebar: React.FC = () => {
           />
         </GatsbyLink>
         {/* Author */}
-        <Heading as="h1" fontSize="medium" mt="4">
-          Samuel W.
-        </Heading>
+        <GatsbyLink to="/">
+          <Heading as="h1" fontSize="medium" mt="4">
+            Samuel W.
+          </Heading>
+        </GatsbyLink>
         <Box dangerouslySetInnerHTML={{ __html: config.author.fullbio }} />
       </Flex>
       <VStack alignItems={{ base: 'flex-end', md: 'flex-start' }} spacing="8">
         {/* Menu  */}
         <VStack spacing="2" alignItems={{ base: 'flex-end', md: 'flex-start' }}>
           {config.menu.map((item) => (
-            <GatsbyLink to={item.path} key={item.label}>
+            <GatsbyLink
+              to={item.path}
+              key={item.label}
+              borderBottomWidth="1px"
+              borderBottomColor="transparent"
+              _hover={{
+                color: useColorModeValue('primary.500', 'primary.400'),
+                borderBottomColor: useColorModeValue(
+                  'primary.500',
+                  'primary.400',
+                ),
+                borderBottomWidth: '1px',
+              }}
+            >
               {item.label}
             </GatsbyLink>
           ))}

src/components/sidebar.tsx

@@ -11,6 +11,7 @@ const Tag = ({ children }) => (
       px="3"
       py="2"
       borderRadius="full"
+      transition="all 0.1s"
       _hover={{ background: 'primary.500', color: 'white' }}
     >
       <TagLeftIcon width="10px" as={FaHashtag} mr="1" />

src/components/tag.tsx

@@ -15,6 +15,7 @@ const customTheme = extendTheme({
     mono: 'Space Mono, IBM Plex Mono, monospace',
   },
   colors: {
+    transparent: 'rgba(0,0,0,0)',
     text: {
       100: 'lightgray',
       400: 'darkgray',
@@ -121,6 +122,10 @@ const customTheme = extendTheme({
         outline: (props) => ({
           borderColor: 'indigo.200',
         }),
+        brand: (props) => ({
+          backgroundColor: mode('primary.500', 'primary.400'),
+          color: 'white',
+        }),
         disabled: (props) => ({
           color: 'primary.500',
           _hover: {
@@ -138,9 +143,7 @@ const customTheme = extendTheme({
         // color: mode('red.900', 'whiteAlpha.100')(props),
       }),
     },
-    Link: {
-      baseStyle: {},
-    },
+    Link: {},
     VStack: {
       baseStyle: {
         align: 'flex-start',
@@ -163,6 +166,11 @@ const customTheme = extendTheme({
           fontSize: '2xl',
           my: '0',
           lineHeight: 'tall',
+          borderBottom: '1px dotted rgba(0,0,0,0)',
+          transition: 'all 0.1s ease-in-out',
+          _hover: {
+            borderBottom: '1px dotted black',
+          },
         },
         heading: {
           fontSize: '3xl',