From 5ec6bf8c2922dcb7f4cbcb8320dbd05cd450158f Mon Sep 17 00:00:00 2001
From: Neshura <neshura@proton.me>
Date: Sat, 17 Dec 2022 01:56:41 +0100
Subject: [PATCH] Progress on #18, #3

---
 components/styles/navbar.tsx        |  1 +
 components/styles/themedropdown.tsx | 31 ++++++++++++++++++++++++-----
 components/themeselector.tsx        |  2 +-
 3 files changed, 28 insertions(+), 6 deletions(-)

diff --git a/components/styles/navbar.tsx b/components/styles/navbar.tsx
index 01eb8e3..fda435e 100644
--- a/components/styles/navbar.tsx
+++ b/components/styles/navbar.tsx
@@ -27,6 +27,7 @@ export const NavLink = styled(Link)<ActivePropType>`
   color: ${props => props.active ? ({ theme }) => theme.colors.secondary : ({ theme }) => theme.colors.primary};
   margin: 0.2rem;
   border: 1px solid;
+  border-radius: 5px;
   padding: 0.2rem 0.5rem;
   display: flex;
   justify-content: center;
diff --git a/components/styles/themedropdown.tsx b/components/styles/themedropdown.tsx
index 43f9528..a11879b 100644
--- a/components/styles/themedropdown.tsx
+++ b/components/styles/themedropdown.tsx
@@ -16,36 +16,57 @@ export const ThemeDropDown = styled.div`
   flex-direction: column;
 `
 
-export const ThemeDropDownButton = styled.button`
-  width: 90%;
+export const ThemeDropDownButton = styled.button<DisplayPropType>`
+  width: 160px;
   border: 1px solid;
+  border-radius: 5px;
   background-color: ${({ theme }) => theme.colors.background};
   padding: 0.2rem 0.5rem;
   cursor: pointer;
   color: ${({ theme }) => theme.colors.primary};
-  transition: color 0.15s ease;
+
+  transition-property: color, border-bottom-left-radius, border-bottom-right-radius;
+  transition-timing-function: ease;
+  transition-duration: 0.15s;
 
   &:focus,:hover {
     color: ${({ theme }) => theme.colors.secondary};
   }
+
+  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-color: ${({ theme }) => theme.colors.background};
-  display: ${ props => props.show ? "flex" : "none" };
+  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: 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: ${({ theme }) => theme.colors.background};
-  border: 1px solid;
+  align-self: center;
+  border: 0px solid;
   padding: 0.2rem 0.5rem;
   text-decoration: none;
+  width: 90%;
 
   &:hover {
     color: ${({ theme }) => theme.colors.secondary};
diff --git a/components/themeselector.tsx b/components/themeselector.tsx
index 8e771a6..8db0066 100644
--- a/components/themeselector.tsx
+++ b/components/themeselector.tsx
@@ -55,7 +55,7 @@ export const StyleSelector = () => {
   return (
 
     <ThemeDropDown onBlur={(event) => handleBlur(event)}>
-      <ThemeDropDownButton onClick={() => setTest(test => !test)}>{selectedTheme.themeName}</ThemeDropDownButton>
+      <ThemeDropDownButton show={test} onClick={() => setTest(test => !test)}>{selectedTheme.themeName}</ThemeDropDownButton>
       <ThemeDropDownOptions id="themesDropdown" show={test}>
         {themes.map((theme) => (
           <ThemeDropDownOption active={theme === selectedTheme} key={theme.themeId} onClick={() => updateThemeWithStorage(theme)}>