[refactor] adjusting styling (#74)

* [refactor] adjusting styling * styling fixes
calblueprint · Nov 16, 2024 · bc354a0 · bc354a0
1 parent 298cc81
commit bc354a0
Show file tree

Hide file tree

Showing 7 changed files with 70 additions and 46 deletions.
diff --git a/assets/SearchBar-Icons/icons.tsx b/assets/SearchBar-Icons/icons.tsx
@@ -0,0 +1,29 @@
+export const SearchIcon = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="14"
+    height="14"
+    viewBox="0 0 14 14"
+    fill="none"
+  >
+    <path
+      d="M12.8063 14L7.98867 9.18149C5.84552 10.7052 2.89234 10.3325 1.19493 8.32411C-0.502472 6.31577 -0.377837 3.34178 1.48166 1.4825C3.34066 -0.377593 6.31494 -0.502768 8.32366 1.19455C10.3324 2.89187 10.7053 5.84533 9.18149 7.98867L13.9992 12.8072L12.8072 13.9992L12.8063 14ZM5.0576 1.68649C3.45905 1.68613 2.07992 2.80824 1.75518 4.37347C1.43045 5.93869 2.24937 7.51682 3.71614 8.15241C5.18291 8.78799 6.89438 8.30633 7.81437 6.99904C8.73436 5.69176 8.61 3.91815 7.51659 2.75204L8.0266 3.25783L7.45168 2.6846L7.44157 2.67448C6.81083 2.03986 5.95234 1.68408 5.0576 1.68649Z"
+      fill="#4974E0"
+    />
+  </svg>
+);
+
+export const SearchExit = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="10"
+    height="10"
+    viewBox="0 0 10 10"
+    fill="none"
+  >
+    <path
+      d="M8.59 0L5 3.59L1.41 0L0 1.41L3.59 5L0 8.59L1.41 10L5 6.41L8.59 10L10 8.59L6.41 5L10 1.41L8.59 0Z"
+      fill="#4974E0"
+    />
+  </svg>
+);
diff --git 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
@@ -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
@@ -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
@@ -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 (
     <SearchBarPaddingStyles>
       <SearchBarBackgroundStyles>
-        <IconStyles>
-          <IoIosSearch />
-        </IconStyles>
-        <SearchBarStyles type="text" placeholder="Search for a project" />
-        <IconStyles>
-          <AiOutlineClose />
-        </IconStyles>
+        <SearchBarDiv>
+          <SearchIcon />
+          <SearchBarStyles type="text" placeholder="Search for a project" />
+          <SearchExit />
+        </SearchBarDiv>
       </SearchBarBackgroundStyles>
     </SearchBarPaddingStyles>
   );

diff --git 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
@@ -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};