From 97122c492eb222e6839c4d6f25c75bd069859bbf Mon Sep 17 00:00:00 2001
From: checktheroads <matt@allroads.io>
Date: Sat, 4 Jul 2020 14:58:39 -0700
Subject: [PATCH] Improve accessibility & SEO

---
 hyperglass/ui/components/ChakraSelect.js | 34 ++++++++++++++++++++++--
 hyperglass/ui/public/robots.txt          |  2 ++
 hyperglass/ui/theme.js                   |  1 +
 3 files changed, 35 insertions(+), 2 deletions(-)
 create mode 100644 hyperglass/ui/public/robots.txt

diff --git a/hyperglass/ui/components/ChakraSelect.js b/hyperglass/ui/components/ChakraSelect.js
index b341b5b..93ff37f 100644
--- a/hyperglass/ui/components/ChakraSelect.js
+++ b/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
diff --git a/hyperglass/ui/public/robots.txt b/hyperglass/ui/public/robots.txt
new file mode 100644
index 0000000..3f49e23
--- /dev/null
+++ b/hyperglass/ui/public/robots.txt
@@ -0,0 +1,2 @@
+User-agent: *
+Disallow: /*__*
\ No newline at end of file
diff --git a/hyperglass/ui/theme.js b/hyperglass/ui/theme.js
index d6123ca..10d27d9 100644
--- a/hyperglass/ui/theme.js
+++ b/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;