Fix info button styling

frontend/src/components/InfoPanel.js

@@ -19,12 +19,7 @@ import { QuestionOutlineIcon } from '@chakra-ui/icons'
 export function InfoPanel({ isOpen, onToggle, children }) {
   const btnRef = React.useRef()
   return (
-    <Drawer
-      isOpen={isOpen}
-      placement="bottom"
-      onClose={onToggle}
-      finalFocusRef={btnRef}
-    >
+    <Drawer isOpen={isOpen} placement="bottom" onClose={onToggle} finalFocusRef={btnRef}>
       <DrawerOverlay />
       <DrawerContent>
         <DrawerCloseButton />
@@ -60,7 +55,7 @@ export function InfoButton({ onToggle, ...props }) {
       {...props}
       icon={<QuestionOutlineIcon />}
       aria-label="Open glossary"
-      variant="outline"
+      variant="primaryOutline"
       mx="2"
       onClick={onToggle}
     />

frontend/src/components/RelayPaginationControls.js

@@ -38,6 +38,7 @@ export function RelayPaginationControls({
           aria-label="Items per page"
           isDisabled={isLoadingMore}
           value={selectedDisplayLimit}
+          borderColor="black"
           onChange={(e) => {
             setSelectedDisplayLimit(parseInt(e.target.value))
             resetToFirstPage() // Make sure to provide this as a prop if !onlyPagination

frontend/src/components/SearchBox.js

@@ -35,35 +35,12 @@ export function SearchBox({
   onToggle,
   ...props
 }) {
-  const orderIconName =
-    orderDirection === 'ASC' ? <ArrowUpIcon /> : <ArrowDownIcon />
+  const orderIconName = orderDirection === 'ASC' ? <ArrowUpIcon /> : <ArrowDownIcon />
   return (
-    <Box
-      {...props}
-      bg="gray.100"
-      p="2"
-      mb="4"
-      borderColor="gray.300"
-      borderWidth="1px"
-    >
-      <Flex
-        direction={{ base: 'column', md: 'row' }}
-        alignItems={{ base: 'stretch', md: 'center' }}
-      >
-        <Flex
-          direction="row"
-          minW={{ base: '100%', md: '50%' }}
-          alignItems="center"
-          flexGrow={1}
-        >
-          <Text
-            as="label"
-            htmlFor="Search-for-field"
-            fontSize="md"
-            fontWeight="bold"
-            textAlign="center"
-            mr={2}
-          >
+    <Box {...props} bg="gray.100" p="2" mb="4" borderColor="gray.300" borderWidth="1px">
+      <Flex direction={{ base: 'column', md: 'row' }} alignItems={{ base: 'stretch', md: 'center' }}>
+        <Flex direction="row" minW={{ base: '100%', md: '50%' }} alignItems="center" flexGrow={1}>
+          <Text as="label" htmlFor="Search-for-field" fontSize="md" fontWeight="bold" textAlign="center" mr={2}>
             <Trans>Search: </Trans>
           </Text>
           <InputGroup flexGrow={1}>
@@ -83,21 +60,16 @@ export function SearchBox({
             />
           </InputGroup>
         </Flex>
-        <InfoButton onToggle={onToggle} />
+        <InfoButton bg="gray.50" onToggle={onToggle} />
         <Stack isInline align="center" ml={{ md: '5%' }}>
-          <Text
-            as="label"
-            htmlFor="Sort-by-field"
-            fontSize="md"
-            fontWeight="bold"
-            textAlign="center"
-          >
+          <Text as="label" htmlFor="Sort-by-field" fontSize="md" fontWeight="bold" textAlign="center">
             <Trans>Sort by: </Trans>
           </Text>
           <Select
             id="Sort-by-field"
             aria-label="Sort by field"
             w="fit-content"
+            borderColor="black"
             size="md"
             onChange={(e) => {
               setOrderField(e.target.value)
@@ -117,9 +89,10 @@ export function SearchBox({
             icon={orderIconName}
             color="primary"
             bg="white"
+            borderColor="black"
+            borderWidth="1px"
             onClick={() => {
-              const newOrderDirection =
-                orderDirection === 'ASC' ? 'DESC' : 'ASC'
+              const newOrderDirection = orderDirection === 'ASC' ? 'DESC' : 'ASC'
               setOrderDirection(newOrderDirection)
               resetToFirstPage()
             }}

frontend/src/theme/components/Button.js

@@ -44,6 +44,10 @@ const Button = {
       bg: 'transparent',
       borderColor: 'primary',
       borderWidth: '1px',
+      _hover: {
+        color: 'primary',
+        bg: 'gray.200',
+      },
     },
     primaryWhite: {
       ...commonProps,