Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[feat] [style] Create and Style Filters Dropdown #67

Merged
merged 41 commits into from
Nov 13, 2024

Conversation

ethan-tam33
Copy link
Contributor

@ethan-tam33 ethan-tam33 commented Nov 11, 2024

What's new in this PR

Description

  • fixed the filter buttons in FilterBar to be individual
  • created MapViewScreen component
  • created and styled TechnologyDropdown component
  • enabled TechnologyDropdown component to render on top of the "Technology" filter button upon clicking "Technology" filter button
  • created Filters type to hold all possible changes from "Status", "Technology", "Project Size", and "Location" filter dropdowns
  • changed react-icon images to SVG images directly from Figma design

Some relevant stuff I created:
handleButtonClick - a function that takes in a filter and allows for 1. toggling the dropdown bar and 2. any other action we want to implement
filterChangeHandlers - a variable that holds all the handler methods for each filter
Filter - a component that will hold all the dropdowns of each filter

Screenshots

Screenshot 2024-11-11 at 6 30 16 AM

How to review

Next steps

  • create and style dropdowns for status, project size, and location filters

Relevant links

Online sources

Related PRs

CC: @itsliterallymonique

@ethan-tam33 ethan-tam33 linked an issue Nov 11, 2024 that may be closed by this pull request
@ethan-tam33 ethan-tam33 changed the title Create and Style Filters Dropdown [feat] [style] Create and Style Filters Dropdown Nov 11, 2024
Copy link
Collaborator

@itsliterallymonique itsliterallymonique left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Made one comment on making a separate filter component. Will comment on the styling once you push your final changes

components/FilterBar/index.tsx Outdated Show resolved Hide resolved
Copy link
Collaborator

@itsliterallymonique itsliterallymonique left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Make the quick styling changes I commented on. Then you're good to squash + merge!

components/Filter/index.tsx Outdated Show resolved Hide resolved
components/Filter/index.tsx Show resolved Hide resolved
components/FilterBar/styles.ts Outdated Show resolved Hide resolved
components/Filter/styles.ts Outdated Show resolved Hide resolved
components/Filter/styles.ts Outdated Show resolved Hide resolved
@ethan-tam33
Copy link
Contributor Author

I realized some parts of the Filter component wasn't generalizable, specifically the handlers. I createdFilterChangeHandlers to hold all the handler method of each filter.

handleButtonClick={handleButtonClick}
icon={filter.icon}
label={filter.label}
currFilter={filter}
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

what does currFilter do?

import { FilterHeadingUnused } from '@/styles/texts';

export const FilterBackgroundStyles = styled.div<{ isActive: boolean }>`
margin-right: 2%;
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

i think you have to make the changes here and below where I commented. The styling still does not look like josh's figma hi-fis

@ethan-tam33 ethan-tam33 merged commit 7b90c40 into main Nov 13, 2024
2 checks passed
@ethan-tam33 ethan-tam33 deleted the 52-chore-style-filters-dropdown branch November 13, 2024 03:38
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[chore] Style Filters and Technology Filter Dropdown
2 participants