Final changes for now

components/styles/themedropdown.tsx

@@ -12,16 +12,14 @@ interface ActivePropType {
 export const ThemeDropDown = styled.div`
   margin-left: 1%;
   min-width: 180px;
-  color: ${({ theme }) => theme.colors.primary}
-  display: flex;
-  flex-direction: column;
+  color: ${({ theme }) => theme.colors.primary};
 `
 
 export const ThemeDropDownButton = styled.button<DisplayPropType>`
   width: 160px;
   border: 2px solid;
   border-radius: 5px;
-  background-color: ${props => props.focus ? 
+  background-color: ${ props => props.focus ? 
     ({ theme }) => theme.invertButtons ? theme.colors.secondary : theme.colors.background : 
     ({ theme }) => theme.colors.background};
   padding: 2px 6px;
@@ -30,7 +28,7 @@ export const ThemeDropDownButton = styled.button<DisplayPropType>`
     theme.colors.text ? theme.colors.text : theme.colors.primary : theme.colors.secondary : 
     ({ theme }) => theme.colors.primary};
 
-  transition-property: color, border-bottom-left-radius, border-bottom-right-radius, background;
+  transition-property: color, border-bottom-left-radius, border-bottom-right-radius, background-color;
   transition-timing-function: ease;
   transition-duration: 0.15s;
   transition-delay: 0s, ${ props => props.show ? "0s, 0s" : "0.6s, 0.6s" }, 0s;
@@ -52,8 +50,6 @@ export const ThemeDropDownButton = styled.button<DisplayPropType>`
 export const ThemeDropDownOptions = styled.div<DisplayPropType>`
   position: absolute;
   color: ${({ theme }) => theme.colors.primary};
-
-  background-color: ${({ theme }) => theme.colors.background};
   background-image: ${({ theme }) => theme.backgroundImage ? 
   "linear-gradient("
   + theme.colors.background + "," + theme.colors.background +
@@ -70,7 +66,7 @@ export const ThemeDropDownOptions = styled.div<DisplayPropType>`
   border-radius: 5px;
   border-top-left-radius: 0px; border-top-right-radius: 0px;
   z-index: 1;
-  overflow: hidden;
+  overflow: ${ props => props.show ? "scroll" : "hidden" };
   max-height: ${ props => props.show ? "20%" : "0%" };
   visibility: ${ props => props.show ? "visible" : "hidden" };