scroll improvements

Author: ricokahler

src/client/components/giant-autosuggest.tsx

@@ -18,8 +18,30 @@ const Suggestions = styled(View)`
   position: absolute;
   top: 100%;
   width: 100%;
-  box-shadow: ${styles.boxShadow(-1)};
-  background-color: ${styles.deepCove};
+  background-color: ${styles.blackTer};
+  max-height: 15rem;
+  overflow: scroll;
+  & > * {
+    flex: 0 0 auto;
+  }
+  &::-webkit-scrollbar {
+    -webkit-appearance: none;
+  }
+
+  &::-webkit-scrollbar:vertical {
+    width: 11px;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    border-radius: 8px;
+    border: 2px solid ${styles.blackTer};
+    background-color: ${styles.gray};
+  }
+
+  &::-webkit-scrollbar-track:vertical {
+    background-color: ${styles.blackTer};
+    border-radius: 8px;
+  }
 `;
 const SuggestionWrapper = styled(View)``;
 const DontSee = styled(Text)`
@@ -29,6 +51,7 @@ const DontSee = styled(Text)`
   &:hover {
     text-decoration: underline;
     color: ${styles.turbo};
+    background-color: ${styles.deepKoamaru};
   }
   &:active {
     color: ${styles.beeKeeper};

src/client/routes/welcome/welcome.tsx

@@ -61,6 +61,7 @@ const Suggestion = styled<SuggestionProps>(Text)`
   font-size: ${styles.space(2)};
   background-color: ${props => (props.selected ? styles.deepKoamaru : 'transparent')};
   color: ${styles.turbo};
+  padding: ${styles.space(0)};
 `;
 const Mail = styled.a`
   color: ${styles.turbo};
@@ -99,7 +100,7 @@ interface WelcomeProps {
 interface WelcomeState {
   gotStarted: boolean;
   search: string;
-  dontSeeModalOpen: boolean;
+  selectedDegreeId: string | undefined;
 }
 
 const getDisplayText = (degree: Model.MasteredDegree.Model) => degree.name;
@@ -109,7 +110,7 @@ export class Welcome extends React.PureComponent<WelcomeProps, WelcomeState> {
   state: WelcomeState = {
     gotStarted: false,
     search: '',
-    dontSeeModalOpen: false,
+    selectedDegreeId: undefined,
   };
 
   searchRef = React.createRef<HTMLInputElement>();
@@ -147,7 +148,9 @@ export class Welcome extends React.PureComponent<WelcomeProps, WelcomeState> {
     this.setState({ search });
   };
 
-  handleSelectDegree = (degreeId: string) => {};
+  handleSelectDegree = (selectedDegreeId: string) => {
+    this.setState({ selectedDegreeId });
+  };
   handleFocus = (e: React.FocusEvent<HTMLInputElement>) => {};
   handleBlur = (e: React.FocusEvent<HTMLInputElement>) => {};