[feat] Styling Status Filter

.vercelignore

@@ -7,4 +7,8 @@ nyserda_large.json
 nyserda_scraper.py
 nyserda_small.json
 __init__.py
-scraper_utils.py
+scraper_utils.py
+ores_scraper.py
+nyiso_scraper.cpython-312.pyc
+nyserda_scraper.cpython-312.pyc
+database_constants.cpython-312.pyc

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>
+);

components/Filter/index.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import StatusDropdown from '@/components/StatusDropdown';
 import TechnologyDropdown from '@/components/TechnologyDropdown';
 import { FilterChangeHandlers, Filters, FilterType } from '@/types/schema';
 import { DropIcon } from '../../assets/Dropdown-Icons/icons';
@@ -35,6 +36,15 @@ export default function Filter({
             label={filter.label}
             currFilter={filter}
           />
+        ) : filter.id === 'status' ? (
+          <StatusDropdown
+            selectedStatus={selectedFilters.status}
+            setSelectedStatus={filterChangeHandlers.status}
+            handleButtonClick={handleButtonClick}
+            icon={filter.icon}
+            label={filter.label}
+            currFilter={filter}
+          />
         ) : // Add other filter dropdown components here
         null
       ) : (

components/Filter/styles.ts

@@ -2,20 +2,18 @@ import styled from 'styled-components';
 import { FilterHeadingUnused } from '@/styles/texts';
 
 export const FilterBackgroundStyles = styled.div<{ isActive: boolean }>`
-  margin-right: 0.375rem;
-  top: 1.5%;
-  right: 1.5%;
+  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;
 `;
@@ -30,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`

components/FilterBar/index.tsx

@@ -13,7 +13,7 @@ export const FilterBar = ({
   const [activeFilter, setActiveFilter] = useState<FilterType | null>(null);
 
   const [selectedFilters, setSelectedFilters] = useState<Filters>({
-    status: false,
+    status: [],
     technology: [],
     projectSize: { min: 0, max: 0 },
     location: [],
@@ -30,10 +30,16 @@ export const FilterBar = ({
       technology: options,
     }));
   };
+  const handleStatusChange = (options: string[]) => {
+    setSelectedFilters(prevFilters => ({
+      ...prevFilters,
+      status: options,
+    }));
+  };
 
   const filterChangeHandlers: FilterChangeHandlers = {
     // Add other filter change handlers here
-    status: () => {},
+    status: handleStatusChange,
     technology: handleTechnologyChange,
     projectSize: () => {},
     location: () => {},

components/ProjectItem/styles.ts

@@ -48,6 +48,11 @@ export const ProjectInfo = styled.div`
 export const ProjectName = styled.div`
   margin-top: 1.5rem;
   text-align: left;
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: 10.3rem;
 `;
 
 export const ProjectStatus = styled.div`

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;
 `;
 

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;

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>
   );

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;
 `;

components/StatusDropdown/index.tsx

@@ -0,0 +1,82 @@
+import React from 'react'; //REMOVE
+import { FilterType } from '@/types/schema';
+import { ExitIcon } from '../../assets/Dropdown-Icons/icons';
+import COLORS from '../../styles/colors';
+import {
+  ApplyFiltersText,
+  FilterNameText,
+  FilterOptionsText,
+} from '../../styles/texts';
+import {
+  ApplyButtonStyles,
+  ButtonStyles,
+  ButtonWithIconStyles,
+  CheckboxContainer,
+  CheckboxStyles,
+  ExitStyles,
+  FilterDropdownStyles,
+  OptionTitleStyles,
+} from './styles';
+
+interface StatusDropdownProps {
+  selectedStatus: string[];
+  setSelectedStatus: (status: string[]) => void;
+  handleButtonClick: (filter: FilterType) => void;
+  icon: React.ReactNode;
+  label: string;
+  currFilter: FilterType;
+}
+
+export default function StatusDropdown({
+  selectedStatus,
+  setSelectedStatus,
+  handleButtonClick,
+  icon,
+  label,
+  currFilter,
+}: StatusDropdownProps) {
+  const filterOptions = [
+    { title: 'In Progress', color: `${COLORS.ashGrey}` },
+    { title: 'Operational', color: `${COLORS.chateauGreen}` },
+  ];
+
+  const handleStatusChange = (status: string) => {
+    setSelectedStatus(selectedStatus[0] === status ? [] : [status]);
+  };
+
+  const isApplyButtonActive = selectedStatus.length > 0;
+
+  return (
+    <FilterDropdownStyles>
+      <ButtonWithIconStyles onClick={() => handleButtonClick(currFilter)}>
+        <FilterNameText>{icon}</FilterNameText>
+        <ButtonStyles>
+          <FilterNameText>{label}</FilterNameText>
+        </ButtonStyles>
+        <ExitStyles>
+          <ExitIcon />
+        </ExitStyles>
+      </ButtonWithIconStyles>
+      <div>
+        {filterOptions.map(option => (
+          <CheckboxContainer key={option.title}>
+            <CheckboxStyles
+              type="checkbox"
+              checked={selectedStatus.includes(option.title)}
+              onChange={() => handleStatusChange(option.title)}
+            />
+            <OptionTitleStyles color={option.color}>
+              <FilterOptionsText $color={option.color}>
+                {' '}
+                {option.title}
+              </FilterOptionsText>
+            </OptionTitleStyles>
+          </CheckboxContainer>
+        ))}
+      </div>
+      <ApplyButtonStyles isActive={isApplyButtonActive}>
+        <ApplyFiltersText>APPLY</ApplyFiltersText>
+      </ApplyButtonStyles>
+    </FilterDropdownStyles>
+  );
+}