From 1a7f8dfa7a4801192cc40ac33865ea558eee6119 Mon Sep 17 00:00:00 2001 From: Kyle Ramachandran Date: Tue, 12 Nov 2024 22:50:26 -0800 Subject: [PATCH 01/19] created PlantCalendarRow component and added grid for plant calendar row --- components/PlantCalendarRow/index.tsx | 74 +++++++++++++++++++ components/PlantCalendarRow/styles.ts | 30 ++++++++ .../{PlantList.tsx => PlantList/index.tsx} | 20 ++++- components/PlantList/styles.ts | 8 ++ 4 files changed, 129 insertions(+), 3 deletions(-) create mode 100644 components/PlantCalendarRow/index.tsx create mode 100644 components/PlantCalendarRow/styles.ts rename components/{PlantList.tsx => PlantList/index.tsx} (73%) create mode 100644 components/PlantList/styles.ts diff --git a/components/PlantCalendarRow/index.tsx b/components/PlantCalendarRow/index.tsx new file mode 100644 index 0000000..6b1f1e1 --- /dev/null +++ b/components/PlantCalendarRow/index.tsx @@ -0,0 +1,74 @@ +import React from 'react'; +import { + CalendarCell, + CalendarGrid, + PlantCalendarRowContainer, + PlantText, +} from './styles'; + +interface PlantCalendarRowProps { + plantName?: string; + harvestStart: string; + harvestEnd: string; + transplantStart: string; + transplantEnd: string; + indoorsStart: string; + indoorsEnd: string; + outdoorsStart: string; + outdoorsEnd: string; + showMonths: boolean; +} + +export default function PlantCalendarRow({ + plantName, + harvestStart, + harvestEnd, + transplantStart, + transplantEnd, + indoorsStart, + indoorsEnd, + outdoorsStart, + outdoorsEnd, + showMonths, +}: PlantCalendarRowProps) { + // translate all the starts and ends to corresponding colours in an array + const CalendarGridArray = [ + '#F5B868', + '#F5B868', + '#F5B868', + '#F5B868', + '#f5f5f5', + '#f5f5f5', + '#f5f5f5', + '#f5f5f5', + '#f5f5f5', + '#f5f5f5', + '#f5f5f5', + '#f5f5f5', + '#f5f5f5', + '#f5f5f5', + '#f5f5f5', + '#f5f5f5', + '#f5f5f5', + '#f5f5f5', + '#f5f5f5', + '#f5f5f5', + '#f5f5f5', + '#f5f5f5', + '#f5f5f5', + '#f5f5f5', + '#f5f5f5', + '#f5f5f5', + ]; + + return ( + + {plantName} + + {CalendarGridArray.map((color, index) => ( + + ))} + + + ); +} diff --git a/components/PlantCalendarRow/styles.ts b/components/PlantCalendarRow/styles.ts new file mode 100644 index 0000000..e841bb7 --- /dev/null +++ b/components/PlantCalendarRow/styles.ts @@ -0,0 +1,30 @@ +import styled from 'styled-components'; + +export const PlantCalendarRowContainer = styled.div` + display: grid; + width: 100%; + grid-template-columns: 1fr 12fr; + gap: 12px; +`; + +export const PlantText = styled.p` + font-style: normal; + font-weight: 400; + line-height: normal; +`; + +export const CalendarGrid = styled.div` + display: grid; + width: 100%; + grid-template-columns: repeat(24, 1fr); + grid-template-rows: repeat(4, 12px); + gap: 1px; + background-color: white; +`; + +export const CalendarCell = styled.div<{ color: string }>` + width: 100%; + height: 100%; + background-color: ${props => props.color}; + background-clip: padding-box; +`; diff --git a/components/PlantList.tsx b/components/PlantList/index.tsx similarity index 73% rename from components/PlantList.tsx rename to components/PlantList/index.tsx index 82e2169..703f5e1 100644 --- a/components/PlantList.tsx +++ b/components/PlantList/index.tsx @@ -7,6 +7,8 @@ import { checkPlantingType, checkSearchTerm, } from '@/utils/helpers'; +import PlantCalendarRow from '../PlantCalendarRow'; +import { CalendarRowsContainer } from './styles'; interface PlantListProps { harvestSeasonFilterValue: DropdownOption[]; @@ -58,11 +60,23 @@ export const PlantList = ({ ]); return ( -
+ {filteredPlantList.map((plant, key) => ( //this should display PlantCalendarRows instead of this temporary div -
{plant.plant_name}
+ ))} -
+ ); }; diff --git a/components/PlantList/styles.ts b/components/PlantList/styles.ts new file mode 100644 index 0000000..85d7563 --- /dev/null +++ b/components/PlantList/styles.ts @@ -0,0 +1,8 @@ +import styled from 'styled-components'; + +export const CalendarRowsContainer = styled.div` + display: flex; + flex-direction: column; + gap: 8px; + width: 100%; +`; From c850d90145498ef4c3462c5a8056dbad0fcf6f7f Mon Sep 17 00:00:00 2001 From: Kyle Ramachandran Date: Fri, 15 Nov 2024 00:05:39 -0800 Subject: [PATCH 02/19] implemented logic for filling calendar rows, added months header --- components/MonthHeader/index.tsx | 23 ++++++ components/MonthHeader/styles.ts | 22 ++++++ components/PlantCalendarRow/index.tsx | 85 +++++++++++++-------- components/PlantCalendarRow/styles.ts | 2 +- components/PlantList/index.tsx | 40 +++++----- utils/helpers.ts | 102 ++++++++++++++++++++------ 6 files changed, 203 insertions(+), 71 deletions(-) create mode 100644 components/MonthHeader/index.tsx create mode 100644 components/MonthHeader/styles.ts diff --git a/components/MonthHeader/index.tsx b/components/MonthHeader/index.tsx new file mode 100644 index 0000000..7c9f841 --- /dev/null +++ b/components/MonthHeader/index.tsx @@ -0,0 +1,23 @@ +import { MonthHeaderContainer, MonthsContainer, MonthsText } from './styles'; + +export default function MonthHeader() { + return ( + +

+ + Jan + Feb + Mar + Apr + May + Jun + Jul + Aug + Sep + Oct + Nov + Dec + + + ); +} diff --git a/components/MonthHeader/styles.ts b/components/MonthHeader/styles.ts new file mode 100644 index 0000000..323c71f --- /dev/null +++ b/components/MonthHeader/styles.ts @@ -0,0 +1,22 @@ +import styled from 'styled-components'; + +export const MonthHeaderContainer = styled.div` + display: grid; + width: 100%; + grid-template-columns: 1fr 12fr; + gap: 12px; +`; + +export const MonthsContainer = styled.div` + display: grid; + grid-template-columns: repeat(12, 1fr); + gap: 12px; + justify-items: center; +`; + +export const MonthsText = styled.text` + color: #000; + font-style: normal; + font-weight: 400; + line-height: normal; +`; diff --git a/components/PlantCalendarRow/index.tsx b/components/PlantCalendarRow/index.tsx index 6b1f1e1..8cf5c00 100644 --- a/components/PlantCalendarRow/index.tsx +++ b/components/PlantCalendarRow/index.tsx @@ -1,4 +1,5 @@ -import React from 'react'; +import React, { useEffect, useMemo } from 'react'; +import { fillCalendarGridArrayRowWithColor } from '@/utils/helpers'; import { CalendarCell, CalendarGrid, @@ -31,35 +32,61 @@ export default function PlantCalendarRow({ outdoorsEnd, showMonths, }: PlantCalendarRowProps) { + const colors = { + indoors: '#F5B868', + outdoors: '#89BF8D', + transplant: '#8EDBFF', + harvest: '#FBA7A7', + background: '#D9D9D9', + }; + // translate all the starts and ends to corresponding colours in an array - const CalendarGridArray = [ - '#F5B868', - '#F5B868', - '#F5B868', - '#F5B868', - '#f5f5f5', - '#f5f5f5', - '#f5f5f5', - '#f5f5f5', - '#f5f5f5', - '#f5f5f5', - '#f5f5f5', - '#f5f5f5', - '#f5f5f5', - '#f5f5f5', - '#f5f5f5', - '#f5f5f5', - '#f5f5f5', - '#f5f5f5', - '#f5f5f5', - '#f5f5f5', - '#f5f5f5', - '#f5f5f5', - '#f5f5f5', - '#f5f5f5', - '#f5f5f5', - '#f5f5f5', - ]; + const CalendarGridArray: string[] = useMemo(() => { + // 4 rows, 24 columns = 96 cells + let returnArray: string[] = new Array(96); + // fill with grey + returnArray.fill(colors.background, 0, returnArray.length); + // fill array in order of indoors -> outdoors -> transplant -> harvest + returnArray = fillCalendarGridArrayRowWithColor( + indoorsStart, + indoorsEnd, + colors.indoors, + 0, + returnArray, + ); + returnArray = fillCalendarGridArrayRowWithColor( + outdoorsStart, + outdoorsEnd, + colors.outdoors, + 1, + returnArray, + ); + returnArray = fillCalendarGridArrayRowWithColor( + transplantStart, + transplantEnd, + colors.transplant, + 2, + returnArray, + ); + returnArray = fillCalendarGridArrayRowWithColor( + harvestStart, + harvestEnd, + colors.harvest, + 3, + returnArray, + ); + + return returnArray; + }, [ + harvestStart, + harvestEnd, + transplantStart, + transplantEnd, + indoorsStart, + indoorsEnd, + outdoorsStart, + outdoorsEnd, + ]); return ( diff --git a/components/PlantCalendarRow/styles.ts b/components/PlantCalendarRow/styles.ts index e841bb7..b4eae48 100644 --- a/components/PlantCalendarRow/styles.ts +++ b/components/PlantCalendarRow/styles.ts @@ -17,7 +17,7 @@ export const CalendarGrid = styled.div` display: grid; width: 100%; grid-template-columns: repeat(24, 1fr); - grid-template-rows: repeat(4, 12px); + grid-template-rows: repeat(4, 1fr); gap: 1px; background-color: white; `; diff --git a/components/PlantList/index.tsx b/components/PlantList/index.tsx index 703f5e1..07a7931 100644 --- a/components/PlantList/index.tsx +++ b/components/PlantList/index.tsx @@ -7,6 +7,7 @@ import { checkPlantingType, checkSearchTerm, } from '@/utils/helpers'; +import MonthHeader from '../MonthHeader'; import PlantCalendarRow from '../PlantCalendarRow'; import { CalendarRowsContainer } from './styles'; @@ -60,23 +61,26 @@ export const PlantList = ({ ]); return ( - - {filteredPlantList.map((plant, key) => ( - //this should display PlantCalendarRows instead of this temporary div - - ))} - +
+ + + {filteredPlantList.map((plant, key) => ( + //this should display PlantCalendarRows instead of this temporary div + + ))} + +
); }; diff --git a/utils/helpers.ts b/utils/helpers.ts index 2c9c986..78a6248 100644 --- a/utils/helpers.ts +++ b/utils/helpers.ts @@ -1,6 +1,6 @@ import { DropdownOption, Plant, SeasonEnum } from '@/types/schema'; -// Helper function to process late/early month fields for checkGrowingSeason +// Helper function to process late/early month fields function processPlantMonth(month: string) { // If field is not null and starts with 'LATE' or 'EARLY, // get substring after 'LATE_ or 'EARLY_' @@ -17,33 +17,34 @@ function processPlantMonth(month: string) { } } +// helper constants for processing months to indexes +const growingSeasonToIndex = new Map([ + ['SPRING', [2, 3, 4]], + ['SUMMER', [5, 6, 7]], + ['FALL', [8, 9, 10]], + ['WINTER', [11, 0, 1]], +]); + +const monthToIndex = new Map([ + ['JANUARY', 0], + ['FEBRUARY', 1], + ['MARCH', 2], + ['APRIL', 3], + ['MAY', 4], + ['JUNE', 5], + ['JULY', 6], + ['AUGUST', 7], + ['SEPTEMBER', 8], + ['OCTOBER', 9], + ['NOVEMBER', 10], + ['DECEMBER', 11], +]); + // Helper function to check if selected growing season(s) match plant's growing_season export function checkGrowingSeason( growingSeasonFilterValue: DropdownOption[], plant: Plant, ) { - const growingSeasonToIndex = new Map([ - ['SPRING', [2, 3, 4]], - ['SUMMER', [5, 6, 7]], - ['FALL', [8, 9, 10]], - ['WINTER', [11, 0, 1]], - ]); - - const monthToIndex = new Map([ - ['JANUARY', 0], - ['FEBRUARY', 1], - ['MARCH', 2], - ['APRIL', 3], - ['MAY', 4], - ['JUNE', 5], - ['JULY', 6], - ['AUGUST', 7], - ['SEPTEMBER', 8], - ['OCTOBER', 9], - ['NOVEMBER', 10], - ['DECEMBER', 11], - ]); - // Automatically returns true if selected growing season is [] if (growingSeasonFilterValue.length === 0) { return true; @@ -212,9 +213,11 @@ export function checkDifficulty( // Return false if no matches found return false; } + export function useTitleCase(text: string) { return text.charAt(0) + text.slice(1).toLowerCase(); } + export function formatTimestamp(timestamp: string): string { // Convert the input to a Date object const date = new Date(timestamp); @@ -250,3 +253,56 @@ export function mapMonthToSeason(month: string): SeasonEnum | null { month = processPlantMonth(month).toUpperCase(); return monthToSeason[month] || null; } + +export function fillCalendarGridArrayRowWithColor( + startMonth: string, + endMonth: string, + color: string, + rowIndex: number, + gridArray: string[], +) { + // if startMonth and endMonth is both null, row should be empty + if (startMonth === null && endMonth === null) { + return gridArray; + } + + // if either startMonth or endMonth are null, the null one should be set to the other + // this makes the time frame only one month long + if (startMonth === null) { + startMonth = endMonth; + } else if (endMonth === null) { + endMonth = startMonth; + } + + // remove 'LATE' or 'EARLY' from startMonth and endMonth to query monthToIndex + const processedStartMonth = processPlantMonth(startMonth); + const processedEndMonth = processPlantMonth(endMonth); + + // if the start month is LATE_MONTH, start column should be the second column for that month + // if the end month is EARLY_MONTH, end column should be the first column for that month + // otherwise, start column should be the first column and end column should be the second column for that month + let startColumn = startMonth.startsWith('LATE') + ? monthToIndex.get(processedStartMonth)! * 2 + 1 + : monthToIndex.get(processedStartMonth)! * 2; + let endColumn = endMonth.startsWith('EARLY') + ? monthToIndex.get(processedEndMonth)! * 2 + : monthToIndex.get(processedEndMonth)! * 2 + 1; + + // fill gridArray with corresponding colour from startColumn to endColumn + if (startColumn > endColumn) { + // handle case when the season goes from November - February, e.g. + for (let i = startColumn; i <= 24; i++) { + gridArray[rowIndex * 24 + i] = color; + } + for (let i = 0; i <= endColumn; i++) { + gridArray[rowIndex * 24 + i] = color; + } + } else { + // fill normally + for (let i = startColumn; i <= endColumn; i++) { + gridArray[rowIndex * 24 + i] = color; + } + } + + return gridArray; +} From e4a9f8eaa183d31bbefcb058bdd7e722503adb41 Mon Sep 17 00:00:00 2001 From: Kyle Ramachandran Date: Fri, 15 Nov 2024 00:17:20 -0800 Subject: [PATCH 03/19] search bar and dropdown styling --- .../index.tsx} | 5 +++-- components/FilterDropdownSingle/styles.ts | 12 ++++++++++++ components/SearchBar/styles.ts | 8 +++++++- 3 files changed, 22 insertions(+), 3 deletions(-) rename components/{FilterDropdownSingle.tsx => FilterDropdownSingle/index.tsx} (91%) create mode 100644 components/FilterDropdownSingle/styles.ts diff --git a/components/FilterDropdownSingle.tsx b/components/FilterDropdownSingle/index.tsx similarity index 91% rename from components/FilterDropdownSingle.tsx rename to components/FilterDropdownSingle/index.tsx index bd2d470..e6419e5 100644 --- a/components/FilterDropdownSingle.tsx +++ b/components/FilterDropdownSingle/index.tsx @@ -1,5 +1,6 @@ import React, { useState } from 'react'; import { DropdownOption } from '@/types/schema'; +import { FilterDropdownInput } from './styles'; interface FilterDropdownProps { name?: string; @@ -30,7 +31,7 @@ export default function FilterDropdownSingle({ }; return ( - + ); } diff --git a/components/FilterDropdownSingle/styles.ts b/components/FilterDropdownSingle/styles.ts new file mode 100644 index 0000000..00a4031 --- /dev/null +++ b/components/FilterDropdownSingle/styles.ts @@ -0,0 +1,12 @@ +import styled from 'styled-components'; + +export const FilterDropdownInput = styled.select` + border-radius: 60px; + padding: 8px 14px 8px 14px; + align-items: center; + justify-content: center; + justify-items: center; + gap: 2px; + background-color: #1f5a2a; + color: #fff; +`; diff --git a/components/SearchBar/styles.ts b/components/SearchBar/styles.ts index ed96188..ad846e0 100644 --- a/components/SearchBar/styles.ts +++ b/components/SearchBar/styles.ts @@ -3,13 +3,19 @@ import styled from 'styled-components'; export const SearchBarContainer = styled.div` background-color: #f7f7f7; border: none; - border-radius: 8px; + border-radius: 16px; width: 30%; `; export const SearchBarInput = styled.input` padding: 8px; border: none; + border-radius: 16px; background-color: #f7f7f7; width: 100%; + color: #888; + font-size: 12px; + font-style: normal; + font-weight: 400; + line-height: normal; `; From 7fc297e24cb032b9a50fc11fd979dcfbd805b734 Mon Sep 17 00:00:00 2001 From: Kyle Ramachandran Date: Fri, 15 Nov 2024 00:43:49 -0800 Subject: [PATCH 04/19] styling title and multiple dropdown --- app/seasonal-planting-guide/page.tsx | 2 ++ app/seasonal-planting-guide/styles.ts | 13 ++++++++++++- .../index.tsx} | 4 ++-- components/FilterDropdownMultiple/styles.ts | 16 ++++++++++++++++ 4 files changed, 32 insertions(+), 3 deletions(-) rename components/{FilterDropdownMultiple.tsx => FilterDropdownMultiple/index.tsx} (89%) create mode 100644 components/FilterDropdownMultiple/styles.ts diff --git a/app/seasonal-planting-guide/page.tsx b/app/seasonal-planting-guide/page.tsx index b9acb65..20de923 100644 --- a/app/seasonal-planting-guide/page.tsx +++ b/app/seasonal-planting-guide/page.tsx @@ -10,6 +10,7 @@ import { FilterContainer, HeaderContainer, PageContainer, + PageTitle, StateOptionsContainer, } from './styles'; @@ -76,6 +77,7 @@ export default function SeasonalPlantingGuide() { ) : ( <> + Seasonality Chart Date: Sun, 17 Nov 2024 19:02:22 -0800 Subject: [PATCH 05/19] styling changes --- app/seasonal-planting-guide/page.tsx | 106 ++++++++++---------- app/seasonal-planting-guide/styles.ts | 21 ++-- components/FilterDropdownMultiple/index.tsx | 2 +- components/FilterDropdownSingle/index.tsx | 1 + components/FilterDropdownSingle/styles.ts | 7 +- components/MonthHeader/index.tsx | 9 +- components/MonthHeader/styles.ts | 16 ++- components/PlantCalendarRow/styles.ts | 8 +- components/SearchBar/index.tsx | 6 +- components/SearchBar/styles.ts | 20 +++- lib/icons.tsx | 16 +++ utils/helpers.ts | 7 +- 12 files changed, 139 insertions(+), 80 deletions(-) diff --git a/app/seasonal-planting-guide/page.tsx b/app/seasonal-planting-guide/page.tsx index 20de923..dcb6954 100644 --- a/app/seasonal-planting-guide/page.tsx +++ b/app/seasonal-planting-guide/page.tsx @@ -5,12 +5,15 @@ import FilterDropdownMultiple from '@/components/FilterDropdownMultiple'; import FilterDropdownSingle from '@/components/FilterDropdownSingle'; import { PlantList } from '@/components/PlantList'; import SearchBar from '@/components/SearchBar'; +import COLORS from '@/styles/colors'; +import { H1 } from '@/styles/text'; import { DropdownOption } from '@/types/schema'; import { FilterContainer, HeaderContainer, PageContainer, PageTitle, + PlantListContainer, StateOptionsContainer, } from './styles'; @@ -60,60 +63,61 @@ export default function SeasonalPlantingGuide() { return ( - {!selectedUsState ? ( - <> -

Please select a US state to view planting information.

- - - - - ) : ( - <> - - Seasonality Chart - - - - - + + +

+ Planting Timeline +

+ + + + - + - + - - - + + + + + {!selectedUsState ? ( + +

Choose your state

+ + + ) : ( + - + )} ); diff --git a/app/seasonal-planting-guide/styles.ts b/app/seasonal-planting-guide/styles.ts index 2fcd3e0..c49e4ed 100644 --- a/app/seasonal-planting-guide/styles.ts +++ b/app/seasonal-planting-guide/styles.ts @@ -3,6 +3,9 @@ import styled from 'styled-components'; export const PageContainer = styled.div` display: flex; flex-direction: column; + justify-content: center; + align-items: center; + height: 100%; gap: 1rem; `; @@ -10,6 +13,9 @@ export const HeaderContainer = styled.div` display: flex; flex-direction: column; padding: 2px 24px 20px 24px; + box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1); + background-color: #fff; + width: 100%; `; export const FilterContainer = styled.div` @@ -17,20 +23,19 @@ export const FilterContainer = styled.div` flex-direction: row; gap: 0.5rem; margin-top: 12px; + overflow-x: auto; `; export const StateOptionsContainer = styled.div` display: flex; - flex-direction: row; + flex-direction: column; gap: 2rem; `; -export const PageTitle = styled.p` - color: #1f5a2a; - font-size: 32px; - font-style: normal; - font-weight: 500; - line-height: normal; +export const PageTitle = styled.div` margin-bottom: 8px; - margin-top: 0; +`; + +export const PlantListContainer = styled.div` + width: 100%; `; diff --git a/components/FilterDropdownMultiple/index.tsx b/components/FilterDropdownMultiple/index.tsx index 71e157e..cb32ae3 100644 --- a/components/FilterDropdownMultiple/index.tsx +++ b/components/FilterDropdownMultiple/index.tsx @@ -1,6 +1,6 @@ import React from 'react'; -import { StyledMultiSelect } from './styles'; import { DropdownOption } from '@/types/schema'; +import { StyledMultiSelect } from './styles'; interface FilterDropdownProps { value: DropdownOption[]; diff --git a/components/FilterDropdownSingle/index.tsx b/components/FilterDropdownSingle/index.tsx index e6419e5..7cd5136 100644 --- a/components/FilterDropdownSingle/index.tsx +++ b/components/FilterDropdownSingle/index.tsx @@ -38,6 +38,7 @@ export default function FilterDropdownSingle({ onClick={handleToggle} onBlur={() => setIsOpen(false)} value={value} + hasValue={value !== ''} > {/*Default placeholder text*/} {!selectedUsState ? ( -

Choose your state

+

Choose Your State

 diff --git a/app/seasonal-planting-guide/styles.ts b/app/seasonal-planting-guide/styles.ts index c49e4ed..dd760e8 100644 --- a/app/seasonal-planting-guide/styles.ts +++ b/app/seasonal-planting-guide/styles.ts @@ -3,9 +3,7 @@ import styled from 'styled-components'; export const PageContainer = styled.div` display: flex; flex-direction: column; - justify-content: center; - align-items: center; - height: 100%; + min-height: 100vh; gap: 1rem; `; @@ -15,7 +13,8 @@ export const HeaderContainer = styled.div` padding: 2px 24px 20px 24px; box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1); background-color: #fff; - width: 100%; + position: relative; + z-index: 1; `; export const FilterContainer = styled.div` @@ -23,17 +22,23 @@ export const FilterContainer = styled.div` flex-direction: row; gap: 0.5rem; margin-top: 12px; - overflow-x: auto; + position: relative; `; export const StateOptionsContainer = styled.div` display: flex; flex-direction: column; - gap: 2rem; + align-items: center; + justify-content: center; + gap: 1rem; `; export const PageTitle = styled.div` + display: flex; + flex-direction: row; margin-bottom: 8px; + gap: 12px; + align-items: center; `; export const PlantListContainer = styled.div` diff --git a/components/FilterDropdownMultiple/styles.ts b/components/FilterDropdownMultiple/styles.ts index e9705e0..82284ae 100644 --- a/components/FilterDropdownMultiple/styles.ts +++ b/components/FilterDropdownMultiple/styles.ts @@ -12,5 +12,13 @@ export const StyledMultiSelect = styled(MultiSelect)` background-color: #1f5a2a; !important border: 0.5px solid #888; !important color: #fff; + position: relative; + } + + .dropdown-content { + display: block; !important + position: absolute; !important + z-index: 10000; !important + top: 100%; } `; diff --git a/components/FilterDropdownSingle/styles.ts b/components/FilterDropdownSingle/styles.ts index b3d3824..7041ad0 100644 --- a/components/FilterDropdownSingle/styles.ts +++ b/components/FilterDropdownSingle/styles.ts @@ -4,10 +4,8 @@ import COLORS from '@/styles/colors'; export const FilterDropdownInput = styled.select<{ hasValue: boolean }>` border-radius: 60px; padding: 8px 14px 8px 14px; - align-items: center; - justify-content: center; - justify-items: center; gap: 2px; + text-align: center; background-color: ${({ hasValue }) => (hasValue ? COLORS.shrub : '#fff')}; color: ${({ hasValue }) => (hasValue ? '#fff' : '#000')}; `; diff --git a/lib/icons.tsx b/lib/icons.tsx index 784cce5..b0823e1 100644 --- a/lib/icons.tsx +++ b/lib/icons.tsx @@ -318,6 +318,37 @@ export const IconSvgs = { /> ), + info: ( + + + + + + ), }; export type IconType = keyof typeof IconSvgs; From d63a18c5d564c2ed676cafdb87565e1767a5b4dc Mon Sep 17 00:00:00 2001 From: Kyle Ramachandran Date: Sun, 24 Nov 2024 17:42:09 -0800 Subject: [PATCH 08/19] iterating on feedback --- components/FilterDropdownSingle/index.tsx | 2 +- components/FilterDropdownSingle/styles.ts | 6 ++--- components/PlantCalendarRow/index.tsx | 19 +++++--------- components/PlantList/index.tsx | 1 - lib/icons.tsx | 20 +++++++------- styles/colors.ts | 6 +++++ utils/helpers.ts | 32 +++++++++++------------ 7 files changed, 40 insertions(+), 46 deletions(-) diff --git a/components/FilterDropdownSingle/index.tsx b/components/FilterDropdownSingle/index.tsx index 7cd5136..e7b7f0d 100644 --- a/components/FilterDropdownSingle/index.tsx +++ b/components/FilterDropdownSingle/index.tsx @@ -38,7 +38,7 @@ export default function FilterDropdownSingle({ onClick={handleToggle} onBlur={() => setIsOpen(false)} value={value} - hasValue={value !== ''} + $hasValue={value !== ''} > {/*Default placeholder text*/}