Improve accessibility & SEO

hyperglass/ui/components/ChakraSelect.js

@@ -1,4 +1,4 @@
-import React from "react";
+import * as React from "react";
 import { Text, useColorMode, useTheme } from "@chakra-ui/core";
 import Select from "react-select";
 import { opposingColor } from "~/util";
@@ -61,11 +61,26 @@ const ChakraSelect = React.forwardRef(
       dark: theme.colors.whiteAlpha[700],
       light: theme.colors.gray[600]
     };
-    const menuBg = { dark: theme.colors.black, light: theme.colors.white };
+    const menuBg = {
+      dark: theme.colors.blackFaded[800],
+      light: theme.colors.whiteFaded[50]
+    };
     const menuColor = {
       dark: theme.colors.white,
       light: theme.colors.blackAlpha[800]
     };
+    const scrollbar = {
+      dark: theme.colors.whiteAlpha[300],
+      light: theme.colors.blackAlpha[300]
+    };
+    const scrollbarHover = {
+      dark: theme.colors.whiteAlpha[400],
+      light: theme.colors.blackAlpha[400]
+    };
+    const scrollbarBg = {
+      dark: theme.colors.whiteAlpha[50],
+      light: theme.colors.blackAlpha[50]
+    };
     return (
       <Select
         ref={ref}
@@ -96,6 +111,21 @@ const ChakraSelect = React.forwardRef(
             backgroundColor: menuBg[colorMode],
             borderRadius: borderRadius
           }),
+          menuList: base => ({
+            ...base,
+            "&::-webkit-scrollbar": { width: "5px" },
+            "&::-webkit-scrollbar-track": {
+              backgroundColor: scrollbarBg[colorMode]
+            },
+            "&::-webkit-scrollbar-thumb": {
+              backgroundColor: scrollbar[colorMode]
+            },
+            "&::-webkit-scrollbar-thumb:hover": {
+              backgroundColor: scrollbarHover[colorMode]
+            },
+
+            "-ms-overflow-style": { display: "none" }
+          }),
           option: (base, state) => ({
             ...base,
             backgroundColor: state.isDisabled

hyperglass/ui/public/robots.txt

@@ -0,0 +1,2 @@
+User-agent: *
+Disallow: /*__*

hyperglass/ui/theme.js

@@ -113,6 +113,7 @@ const generatePalette = palette => {
     } else {
       generatedPalette[color] = palette[color];
       generatedPalette[`${color}Alpha`] = alphaColors(palette[color]);
+      generatedPalette[`${color}Faded`] = generateColors(palette[color]);
     }
   });
   return generatedPalette;