Make select disabled more clear and unify input fonts

src/components/Select.js

@@ -23,6 +23,7 @@ function Select({ creatable, ...props }) {
           borderColor: theme.colors.gray,
           borderStyle: "solid",
           borderWidth: "1px",
+          fontFamily: theme.fonts.body2,
         }),
         control: (provided, state) => ({
           ...provided,
@@ -33,12 +34,20 @@ function Select({ creatable, ...props }) {
         singleValue: (provided, state) => ({
           ...provided,
           color: getColor(state),
+          fontFamily: theme.fonts.body2,
+        }),
+        option: (provided, state) => ({
+          ...provided,
+          color: getColor(state),
+          opacity: state.isDisabled ? 0.5 : 1,
         }),
         dropdownIndicator: (provided, state) => ({
           ...provided,
           color: getColor(state),
           ":hover": {
-            color: state.isDisabled ? theme.colors.gray : theme.colors.primary,
+            color: state.isDisabled
+              ? theme.colors.disabled
+              : theme.colors.primary,
           },
         }),
         input: (provided, state) => ({

src/theme.js

@@ -24,12 +24,12 @@ export default {
     },
   },
   fonts: {
-    body: "'Bree Serif', serif",
+    body: "'Bree Serif', Georgia, serif",
     body2:
       "system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif",
     heading: "'Bree Serif', serif",
     monospace: "Menlo, monospace",
-    display: "'Pacifico', cursive",
+    display: "'Pacifico', Helvetica, sans-serif",
   },
   fontSizes: [12, 14, 16, 20, 24, 32, 48, 64, 72],
   fontWeights: {
@@ -178,6 +178,7 @@ export default {
         color: "gray",
         borderColor: "text",
       },
+      fontFamily: "body2",
     },
     slider: {
       "&:disabled": {