Moves term selector (#496)

* moved dropdown

* thicken border

* fix

* fill color on hover

* change on focus

* Update TermSelect.tsx

src/common/header/components/TermSelect.tsx

@@ -42,10 +42,23 @@ export function TermSelect(): JSX.Element {
     }
   };
 
+  let colorMap: { [key: string]: string } = {};
+  colorMap['09'] = mode('green.300', 'green.500');
+  colorMap['01'] = mode('blue.300', 'blue.500');
+  colorMap['05'] = mode('yellow.300', 'yellow.500');
+
   // TODO: A "bug" in Firefox for macOS is preventing the `option` components
-  // from inheriting the `Select` background color this leads to eligible text in the options.
+  // from inheriting the `Select` background color this leads to illegible text in the options.
   return (
-    <Select borderColor={mode('green.500', 'green.300')} value={selectedTerm} onChange={onChange} minW="150px">
+    <Select
+      borderColor={colorMap[selectedTerm.slice(-2)]}
+      value={selectedTerm}
+      onChange={onChange}
+      minW="150px"
+      borderWidth="2px"
+      _hover={{ bgColor: colorMap[selectedTerm.slice(-2)] }}
+      _focus={{ borderColor: colorMap[selectedTerm.slice(-2)] }}
+    >
       {terms.map((term, i) => {
         return (
           <option key={i} value={term}>

src/common/header/containers/HeaderContainer.tsx

@@ -104,10 +104,12 @@ export function HeaderContainer({ onSearchChange }: HeaderProps): JSX.Element {
               </Text>
             </LinkBox>
             <Search onChange={onSearchChange} />
-            <NavButtons />
-            <Spacer />
             <HStack>
               <TermSelect />
+            </HStack>
+            <Spacer />
+            <NavButtons />
+            <HStack>
               <MiscHeaderButtons />
             </HStack>
           </HStack>