From 5ee7c8ef2e8d2cb9a06b77aef11b066e587a72be Mon Sep 17 00:00:00 2001
From: Neshura <neshura@proton.me>
Date: Sat, 17 Dec 2022 21:35:40 +0100
Subject: [PATCH] Fixed console errors, added Delay to themeselector transition

Transition now only rounds the corners after the dropdown is retracted
---
 components/styles/navbar.tsx        | 2 +-
 components/styles/themedropdown.tsx | 6 ++++--
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/components/styles/navbar.tsx b/components/styles/navbar.tsx
index d3642ed..7453992 100644
--- a/components/styles/navbar.tsx
+++ b/components/styles/navbar.tsx
@@ -2,7 +2,7 @@ import styled from 'styled-components'
 import Link from 'next/link';
 
 interface ActivePropType {
-  active?: false | true;
+  active?: number;
 }
 
 export const NavWrap = styled.div`
diff --git a/components/styles/themedropdown.tsx b/components/styles/themedropdown.tsx
index a11879b..45c7cc7 100644
--- a/components/styles/themedropdown.tsx
+++ b/components/styles/themedropdown.tsx
@@ -1,11 +1,11 @@
 import styled from 'styled-components';
 
 interface DisplayPropType {
-  show?: false | true;
+  show?: number;
 }
 
 interface ActivePropType {
-  active?: false | true;
+  active?: number;
 }
 
 export const ThemeDropDown = styled.div`
@@ -28,6 +28,7 @@ export const ThemeDropDownButton = styled.button<DisplayPropType>`
   transition-property: color, border-bottom-left-radius, border-bottom-right-radius;
   transition-timing-function: ease;
   transition-duration: 0.15s;
+  transition-delay: 0, ${ props => props.show ? "0s" : "0.6s" };
 
   &:focus,:hover {
     color: ${({ theme }) => theme.colors.secondary};
@@ -62,6 +63,7 @@ export const ThemeDropDownOptions = styled.div<DisplayPropType>`
 export const ThemeDropDownOption = styled.button<ActivePropType>`
   color: ${ props => props.active ? ({ theme }) => theme.colors.secondary : ({ theme }) => theme.colors.primary };
   background-color: ${({ theme }) => theme.colors.background};
+  cursor: pointer;
   align-self: center;
   border: 0px solid;
   padding: 0.2rem 0.5rem;