use current chakra ui component format

Author: dtemkin1

src/components/ActivityButtons.tsx

@@ -10,31 +10,17 @@ import {
   Text,
   createListCollection,
   parseColor,
+  ColorPicker,
+  Select,
+  Portal,
 } from "@chakra-ui/react";
 import type { ComponentPropsWithoutRef, FormEvent } from "react";
 import { useContext, useLayoutEffect, useState } from "react";
 
 import { LuCheck as CheckIcon, LuX as CloseIcon } from "react-icons/lu";
 import { Checkbox } from "./ui/checkbox";
-import {
-  ColorPickerArea,
-  ColorPickerChannelSlider,
-  ColorPickerContent,
-  ColorPickerControl,
-  ColorPickerEyeDropper,
-  ColorPickerInput,
-  ColorPickerRoot,
-  ColorPickerTrigger,
-} from "./ui/color-picker";
 import { Field } from "./ui/field";
 import { Radio, RadioGroup } from "./ui/radio";
-import {
-  SelectContent,
-  SelectItem,
-  SelectRoot,
-  SelectTrigger,
-  SelectValueText,
-} from "./ui/select";
 
 import type { Activity, NonClass } from "../lib/activity";
 import { Timeslot } from "../lib/activity";
@@ -219,24 +205,29 @@ function ActivityColor(props: { activity: Activity; onHide: () => void }) {
   return (
     <Flex gap={2}>
       <Flex direction="row" gap={2}>
-        <ColorPickerRoot
+        <ColorPicker.Root
           value={color}
           onValueChange={(e) => {
             setColor(e.value);
           }}
         >
-          <ColorPickerControl>
-            <ColorPickerInput autoFocus />
-            <ColorPickerTrigger />
-          </ColorPickerControl>
-          <ColorPickerContent>
-            <ColorPickerArea />
-            <HStack>
-              <ColorPickerEyeDropper />
-              <ColorPickerChannelSlider channel="hue" />
-            </HStack>
-          </ColorPickerContent>
-        </ColorPickerRoot>
+          <ColorPicker.HiddenInput />
+          <ColorPicker.Control>
+            <ColorPicker.Input autoFocus />
+            <ColorPicker.Trigger />
+          </ColorPicker.Control>
+          <Portal>
+            <ColorPicker.Positioner>
+              <ColorPicker.Content>
+                <ColorPicker.Area />
+                <HStack>
+                  <ColorPicker.EyeDropper />
+                  <ColorPicker.ChannelSlider channel="hue" />
+                </HStack>
+              </ColorPicker.Content>
+            </ColorPicker.Positioner>
+          </Portal>
+        </ColorPicker.Root>
         <ButtonGroup>
           <Button onClick={onReset}>Reset</Button>
           <Button onClick={onCancel}>Cancel</Button>
@@ -347,7 +338,7 @@ function NonClassAddTime(props: { activity: NonClass }) {
   });
 
   const renderTimeDropdown = (key: "start" | "end") => (
-    <SelectRoot
+    <Select.Root
       collection={timesCollection}
       size="sm"
       width="8rem"
@@ -356,17 +347,28 @@ function NonClassAddTime(props: { activity: NonClass }) {
         setTimes({ ...times, [key]: e.value[0] });
       }}
     >
-      <SelectTrigger>
-        <SelectValueText />
-      </SelectTrigger>
-      <SelectContent>
-        {timesCollection.items.map((time) => (
-          <SelectItem item={time} key={time}>
-            {time}
-          </SelectItem>
-        ))}
-      </SelectContent>
-    </SelectRoot>
+      <Select.HiddenSelect />
+      <Select.Control>
+        <Select.Trigger>
+          <Select.ValueText />
+        </Select.Trigger>
+        <Select.IndicatorGroup>
+          <Select.Indicator />
+        </Select.IndicatorGroup>
+      </Select.Control>
+      <Portal>
+        <Select.Positioner>
+          <Select.Content>
+            {timesCollection.items.map((time) => (
+              <Select.Item item={time} key={time}>
+                {time}
+                <Select.ItemIndicator />
+              </Select.Item>
+            ))}
+          </Select.Content>
+        </Select.Positioner>
+      </Portal>
+    </Select.Root>
   );
 
   return (

src/components/ClassTable.tsx

@@ -23,9 +23,16 @@ import {
   type Module,
 } from "ag-grid-community";
 
-import { Box, Flex, Image, Input, Button, ButtonGroup } from "@chakra-ui/react";
+import {
+  Box,
+  Flex,
+  Image,
+  Input,
+  Button,
+  ButtonGroup,
+  InputGroup,
+} from "@chakra-ui/react";
 import { LuPlus, LuMinus, LuSearch, LuStar } from "react-icons/lu";
-import { InputGroup } from "./ui/input-group";
 import { LabelledButton } from "./ui/button";
 import { useColorMode } from "./ui/color-mode";
 

src/components/FeedbackBanner.tsx

@@ -8,10 +8,11 @@ import {
   Float,
   Presence,
   CloseButton,
+  Button,
 } from "@chakra-ui/react";
-import { LinkButton } from "./ui/link-button";
 
 import { HydrantContext } from "../lib/hydrant";
+import { Link } from "react-router";
 
 export const FeedbackBanner = () => {
   const { state } = useContext(HydrantContext);
@@ -40,20 +41,20 @@ export const FeedbackBanner = () => {
             <Text fontWeight="medium" maxW={{ base: "32ch", md: "unset" }}>
               Do you have feedback on Hydrant? We'd love to hear it!
             </Text>
-            <LinkButton
+            <Button
               flexShrink={0}
               variant="plain"
-              href={"mailto:sipb-hydrant@mit.edu"}
               ms="6"
               bg="blackAlpha.300"
               color="whiteAlpha.900"
               fontWeight="semibold"
               px="3"
               py="1"
               height="inherit"
+              asChild
             >
-              Contact us
-            </LinkButton>
+              <Link to={"mailto:sipb-hydrant@mit.edu"}>Contact us</Link>
+            </Button>
             <CloseButton
               hideFrom="sm"
               variant="ghost"