From bc354a0b782d3f6fa7e3de15e98050c745a17758 Mon Sep 17 00:00:00 2001 From: Monique <63492974+itsliterallymonique@users.noreply.github.com> Date: Fri, 15 Nov 2024 18:14:41 -0800 Subject: [PATCH] [refactor] adjusting styling (#74) * [refactor] adjusting styling * styling fixes --- assets/SearchBar-Icons/icons.tsx | 29 ++++++++++++++++++++ components/Filter/styles.ts | 11 ++++---- components/ProjectModal/styles.ts | 11 ++++---- components/ProjectsListingModal/styles.ts | 12 +++++---- components/SearchBar/index.tsx | 17 +++++------- components/SearchBar/styles.ts | 32 +++++++++++------------ components/TechnologyDropdown/styles.ts | 4 --- 7 files changed, 70 insertions(+), 46 deletions(-) create mode 100644 assets/SearchBar-Icons/icons.tsx diff --git a/assets/SearchBar-Icons/icons.tsx b/assets/SearchBar-Icons/icons.tsx new file mode 100644 index 0000000..7461b39 --- /dev/null +++ b/assets/SearchBar-Icons/icons.tsx @@ -0,0 +1,29 @@ +export const SearchIcon = () => ( + + + +); + +export const SearchExit = () => ( + + + +); diff --git a/components/Filter/styles.ts b/components/Filter/styles.ts index ff909c2..16519ce 100644 --- a/components/Filter/styles.ts +++ b/components/Filter/styles.ts @@ -2,18 +2,18 @@ import styled from 'styled-components'; import { FilterHeadingUnused } from '@/styles/texts'; export const FilterBackgroundStyles = styled.div<{ isActive: boolean }>` - margin-right: 0.375rem; + margin-right: 0.5rem; background: linear-gradient( 180deg, rgba(250, 250, 250, 0.32) 0%, rgba(238, 238, 238, 0.65) 100% ); backdrop-filter: blur(7.5px); - padding: 0.35rem 0.35rem; + padding: 0.25rem; z-index: 5; border: 0.05rem solid #fff; - margin-top: 0.75rem; - max-height: ${({ isActive }) => (isActive ? 'auto' : '2rem')}; + margin-top: 1rem; + max-height: ${({ isActive }) => (isActive ? 'auto' : '2.2rem')}; border-radius: ${({ isActive }) => (isActive ? '0.5rem' : '6.25rem')}; transition: height 0.5s ease-in-out; `; @@ -28,9 +28,10 @@ export const FilterButtonStyles = styled.button` line-height: normal; display: flex; align-items: center; - gap: 0.75rem; + gap: 1rem; padding: 0.5rem 1rem; color: rgba(46, 58, 89, 0.85); + height: 2.2rem; `; export const IconStyle = styled.div` diff --git a/components/ProjectModal/styles.ts b/components/ProjectModal/styles.ts index 3c3f57d..e812e73 100644 --- a/components/ProjectModal/styles.ts +++ b/components/ProjectModal/styles.ts @@ -15,13 +15,14 @@ export const modalContentStyles: CSSProperties = { width: '90vw', maxWidth: '22.25rem', height: '85vh', - borderRadius: 'var(--Spacing-Small, 16px)', + borderRadius: + 'var(--Spacing-Medium, 1.5rem) var(--Spacing-Medium, 1.5rem) 1.875rem 1.875rem', border: '0.75px solid var(--WorldPeas-White, #fff)', background: 'linear-gradient(180deg, rgba(250, 250, 250, 0.32) 0%, rgba(238, 238, 238, 0.65) 100%)', backdropFilter: 'blur(7.5px)', - paddingTop: '0.625rem', - paddingBottom: '0.625rem', + paddingTop: '0.25rem', + paddingBottom: '0.25rem', boxSizing: 'border-box', flexDirection: 'column', alignItems: 'center', @@ -32,10 +33,10 @@ export const ProjectDetails = styled.div` display: flex; flex-direction: column; align-items: center; - border-radius: var(--Spacing-Small, 16px); + border-radius: var(--Spacing-Small, 1.2rem); height: 100%; background: ${COLORS.white}; - width: 21.25rem; + width: 21.6rem; overflow-y: auto; `; diff --git a/components/ProjectsListingModal/styles.ts b/components/ProjectsListingModal/styles.ts index 52c6689..b84357f 100644 --- a/components/ProjectsListingModal/styles.ts +++ b/components/ProjectsListingModal/styles.ts @@ -15,26 +15,28 @@ export const modalContentStyles: CSSProperties = { width: '90vw', maxWidth: '22.25rem', height: '85vh', - borderRadius: 'var(--Spacing-Small, 16px)', + borderRadius: + 'var(--Spacing-Medium, 1.5rem) var(--Spacing-Medium, 1.5rem) 1.875rem 1.875rem', border: '0.75px solid var(--WorldPeas-White, #fff)', background: 'linear-gradient(180deg, rgba(250, 250, 250, 0.32) 0%, rgba(238, 238, 238, 0.65) 100%)', backdropFilter: 'blur(7.5px)', - paddingTop: '0.625rem', - paddingBottom: '0.625rem', + paddingTop: '0.25rem', + paddingBottom: '0.25rem', boxSizing: 'border-box', flexDirection: 'column', alignItems: 'center', + overflow: 'hidden', }; export const ProjectDetails = styled.div` display: flex; flex-direction: column; align-items: center; - border-radius: var(--Spacing-Small, 16px); + border-radius: var(--Spacing-Small, 1.2rem); height: 100%; background: ${COLORS.white}; - width: 21.25rem; + width: 21.6rem; overflow-y: auto; gap: 0.75rem; padding-bottom: 0.8125rem; diff --git a/components/SearchBar/index.tsx b/components/SearchBar/index.tsx index 3bfda0f..b6a0888 100644 --- a/components/SearchBar/index.tsx +++ b/components/SearchBar/index.tsx @@ -1,8 +1,7 @@ -import { AiOutlineClose } from 'react-icons/ai'; -import { IoIosSearch } from 'react-icons/io'; +import { SearchExit, SearchIcon } from '@/assets/SearchBar-Icons/icons'; import { - IconStyles, SearchBarBackgroundStyles, + SearchBarDiv, SearchBarPaddingStyles, SearchBarStyles, } from './styles'; @@ -11,13 +10,11 @@ export const SearchBar = () => { return ( - - - - - - - + + + + + ); diff --git a/components/SearchBar/styles.ts b/components/SearchBar/styles.ts index cac4fc5..6403d3d 100644 --- a/components/SearchBar/styles.ts +++ b/components/SearchBar/styles.ts @@ -4,50 +4,48 @@ import COLORS from '../../styles/colors'; export const SearchBarPaddingStyles = styled.div` display: inline-flex; position: absolute; - top: 3%; - left: 1.7%; + top: 1.26rem; + left: 1.25rem; background: linear-gradient( 180deg, rgba(250, 250, 250, 0.32) 0%, rgba(238, 238, 238, 0.65) 100% ); backdrop-filter: blur(7.5px); - padding: 0.5rem; + padding: 0.3rem; align-items: center; gap: 0.4rem; - border-radius: 0.75rem; + border-radius: 6.25rem; border: 0.05rem solid #fff; z-index: 3; `; export const SearchBarBackgroundStyles = styled.div` display: flex; - width: 21.3rem; - height: 3.1rem; + width: 21.6rem; + height: 2.75rem; padding: 0.3rem 1.8rem; flex-direction: row; justify-content: center; align-items: center; flex-shrink: 0; gap: 0.5rem; - border-radius: 0.5rem; - background: #fff; + border-radius: 6.25rem; + background: ${COLORS.white}; box-sizing: border-box; `; export const SearchBarStyles = styled.input` + padding-left: 0.75rem; border: none; outline: none; box-shadow: none; - width: 80%; - color: #4974e0; - font-size: 0.9rem; - font-family: CoinbaseText, sans-serif; + padding-right: 7rem; `; -export const IconStyles = styled.div` - width: 1.1rem; - height: 1.1rem; - flex-shrink: 0; - color: ${COLORS.electricBlue}; +export const SearchBarDiv = styled.div` + display: flex; + flex-direction: row; + align-items: center; + justify-content: space-between; `; diff --git a/components/TechnologyDropdown/styles.ts b/components/TechnologyDropdown/styles.ts index a813541..5e55eb9 100644 --- a/components/TechnologyDropdown/styles.ts +++ b/components/TechnologyDropdown/styles.ts @@ -25,10 +25,6 @@ export const CheckboxContainer = styled.div` margin-bottom: -0.875rem; `; -export const CategoryDiv = styled.div` - display: flex; -`; - export const CategoryTitleStyles = styled.p` display: flex; font-family: ${CoinbaseMono};