Update colors throughout app

2023-08-12 02:32:09 -07:00
parent ce6936f753
commit 723c0f7505
11 changed files with 84 additions and 65 deletions
--- 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} />
--- 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>
--- 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
--- 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>
--- 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
--- 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>
--- 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%" />
--- 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>
--- 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>
--- 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}
          >
--- 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>