Refactor

components/Algolia/Hit.tsx

@@ -1,44 +1,25 @@
 import { ReactElement } from "react";
-import styled from "@emotion/styled";
-
-import { Box, HStack, Skeleton, Text } from "@chakra-ui/react";
 import Link from "next/link";
-import Image from "next/image";
+import { Heading, Text } from "@chakra-ui/react";
 
 import { Room } from "@/generated";
+import { ItemEntry } from "../common";
 import { Hit as HitType } from "react-instantsearch-core";
 
-//TODO: items should be a focusable link wrapper
-export const Hit = ({ hit }: { hit: HitType<Room> }): ReactElement => {
-  const photo = hit.photos[0];
-
-  return (
-    <Box px={2} py={2} _hover={{ backgroundColor: "gray.100" }}>
-      <Link href={`/rooms/${hit.id}`}>
-        <a>
-          <HStack spacing={2}>
-            <ImageWrapper isLoaded={!!photo} borderRadius="md">
-              {photo ? (
-                <Image src={photo.link} layout="fill" objectFit="cover" />
-              ) : null}
-            </ImageWrapper>
+interface HitProps {
+  hit: HitType<Room>;
+}
 
-            <Box flex={1}>
-              <Box w="max-content" mx="auto">
-                <Text fontWeight="bold">{hit.name}</Text>
-                <Text>{hit.address.address}</Text>
-              </Box>
-            </Box>
-          </HStack>
-        </a>
-      </Link>
-    </Box>
-  );
-};
-
-const ImageWrapper = styled(Skeleton)`
-  position: relative;
-  width: 100px;
-  height: 100px;
-  overflow: hidden;
-`;
+//TODO: items should be a focusable link wrapper
+export const Hit = ({ hit }: HitProps): ReactElement => (
+  <Link href={`/rooms/${hit.id}`}>
+    <a>
+      <ItemEntry photo={hit.photos[0]}>
+        <Heading as="h5" textStyle="labelDark">
+          {hit.name}
+        </Heading>
+        <Text textStyle="labelMedium">{hit.address.address}</Text>
+      </ItemEntry>
+    </a>
+  </Link>
+);

components/Auth/SignUp.tsx

@@ -152,7 +152,7 @@ export const SignUp = (): ReactElement => {
             />
             <FormErrorMessage>{errors.phone?.message}</FormErrorMessage>
           </FormControl>
-          <ButtonPrimary type="submit" w="100%" my={6}>
+          <ButtonPrimary type="submit" w="100%" mt={6}>
             Continue
           </ButtonPrimary>
         </VStack>
@@ -203,10 +203,12 @@ export const SignUp = (): ReactElement => {
         <PhoneSignUp phoneNumber={phoneState} />
       ) : null}
 
-      <Text>or</Text>
-      <Button onClick={() => setModalState("VERIFIED")}>
-        Continue With Email
-      </Button>
+      <VStack mt={3} spacing={3}>
+        <Text>or</Text>
+        <Button w="full" onClick={() => setModalState("VERIFIED")}>
+          Continue With Email
+        </Button>
+      </VStack>
     </>
   );
 };

components/BookingCard.tsx

@@ -4,8 +4,6 @@ import Cookies from "js-cookie";
 import differenceInCalendarDays from "date-fns/differenceInCalendarDays";
 import {
   Button,
-  Stat,
-  StatNumber,
   Text,
   HStack,
   VStack,
@@ -94,11 +92,8 @@ export const BookingCard = ({
         {...props}
       >
         <HStack>
-          <Stat flex={0}>
-            <StatNumber color="primary">${room.price}</StatNumber>
-          </Stat>
-
-          <Text pl={1} fontSize="xl" color="gray.500">
+          <Text textStyle="monetary">${room.price}</Text>
+          <Text fontSize="lg" color="gray.500">
             / night
           </Text>
         </HStack>
@@ -126,11 +121,9 @@ export const BookingCard = ({
               <Text>
                 ${room.price} x {numDays} nights
               </Text>
-              <Stat flexGrow={0} size="xl">
-                <StatNumber color="primary">
-                  ${(room.price * numDays).toFixed(2)}
-                </StatNumber>
-              </Stat>
+              <Text textStyle="monetary" fontSize="xl">
+                ${(room.price * numDays).toFixed(2)}
+              </Text>
             </HStack>
             <Button
               w="100%"

components/BookingDetails.tsx

@@ -5,7 +5,6 @@ import {
   Heading,
   HStack,
   StackDivider,
-  StackProps,
   Text,
   VStack,
 } from "@chakra-ui/react";
@@ -14,7 +13,6 @@ import Image from "next/image";
 import { IoBedOutline } from "react-icons/io5";
 import { IconPair } from "./common";
 
-import { useGetUserQuery } from "@/generated";
 import { PaymentDetails } from "@/lib/cache";
 import { useAuth } from "@/lib/auth";
 
@@ -103,9 +101,11 @@ export const BookingDetails = ({
             <Text flex={1}>${paymentDetails.reservation.total}</Text>
           </HStack>
 
-          <HStack fontWeight="bold" fontSize="lg">
-            <Text flex={1}>Total</Text>
-            <Text flex={1} color="primary" fontSize="xl">
+          <HStack fontWeight="bold">
+            <Text flex={1} fontSize="lg">
+              Total
+            </Text>
+            <Text flex={1} textStyle="monetary" fontSize="lg">
               ${paymentDetails.reservation.total}
             </Text>
           </HStack>

components/Header.tsx

@@ -1,14 +1,7 @@
 import { ReactElement } from "react";
 import { useReactiveVar } from "@apollo/client";
 import NextLink from "next/link";
-import {
-  Link,
-  Stack,
-  HStack,
-  StackProps,
-  Heading,
-  Box,
-} from "@chakra-ui/react";
+import { Link, Stack, HStack, StackProps, Heading } from "@chakra-ui/react";
 
 import { isLoggedInVar } from "../lib/cache";
 import { LayoutContainer } from "./Layout";