From 723c0f7505d46cae609f04f52b518150a87ad4ed Mon Sep 17 00:00:00 2001
From: David Corbitt <davidlcorbitt@gmail.com>
Date: Sat, 12 Aug 2023 02:32:09 -0700
Subject: [PATCH] Update colors throughout app

---
 .../components/OutputsTable/ScenarioRow.tsx   |  5 ++
 .../OutputsTable/ScenariosHeader.tsx          | 15 +++++-
 app/src/components/OutputsTable/index.tsx     | 14 ++++-
 app/src/components/Paginator.tsx              |  5 ++
 .../VariantHeader/VariantHeader.tsx           |  6 ++-
 .../components/dashboard/LoggedCallsTable.tsx |  4 +-
 .../components/experiments/ExperimentCard.tsx | 51 ++++++++++---------
 .../requestLogs/LoggedCallsTable.tsx          |  2 +-
 app/src/pages/dashboard/index.tsx             | 26 +++-------
 app/src/pages/project/settings/index.tsx      |  1 +
 app/src/pages/request-logs/index.tsx          | 20 +++-----
 11 files changed, 84 insertions(+), 65 deletions(-)

diff --git a/app/src/components/OutputsTable/ScenarioRow.tsx b/app/src/components/OutputsTable/ScenarioRow.tsx
index 41b4fcf..9af9c57 100644
--- a/app/src/components/OutputsTable/ScenarioRow.tsx
+++ b/app/src/components/OutputsTable/ScenarioRow.tsx
@@ -10,6 +10,7 @@ const ScenarioRow = (props: {
   variants: PromptVariant[];
   canHide: boolean;
   rowStart: number;
+  isLast: boolean;
 }) => {
   const [isHovered, setIsHovered] = useState(false);
 
@@ -21,10 +22,12 @@ const ScenarioRow = (props: {
         onMouseEnter={() => setIsHovered(true)}
         onMouseLeave={() => setIsHovered(false)}
         sx={isHovered ? highlightStyle : undefined}
+        bgColor="white"
         borderLeftWidth={1}
         {...borders}
         rowStart={props.rowStart}
         colStart={1}
+        borderBottomLeftRadius={props.isLast ? 8 : 0}
       >
         <ScenarioEditor scenario={props.scenario} hovered={isHovered} canHide={props.canHide} />
       </GridItem>
@@ -34,8 +37,10 @@ const ScenarioRow = (props: {
           onMouseEnter={() => setIsHovered(true)}
           onMouseLeave={() => setIsHovered(false)}
           sx={isHovered ? highlightStyle : undefined}
+          bgColor="white"
           rowStart={props.rowStart}
           colStart={i + 2}
+          borderBottomRightRadius={props.isLast && i === props.variants.length - 1 ? 8 : 0}
           {...borders}
         >
           <OutputCell key={variant.id} scenario={props.scenario} variant={variant} />
diff --git a/app/src/components/OutputsTable/ScenariosHeader.tsx b/app/src/components/OutputsTable/ScenariosHeader.tsx
index 3e470c4..62d20ea 100644
--- a/app/src/components/OutputsTable/ScenariosHeader.tsx
+++ b/app/src/components/OutputsTable/ScenariosHeader.tsx
@@ -48,7 +48,20 @@ export const ScenariosHeader = () => {
   );
 
   return (
-    <HStack w="100%" pb={cellPadding.y} pt={0} align="center" spacing={0}>
+    <HStack
+      w="100%"
+      py={cellPadding.y}
+      px={cellPadding.x}
+      align="center"
+      spacing={0}
+      borderTopRightRadius={8}
+      borderTopLeftRadius={8}
+      bgColor="white"
+      borderWidth={1}
+      borderBottomWidth={0}
+      borderColor="gray.300"
+      mt={8}
+    >
       <Text fontSize={16} fontWeight="bold">
         Scenarios ({scenarios.data?.count})
       </Text>
diff --git a/app/src/components/OutputsTable/index.tsx b/app/src/components/OutputsTable/index.tsx
index ba60f3b..45c5402 100644
--- a/app/src/components/OutputsTable/index.tsx
+++ b/app/src/components/OutputsTable/index.tsx
@@ -53,20 +53,29 @@ export default function OutputsTable({ experimentId }: { experimentId: string |
           colStart: i + 2,
           borderLeftWidth: i === 0 ? 1 : 0,
           marginLeft: i === 0 ? "-1px" : 0,
-          backgroundColor: "gray.100",
+          backgroundColor: "white",
         };
+        const isFirst = i === 0;
+        const isLast = i === variants.data.length - 1;
         return (
           <Fragment key={variant.uiId}>
             <VariantHeader
               variant={variant}
               canHide={variants.data.length > 1}
               rowStart={1}
+              borderTopLeftRadius={isFirst ? 8 : 0}
+              borderTopRightRadius={isLast ? 8 : 0}
               {...sharedProps}
             />
             <GridItem rowStart={2} {...sharedProps}>
               <VariantEditor variant={variant} />
             </GridItem>
-            <GridItem rowStart={3} {...sharedProps}>
+            <GridItem
+              rowStart={3}
+              {...sharedProps}
+              borderBottomLeftRadius={isFirst ? 8 : 0}
+              borderBottomRightRadius={isLast ? 8 : 0}
+            >
               <VariantStats variant={variant} />
             </GridItem>
           </Fragment>
@@ -90,6 +99,7 @@ export default function OutputsTable({ experimentId }: { experimentId: string |
           scenario={scenario}
           variants={variants.data}
           canHide={visibleScenariosCount > 1}
+          isLast={i === visibleScenariosCount - 1}
         />
       ))}
       <GridItem
diff --git a/app/src/components/Paginator.tsx b/app/src/components/Paginator.tsx
index d49b821..4a71f1b 100644
--- a/app/src/components/Paginator.tsx
+++ b/app/src/components/Paginator.tsx
@@ -54,6 +54,7 @@ const Paginator = ({
               value={pageSize}
               onChange={(e) => updatePageSize(parseInt(e.target.value))}
               w={20}
+              backgroundColor="white"
             >
               {pageSizeOptions.map((option) => (
                 <option key={option} value={option}>
@@ -76,6 +77,7 @@ const Paginator = ({
           isDisabled={page === 1}
           aria-label="Go to first page"
           icon={<Icon as={FiChevronsLeft} boxSize={5} strokeWidth={1.5} />}
+          bgColor="white"
         />
         <IconButton
           variant="outline"
@@ -84,6 +86,7 @@ const Paginator = ({
           isDisabled={page === 1}
           aria-label="Previous page"
           icon={<Icon as={FiChevronLeft} boxSize={5} strokeWidth={1.5} />}
+          bgColor="white"
         />
         {condense && (
           <Text>
@@ -97,6 +100,7 @@ const Paginator = ({
           isDisabled={page === lastPage}
           aria-label="Next page"
           icon={<Icon as={FiChevronRight} boxSize={5} strokeWidth={1.5} />}
+          bgColor="white"
         />
         <IconButton
           variant="outline"
@@ -105,6 +109,7 @@ const Paginator = ({
           isDisabled={page === lastPage}
           aria-label="Go to last page"
           icon={<Icon as={FiChevronsRight} boxSize={5} strokeWidth={1.5} />}
+          bgColor="white"
         />
       </HStack>
     </HStack>
diff --git a/app/src/components/VariantHeader/VariantHeader.tsx b/app/src/components/VariantHeader/VariantHeader.tsx
index 6160dc6..60352a2 100644
--- a/app/src/components/VariantHeader/VariantHeader.tsx
+++ b/app/src/components/VariantHeader/VariantHeader.tsx
@@ -75,7 +75,7 @@ export default function VariantHeader(
       padding={0}
       sx={{
         position: "sticky",
-        top: "0",
+        top: "-2",
         // Ensure that the menu always appears above the sticky header of other variants
         zIndex: menuOpen ? "dropdown" : 10,
       }}
@@ -84,6 +84,7 @@ export default function VariantHeader(
     >
       <HStack
         spacing={2}
+        py={2}
         alignItems="flex-start"
         minH={headerMinHeight}
         draggable={!isInputHovered}
@@ -102,7 +103,8 @@ export default function VariantHeader(
           setIsDragTarget(false);
         }}
         onDrop={onReorder}
-        backgroundColor={isDragTarget ? "gray.200" : "gray.100"}
+        backgroundColor={isDragTarget ? "gray.200" : "white"}
+        borderTopLeftRadius={gridItemProps.borderTopLeftRadius}
         h="full"
       >
         <Icon
diff --git a/app/src/components/dashboard/LoggedCallsTable.tsx b/app/src/components/dashboard/LoggedCallsTable.tsx
index cb20d6d..9bea54f 100644
--- a/app/src/components/dashboard/LoggedCallsTable.tsx
+++ b/app/src/components/dashboard/LoggedCallsTable.tsx
@@ -9,11 +9,11 @@ export default function LoggedCallsTable() {
   const { data: loggedCalls } = useLoggedCalls();
 
   return (
-    <Card variant="outline" width="100%" overflow="hidden">
+    <Card width="100%" overflow="hidden">
       <CardHeader>
         <HStack justifyContent="space-between">
           <Heading as="h3" size="sm">
-            Logged Calls
+            Request Logs
           </Heading>
           <Button as={Link} href="/request-logs" variant="ghost" colorScheme="blue">
             <Text>View All</Text>
diff --git a/app/src/components/experiments/ExperimentCard.tsx b/app/src/components/experiments/ExperimentCard.tsx
index 010856e..b0e2c9e 100644
--- a/app/src/components/experiments/ExperimentCard.tsx
+++ b/app/src/components/experiments/ExperimentCard.tsx
@@ -7,6 +7,7 @@ import {
   Spinner,
   AspectRatio,
   SkeletonText,
+  Card,
 } from "@chakra-ui/react";
 import { RiFlaskLine } from "react-icons/ri";
 import { formatTimePast } from "~/utils/dayjs";
@@ -29,17 +30,21 @@ type ExperimentData = {
 
 export const ExperimentCard = ({ exp }: { exp: ExperimentData }) => {
   return (
-    <AspectRatio ratio={1.2} w="full">
+    <Card
+      w="full"
+      h="full"
+      cursor="pointer"
+      p={4}
+      bg="white"
+      borderRadius={4}
+      _hover={{ bg: "gray.100" }}
+      transition="background 0.2s"
+    >
       <VStack
         as={Link}
+        w="full"
+        h="full"
         href={{ pathname: "/experiments/[id]", query: { id: exp.id } }}
-        bg="gray.50"
-        _hover={{ bg: "gray.100" }}
-        transition="background 0.2s"
-        cursor="pointer"
-        borderColor="gray.200"
-        borderWidth={1}
-        p={4}
         justify="space-between"
       >
         <HStack w="full" color="gray.700" justify="center">
@@ -57,7 +62,7 @@ export const ExperimentCard = ({ exp }: { exp: ExperimentData }) => {
           <Text flex={1}>Updated {formatTimePast(exp.updatedAt)}</Text>
         </HStack>
       </VStack>
-    </AspectRatio>
+    </Card>
   );
 };
 
@@ -89,30 +94,30 @@ export const NewExperimentCard = () => {
   }, [createMutation, router, selectedProjectId]);
 
   return (
-    <AspectRatio ratio={1.2} w="full">
-      <VStack
-        align="center"
-        justify="center"
-        _hover={{ cursor: "pointer", bg: "gray.50" }}
-        transition="background 0.2s"
-        cursor="pointer"
-        borderColor="gray.200"
-        borderWidth={1}
-        p={4}
-        onClick={createExperiment}
-      >
+    <Card
+      w="full"
+      h="full"
+      cursor="pointer"
+      p={4}
+      bg="white"
+      borderRadius={4}
+      _hover={{ bg: "gray.100" }}
+      transition="background 0.2s"
+      aspectRatio={1.2}
+    >
+      <VStack align="center" justify="center" w="full" h="full" p={4} onClick={createExperiment}>
         <Icon as={isLoading ? Spinner : BsPlusSquare} boxSize={8} />
         <Text display={{ base: "none", md: "block" }} ml={2}>
           New Experiment
         </Text>
       </VStack>
-    </AspectRatio>
+    </Card>
   );
 };
 
 export const ExperimentCardSkeleton = () => (
   <AspectRatio ratio={1.2} w="full">
-    <VStack align="center" borderColor="gray.200" borderWidth={1} p={4} bg="gray.50">
+    <VStack align="center" borderColor="gray.200" borderWidth={1} p={4} bg="white">
       <SkeletonText noOfLines={1} w="80%" />
       <SkeletonText noOfLines={2} w="60%" />
       <SkeletonText noOfLines={1} w="80%" />
diff --git a/app/src/components/requestLogs/LoggedCallsTable.tsx b/app/src/components/requestLogs/LoggedCallsTable.tsx
index 8bd2133..31c3ce1 100644
--- a/app/src/components/requestLogs/LoggedCallsTable.tsx
+++ b/app/src/components/requestLogs/LoggedCallsTable.tsx
@@ -8,7 +8,7 @@ export default function LoggedCallsTable() {
   const { data: loggedCalls } = useLoggedCalls();
 
   return (
-    <Card variant="outline" width="100%" overflow="hidden">
+    <Card width="100%" overflow="hidden">
       <Table>
         <TableHeader />
         <Tbody>
diff --git a/app/src/pages/dashboard/index.tsx b/app/src/pages/dashboard/index.tsx
index 1e9d296..aa790b4 100644
--- a/app/src/pages/dashboard/index.tsx
+++ b/app/src/pages/dashboard/index.tsx
@@ -15,14 +15,10 @@ import {
   Tr,
   Td,
   Divider,
-  Breadcrumb,
-  BreadcrumbItem,
 } from "@chakra-ui/react";
 import { Ban, DollarSign, Hash } from "lucide-react";
 
 import AppShell from "~/components/nav/AppShell";
-import PageHeaderContainer from "~/components/nav/PageHeaderContainer";
-import ProjectBreadcrumbContents from "~/components/nav/ProjectBreadcrumbContents";
 import { useSelectedProject } from "~/utils/hooks";
 import { api } from "~/utils/api";
 import LoggedCallsTable from "~/components/dashboard/LoggedCallsTable";
@@ -38,24 +34,14 @@ export default function Dashboard() {
 
   return (
     <AppShell title="Dashboard" requireAuth>
-      <PageHeaderContainer>
-        <Breadcrumb>
-          <BreadcrumbItem>
-            <ProjectBreadcrumbContents />
-          </BreadcrumbItem>
-          <BreadcrumbItem isCurrentPage>
-            <Text>Dashboard</Text>
-          </BreadcrumbItem>
-        </Breadcrumb>
-      </PageHeaderContainer>
-      <VStack px={8} py={4} alignItems="flex-start" spacing={4}>
+      <VStack px={8} py={8} alignItems="flex-start" spacing={4}>
         <Text fontSize="2xl" fontWeight="bold">
-          {selectedProject?.name}
+          Dashboard
         </Text>
         <Divider />
         <VStack margin="auto" spacing={4} align="stretch" w="full">
           <HStack gap={4} align="start">
-            <Card variant="outline" flex={1}>
+            <Card flex={1}>
               <CardHeader>
                 <Heading as="h3" size="sm">
                   Usage Statistics
@@ -66,7 +52,7 @@ export default function Dashboard() {
               </CardBody>
             </Card>
             <VStack spacing="4" width="300px" align="stretch">
-              <Card variant="outline">
+              <Card>
                 <CardBody>
                   <Stat>
                     <HStack>
@@ -79,7 +65,7 @@ export default function Dashboard() {
                   </Stat>
                 </CardBody>
               </Card>
-              <Card variant="outline">
+              <Card>
                 <CardBody>
                   <Stat>
                     <HStack>
@@ -94,7 +80,7 @@ export default function Dashboard() {
                   </Stat>
                 </CardBody>
               </Card>
-              <Card variant="outline" overflow="hidden">
+              <Card overflow="hidden">
                 <Stat>
                   <CardHeader>
                     <HStack>
diff --git a/app/src/pages/project/settings/index.tsx b/app/src/pages/project/settings/index.tsx
index eb27abf..70f6824 100644
--- a/app/src/pages/project/settings/index.tsx
+++ b/app/src/pages/project/settings/index.tsx
@@ -80,6 +80,7 @@ export default function Settings() {
             borderWidth={1}
             borderRadius={4}
             borderColor="gray.300"
+            bgColor="white"
             p={6}
             spacing={6}
           >
diff --git a/app/src/pages/request-logs/index.tsx b/app/src/pages/request-logs/index.tsx
index 617d551..bb4c941 100644
--- a/app/src/pages/request-logs/index.tsx
+++ b/app/src/pages/request-logs/index.tsx
@@ -1,25 +1,17 @@
-import { Text, VStack, Breadcrumb, BreadcrumbItem } from "@chakra-ui/react";
+import { Text, VStack, Divider } from "@chakra-ui/react";
 
 import AppShell from "~/components/nav/AppShell";
-import PageHeaderContainer from "~/components/nav/PageHeaderContainer";
-import ProjectBreadcrumbContents from "~/components/nav/ProjectBreadcrumbContents";
 import LoggedCallTable from "~/components/requestLogs/LoggedCallsTable";
 import LoggedCallsPaginator from "~/components/requestLogs/LoggedCallsPaginator";
 
 export default function LoggedCalls() {
   return (
     <AppShell title="Request Logs" requireAuth>
-      <PageHeaderContainer>
-        <Breadcrumb>
-          <BreadcrumbItem>
-            <ProjectBreadcrumbContents />
-          </BreadcrumbItem>
-          <BreadcrumbItem isCurrentPage>
-            <Text>Request Logs</Text>
-          </BreadcrumbItem>
-        </Breadcrumb>
-      </PageHeaderContainer>
-      <VStack px={8} py={4} alignItems="flex-start" spacing={4}>
+      <VStack px={8} py={8} alignItems="flex-start" spacing={4} w="full">
+        <Text fontSize="2xl" fontWeight="bold">
+          Request Logs
+        </Text>
+        <Divider />
         <LoggedCallTable />
         <LoggedCallsPaginator />
       </VStack>