ui: Added global styles to customize rc-select dropdown menus

Author: itsrachelfish

app/src/components/layout/Layout.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { observer } from 'mobx-react-lite';
+import { Global, Theme } from '@emotion/react';
 import styled from '@emotion/styled';
 import { useStore } from 'store';
 import { Background, Menu } from 'components/base';
@@ -10,6 +11,47 @@ interface CollapsedProps {
   fullWidth?: boolean;
 }
 
+const GlobalStyles = (theme: Theme) => `
+  .rc-select-dropdown {
+    padding-top: 10px;
+    background-color: transparent;
+
+    & > div {
+      color: ${theme.colors.offWhite};
+      background-color: ${theme.colors.lightBlue};
+      border-width: 0;
+      border-radius: 8px;
+      box-shadow: 0px 16px 16px rgba(0, 0, 0, 0.15);
+      overflow: hidden;
+    }
+  }
+
+  .rc-select-item {
+    color: ${theme.colors.white};
+    font-family: ${theme.fonts.open.regular};
+    font-weight: 600;
+    font-size: ${theme.sizes.s};
+    line-height: 24px;
+    padding: 16px;
+    border-bottom: 1px solid ${theme.colors.paleBlue};
+
+    &:last-of-type {
+      border-bottom: none;
+    }
+
+    &:hover {
+      color: ${theme.colors.white};
+      background-color: ${theme.colors.blue};
+      cursor: pointer;
+    }
+
+    & > .rc-select-item-option-state {
+        top: 16px;
+        right: 12px;
+      }
+  }
+`;
+
 const Styled = {
   Container: styled.div<{ fullWidth: boolean }>`
     position: relative;
@@ -86,6 +128,7 @@ export const Layout: React.FC = ({ children }) => {
           <Fluid className="container-fluid">{children}</Fluid>
         </Content>
       </Container>
+      <Global styles={GlobalStyles} />
     </Background>
   );
 };

app/src/components/theme.tsx

@@ -42,6 +42,8 @@ const theme: Theme = {
     purple: '#57038d',
     overlay: 'rgba(245,245,245,0.04)',
     gradient: 'linear-gradient(325.53deg, #252F4A 0%, #46547B 100%);',
+    lightBlue: '#384770',
+    paleBlue: '#2E3A5C',
   },
 };
 

app/src/emotion-theme.d.ts

@@ -38,6 +38,8 @@ declare module '@emotion/react' {
       purple: string;
       overlay: string;
       gradient: string;
+      lightBlue: string;
+      paleBlue: string;
     };
   }
 }