[refactor] adjusting styling

calblueprint · Nov 16, 2024 · 7c71504 · 7c71504
1 parent 298cc81
commit 7c71504
Show file tree

Hide file tree

Showing 7 changed files with 69 additions and 41 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,14 +2,14 @@ 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;

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.4rem;
+  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/index.tsx b/components/TechnologyDropdown/index.tsx
@@ -14,6 +14,7 @@ import {
   ApplyButtonStyles,
   ButtonStyles,
   ButtonWithIconStyles,
+  CategoryDiv,
   CategoryTitleStyles,
   CheckboxContainer,
   CheckboxStyles,
@@ -140,7 +141,7 @@ export default function TechnologyDropdown({
           </ExitStyles>
         </ButtonWithIconStyles>
         {filter.categories.map(category => (
-          <div key={category.category}>
+          <CategoryDiv key={category.category}>
             <CategoryTitleStyles>{category.category}</CategoryTitleStyles>
             {category.options.map(option => (
               <CheckboxContainer key={option.title}>
@@ -159,7 +160,7 @@ export default function TechnologyDropdown({
                 />
               </CheckboxContainer>
             ))}
-          </div>
+          </CategoryDiv>
         ))}
         <ApplyButtonStyles>APPLY</ApplyButtonStyles>
       </FilterContentDiv>