Create volunteer shift row (#202)

* volunter shift row

* use theme border color

* remove demo

frontend/src/components/admin/schedule/VolunteerProfileShiftRow.tsx

@@ -0,0 +1,46 @@
+import React from "react";
+import { Text, Box, VStack } from "@chakra-ui/react";
+import {
+  formatDateStringYear,
+  formatTimeHourMinutes,
+} from "../../../utils/DateTimeUtils";
+
+type VolunteerProfileShiftRowProps = {
+  roleTitle: string;
+  startDateTime: Date;
+  endDateTime: Date;
+  notes: string;
+};
+const VolunteerProfileShiftRow = ({
+  roleTitle,
+  startDateTime,
+  endDateTime,
+  notes,
+}: VolunteerProfileShiftRowProps): React.ReactElement => {
+  return (
+    <Box borderWidth="1px" borderColor="background.dark">
+      <VStack
+        justifyContent="start"
+        align="start"
+        py="12px"
+        px="32px"
+        spacing={0}
+      >
+        <Text textStyle="caption" fontWeight="semibold">
+          {roleTitle}
+        </Text>
+        <Text textStyle="caption">
+          {`${formatDateStringYear(
+            startDateTime.toString(),
+          )} | ${formatTimeHourMinutes(startDateTime)} -
+            ${formatTimeHourMinutes(endDateTime)}`}
+        </Text>
+        <Text textStyle="caption" color="gray">
+          {notes}
+        </Text>
+      </VStack>
+    </Box>
+  );
+};
+
+export default VolunteerProfileShiftRow;

frontend/src/components/common/PocCard.tsx

@@ -21,7 +21,7 @@ const PocCard: React.FC<PocCardProps> = ({
       px={4}
       py={3}
       border="1px"
-      borderColor="#E5E5E5"
+      borderColor="background.dark"
       borderRadius={3}
       shadow="base"
       spacing={3.5}

frontend/src/components/pages/Default.tsx

@@ -15,6 +15,7 @@ import RefreshCredentials from "../auth/RefreshCredentials";
 
 import * as Routes from "../../constants/Routes";
 import SampleContext from "../../contexts/SampleContext";
+import VolunteerProfileShiftRow from "../admin/schedule/VolunteerProfileShiftRow";
 
 type ButtonProps = { text: string; path: string };