Addresses #29, #28, #26, #20, #19

components/styles/themedropdown/desktop.tsx

@@ -0,0 +1,92 @@
+import styled from 'styled-components';
+
+interface DisplayPropType {
+  focus?: number,
+  show?: number;
+}
+
+interface ActivePropType {
+  active?: number;
+}
+
+export const ThemeDropDown = styled.div`
+  margin-left: 1%;
+  min-width: 180px;
+  color: ${({ theme }) => theme.colors.primary};
+`
+
+export const ThemeDropDownButton = styled.button<DisplayPropType>`
+  width: 160px;
+  border: 2px solid;
+  border-radius: 5px;
+  background-color: ${ props => props.focus ? 
+    ({ theme }) => theme.invertButtons ? theme.colors.secondary : theme.colors.background : 
+    ({ theme }) => theme.colors.background};
+  padding: 2px 6px;
+  cursor: pointer;
+  color: ${props => props.focus ? ({ theme }) => theme.invertButtons ? 
+    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-color;
+  transition-timing-function: ease;
+  transition-duration: 0.15s;
+  transition-delay: 0s, ${ props => props.show ? "0s, 0s" : "0.6s, 0.6s" }, 0s;
+
+  &:focus,:hover {
+    color: ${({ theme }) => theme.invertButtons ? 
+    theme.colors.text ? theme.colors.text : theme.colors.primary :
+    theme.colors.secondary};
+
+    background-color: ${({ theme }) => theme.invertButtons ? 
+    theme.colors.secondary :
+    theme.colors.background};
+  }
+
+  border-bottom-left-radius: ${ props => props.show ? "0" : "" };
+  border-bottom-right-radius: ${ props => props.show ? "0" : "" };
+`
+
+export const ThemeDropDownOptions = styled.div<DisplayPropType>`
+  position: absolute;
+  color: ${({ theme }) => theme.colors.primary};
+  background-image: ${({ theme }) => theme.backgroundImage ? 
+  "linear-gradient("
+  + theme.colors.background + "," + theme.colors.background +
+  "), url(" + theme.backgroundImage + ")" : ""};
+  background-repeat: no-repeat;
+  background-attachment: fixed;
+  background-size: cover;
+
+  display: flex;
+  flex-direction: column;
+  min-width: 160px;
+  border: 1px solid;
+  border-top: 0;
+  border-radius: 5px;
+  border-top-left-radius: 0px; border-top-right-radius: 0px;
+  z-index: 1;
+  overflow: ${ props => props.show ? "scroll" : "hidden" };
+  max-height: ${ props => props.show ? "20%" : "0%" };
+  visibility: ${ props => props.show ? "visible" : "hidden" };
+
+  transition-property: max-height, visibility;
+  transition-timing-function: ease-in-out;
+  transition-duration: 0.6s, 0s;
+  transition-delay: 0s, ${ props => props.show ? "0s" : "0.5s" };
+`
+
+export const ThemeDropDownOption = styled.button<ActivePropType>`
+  color: ${ props => props.active ? ({ theme }) => theme.colors.secondary : ({ theme }) => theme.colors.primary };
+  background-color: transparent;
+  cursor: pointer;
+  align-self: center;
+  border: 0px solid;
+  padding: 0.2rem 0.5rem;
+  text-decoration: none;
+  width: 90%;
+
+  &:hover {
+    color: ${({ theme }) => theme.colors.secondary};
+  }
+`

components/styles/themedropdown/mobile.tsx

@@ -0,0 +1,49 @@
+import styled from 'styled-components';
+import { ThemeDropDown, ThemeDropDownButton, ThemeDropDownOption, ThemeDropDownOptions } from './desktop';
+
+export const ThemeDropDownMobile = styled(ThemeDropDown)`
+  width: 80%;
+  margin-left: 1rem;
+`; 
+
+export const ThemeDropDownButtonMobile = styled(ThemeDropDownButton)`
+  width: 100%;
+  padding: 0.5rem;
+  border: none;
+  border-top: 2px solid;
+  border-left: ${ props => props.show ? "2px solid" : "0px solid"};
+  border-right: ${ props => props.show ? "2px solid" : "0px solid"};
+
+  color: ${props => ({ theme }) => props.focus ? theme.colors.secondary : theme.colors.primary};
+  background-color: ${({ theme }) => theme.colors.backgroundAlt ? theme.colors.backgroundAlt : theme.colors.background};
+
+  &:focus,:hover  {
+    color: ${({ theme }) => theme.colors.secondary};
+
+    background-color: ${({ theme }) => theme.colors.backgroundAlt ? theme.colors.backgroundAlt : theme.colors.background};
+  }
+
+  transition-property: color, border-bottom-left-radius, border-bottom-right-radius, background-color, border-left, border-right;
+  transition-timing-function: ease;
+  transition-duration: 0.15s;
+  transition-delay: 0s, ${ props => props.show ? "0s" : "0.6s, 0.6s, 0s, 0.6s, 0.6s" };
+`;
+
+export const ThemeDropDownOptionsMobile = styled(ThemeDropDownOptions)`
+  background-image: unset;
+  background-color: ${({ theme }) => theme.colors.background};
+  border: 2px solid ${props => ({ theme }) => props.focus ? theme.colors.secondary : theme.colors.primary};
+  border-top: 0;
+  max-height: ${ props => props.show ? "100%" : "0%"};
+  position: relative;
+  width: 100%;
+`;
+
+export const ThemeDropDownOptionMobile = styled(ThemeDropDownOption)`
+  text-align: left;
+  margin: 0.5rem;
+  padding: 0rem 0.5rem;
+  width: 80%;
+  border-left: 2px solid;
+  border-radius: 5px;
+`;