From 5ec6bf8c2922dcb7f4cbcb8320dbd05cd450158f Mon Sep 17 00:00:00 2001 From: Neshura 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)` 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` + 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` 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` 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 ( handleBlur(event)}> - setTest(test => !test)}>{selectedTheme.themeName} + setTest(test => !test)}>{selectedTheme.themeName} {themes.map((theme) => ( updateThemeWithStorage(theme)}>