From 89dc29f578931d6d9c4952580beea1f460f8664b Mon Sep 17 00:00:00 2001 From: Kyle Ramachandran Date: Tue, 3 Dec 2024 12:42:05 -0800 Subject: [PATCH 01/28] applying styling to ReactMultiSelect component --- components/FilterDropdownMultiple/styles.ts | 30 ++++++++++++++++----- 1 file changed, 23 insertions(+), 7 deletions(-) diff --git a/components/FilterDropdownMultiple/styles.ts b/components/FilterDropdownMultiple/styles.ts index 82284ae..5bc3086 100644 --- a/components/FilterDropdownMultiple/styles.ts +++ b/components/FilterDropdownMultiple/styles.ts @@ -1,24 +1,40 @@ import { MultiSelect } from 'react-multi-select-component'; import styled from 'styled-components'; +import COLORS from '@/styles/colors'; export const StyledMultiSelect = styled(MultiSelect)` .dropdown-container { - border-radius: 60px; !important - padding: 8px 14px 8px 14px; !important + border-radius: 60px !important; + padding: 0px 14px 0px 14px !important; align-items: center; justify-content: center; justify-items: center; gap: 2px; - background-color: #1f5a2a; !important - border: 0.5px solid #888; !important + background-color: #fff !important; + border: 0.5px solid ${COLORS.midgray} !important; color: #fff; position: relative; } .dropdown-content { - display: block; !important - position: absolute; !important - z-index: 10000; !important + display: block !important; + position: absolute !important; + z-index: 10000 !important; top: 100%; + color: ${COLORS.midgray}; + } + + .dropdown-heading { + font-size: 0.75rem !important; + padding: 0px !important; + } + + .dropdown-heading-value { + color: ${COLORS.midgray} !important; + } + + // changing color of the default display text + .gray { + color: ${COLORS.midgray} !important; } `; From 490fc33c8f0f3862a7b695246bc34ec930dc7ed4 Mon Sep 17 00:00:00 2001 From: Kyle Ramachandran Date: Tue, 3 Dec 2024 16:13:40 -0800 Subject: [PATCH 02/28] modifying seasonal planting guide page styles --- app/seasonal-planting-guide/styles.ts | 3 +++ 1 file changed, 3 insertions(+) diff --git a/app/seasonal-planting-guide/styles.ts b/app/seasonal-planting-guide/styles.ts index 9dbb3ca..0013793 100644 --- a/app/seasonal-planting-guide/styles.ts +++ b/app/seasonal-planting-guide/styles.ts @@ -1,4 +1,5 @@ import styled from 'styled-components'; +import COLORS from '@/styles/colors'; export const PageContainer = styled.div` display: flex; @@ -31,6 +32,8 @@ export const StateOptionsContainer = styled.div` align-items: center; justify-content: center; gap: 1rem; + flex-grow: 1; + background-color: ${COLORS.glimpse}; `; export const PageTitle = styled.div` From 5bd2a96e85764d0e50091a0af74c62db8ef2c9ba Mon Sep 17 00:00:00 2001 From: Kyle Ramachandran Date: Tue, 3 Dec 2024 16:38:38 -0800 Subject: [PATCH 03/28] refactor multi dropdown to react-select --- components/FilterDropdownMultiple/index.tsx | 18 +- package.json | 1 + pnpm-lock.yaml | 329 +++++++++++++++++++- 3 files changed, 329 insertions(+), 19 deletions(-) diff --git a/components/FilterDropdownMultiple/index.tsx b/components/FilterDropdownMultiple/index.tsx index e0077c3..a80edd5 100644 --- a/components/FilterDropdownMultiple/index.tsx +++ b/components/FilterDropdownMultiple/index.tsx @@ -1,4 +1,5 @@ import React from 'react'; +import Select, { MultiValue } from 'react-select'; import { DropdownOption } from '@/types/schema'; import { StyledMultiSelect } from './styles'; @@ -17,16 +18,19 @@ export default function FilterDropdownMultiple({ placeholder, disabled = false, }: FilterDropdownProps) { + const handleChange = (selectedOptions: MultiValue>) => { + setStateAction(selectedOptions as DropdownOption[]); + }; + return ( - ); } diff --git a/package.json b/package.json index 416419e..287de9d 100644 --- a/package.json +++ b/package.json @@ -20,6 +20,7 @@ "react": "^18", "react-dom": "^18", "react-multi-select-component": "^4.3.4", + "react-select": "^5.8.3", "styled-components": "^6.1.13", "supabase": "^1.200.3" }, diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index ce04748..cf02d1a 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -26,6 +26,9 @@ importers: react-multi-select-component: specifier: ^4.3.4 version: 4.3.4(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + react-select: + specifier: ^5.8.3 + version: 5.8.3(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) styled-components: specifier: ^6.1.13 version: 6.1.13(react-dom@18.3.1(react@18.3.1))(react@18.3.1) @@ -80,6 +83,10 @@ packages: resolution: {integrity: sha512-zevQbhbau95nkoxSq3f/DC/SC+EEOUZd3DYqfSkMhY2/wfSeaHV1Ew4vk8e+x8lja31IbyuUa2uQ3JONqKbysw==} engines: {node: '>=6.9.0'} + '@babel/helper-module-imports@7.25.9': + resolution: {integrity: sha512-tnUA4RsrmflIM6W6RFTLFSXITtl0wKjgpnLgXyowocVPrbYrLUXSBXDgTs8BlbmIzIdlBySRQjINYs2BAkiLtw==} + engines: {node: '>=6.9.0'} + '@babel/helper-string-parser@7.25.9': resolution: {integrity: sha512-4A/SCr/2KLd5jrtOMFzaKjVtAei3+2r/NChoBNoZ3EyP/+GlhoaEGoWOZUmFmoITP7zOJyHIMm+DYRd8o3PvHA==} engines: {node: '>=6.9.0'} @@ -93,6 +100,10 @@ packages: engines: {node: '>=6.0.0'} hasBin: true + '@babel/runtime@7.26.0': + resolution: {integrity: sha512-FDSOghenHTiToteC/QRlv2q3DhPZ/oOXTBoirfWNx1Cx3TMVcGWQtMMmQcSvb/JjpNeGzx8Pq/b4fKEJuWm1sw==} + engines: {node: '>=6.9.0'} + '@babel/template@7.25.9': resolution: {integrity: sha512-9DGttpmPvIxBb/2uwpVo3dqJ+O6RooAFOS+lB+xDqoE2PVCE8nfoHMdZLpfCQRLwvohzXISPZcgxt80xLfsuwg==} engines: {node: '>=6.9.0'} @@ -105,8 +116,14 @@ packages: resolution: {integrity: sha512-Z/yiTPj+lDVnF7lWeKCIJzaIkI0vYO87dMpZ4bg4TDrFe4XXLFWL1TbXU27gBP3QccxV9mZICCrnjnYlJjXHOA==} engines: {node: '>=6.9.0'} - '@emnapi/runtime@1.3.1': - resolution: {integrity: sha512-kEBmG8KyqtxJZv+ygbEim+KCGtIq1fC22Ms3S4ziXmYKm8uyoLX0MHONVKwp+9opg390VaKRNt4a7A9NwmpNhw==} + '@emotion/babel-plugin@11.13.5': + resolution: {integrity: sha512-pxHCpT2ex+0q+HH91/zsdHkw/lXd468DIN2zvfvLtPKLLMo6gQj7oLObq8PhkrxOZb/gGCq03S3Z7PDhS8pduQ==} + + '@emotion/cache@11.13.5': + resolution: {integrity: sha512-Z3xbtJ+UcK76eWkagZ1onvn/wAVb1GOMuR15s30Fm2wrMgC7jzpnO2JZXr4eujTTqoQFUrZIw/rT0c6Zzjca1g==} + + '@emotion/hash@0.9.2': + resolution: {integrity: sha512-MyqliTZGuOm3+5ZRSaaBGP3USLw6+EGykkwZns2EPC5g8jJ4z9OrdZY9apkl3+UP9+sdz76YYkwCKP5gh8iY3g==} '@emotion/is-prop-valid@1.2.2': resolution: {integrity: sha512-uNsoYd37AFmaCdXlg6EYD1KaPOaRWRByMCYzbKUX4+hhMfrxdVSelShywL4JVaAeM/eHUOSprYBQls+/neX3pw==} @@ -114,9 +131,41 @@ packages: '@emotion/memoize@0.8.1': resolution: {integrity: sha512-W2P2c/VRW1/1tLox0mVUalvnWXxavmv/Oum2aPsRcoDJuob75FC3Y8FbpfLwUegRcxINtGUMPq0tFCvYNTBXNA==} + '@emotion/memoize@0.9.0': + resolution: {integrity: sha512-30FAj7/EoJ5mwVPOWhAyCX+FPfMDrVecJAM+Iw9NRoSl4BBAQeqj4cApHHUXOVvIPgLVDsCFoz/hGD+5QQD1GQ==} + + '@emotion/react@11.13.5': + resolution: {integrity: sha512-6zeCUxUH+EPF1s+YF/2hPVODeV/7V07YU5x+2tfuRL8MdW6rv5vb2+CBEGTGwBdux0OIERcOS+RzxeK80k2DsQ==} + peerDependencies: + '@types/react': '*' + react: '>=16.8.0' + peerDependenciesMeta: + '@types/react': + optional: true + + '@emotion/serialize@1.3.3': + resolution: {integrity: sha512-EISGqt7sSNWHGI76hC7x1CksiXPahbxEOrC5RjmFRJTqLyEK9/9hZvBbiYn70dw4wuwMKiEMCUlR6ZXTSWQqxA==} + + '@emotion/sheet@1.4.0': + resolution: {integrity: sha512-fTBW9/8r2w3dXWYM4HCB1Rdp8NLibOw2+XELH5m5+AkWiL/KqYX6dc0kKYlaYyKjrQ6ds33MCdMPEwgs2z1rqg==} + + '@emotion/unitless@0.10.0': + resolution: {integrity: sha512-dFoMUuQA20zvtVTuxZww6OHoJYgrzfKM1t52mVySDJnMSEa08ruEvdYQbhvyu6soU+NeLVd3yKfTfT0NeV6qGg==} + '@emotion/unitless@0.8.1': resolution: {integrity: sha512-KOEGMu6dmJZtpadb476IsZBclKvILjopjUii3V+7MnXIQCYh8W3NgNcgwo21n9LXZX6EDIKvqfjYxXebDwxKmQ==} + '@emotion/use-insertion-effect-with-fallbacks@1.1.0': + resolution: {integrity: sha512-+wBOcIV5snwGgI2ya3u99D7/FJquOIniQT1IKyDsBmEgwvpxMNeS65Oib7OnE2d2aY+3BU4OiH+0Wchf8yk3Hw==} + peerDependencies: + react: '>=16.8.0' + + '@emotion/utils@1.4.2': + resolution: {integrity: sha512-3vLclRofFziIa3J2wDh9jjbkUz9qk5Vi3IZ/FSTKViB0k+ef0fPV7dYrUIugbgupYDx7v9ud/SjrtEP8Y4xLoA==} + + '@emotion/weak-memoize@0.4.0': + resolution: {integrity: sha512-snKqtPW01tN0ui7yu9rGv69aJXr/a/Ywvl11sUjNtEcRc+ng/mQriFL0wLXMef74iHa/EkftbDzU9F8iFbH+zg==} + '@eslint-community/eslint-utils@4.4.1': resolution: {integrity: sha512-s3O3waFUrMV8P/XaF/+ZTp1X9XBZW1a4B97ZnjQF2KYWaFD2A8KyFBsrsfSjEmjn3RGWAIuvlneuZm3CUK3jbA==} engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} @@ -135,6 +184,15 @@ packages: resolution: {integrity: sha512-d9zaMRSTIKDLhctzH12MtXvJKSSUhaHcjV+2Z+GK+EEY7XKpP5yR4x+N3TAcHTcu963nIr+TMcCb4DBCYX1z6Q==} engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} + '@floating-ui/core@1.6.8': + resolution: {integrity: sha512-7XJ9cPU+yI2QeLS+FCSlqNFZJq8arvswefkZrYI1yQBbftw6FyrZOxYSh+9S7z7TpeWlRt9zJ5IhM1WIL334jA==} + + '@floating-ui/dom@1.6.12': + resolution: {integrity: sha512-NP83c0HjokcGVEMeoStg317VD9W7eDlGK7457dMBANbKA6GJZdc7rjujdgqzTaz93jkGgc5P/jeWbaCHnMNc+w==} + + '@floating-ui/utils@0.2.8': + resolution: {integrity: sha512-kym7SodPp8/wloecOpcmSnWJsK7M0E5Wg8UcFA+uO4B9s5d0ywXOEro/8HM9x0rW+TljRzul/14UYz3TleT3ig==} + '@humanwhocodes/config-array@0.13.0': resolution: {integrity: sha512-DZLEEqFWQFiyK6h5YIeynKx7JlvCYWL0cImfSRXZ9l4Sg2efkFGTuFf6vzXjK1cq6IYkU+Eg/JizXw+TD2vRNw==} engines: {node: '>=10.10.0'} @@ -405,6 +463,9 @@ packages: '@types/node@20.17.6': resolution: {integrity: sha512-VEI7OdvK2wP7XHnsuXbAJnEpEkF6NjSN45QJlL4VGqZSXsnicpesdTWsg9RISeSdYd3yeRj/y3k5KGjUXYnFwQ==} + '@types/parse-json@4.0.2': + resolution: {integrity: sha512-dISoDXWWQwUquiKsyZ4Ng+HX2KsPL7LyHKHQwgGFEA3IaKac4Obd+h2a/a6waisAoepJlBcx9paWqjA8/HVjCw==} + '@types/phoenix@1.6.5': resolution: {integrity: sha512-xegpDuR+z0UqG9fwHqNoy3rI7JDlvaPh2TY47Fl80oq6g+hXT+c/LEuE43X48clZ6lOfANl5WrPur9fYO1RJ/w==} @@ -414,6 +475,9 @@ packages: '@types/react-dom@18.3.1': resolution: {integrity: sha512-qW1Mfv8taImTthu4KoXgDfLuk4bydU6Q/TkADnDWWHwi4NX4BR+LWfTp2sVmTqRrsHvyDDTelgelxJ+SsejKKQ==} + '@types/react-transition-group@4.4.11': + resolution: {integrity: sha512-RM05tAniPZ5DZPzzNFP+DmrcOdD0efDUxMy3145oljWSl3x9ZV5vhme98gTxFrj2lhXvmGNnUiuDyJgY9IKkNA==} + '@types/react@18.3.12': resolution: {integrity: sha512-D2wOSq/d6Agt28q7rSI3jhU7G6aiuzljDGZ2hTZHIkrTLUI+AF3WMeKkEZ9nN2fkBAlcktT6vcZjDFiIhMYEQw==} @@ -578,6 +642,10 @@ packages: resolution: {integrity: sha512-qIj0G9wZbMGNLjLmg1PT6v2mE9AH2zlnADJD/2tC6E00hgmhUOfEB6greHPAfLRSufHqROIUTkw6E+M3lH0PTQ==} engines: {node: '>= 0.4'} + babel-plugin-macros@3.1.0: + resolution: {integrity: sha512-Cg7TFGpIr01vOQNODXOOaGz2NpCU5gl8x1qJFbb6hbZxR7XrcE2vtbAsTAbJ7/xwJtUuJEw8K8Zr/AE0LHlesg==} + engines: {node: '>=10', npm: '>=6'} + balanced-match@1.0.2: resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==} @@ -645,6 +713,13 @@ packages: concat-map@0.0.1: resolution: {integrity: sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==} + convert-source-map@1.9.0: + resolution: {integrity: sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A==} + + cosmiconfig@7.1.0: + resolution: {integrity: sha512-AdmX6xUzdNASswsFtmwSt7Vj8po9IuqXm0UXz7QKPuEUmPB4XyjGfaAr2PSuELMwkRMVH1EpIkX5bTZGRB3eCA==} + engines: {node: '>=10'} + cross-spawn@7.0.5: resolution: {integrity: sha512-ZVJrKKYunU38/76t0RMOulHOnUcbU9GbpWKAOZ0mhjr7CX6FVrH+4FrAapSOekrgFQ3f/8gwMEuIft0aKq6Hug==} engines: {node: '>= 8'} @@ -722,6 +797,9 @@ packages: resolution: {integrity: sha512-yS+Q5i3hBf7GBkd4KG8a7eBNNWNGLTaEwwYWUijIYM7zrlYDM0BFXHjjPWlWZ1Rg7UaddZeIDmi9jF3HmqiQ2w==} engines: {node: '>=6.0.0'} + dom-helpers@5.2.1: + resolution: {integrity: sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==} + dotenv@16.4.5: resolution: {integrity: sha512-ZmdL2rui+eB2YwhsWzjInR8LldtZHGDoQ1ugH85ppHKwpUHL7j7rN0Ti9NCnGiQbhaZ11FpR+7ao1dNsmduNUg==} engines: {node: '>=12'} @@ -742,6 +820,9 @@ packages: resolution: {integrity: sha512-LMHl3dXhTcfv8gM4kEzIUeTQ+7fpdA0l2tUf34BddXPkz2A5xJ5L/Pchd5BL6rdccM9QGvu0sWZzK1Z1t4wwyg==} engines: {node: '>=10.13.0'} + error-ex@1.3.2: + resolution: {integrity: sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==} + es-abstract@1.23.5: resolution: {integrity: sha512-vlmniQ0WNPwXqA0BnmwV3Ng7HxiGlh6r5U6JcTMNx8OilcAGqVJBHJcPjqOMaczU9fRuRK5Px2BdVyPRnKMMVQ==} engines: {node: '>= 0.4'} @@ -926,6 +1007,9 @@ packages: find-parent-dir@0.3.1: resolution: {integrity: sha512-o4UcykWV/XN9wm+jMEtWLPlV8RXCZnMhQI6F6OdHeSez7iiJWePw8ijOlskJZMsaQoGR/b7dH6lO02HhaTN7+A==} + find-root@1.1.0: + resolution: {integrity: sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng==} + find-up@5.0.0: resolution: {integrity: sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==} engines: {node: '>=10'} @@ -1048,6 +1132,9 @@ packages: resolution: {integrity: sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==} engines: {node: '>= 0.4'} + hoist-non-react-statics@3.3.2: + resolution: {integrity: sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==} + https-proxy-agent@7.0.5: resolution: {integrity: sha512-1e4Wqeblerz+tMKPIq2EMGiiWW1dIjZOksyHWSUm1rmuvw/how9hBHZ38lAGj5ID4Ik6EdkOw7NmWPy6LAwalw==} engines: {node: '>= 14'} @@ -1088,8 +1175,8 @@ packages: resolution: {integrity: sha512-wcjaerHw0ydZwfhiKbXJWLDY8A7yV7KhjQOpb83hGgGfId/aQa4TOvwyzn2PuswW2gPCYEL/nEAiSVpdOj1lXw==} engines: {node: '>= 0.4'} - is-arrayish@0.3.2: - resolution: {integrity: sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ==} + is-arrayish@0.2.1: + resolution: {integrity: sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==} is-async-function@2.0.0: resolution: {integrity: sha512-Y1JXKrfykRJGdlDwdKlLpLyMIiWqWvuSd17TvZk68PLAOGOoF4Xyav1z0Xhoi+gCYjZVeC5SI+hYFOfvXmGRCA==} @@ -1231,6 +1318,9 @@ packages: json-buffer@3.0.1: resolution: {integrity: sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==} + json-parse-even-better-errors@2.3.1: + resolution: {integrity: sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==} + json-schema-traverse@0.4.1: resolution: {integrity: sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==} @@ -1259,6 +1349,9 @@ packages: resolution: {integrity: sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==} engines: {node: '>= 0.8.0'} + lines-and-columns@1.2.4: + resolution: {integrity: sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==} + locate-path@6.0.0: resolution: {integrity: sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==} engines: {node: '>=10'} @@ -1273,6 +1366,9 @@ packages: lru-cache@10.4.3: resolution: {integrity: sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==} + memoize-one@6.0.0: + resolution: {integrity: sha512-rkpe71W0N0c0Xz6QD0eJETuWAJGnJ9afsl1srmwPrI+yBCkge5EycXXbYRyvL29zZVUWQCY7InPRCv3GDXuZNw==} + merge-stream@2.0.0: resolution: {integrity: sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==} @@ -1421,6 +1517,10 @@ packages: resolution: {integrity: sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==} engines: {node: '>=6'} + parse-json@5.2.0: + resolution: {integrity: sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==} + engines: {node: '>=8'} + path-exists@4.0.0: resolution: {integrity: sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==} engines: {node: '>=8'} @@ -1506,6 +1606,18 @@ packages: react: ^16 || ^17 || ^18 react-dom: ^16 || ^17 || ^18 + react-select@5.8.3: + resolution: {integrity: sha512-lVswnIq8/iTj1db7XCG74M/3fbGB6ZaluCzvwPGT5ZOjCdL/k0CLWhEK0vCBLuU5bHTEf6Gj8jtSvi+3v+tO1w==} + peerDependencies: + react: ^16.8.0 || ^17.0.0 || ^18.0.0 + react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 + + react-transition-group@4.4.5: + resolution: {integrity: sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==} + peerDependencies: + react: '>=16.6.0' + react-dom: '>=16.6.0' + react@18.3.1: resolution: {integrity: sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==} engines: {node: '>=0.10.0'} @@ -1518,6 +1630,9 @@ packages: resolution: {integrity: sha512-fmfw4XgoDke3kdI6h4xcUz1dG8uaiv5q9gcEwLS4Pnth2kxT+GZ7YehS1JTMGBQmtV7Y4GFGbs2re2NqhdozUg==} engines: {node: '>= 0.4'} + regenerator-runtime@0.14.1: + resolution: {integrity: sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==} + regexp.prototype.flags@1.5.3: resolution: {integrity: sha512-vqlC04+RQoFalODCbCumG2xIOvapzVMHwsyIGM/SIE8fRhFFsXeH8/QQ+s0T0kDAhKc4k30s73/0ydkHQz6HlQ==} engines: {node: '>= 0.4'} @@ -1618,6 +1733,10 @@ packages: resolution: {integrity: sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==} engines: {node: '>=0.10.0'} + source-map@0.5.7: + resolution: {integrity: sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ==} + engines: {node: '>=0.10.0'} + streamsearch@1.1.0: resolution: {integrity: sha512-Mcc5wHehp9aXz1ax6bZUyY5afg9u2rv5cqQI3mRrYkGC8rW2hM02jWuwjtL++LS5qinSyhj2QfLyNsuc+VsExg==} engines: {node: '>=10.0.0'} @@ -1692,6 +1811,9 @@ packages: babel-plugin-macros: optional: true + stylis@4.2.0: + resolution: {integrity: sha512-Orov6g6BB1sDfYgzWfTHDOxamtX1bE/zo104Dh9e6fqJ3PooipYyfJ0pUmrZO2wAvO8YbEyeFrkV91XTsGMSrw==} + stylis@4.3.2: resolution: {integrity: sha512-bhtUjWd/z6ltJiQwg0dUfxEJ+W+jdqQd8TbWLWyeIJHlnsqmGLRFFd8e5mA0AZi/zx90smXRlN66YMTcaSFifg==} @@ -1779,6 +1901,15 @@ packages: uri-js@4.4.1: resolution: {integrity: sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==} + use-isomorphic-layout-effect@1.1.2: + resolution: {integrity: sha512-49L8yCO3iGT/ZF9QttjwLF/ZD9Iwto5LnH5LmEdk/6cFmXddqi2ulF0edxTwjj+7mqvpVVGQWvbXZdn32wRSHA==} + peerDependencies: + '@types/react': '*' + react: ^16.8.0 || ^17.0.0 || ^18.0.0 + peerDependenciesMeta: + '@types/react': + optional: true + web-streams-polyfill@3.3.3: resolution: {integrity: sha512-d2JWLCivmZYTSIoge9MsgFCZrt571BikcWGYkjC1khllbTeDlGqZ2D8vD8E/lJa8WGWbb7Plm8/XJYV7IJHZZw==} engines: {node: '>= 8'} @@ -1844,6 +1975,10 @@ packages: resolution: {integrity: sha512-YgvUTfwqyc7UXVMrB+SImsVYSmTS8X/tSrtdNZMImM+n7+QTriRXyXim0mBrTXNeqzVF0KWGgHPeiyViFFrNDw==} engines: {node: '>=18'} + yaml@1.10.2: + resolution: {integrity: sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==} + engines: {node: '>= 6'} + yarnhook@0.6.2: resolution: {integrity: sha512-+vrULrVsgYbLd0ie1Ba087xYK4rzB6m2TQNgVen3pXZsm/FRl6GeYzsXttJ4Q9I/MmcK142wMaSFUPlBFASYHQ==} hasBin: true @@ -1868,6 +2003,13 @@ snapshots: '@jridgewell/trace-mapping': 0.3.25 jsesc: 3.0.2 + '@babel/helper-module-imports@7.25.9': + dependencies: + '@babel/traverse': 7.25.9 + '@babel/types': 7.26.0 + transitivePeerDependencies: + - supports-color + '@babel/helper-string-parser@7.25.9': {} '@babel/helper-validator-identifier@7.25.9': {} @@ -1876,6 +2018,10 @@ snapshots: dependencies: '@babel/types': 7.26.0 + '@babel/runtime@7.26.0': + dependencies: + regenerator-runtime: 0.14.1 + '@babel/template@7.25.9': dependencies: '@babel/code-frame': 7.26.2 @@ -1899,10 +2045,31 @@ snapshots: '@babel/helper-string-parser': 7.25.9 '@babel/helper-validator-identifier': 7.25.9 - '@emnapi/runtime@1.3.1': + '@emotion/babel-plugin@11.13.5': dependencies: - tslib: 2.8.1 - optional: true + '@babel/helper-module-imports': 7.25.9 + '@babel/runtime': 7.26.0 + '@emotion/hash': 0.9.2 + '@emotion/memoize': 0.9.0 + '@emotion/serialize': 1.3.3 + babel-plugin-macros: 3.1.0 + convert-source-map: 1.9.0 + escape-string-regexp: 4.0.0 + find-root: 1.1.0 + source-map: 0.5.7 + stylis: 4.2.0 + transitivePeerDependencies: + - supports-color + + '@emotion/cache@11.13.5': + dependencies: + '@emotion/memoize': 0.9.0 + '@emotion/sheet': 1.4.0 + '@emotion/utils': 1.4.2 + '@emotion/weak-memoize': 0.4.0 + stylis: 4.2.0 + + '@emotion/hash@0.9.2': {} '@emotion/is-prop-valid@1.2.2': dependencies: @@ -1910,8 +2077,46 @@ snapshots: '@emotion/memoize@0.8.1': {} + '@emotion/memoize@0.9.0': {} + + '@emotion/react@11.13.5(@types/react@18.3.12)(react@18.3.1)': + dependencies: + '@babel/runtime': 7.26.0 + '@emotion/babel-plugin': 11.13.5 + '@emotion/cache': 11.13.5 + '@emotion/serialize': 1.3.3 + '@emotion/use-insertion-effect-with-fallbacks': 1.1.0(react@18.3.1) + '@emotion/utils': 1.4.2 + '@emotion/weak-memoize': 0.4.0 + hoist-non-react-statics: 3.3.2 + react: 18.3.1 + optionalDependencies: + '@types/react': 18.3.12 + transitivePeerDependencies: + - supports-color + + '@emotion/serialize@1.3.3': + dependencies: + '@emotion/hash': 0.9.2 + '@emotion/memoize': 0.9.0 + '@emotion/unitless': 0.10.0 + '@emotion/utils': 1.4.2 + csstype: 3.1.3 + + '@emotion/sheet@1.4.0': {} + + '@emotion/unitless@0.10.0': {} + '@emotion/unitless@0.8.1': {} + '@emotion/use-insertion-effect-with-fallbacks@1.1.0(react@18.3.1)': + dependencies: + react: 18.3.1 + + '@emotion/utils@1.4.2': {} + + '@emotion/weak-memoize@0.4.0': {} + '@eslint-community/eslint-utils@4.4.1(eslint@8.57.1)': dependencies: eslint: 8.57.1 @@ -1935,6 +2140,17 @@ snapshots: '@eslint/js@8.57.1': {} + '@floating-ui/core@1.6.8': + dependencies: + '@floating-ui/utils': 0.2.8 + + '@floating-ui/dom@1.6.12': + dependencies: + '@floating-ui/core': 1.6.8 + '@floating-ui/utils': 0.2.8 + + '@floating-ui/utils@0.2.8': {} + '@humanwhocodes/config-array@0.13.0': dependencies: '@humanwhocodes/object-schema': 2.0.3 @@ -2169,6 +2385,8 @@ snapshots: dependencies: undici-types: 6.19.8 + '@types/parse-json@4.0.2': {} + '@types/phoenix@1.6.5': {} '@types/prop-types@15.7.13': {} @@ -2177,6 +2395,10 @@ snapshots: dependencies: '@types/react': 18.3.12 + '@types/react-transition-group@4.4.11': + dependencies: + '@types/react': 18.3.12 + '@types/react@18.3.12': dependencies: '@types/prop-types': 15.7.13 @@ -2388,6 +2610,12 @@ snapshots: axobject-query@4.1.0: {} + babel-plugin-macros@3.1.0: + dependencies: + '@babel/runtime': 7.26.0 + cosmiconfig: 7.1.0 + resolve: 1.22.8 + balanced-match@1.0.2: {} bin-links@5.0.0: @@ -2460,6 +2688,16 @@ snapshots: concat-map@0.0.1: {} + convert-source-map@1.9.0: {} + + cosmiconfig@7.1.0: + dependencies: + '@types/parse-json': 4.0.2 + import-fresh: 3.3.0 + parse-json: 5.2.0 + path-type: 4.0.0 + yaml: 1.10.2 + cross-spawn@7.0.5: dependencies: path-key: 3.1.1 @@ -2535,6 +2773,11 @@ snapshots: dependencies: esutils: 2.0.3 + dom-helpers@5.2.1: + dependencies: + '@babel/runtime': 7.26.0 + csstype: 3.1.3 + dotenv@16.4.5: {} eastasianwidth@0.2.0: {} @@ -2552,6 +2795,10 @@ snapshots: graceful-fs: 4.2.11 tapable: 2.2.1 + error-ex@1.3.2: + dependencies: + is-arrayish: 0.2.1 + es-abstract@1.23.5: dependencies: array-buffer-byte-length: 1.0.1 @@ -2685,7 +2932,7 @@ snapshots: debug: 4.3.7 enhanced-resolve: 5.17.1 eslint: 8.57.1 - eslint-module-utils: 2.12.0(@typescript-eslint/parser@7.2.0(eslint@8.57.1)(typescript@5.4.5))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.3)(eslint@8.57.1) + eslint-module-utils: 2.12.0(@typescript-eslint/parser@7.2.0(eslint@8.57.1)(typescript@5.4.5))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@7.2.0(eslint@8.57.1)(typescript@5.4.5))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.31.0)(eslint@8.57.1))(eslint@8.57.1) fast-glob: 3.3.2 get-tsconfig: 4.8.1 is-bun-module: 1.2.1 @@ -2698,7 +2945,7 @@ snapshots: - eslint-import-resolver-webpack - supports-color - eslint-module-utils@2.12.0(@typescript-eslint/parser@7.2.0(eslint@8.57.1)(typescript@5.4.5))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.3)(eslint@8.57.1): + eslint-module-utils@2.12.0(@typescript-eslint/parser@7.2.0(eslint@8.57.1)(typescript@5.4.5))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@7.2.0(eslint@8.57.1)(typescript@5.4.5))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.31.0)(eslint@8.57.1))(eslint@8.57.1): dependencies: debug: 3.2.7 optionalDependencies: @@ -2720,7 +2967,7 @@ snapshots: doctrine: 2.1.0 eslint: 8.57.1 eslint-import-resolver-node: 0.3.9 - eslint-module-utils: 2.12.0(@typescript-eslint/parser@7.2.0(eslint@8.57.1)(typescript@5.4.5))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.3)(eslint@8.57.1) + eslint-module-utils: 2.12.0(@typescript-eslint/parser@7.2.0(eslint@8.57.1)(typescript@5.4.5))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@7.2.0(eslint@8.57.1)(typescript@5.4.5))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.31.0)(eslint@8.57.1))(eslint@8.57.1) hasown: 2.0.2 is-core-module: 2.15.1 is-glob: 4.0.3 @@ -2896,6 +3143,8 @@ snapshots: find-parent-dir@0.3.1: {} + find-root@1.1.0: {} + find-up@5.0.0: dependencies: locate-path: 6.0.0 @@ -3039,6 +3288,10 @@ snapshots: dependencies: function-bind: 1.1.2 + hoist-non-react-statics@3.3.2: + dependencies: + react-is: 16.13.1 + https-proxy-agent@7.0.5: dependencies: agent-base: 7.1.1 @@ -3077,8 +3330,7 @@ snapshots: call-bind: 1.0.7 get-intrinsic: 1.2.4 - is-arrayish@0.3.2: - optional: true + is-arrayish@0.2.1: {} is-async-function@2.0.0: dependencies: @@ -3209,6 +3461,8 @@ snapshots: json-buffer@3.0.1: {} + json-parse-even-better-errors@2.3.1: {} + json-schema-traverse@0.4.1: {} json-stable-stringify-without-jsonify@1.0.1: {} @@ -3239,6 +3493,8 @@ snapshots: prelude-ls: 1.2.1 type-check: 0.4.0 + lines-and-columns@1.2.4: {} + locate-path@6.0.0: dependencies: p-locate: 5.0.0 @@ -3251,6 +3507,8 @@ snapshots: lru-cache@10.4.3: {} + memoize-one@6.0.0: {} + merge-stream@2.0.0: {} merge2@1.4.1: {} @@ -3399,6 +3657,13 @@ snapshots: dependencies: callsites: 3.1.0 + parse-json@5.2.0: + dependencies: + '@babel/code-frame': 7.26.2 + error-ex: 1.3.2 + json-parse-even-better-errors: 2.3.1 + lines-and-columns: 1.2.4 + path-exists@4.0.0: {} path-is-absolute@1.0.1: {} @@ -3468,6 +3733,32 @@ snapshots: react: 18.3.1 react-dom: 18.3.1(react@18.3.1) + react-select@5.8.3(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1): + dependencies: + '@babel/runtime': 7.26.0 + '@emotion/cache': 11.13.5 + '@emotion/react': 11.13.5(@types/react@18.3.12)(react@18.3.1) + '@floating-ui/dom': 1.6.12 + '@types/react-transition-group': 4.4.11 + memoize-one: 6.0.0 + prop-types: 15.8.1 + react: 18.3.1 + react-dom: 18.3.1(react@18.3.1) + react-transition-group: 4.4.5(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + use-isomorphic-layout-effect: 1.1.2(@types/react@18.3.12)(react@18.3.1) + transitivePeerDependencies: + - '@types/react' + - supports-color + + react-transition-group@4.4.5(react-dom@18.3.1(react@18.3.1))(react@18.3.1): + dependencies: + '@babel/runtime': 7.26.0 + dom-helpers: 5.2.1 + loose-envify: 1.4.0 + prop-types: 15.8.1 + react: 18.3.1 + react-dom: 18.3.1(react@18.3.1) + react@18.3.1: dependencies: loose-envify: 1.4.0 @@ -3484,6 +3775,8 @@ snapshots: globalthis: 1.0.4 which-builtin-type: 1.1.4 + regenerator-runtime@0.14.1: {} + regexp.prototype.flags@1.5.3: dependencies: call-bind: 1.0.7 @@ -3613,6 +3906,8 @@ snapshots: source-map-js@1.2.1: {} + source-map@0.5.7: {} + streamsearch@1.1.0: {} string-width@4.2.3: @@ -3705,6 +4000,8 @@ snapshots: client-only: 0.0.1 react: 18.3.1 + stylis@4.2.0: {} + stylis@4.3.2: {} supabase@1.219.2: @@ -3809,6 +4106,12 @@ snapshots: dependencies: punycode: 2.3.1 + use-isomorphic-layout-effect@1.1.2(@types/react@18.3.12)(react@18.3.1): + dependencies: + react: 18.3.1 + optionalDependencies: + '@types/react': 18.3.12 + web-streams-polyfill@3.3.3: {} webidl-conversions@3.0.1: {} @@ -3885,6 +4188,8 @@ snapshots: yallist@5.0.0: {} + yaml@1.10.2: {} + yarnhook@0.6.2: dependencies: execa: 4.1.0 From 4e8f4ffa242ae052e247fac4466a2a142f1de6ef Mon Sep 17 00:00:00 2001 From: Kyle Ramachandran Date: Thu, 5 Dec 2024 14:06:02 -0800 Subject: [PATCH 04/28] apply styling to react-select --- components/FilterDropdownMultiple/index.tsx | 88 +++++++++++++++++- components/FilterDropdownMultiple/styles.ts | 98 +++++++++++++-------- 2 files changed, 146 insertions(+), 40 deletions(-) diff --git a/components/FilterDropdownMultiple/index.tsx b/components/FilterDropdownMultiple/index.tsx index a80edd5..9c7c0d0 100644 --- a/components/FilterDropdownMultiple/index.tsx +++ b/components/FilterDropdownMultiple/index.tsx @@ -1,7 +1,15 @@ -import React from 'react'; -import Select, { MultiValue } from 'react-select'; +import React, { useState } from 'react'; +import Select, { + ActionMeta, + components, + GroupBase, + MultiValue, + MultiValueProps, + OptionProps, +} from 'react-select'; +import { P3 } from '@/styles/text'; import { DropdownOption } from '@/types/schema'; -import { StyledMultiSelect } from './styles'; +import { customSelectStyles, StyledOption } from './styles'; interface FilterDropdownProps { value: DropdownOption[]; @@ -18,8 +26,75 @@ export default function FilterDropdownMultiple({ placeholder, disabled = false, }: FilterDropdownProps) { - const handleChange = (selectedOptions: MultiValue>) => { + const [userSelectedOptions, setUserSelectedOptions] = useState< + DropdownOption[] + >([]); + + const handleChange = ( + selectedOptions: MultiValue>, + _actionMeta: ActionMeta>, + ) => { setStateAction(selectedOptions as DropdownOption[]); + setUserSelectedOptions(selectedOptions as DropdownOption[]); + }; + + // overrides the default MultiValue to display custom text + // displays first selected value followed by + n if more than 1 selected + // StyledMultiValue appears for each selected option, so if more than 1 is selected, + // the rest of the selected options are not shown, instead the + n is shown as part of the first option + const StyledMultiValue = ({ + children, + ...props + }: MultiValueProps< + DropdownOption, + true, + GroupBase> + >) => { + const { selectProps, data } = props; + if (Array.isArray(selectProps.value)) { + // find index of the selected option and check if its the first + const index = selectProps.value.findIndex( + (option: DropdownOption) => option.value === data.value, + ); + const isFirst = index === 0; + // find number of remaining selected options + const additionalCount = selectProps.value.length - 1; + + return ( + + {/* display label of first selected option */} + {isFirst ? ( + <> + {data.label} + {/* display additional count only if more than one option is selected*/} + {additionalCount > 0 && ` +${additionalCount}`} + + ) : // don't display anything if not the first selected option + null} + + ); + } + + // nothing is selected yet + return null; + }; + + // overrides the default Options to display a checkbox that ticks when option selected + const CustomOption = ( + props: OptionProps, true, GroupBase>>, + ) => { + return ( + + + + {props.label} + + + ); }; return ( @@ -31,6 +106,11 @@ export default function FilterDropdownMultiple({ placeholder={placeholder} onChange={handleChange} closeMenuOnSelect={false} + styles={customSelectStyles} + isSearchable={false} + hideSelectedOptions={false} + isClearable={false} + components={{ MultiValue: StyledMultiValue, Option: CustomOption }} /> ); } diff --git a/components/FilterDropdownMultiple/styles.ts b/components/FilterDropdownMultiple/styles.ts index 5bc3086..cea95eb 100644 --- a/components/FilterDropdownMultiple/styles.ts +++ b/components/FilterDropdownMultiple/styles.ts @@ -1,40 +1,66 @@ -import { MultiSelect } from 'react-multi-select-component'; +import { StylesConfig } from 'react-select'; import styled from 'styled-components'; import COLORS from '@/styles/colors'; +import { DropdownOption } from '@/types/schema'; -export const StyledMultiSelect = styled(MultiSelect)` - .dropdown-container { - border-radius: 60px !important; - padding: 0px 14px 0px 14px !important; - align-items: center; - justify-content: center; - justify-items: center; - gap: 2px; - background-color: #fff !important; - border: 0.5px solid ${COLORS.midgray} !important; - color: #fff; - position: relative; - } - - .dropdown-content { - display: block !important; - position: absolute !important; - z-index: 10000 !important; - top: 100%; - color: ${COLORS.midgray}; - } - - .dropdown-heading { - font-size: 0.75rem !important; - padding: 0px !important; - } - - .dropdown-heading-value { - color: ${COLORS.midgray} !important; - } - - // changing color of the default display text - .gray { - color: ${COLORS.midgray} !important; - } +export const StyledOption = styled.div` + display: flex; + align-items: center; `; + +// custom styles for react-select component +export const customSelectStyles: StylesConfig, true> = { + control: (baseStyles, state) => ({ + ...baseStyles, + borderRadius: '57px', + border: `0.5px solid ${COLORS.midgray}`, + backgroundColor: state.isDisabled ? COLORS.lightgray : '#fff', + padding: '8px 14px', + color: COLORS.midgray, + }), + placeholder: baseStyles => ({ + ...baseStyles, + color: COLORS.midgray, + fontSize: '0.75rem', + padding: '0px', + margin: '0px', + }), + input: baseStyles => ({ + ...baseStyles, + margin: '0px', + padding: '0px', + }), + // hide vertical bar between arrow and text + indicatorSeparator: baseStyles => ({ + ...baseStyles, + display: 'none', + }), + clearIndicator: baseStyles => ({ + ...baseStyles, + padding: '0px', + }), + dropdownIndicator: baseStyles => ({ + ...baseStyles, + padding: '0px', + marginLeft: '-4px', // move the dropdown indicator to the left cant override text styles + color: COLORS.midgray, + }), + multiValue: baseStyles => ({ + ...baseStyles, + backgroundColor: '#fff', + border: '0px', + padding: '0px', + margin: '0px', + }), + multiValueLabel: baseStyles => ({ + ...baseStyles, + fontSize: '0.75rem', + color: `${COLORS.midgray} !important`, + padding: '0px', + paddingLeft: '0px', + }), + multiValueRemove: baseStyles => ({ + ...baseStyles, + display: 'none', + }), +}; From a75868dad2879e71d4a0eb6bfb4746eb372c5744 Mon Sep 17 00:00:00 2001 From: Kyle Ramachandran Date: Thu, 5 Dec 2024 16:43:19 -0800 Subject: [PATCH 05/28] temp refactor filterdropdownsingle --- app/seasonal-planting-guide/page.tsx | 12 +-- components/FilterDropdownMultiple/index.tsx | 5 -- components/FilterDropdownSingle/index.tsx | 92 ++++++++++++++------- components/PlantCalendarList/index.tsx | 2 +- utils/helpers.ts | 13 ++- 5 files changed, 79 insertions(+), 45 deletions(-) diff --git a/app/seasonal-planting-guide/page.tsx b/app/seasonal-planting-guide/page.tsx index abefd1b..489252b 100644 --- a/app/seasonal-planting-guide/page.tsx +++ b/app/seasonal-planting-guide/page.tsx @@ -39,7 +39,9 @@ export default function SeasonalPlantingGuide() { const [selectedPlantingType, setSelectedPlantingType] = useState< DropdownOption[] >([]); - const [selectedUsState, setSelectedUsState] = useState(''); + const [selectedUsState, setSelectedUsState] = useState< + DropdownOption + >({ label: '', value: '' }); const [searchTerm, setSearchTerm] = useState(''); const clearFilters = () => { @@ -50,7 +52,10 @@ export default function SeasonalPlantingGuide() { useEffect(() => { if (profileReady && profileData) { - setSelectedUsState(profileData.us_state); + setSelectedUsState({ + label: profileData.us_state, + value: profileData.us_state, + }); } }, [profileData, profileReady]); @@ -65,7 +70,6 @@ export default function SeasonalPlantingGuide() {

Choose Your State

({ placeholder, disabled = false, }: FilterDropdownProps) { - const [userSelectedOptions, setUserSelectedOptions] = useState< - DropdownOption[] - >([]); - const handleChange = ( selectedOptions: MultiValue>, _actionMeta: ActionMeta>, ) => { setStateAction(selectedOptions as DropdownOption[]); - setUserSelectedOptions(selectedOptions as DropdownOption[]); }; // overrides the default MultiValue to display custom text diff --git a/components/FilterDropdownSingle/index.tsx b/components/FilterDropdownSingle/index.tsx index 261fecb..d020b30 100644 --- a/components/FilterDropdownSingle/index.tsx +++ b/components/FilterDropdownSingle/index.tsx @@ -1,31 +1,47 @@ import React, { useState } from 'react'; +import Select, { + ActionMeta, + components, + GroupBase, + MultiValue, + OptionProps, + SingleValue, +} from 'react-select'; import { DropdownOption } from '@/types/schema'; +import { customSelectStyles } from '../FilterDropdownMultiple/styles'; import { FilterDropdownInput } from './styles'; -interface FilterDropdownProps { - name?: string; - id?: string; - value: string; - setStateAction: React.Dispatch>; - options: DropdownOption[]; +interface FilterDropdownProps { + value: DropdownOption; + setStateAction: React.Dispatch>>; + options: DropdownOption[]; placeholder: string; disabled?: boolean; } -export default function FilterDropdownSingle({ - name, - id, +export default function FilterDropdownSingle({ value, setStateAction, options, placeholder, disabled, -}: FilterDropdownProps) { +}: FilterDropdownProps) { const [isOpen, setIsOpen] = useState(false); - const handleChange = (event: React.ChangeEvent) => { - setStateAction(event.target.value); - setIsOpen(false); + // const handleChange = (event: React.ChangeEvent) => { + // setStateAction(event.target.value); + // setIsOpen(false); + // }; + + const handleChange = ( + selectedOptions: + | SingleValue> + | MultiValue>, + _actionMeta: ActionMeta>, + ) => { + if (!Array.isArray(selectedOptions)) { + setStateAction(selectedOptions as DropdownOption); + } }; const handleToggle = () => { @@ -33,25 +49,37 @@ export default function FilterDropdownSingle({ }; return ( - setIsOpen(false)} + // setIsOpen(false)} + // value={value} + // $hasValue={value !== ''} + // disabled={disabled} + // > + // {/*Default placeholder text*/} + // + // {options.map((option, index) => ( + // + // ))} + // + ({ placeholder={placeholder} onChange={handleChange} closeMenuOnSelect={false} - styles={customSelectStyles} + styles={customSelectStyles(small)} isSearchable={false} hideSelectedOptions={false} isClearable={false} diff --git a/components/FilterDropdownSingle/styles.ts b/components/FilterDropdownSingle/styles.ts index 725f68b..3a4ea1c 100644 --- a/components/FilterDropdownSingle/styles.ts +++ b/components/FilterDropdownSingle/styles.ts @@ -1,5 +1,7 @@ +import { StylesConfig } from 'react-select'; import styled from 'styled-components'; import COLORS from '@/styles/colors'; +import { DropdownOption } from '@/types/schema'; export const FilterDropdownInput = styled.select<{ $hasValue: boolean }>` border-radius: 60px; @@ -13,3 +15,57 @@ export const FilterDropdownInput = styled.select<{ $hasValue: boolean }>` background-color: ${COLORS.lightgray}; } `; + +// custom styles for react-select component +export const customSelectStyles = ( + $isSmall: boolean, +): StylesConfig, true> => ({ + control: (baseStyles, state) => ({ + ...baseStyles, + borderRadius: '57px', + border: `0.5px solid ${COLORS.midgray}`, + backgroundColor: state.isDisabled ? COLORS.lightgray : '#fff', + padding: '8px 14px', + color: COLORS.midgray, + // if small is true, set min width to 150px, if undefined don't set min width + ...($isSmall && { minWidth: '150px' }), + }), + placeholder: baseStyles => ({ + ...baseStyles, + color: COLORS.midgray, + fontSize: '0.75rem', + padding: '0px', + margin: '0px', + justifySelf: 'center', + }), + input: baseStyles => ({ + ...baseStyles, + margin: '0px', + padding: '0px', + }), + // hide vertical bar between arrow and text + indicatorSeparator: baseStyles => ({ + ...baseStyles, + display: 'none', + }), + clearIndicator: baseStyles => ({ + ...baseStyles, + padding: '0px', + }), + dropdownIndicator: baseStyles => ({ + ...baseStyles, + padding: '0px', + marginLeft: '-4px', // move the dropdown indicator to the left cant override text styles + color: COLORS.midgray, + }), + singleValue: baseStyles => ({ + ...baseStyles, + backgroundColor: '#fff', + border: '0px', + padding: '0px', + margin: '0px', + fontSize: '0.75rem', + color: `${COLORS.black} !important`, + paddingLeft: '0px', + }), +}); diff --git a/components/PlantCalendarList/index.tsx b/components/PlantCalendarList/index.tsx index 4e8a941..82d0fce 100644 --- a/components/PlantCalendarList/index.tsx +++ b/components/PlantCalendarList/index.tsx @@ -22,7 +22,7 @@ interface PlantListProps { harvestSeasonFilterValue: DropdownOption[]; plantingTypeFilterValue: DropdownOption[]; growingSeasonFilterValue: DropdownOption[]; - usStateFilterValue: DropdownOption; + usStateFilterValue: DropdownOption | null; searchTerm: string; } diff --git a/utils/helpers.ts b/utils/helpers.ts index 776345b..91958e3 100644 --- a/utils/helpers.ts +++ b/utils/helpers.ts @@ -224,7 +224,7 @@ export function checkDifficulty( } export function checkUsState( - usStateFilterValue: DropdownOption, + usStateFilterValue: DropdownOption | null, plant: Plant, ) { // Automatically returns true if no selected usState @@ -232,7 +232,6 @@ export function checkUsState( return true; } - console.log('usStateFilterValue', usStateFilterValue); // Check if plant's us_state matches usStateFilterValue const selectedState = usStateFilterValue.value; return plant.us_state === selectedState; From 605bc82c0267cb249f37bbc1c41d31417e7331fc Mon Sep 17 00:00:00 2001 From: Kyle Ramachandran Date: Sat, 7 Dec 2024 01:44:43 -0800 Subject: [PATCH 07/28] fix lint errors --- components/FilterDropdownMultiple/index.tsx | 10 ++++------ components/FilterDropdownMultiple/styles.ts | 22 +++++++++++++-------- components/FilterDropdownSingle/index.tsx | 4 ++-- components/FilterDropdownSingle/styles.ts | 17 ++++++++-------- 4 files changed, 29 insertions(+), 24 deletions(-) diff --git a/components/FilterDropdownMultiple/index.tsx b/components/FilterDropdownMultiple/index.tsx index 857c83f..f5a8b94 100644 --- a/components/FilterDropdownMultiple/index.tsx +++ b/components/FilterDropdownMultiple/index.tsx @@ -26,10 +26,7 @@ export default function FilterDropdownMultiple({ placeholder, disabled = false, }: FilterDropdownProps) { - const handleChange = ( - selectedOptions: MultiValue>, - _actionMeta: ActionMeta>, - ) => { + const handleChange = (selectedOptions: MultiValue>) => { setStateAction(selectedOptions as DropdownOption[]); }; @@ -38,7 +35,6 @@ export default function FilterDropdownMultiple({ // StyledMultiValue appears for each selected option, so if more than 1 is selected, // the rest of the selected options are not shown, instead the + n is shown as part of the first option const StyledMultiValue = ({ - children, ...props }: MultiValueProps< DropdownOption, @@ -101,10 +97,12 @@ export default function FilterDropdownMultiple({ placeholder={placeholder} onChange={handleChange} closeMenuOnSelect={false} - styles={customSelectStyles} + styles={customSelectStyles()} isSearchable={false} hideSelectedOptions={false} + // can bring this back if we want an 'x' to clear filters for each dropdown isClearable={false} + // use custom styled components instead of default components components={{ MultiValue: StyledMultiValue, Option: CustomOption }} /> ); diff --git a/components/FilterDropdownMultiple/styles.ts b/components/FilterDropdownMultiple/styles.ts index 3de92be..dee7402 100644 --- a/components/FilterDropdownMultiple/styles.ts +++ b/components/FilterDropdownMultiple/styles.ts @@ -9,7 +9,12 @@ export const StyledOption = styled.div` `; // custom styles for react-select component -export const customSelectStyles: StylesConfig, true> = { +// Option type is DropdownOption and isMulti is true +export const customSelectStyles = (): StylesConfig< + DropdownOption, + true +> => ({ + // container control: (baseStyles, state) => ({ ...baseStyles, borderRadius: '57px', @@ -18,6 +23,7 @@ export const customSelectStyles: StylesConfig, true> = { padding: '8px 14px', color: COLORS.midgray, }), + // placeholder text placeholder: baseStyles => ({ ...baseStyles, color: COLORS.midgray, @@ -25,26 +31,24 @@ export const customSelectStyles: StylesConfig, true> = { padding: '0px', margin: '0px', }), - input: baseStyles => ({ - ...baseStyles, - margin: '0px', - padding: '0px', - }), // hide vertical bar between arrow and text indicatorSeparator: baseStyles => ({ ...baseStyles, display: 'none', }), + // 'x' to clear selected option(s) clearIndicator: baseStyles => ({ ...baseStyles, padding: '0px', }), + // dropdown arrow dropdownIndicator: baseStyles => ({ ...baseStyles, padding: '0px', - marginLeft: '-4px', // move the dropdown indicator to the left cant override text styles + marginLeft: '-4px', // move the dropdown indicator to the left, cant override text styles color: COLORS.midgray, }), + // container for selected multi option multiValue: baseStyles => ({ ...baseStyles, backgroundColor: '#fff', @@ -52,6 +56,7 @@ export const customSelectStyles: StylesConfig, true> = { padding: '0px', margin: '0px', }), + // multi option display text multiValueLabel: baseStyles => ({ ...baseStyles, fontSize: '0.75rem', @@ -59,8 +64,9 @@ export const customSelectStyles: StylesConfig, true> = { padding: '0px', paddingLeft: '0px', }), + // hide 'x' next to each multi option multiValueRemove: baseStyles => ({ ...baseStyles, display: 'none', }), -}; +}); diff --git a/components/FilterDropdownSingle/index.tsx b/components/FilterDropdownSingle/index.tsx index d263d14..2175ea4 100644 --- a/components/FilterDropdownSingle/index.tsx +++ b/components/FilterDropdownSingle/index.tsx @@ -28,7 +28,6 @@ export default function FilterDropdownSingle({ selectedOptions: | SingleValue> | MultiValue>, - _actionMeta: ActionMeta>, ) => { if (!Array.isArray(selectedOptions)) { setStateAction(selectedOptions as DropdownOption); @@ -43,9 +42,10 @@ export default function FilterDropdownSingle({ placeholder={placeholder} onChange={handleChange} closeMenuOnSelect={false} - styles={customSelectStyles(small)} + styles={customSelectStyles(small)} isSearchable={false} hideSelectedOptions={false} + // can bring this back if we want an 'x' to clear filters for each dropdown isClearable={false} /> ); diff --git a/components/FilterDropdownSingle/styles.ts b/components/FilterDropdownSingle/styles.ts index 3a4ea1c..566fc79 100644 --- a/components/FilterDropdownSingle/styles.ts +++ b/components/FilterDropdownSingle/styles.ts @@ -17,9 +17,11 @@ export const FilterDropdownInput = styled.select<{ $hasValue: boolean }>` `; // custom styles for react-select component -export const customSelectStyles = ( +// Option type is DropdownOption +export const customSelectStyles = ( $isSmall: boolean, -): StylesConfig, true> => ({ +): StylesConfig, true> => ({ + // container control: (baseStyles, state) => ({ ...baseStyles, borderRadius: '57px', @@ -30,6 +32,7 @@ export const customSelectStyles = ( // if small is true, set min width to 150px, if undefined don't set min width ...($isSmall && { minWidth: '150px' }), }), + // placeholder text placeholder: baseStyles => ({ ...baseStyles, color: COLORS.midgray, @@ -38,26 +41,24 @@ export const customSelectStyles = ( margin: '0px', justifySelf: 'center', }), - input: baseStyles => ({ - ...baseStyles, - margin: '0px', - padding: '0px', - }), // hide vertical bar between arrow and text indicatorSeparator: baseStyles => ({ ...baseStyles, display: 'none', }), + // 'x' to clear selected option(s) clearIndicator: baseStyles => ({ ...baseStyles, padding: '0px', }), + // dropdown arrow dropdownIndicator: baseStyles => ({ ...baseStyles, padding: '0px', - marginLeft: '-4px', // move the dropdown indicator to the left cant override text styles + marginLeft: '-4px', // move the dropdown indicator to the left, cant override text styles color: COLORS.midgray, }), + // selected option display text singleValue: baseStyles => ({ ...baseStyles, backgroundColor: '#fff', From 5b001cb35bfdb40f9b997f645d4c2acf48c18c40 Mon Sep 17 00:00:00 2001 From: Kyle Ramachandran Date: Sat, 7 Dec 2024 01:47:42 -0800 Subject: [PATCH 08/28] remove unused imports --- components/FilterDropdownMultiple/index.tsx | 1 - components/FilterDropdownSingle/index.tsx | 2 +- 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/components/FilterDropdownMultiple/index.tsx b/components/FilterDropdownMultiple/index.tsx index f5a8b94..9ff6b00 100644 --- a/components/FilterDropdownMultiple/index.tsx +++ b/components/FilterDropdownMultiple/index.tsx @@ -1,6 +1,5 @@ import React from 'react'; import Select, { - ActionMeta, components, GroupBase, MultiValue, diff --git a/components/FilterDropdownSingle/index.tsx b/components/FilterDropdownSingle/index.tsx index 2175ea4..60d05e9 100644 --- a/components/FilterDropdownSingle/index.tsx +++ b/components/FilterDropdownSingle/index.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import Select, { ActionMeta, MultiValue, SingleValue } from 'react-select'; +import Select, { MultiValue, SingleValue } from 'react-select'; import { DropdownOption } from '@/types/schema'; import { customSelectStyles } from './styles'; From 1ec4cb3c5afbfff224f5a2f9afedc24baa8a6603 Mon Sep 17 00:00:00 2001 From: Kyle Ramachandran Date: Sat, 7 Dec 2024 11:13:16 -0800 Subject: [PATCH 09/28] finalise filter stylings --- app/seasonal-planting-guide/page.tsx | 7 +++++-- app/seasonal-planting-guide/styles.ts | 6 ++++++ components/FilterDropdownMultiple/index.tsx | 2 -- components/FilterDropdownMultiple/styles.ts | 1 + components/FilterDropdownSingle/index.tsx | 6 ++---- components/FilterDropdownSingle/styles.ts | 20 +++++++++++--------- 6 files changed, 25 insertions(+), 17 deletions(-) diff --git a/app/seasonal-planting-guide/page.tsx b/app/seasonal-planting-guide/page.tsx index f6b57e7..edba300 100644 --- a/app/seasonal-planting-guide/page.tsx +++ b/app/seasonal-planting-guide/page.tsx @@ -22,6 +22,7 @@ import { PageContainer, PageTitle, StateOptionsContainer, + VerticalSeparator, } from './styles'; // (static) filter options imported from utils/dropdownOptions @@ -74,9 +75,12 @@ export default function SeasonalPlantingGuide() { placeholder="State" options={usStateOptions} disabled={!selectedUsState} - small={false} + small={true} /> + {/* vertical bar to separate state and other filters */} + + ) : ( diff --git a/app/seasonal-planting-guide/styles.ts b/app/seasonal-planting-guide/styles.ts index 0013793..36ae86d 100644 --- a/app/seasonal-planting-guide/styles.ts +++ b/app/seasonal-planting-guide/styles.ts @@ -43,3 +43,9 @@ export const PageTitle = styled.div` gap: 12px; align-items: center; `; + +export const VerticalSeparator = styled.div` + height: inherit; + width: 1px; + background-color: ${COLORS.lightgray}; +`; diff --git a/components/FilterDropdownMultiple/index.tsx b/components/FilterDropdownMultiple/index.tsx index 9ff6b00..e607039 100644 --- a/components/FilterDropdownMultiple/index.tsx +++ b/components/FilterDropdownMultiple/index.tsx @@ -99,8 +99,6 @@ export default function FilterDropdownMultiple({ styles={customSelectStyles()} isSearchable={false} hideSelectedOptions={false} - // can bring this back if we want an 'x' to clear filters for each dropdown - isClearable={false} // use custom styled components instead of default components components={{ MultiValue: StyledMultiValue, Option: CustomOption }} /> diff --git a/components/FilterDropdownMultiple/styles.ts b/components/FilterDropdownMultiple/styles.ts index dee7402..316d6eb 100644 --- a/components/FilterDropdownMultiple/styles.ts +++ b/components/FilterDropdownMultiple/styles.ts @@ -22,6 +22,7 @@ export const customSelectStyles = (): StylesConfig< backgroundColor: state.isDisabled ? COLORS.lightgray : '#fff', padding: '8px 14px', color: COLORS.midgray, + minWidth: '138px', }), // placeholder text placeholder: baseStyles => ({ diff --git a/components/FilterDropdownSingle/index.tsx b/components/FilterDropdownSingle/index.tsx index 60d05e9..a3981f1 100644 --- a/components/FilterDropdownSingle/index.tsx +++ b/components/FilterDropdownSingle/index.tsx @@ -13,7 +13,7 @@ interface FilterDropdownProps { disabled?: boolean; // for custom styling since initial dropdown to select user's state // is a different size to a normal single dropdown - small: boolean; + small?: boolean; } export default function FilterDropdownSingle({ @@ -22,7 +22,7 @@ export default function FilterDropdownSingle({ options, placeholder, disabled, - small, + small = false, }: FilterDropdownProps) { const handleChange = ( selectedOptions: @@ -45,8 +45,6 @@ export default function FilterDropdownSingle({ styles={customSelectStyles(small)} isSearchable={false} hideSelectedOptions={false} - // can bring this back if we want an 'x' to clear filters for each dropdown - isClearable={false} /> ); } diff --git a/components/FilterDropdownSingle/styles.ts b/components/FilterDropdownSingle/styles.ts index 566fc79..0823d76 100644 --- a/components/FilterDropdownSingle/styles.ts +++ b/components/FilterDropdownSingle/styles.ts @@ -25,12 +25,15 @@ export const customSelectStyles = ( control: (baseStyles, state) => ({ ...baseStyles, borderRadius: '57px', - border: `0.5px solid ${COLORS.midgray}`, - backgroundColor: state.isDisabled ? COLORS.lightgray : '#fff', + border: `0.5px solid ${state.hasValue ? COLORS.shrub : COLORS.midgray}`, + backgroundColor: state.isDisabled + ? COLORS.lightgray + : state.hasValue + ? COLORS.shrub + : '#fff', padding: '8px 14px', color: COLORS.midgray, - // if small is true, set min width to 150px, if undefined don't set min width - ...($isSmall && { minWidth: '150px' }), + minWidth: $isSmall ? '93px' : '150px', }), // placeholder text placeholder: baseStyles => ({ @@ -52,21 +55,20 @@ export const customSelectStyles = ( padding: '0px', }), // dropdown arrow - dropdownIndicator: baseStyles => ({ + dropdownIndicator: (baseStyles, state) => ({ ...baseStyles, padding: '0px', marginLeft: '-4px', // move the dropdown indicator to the left, cant override text styles - color: COLORS.midgray, + color: state.hasValue ? '#fff' : COLORS.midgray, }), // selected option display text - singleValue: baseStyles => ({ + singleValue: (baseStyles, state) => ({ ...baseStyles, - backgroundColor: '#fff', border: '0px', padding: '0px', margin: '0px', fontSize: '0.75rem', - color: `${COLORS.black} !important`, + color: state.hasValue ? `#fff` : `${COLORS.black} !important`, paddingLeft: '0px', }), }); From e111a9662020ec4d229e61e9207504452ad8a5f8 Mon Sep 17 00:00:00 2001 From: Kyle Ramachandran Date: Sat, 7 Dec 2024 11:18:15 -0800 Subject: [PATCH 10/28] move MonthHeader to inside PlantCalendarList --- components/MonthHeader/index.tsx | 27 -------------------------- components/MonthHeader/styles.ts | 9 --------- components/PlantCalendarList/index.tsx | 26 ++++++++++++++++++++++++- components/PlantCalendarList/styles.ts | 9 +++++++++ 4 files changed, 34 insertions(+), 37 deletions(-) delete mode 100644 components/MonthHeader/index.tsx delete mode 100644 components/MonthHeader/styles.ts diff --git a/components/MonthHeader/index.tsx b/components/MonthHeader/index.tsx deleted file mode 100644 index 566fc20..0000000 --- a/components/MonthHeader/index.tsx +++ /dev/null @@ -1,27 +0,0 @@ -import { P3 } from '@/styles/text'; -import { MonthsContainer } from './styles'; - -const months = [ - 'Jan', - 'Feb', - 'Mar', - 'Apr', - 'May', - 'Jun', - 'Jul', - 'Aug', - 'Sep', - 'Oct', - 'Nov', - 'Dec', -]; - -export default function MonthHeader() { - return ( - - {months.map((month, index) => ( - {month} - ))} - - ); -} diff --git a/components/MonthHeader/styles.ts b/components/MonthHeader/styles.ts deleted file mode 100644 index d89cb7c..0000000 --- a/components/MonthHeader/styles.ts +++ /dev/null @@ -1,9 +0,0 @@ -import styled from 'styled-components'; - -export const MonthsContainer = styled.div` - display: grid; - grid-template-columns: repeat(12, 1fr); - /* gap: 0.75rem; */ - width: 100%; - justify-items: center; -`; diff --git a/components/PlantCalendarList/index.tsx b/components/PlantCalendarList/index.tsx index 82d0fce..0b829ad 100644 --- a/components/PlantCalendarList/index.tsx +++ b/components/PlantCalendarList/index.tsx @@ -14,7 +14,6 @@ import { checkSearchTerm, checkUsState, } from '@/utils/helpers'; -import MonthHeader from '../MonthHeader'; import PlantCalendarRow from '../PlantCalendarRow'; import * as Styles from './styles'; @@ -26,6 +25,31 @@ interface PlantListProps { searchTerm: string; } +const months = [ + 'Jan', + 'Feb', + 'Mar', + 'Apr', + 'May', + 'Jun', + 'Jul', + 'Aug', + 'Sep', + 'Oct', + 'Nov', + 'Dec', +]; + +const MonthHeader = () => { + return ( + + {months.map((month, index) => ( + {month} + ))} + + ); +}; + export const PlantCalendarList = ({ harvestSeasonFilterValue, plantingTypeFilterValue, diff --git a/components/PlantCalendarList/styles.ts b/components/PlantCalendarList/styles.ts index 718fc9b..2e982b4 100644 --- a/components/PlantCalendarList/styles.ts +++ b/components/PlantCalendarList/styles.ts @@ -26,3 +26,12 @@ export const ScrollableTd = styled.td` padding-bottom: 8px; // maybe replace with 4px above and below to center padding? `; + +// month header at the top of PlantCalendarList +export const MonthsContainer = styled.div` + display: grid; + grid-template-columns: repeat(12, 1fr); + /* gap: 0.75rem; */ + width: 100%; + justify-items: center; +`; From 5c76ed4cdbfe0da4b0d062a9620a00f820aa2dcd Mon Sep 17 00:00:00 2001 From: Kyle Ramachandran Date: Sat, 7 Dec 2024 11:55:49 -0800 Subject: [PATCH 11/28] make PlantCalendarList scrollable --- app/seasonal-planting-guide/page.tsx | 2 +- app/seasonal-planting-guide/styles.ts | 1 + components/PlantCalendarList/index.tsx | 63 ++++++++++++++------------ components/PlantCalendarList/styles.ts | 9 +++- 4 files changed, 45 insertions(+), 30 deletions(-) diff --git a/app/seasonal-planting-guide/page.tsx b/app/seasonal-planting-guide/page.tsx index edba300..350937d 100644 --- a/app/seasonal-planting-guide/page.tsx +++ b/app/seasonal-planting-guide/page.tsx @@ -119,7 +119,7 @@ export default function SeasonalPlantingGuide() { /> ) : ( - + - - - - - - - - - - {filteredPlantList.map(plant => ( - - - {plant.plant_name} - + + + {/* set widths of each columns*/} + + + + + + + - + - ))} - - + + + {filteredPlantList.map(plant => ( + + + {plant.plant_name} + + + + + + ))} + + + ); }; diff --git a/components/PlantCalendarList/styles.ts b/components/PlantCalendarList/styles.ts index 2e982b4..1d4d6e8 100644 --- a/components/PlantCalendarList/styles.ts +++ b/components/PlantCalendarList/styles.ts @@ -1,6 +1,12 @@ import styled from 'styled-components'; import { P3 } from '@/styles/text'; +// Container for the table to handle overflow +export const TableContainer = styled.div` + width: 100%; + overflow-x: auto; // Allow horizontal scrolling +`; + // Styled Table export const StyledTable = styled.table` width: 100%; @@ -22,7 +28,8 @@ export const StickyTd = styled(P3).attrs({ // Scrollable container for PlantCalendarRow export const ScrollableTd = styled.td` - overflow-x: scroll; + // overflow-x: scroll; + width: inherit; padding-bottom: 8px; // maybe replace with 4px above and below to center padding? `; From 46fa944d776850674f87f28a2e27233370d29c6f Mon Sep 17 00:00:00 2001 From: Kyle Ramachandran Date: Sat, 7 Dec 2024 12:14:38 -0800 Subject: [PATCH 12/28] fix menu overlay issue --- app/seasonal-planting-guide/styles.ts | 2 ++ components/FilterDropdownMultiple/index.tsx | 1 + components/FilterDropdownSingle/index.tsx | 1 + 3 files changed, 4 insertions(+) diff --git a/app/seasonal-planting-guide/styles.ts b/app/seasonal-planting-guide/styles.ts index 3c54b35..d7b7d9c 100644 --- a/app/seasonal-planting-guide/styles.ts +++ b/app/seasonal-planting-guide/styles.ts @@ -25,6 +25,8 @@ export const FilterContainer = styled.div` margin-top: 12px; position: relative; overflow-x: auto; + padding-top: 1px; + padding-bottom: 1px; `; export const StateOptionsContainer = styled.div` diff --git a/components/FilterDropdownMultiple/index.tsx b/components/FilterDropdownMultiple/index.tsx index e607039..7667e1b 100644 --- a/components/FilterDropdownMultiple/index.tsx +++ b/components/FilterDropdownMultiple/index.tsx @@ -101,6 +101,7 @@ export default function FilterDropdownMultiple({ hideSelectedOptions={false} // use custom styled components instead of default components components={{ MultiValue: StyledMultiValue, Option: CustomOption }} + menuPosition="fixed" /> ); } diff --git a/components/FilterDropdownSingle/index.tsx b/components/FilterDropdownSingle/index.tsx index a3981f1..492f2b5 100644 --- a/components/FilterDropdownSingle/index.tsx +++ b/components/FilterDropdownSingle/index.tsx @@ -45,6 +45,7 @@ export default function FilterDropdownSingle({ styles={customSelectStyles(small)} isSearchable={false} hideSelectedOptions={false} + menuPosition="fixed" /> ); } From 25773d33afcf1490bafc9d2cf44d659be384bd91 Mon Sep 17 00:00:00 2001 From: Kyle Ramachandran Date: Sat, 7 Dec 2024 14:55:45 -0800 Subject: [PATCH 13/28] create plant card key --- app/view-plants/page.tsx | 53 ++++++++++++++++-- app/view-plants/styles.ts | 10 ++++ components/PlantCardKey/index.tsx | 93 +++++++++++++++++++++++++++++++ components/PlantCardKey/styles.ts | 65 +++++++++++++++++++++ 4 files changed, 217 insertions(+), 4 deletions(-) create mode 100644 components/PlantCardKey/index.tsx create mode 100644 components/PlantCardKey/styles.ts diff --git a/app/view-plants/page.tsx b/app/view-plants/page.tsx index 8cddaa6..c8d69bd 100644 --- a/app/view-plants/page.tsx +++ b/app/view-plants/page.tsx @@ -1,6 +1,6 @@ 'use client'; -import { useEffect, useMemo, useState } from 'react'; +import { useEffect, useMemo, useRef, useState } from 'react'; import { useRouter } from 'next/navigation'; import { getAllPlants, @@ -11,6 +11,7 @@ import { Button, SmallButton } from '@/components/Buttons'; import FilterDropdownMultiple from '@/components/FilterDropdownMultiple'; import Icon from '@/components/Icon'; import PlantCard from '@/components/PlantCard'; +import PlantCardKey from '@/components/PlantCardKey'; import SearchBar from '@/components/SearchBar'; import CONFIG from '@/lib/configs'; import COLORS from '@/styles/colors'; @@ -35,6 +36,7 @@ import { AddButtonContainer, FilterContainer, HeaderButton, + InfoButton, NumberSelectedPlants, NumberSelectedPlantsContainer, PlantGridContainer, @@ -84,6 +86,9 @@ export default function Page() { const [searchTerm, setSearchTerm] = useState(''); const [selectedPlants, setSelectedPlants] = useState([]); const [ownedPlants, setOwnedPlants] = useState([]); + const [isCardKeyOpen, setIsCardKeyOpen] = useState(false); + const cardKeyRef = useRef(null); + const infoButtonRef = useRef(null); const userState = profileData?.us_state ?? null; const profileAndAuthReady = profileReady && !authLoading; @@ -378,12 +383,52 @@ export default function Page() { const plantPluralityString = selectedPlants.length > 1 ? 'Plants' : 'Plant'; + // close plant card key when clicking outside, even on info button + const handleClickOutside = (event: MouseEvent) => { + if ( + cardKeyRef.current && + !cardKeyRef.current.contains(event.target as Node) && + infoButtonRef.current && + !infoButtonRef.current.contains(event.target as Node) + ) { + setIsCardKeyOpen(false); + } + }; + + // handle clicking outside PlantCardKey to close it if open + useEffect(() => { + if (isCardKeyOpen) { + document.addEventListener('mousedown', handleClickOutside); + } else { + document.removeEventListener('mousedown', handleClickOutside); + } + + return () => { + document.removeEventListener('mousedown', handleClickOutside); + }; + }, [isCardKeyOpen]); + return (
-

- View Plants -

+ +

+ View Plants +

+
+ setIsCardKeyOpen(!isCardKeyOpen)} + ref={infoButtonRef} + > + + + {isCardKeyOpen && ( +
+ +
+ )} +
+ { + // to convert difficulty level enum to title case + const difficultyToTitleCase: Record = { + EASY: 'Easy', + MODERATE: 'Moderate', + HARD: 'Hard', + }; + return ( + + + {difficultyToTitleCase[difficultyLevel as DifficultyLevelEnum]} + + ); +}; + +const IconAndLabel = ({ + iconName, + label, +}: { + iconName: IconType; + label: string; +}) => { + return ( + + + {label} + + ); +}; + +export default function PlantCardKey() { + return ( + + + <P3 $color="white" $fontWeight={400}> + Plant Card Key + </P3> + + + + Planting Difficulty Level + + + + + + + + + + + Icon Key + + + + + + + + ); +} diff --git a/components/PlantCardKey/styles.ts b/components/PlantCardKey/styles.ts new file mode 100644 index 0000000..fd29ee0 --- /dev/null +++ b/components/PlantCardKey/styles.ts @@ -0,0 +1,65 @@ +import styled from 'styled-components'; +import COLORS from '@/styles/colors'; + +export const PlantCardKeyContainer = styled.div` + display: flex; + flex-direction: column; + border-radius: 10px; + box-shadow: 2px 0px 8px 0px rgba(0, 0, 0, 0.1); + background-color: white; + border: none; + margin-top: 16px; + position: absolute; + top: 100%; + left: 50%; + transform: translateX(-50%); // center PlantCardKey with button above it + z-index: 1000; + min-width: 168px; + min-height: 200px; + + // creates triangle pointer above plant card key + &::before { + content: ''; + width: 0; + height: 0; + left: 50%; + top: -10px; + transform: translateX(-50%); + position: absolute; + border-left: 10px solid transparent; + border-right: 10px solid transparent; + border-bottom: 10px solid ${COLORS.shrub}; + } +`; + +export const Title = styled.div` + display: flex; + justify-content: center; + align-items: center; + background-color: ${COLORS.shrub}; + border-radius: 10px 10px 0px 0px; + color: white; + padding: 8px 0px 8px 0px; + border: none; +`; + +export const DifficultyLevelsContainer = styled.div` + display: flex; + flex-direction: row; + padding: 8px; + gap: 20px; +`; + +export const HorizontalLine = styled.div` + width: 100%; + height: 1px; + background-color: #e4e4e4; + margin: 0px 16px 0px 16px; +`; + +export const IconKeyContainer = styled.div` + display: flex; + flex-direction: column; + padding: 8px 12px 12px 16px; + gap: 4px; +`; From c90c0cf4da164bb8a6ef8d85ce76896c71e8aac5 Mon Sep 17 00:00:00 2001 From: Kyle Ramachandran Date: Sat, 7 Dec 2024 15:03:00 -0800 Subject: [PATCH 14/28] adjust seasonal planting guide styles --- app/seasonal-planting-guide/page.tsx | 6 ++++-- app/seasonal-planting-guide/styles.ts | 4 ++-- 2 files changed, 6 insertions(+), 4 deletions(-) diff --git a/app/seasonal-planting-guide/page.tsx b/app/seasonal-planting-guide/page.tsx index 350937d..b45c417 100644 --- a/app/seasonal-planting-guide/page.tsx +++ b/app/seasonal-planting-guide/page.tsx @@ -7,7 +7,7 @@ import { PlantCalendarList } from '@/components/PlantCalendarList'; import SearchBar from '@/components/SearchBar'; import SeasonColorKey from '@/components/SeasonColorKey'; import COLORS from '@/styles/colors'; -import { Box } from '@/styles/containers'; +import { Box, Flex } from '@/styles/containers'; import { H1, H3 } from '@/styles/text'; import { DropdownOption, PlantingTypeEnum, SeasonEnum } from '@/types/schema'; import { @@ -120,7 +120,9 @@ export default function SeasonalPlantingGuide() { ) : ( - + + + Date: Sat, 7 Dec 2024 15:37:57 -0800 Subject: [PATCH 15/28] rebase and fix lint errors --- components/PlantCardKey/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/PlantCardKey/index.tsx b/components/PlantCardKey/index.tsx index 20a53cc..f488c49 100644 --- a/components/PlantCardKey/index.tsx +++ b/components/PlantCardKey/index.tsx @@ -85,7 +85,7 @@ export default function PlantCardKey() { label="Outdoors Growing Season" /> - + From 783e913b96784e5156ce4ad1ff7bb161aa390500 Mon Sep 17 00:00:00 2001 From: Kyle Ramachandran Date: Sat, 7 Dec 2024 15:58:32 -0800 Subject: [PATCH 16/28] uninstall multi-select, change growing season to only filter outdoor months --- app/seasonal-planting-guide/page.tsx | 3 ++- components/PlantCardKey/index.tsx | 9 ++------- package.json | 1 - pnpm-lock.yaml | 14 -------------- utils/helpers.ts | 21 +++++---------------- 5 files changed, 9 insertions(+), 39 deletions(-) diff --git a/app/seasonal-planting-guide/page.tsx b/app/seasonal-planting-guide/page.tsx index b45c417..6eabe3a 100644 --- a/app/seasonal-planting-guide/page.tsx +++ b/app/seasonal-planting-guide/page.tsx @@ -15,6 +15,7 @@ import { seasonOptions, usStateOptions, } from '@/utils/dropdownOptions'; +import { useTitleCase } from '@/utils/helpers'; import { useProfile } from '@/utils/ProfileProvider'; import { FilterContainer, @@ -53,7 +54,7 @@ export default function SeasonalPlantingGuide() { useEffect(() => { if (profileReady && profileData) { setSelectedUsState({ - label: profileData.us_state, + label: useTitleCase(profileData.us_state), value: profileData.us_state, }); } diff --git a/components/PlantCardKey/index.tsx b/components/PlantCardKey/index.tsx index f488c49..6aa8c61 100644 --- a/components/PlantCardKey/index.tsx +++ b/components/PlantCardKey/index.tsx @@ -4,6 +4,7 @@ import COLORS from '@/styles/colors'; import { Flex } from '@/styles/containers'; import { P3 } from '@/styles/text'; import { DifficultyLevelEnum } from '@/types/schema'; +import { useTitleCase } from '@/utils/helpers'; import DifficultyLevelBar from '../DifficultyLevelBar'; import Icon from '../Icon'; import { @@ -19,18 +20,12 @@ const DifficultyBarAndLabel = ({ }: { difficultyLevel: DifficultyLevelEnum; }) => { - // to convert difficulty level enum to title case - const difficultyToTitleCase: Record = { - EASY: 'Easy', - MODERATE: 'Moderate', - HARD: 'Hard', - }; return ( - {difficultyToTitleCase[difficultyLevel as DifficultyLevelEnum]} + {useTitleCase(difficultyLevel)} ); }; diff --git a/package.json b/package.json index 287de9d..5333343 100644 --- a/package.json +++ b/package.json @@ -19,7 +19,6 @@ "next": "^15.0.4", "react": "^18", "react-dom": "^18", - "react-multi-select-component": "^4.3.4", "react-select": "^5.8.3", "styled-components": "^6.1.13", "supabase": "^1.200.3" diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index cf02d1a..06121de 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -23,9 +23,6 @@ importers: react-dom: specifier: ^18 version: 18.3.1(react@18.3.1) - react-multi-select-component: - specifier: ^4.3.4 - version: 4.3.4(react-dom@18.3.1(react@18.3.1))(react@18.3.1) react-select: specifier: ^5.8.3 version: 5.8.3(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) @@ -1600,12 +1597,6 @@ packages: react-is@16.13.1: resolution: {integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==} - react-multi-select-component@4.3.4: - resolution: {integrity: sha512-Ui/bzCbROF4WfKq3OKWyQJHmy/bd1mW7CQM+L83TfiltuVvHElhKEyPM3JzO9urIcWplBUKv+kyxqmEnd9jPcA==} - peerDependencies: - react: ^16 || ^17 || ^18 - react-dom: ^16 || ^17 || ^18 - react-select@5.8.3: resolution: {integrity: sha512-lVswnIq8/iTj1db7XCG74M/3fbGB6ZaluCzvwPGT5ZOjCdL/k0CLWhEK0vCBLuU5bHTEf6Gj8jtSvi+3v+tO1w==} peerDependencies: @@ -3728,11 +3719,6 @@ snapshots: react-is@16.13.1: {} - react-multi-select-component@4.3.4(react-dom@18.3.1(react@18.3.1))(react@18.3.1): - dependencies: - react: 18.3.1 - react-dom: 18.3.1(react@18.3.1) - react-select@5.8.3(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1): dependencies: '@babel/runtime': 7.26.0 diff --git a/utils/helpers.ts b/utils/helpers.ts index 91958e3..1655700 100644 --- a/utils/helpers.ts +++ b/utils/helpers.ts @@ -81,28 +81,17 @@ export function checkGrowingSeason( // Handle late/early month logic // Set late/early month to just the month using processPlantMonth - const indoorsStart = - plant.indoors_start && processPlantMonth(plant.indoors_start); - const indoorsEnd = plant.indoors_end && processPlantMonth(plant.indoors_end); const outdoorsStart = plant.outdoors_start && processPlantMonth(plant.outdoors_start); const outdoorsEnd = plant.outdoors_end && processPlantMonth(plant.outdoors_end); - // Checks if either indoor_start to indoor_end or outdoor_start to outdoor_end - // is within the valid range of months + // Checks if outdoor_start to outdoor_end is within the valid range of months // exclamation marks to assert values are not undefined - return ( - isInRange( - monthToIndex.get(indoorsStart!)!, - monthToIndex.get(indoorsEnd!)!, - validIndexes!, - ) || - isInRange( - monthToIndex.get(outdoorsStart!)!, - monthToIndex.get(outdoorsEnd!)!, - validIndexes!, - ) + return isInRange( + monthToIndex.get(outdoorsStart!)!, + monthToIndex.get(outdoorsEnd!)!, + validIndexes!, ); } From a34cd15917ed39f2ac5913024034d646f0281676 Mon Sep 17 00:00:00 2001 From: Kyle Ramachandran Date: Sat, 7 Dec 2024 16:08:15 -0800 Subject: [PATCH 17/28] fix lint error --- app/seasonal-planting-guide/page.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/app/seasonal-planting-guide/page.tsx b/app/seasonal-planting-guide/page.tsx index 6eabe3a..66ac051 100644 --- a/app/seasonal-planting-guide/page.tsx +++ b/app/seasonal-planting-guide/page.tsx @@ -54,7 +54,9 @@ export default function SeasonalPlantingGuide() { useEffect(() => { if (profileReady && profileData) { setSelectedUsState({ - label: useTitleCase(profileData.us_state), + label: + profileData.us_state.charAt(0) + + profileData.us_state.slice(1).toLowerCase(), // can't use useTitleCase here, lint error value: profileData.us_state, }); } From a0968ae4233eeaf1fc11374a92d2742c2a27e883 Mon Sep 17 00:00:00 2001 From: Kyle Ramachandran Date: Sat, 7 Dec 2024 16:18:55 -0800 Subject: [PATCH 18/28] lint error --- app/seasonal-planting-guide/page.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/seasonal-planting-guide/page.tsx b/app/seasonal-planting-guide/page.tsx index 66ac051..9b2d48b 100644 --- a/app/seasonal-planting-guide/page.tsx +++ b/app/seasonal-planting-guide/page.tsx @@ -15,7 +15,7 @@ import { seasonOptions, usStateOptions, } from '@/utils/dropdownOptions'; -import { useTitleCase } from '@/utils/helpers'; +import { useTitleCase } from '@/utils/helpers'; // is this necessary? import { useProfile } from '@/utils/ProfileProvider'; import { FilterContainer, From 8a333f0d98849b0c2cd45a52700e0a7d150ec96d Mon Sep 17 00:00:00 2001 From: Kyle Ramachandran Date: Fri, 13 Dec 2024 11:12:13 -0800 Subject: [PATCH 19/28] fix onChange console error --- components/FilterDropdownMultiple/index.tsx | 1 + pnpm-lock.yaml | 15 ++++++++++++--- 2 files changed, 13 insertions(+), 3 deletions(-) diff --git a/components/FilterDropdownMultiple/index.tsx b/components/FilterDropdownMultiple/index.tsx index 7667e1b..69ede4c 100644 --- a/components/FilterDropdownMultiple/index.tsx +++ b/components/FilterDropdownMultiple/index.tsx @@ -79,6 +79,7 @@ export default function FilterDropdownMultiple({ null} //no-op style={{ marginRight: 8 }} // spacing between checkbox and text /> {props.label} diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 06121de..d5ac798 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -113,6 +113,9 @@ packages: resolution: {integrity: sha512-Z/yiTPj+lDVnF7lWeKCIJzaIkI0vYO87dMpZ4bg4TDrFe4XXLFWL1TbXU27gBP3QccxV9mZICCrnjnYlJjXHOA==} engines: {node: '>=6.9.0'} + '@emnapi/runtime@1.3.1': + resolution: {integrity: sha512-kEBmG8KyqtxJZv+ygbEim+KCGtIq1fC22Ms3S4ziXmYKm8uyoLX0MHONVKwp+9opg390VaKRNt4a7A9NwmpNhw==} + '@emotion/babel-plugin@11.13.5': resolution: {integrity: sha512-pxHCpT2ex+0q+HH91/zsdHkw/lXd468DIN2zvfvLtPKLLMo6gQj7oLObq8PhkrxOZb/gGCq03S3Z7PDhS8pduQ==} @@ -1172,8 +1175,8 @@ packages: resolution: {integrity: sha512-wcjaerHw0ydZwfhiKbXJWLDY8A7yV7KhjQOpb83hGgGfId/aQa4TOvwyzn2PuswW2gPCYEL/nEAiSVpdOj1lXw==} engines: {node: '>= 0.4'} - is-arrayish@0.2.1: - resolution: {integrity: sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==} + is-arrayish@0.3.2: + resolution: {integrity: sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ==} is-async-function@2.0.0: resolution: {integrity: sha512-Y1JXKrfykRJGdlDwdKlLpLyMIiWqWvuSd17TvZk68PLAOGOoF4Xyav1z0Xhoi+gCYjZVeC5SI+hYFOfvXmGRCA==} @@ -2036,6 +2039,11 @@ snapshots: '@babel/helper-string-parser': 7.25.9 '@babel/helper-validator-identifier': 7.25.9 + '@emnapi/runtime@1.3.1': + dependencies: + tslib: 2.8.1 + optional: true + '@emotion/babel-plugin@11.13.5': dependencies: '@babel/helper-module-imports': 7.25.9 @@ -3321,7 +3329,8 @@ snapshots: call-bind: 1.0.7 get-intrinsic: 1.2.4 - is-arrayish@0.2.1: {} + is-arrayish@0.3.2: + optional: true is-async-function@2.0.0: dependencies: From 6605a47b07ccafa0d41c043b88a3687d2b95d051 Mon Sep 17 00:00:00 2001 From: Kyle Ramachandran Date: Fri, 13 Dec 2024 11:15:38 -0800 Subject: [PATCH 20/28] add missing dependencies to pnpm-lock --- pnpm-lock.yaml | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index d5ac798..0b471ac 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -1175,6 +1175,9 @@ packages: resolution: {integrity: sha512-wcjaerHw0ydZwfhiKbXJWLDY8A7yV7KhjQOpb83hGgGfId/aQa4TOvwyzn2PuswW2gPCYEL/nEAiSVpdOj1lXw==} engines: {node: '>= 0.4'} + is-arrayish@0.2.1: + resolution: {integrity: sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==} + is-arrayish@0.3.2: resolution: {integrity: sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ==} @@ -3329,6 +3332,8 @@ snapshots: call-bind: 1.0.7 get-intrinsic: 1.2.4 + is-arrayish@0.2.1: {} + is-arrayish@0.3.2: optional: true From f5b956931bbb60a17427cbeb3105eb62e75ceb23 Mon Sep 17 00:00:00 2001 From: Kyle Ramachandran Date: Fri, 13 Dec 2024 11:18:19 -0800 Subject: [PATCH 21/28] reinstall pnpm lock --- pnpm-lock.yaml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 0b471ac..51a755f 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -1176,7 +1176,7 @@ packages: engines: {node: '>= 0.4'} is-arrayish@0.2.1: - resolution: {integrity: sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==} + resolution: {integrity: sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==} is-arrayish@0.3.2: resolution: {integrity: sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ==} From 6f031e13d6fbb98eaa84f149fdd0fa23ad57d40e Mon Sep 17 00:00:00 2001 From: Kyle Ramachandran Date: Fri, 13 Dec 2024 11:24:06 -0800 Subject: [PATCH 22/28] fix plantcardkey horizontalline styling --- components/PlantCardKey/index.tsx | 4 +++- components/PlantCardKey/styles.ts | 1 - 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/components/PlantCardKey/index.tsx b/components/PlantCardKey/index.tsx index 6aa8c61..672640f 100644 --- a/components/PlantCardKey/index.tsx +++ b/components/PlantCardKey/index.tsx @@ -70,7 +70,9 @@ export default function PlantCardKey() { - + + + Icon Key diff --git a/components/PlantCardKey/styles.ts b/components/PlantCardKey/styles.ts index fd29ee0..f50b01a 100644 --- a/components/PlantCardKey/styles.ts +++ b/components/PlantCardKey/styles.ts @@ -54,7 +54,6 @@ export const HorizontalLine = styled.div` width: 100%; height: 1px; background-color: #e4e4e4; - margin: 0px 16px 0px 16px; `; export const IconKeyContainer = styled.div` From 284883cdc5ed6826e35f2c9a9c945e76bfad3ecc Mon Sep 17 00:00:00 2001 From: Catherine Tan Date: Sun, 29 Dec 2024 14:58:42 -0800 Subject: [PATCH 23/28] change header link styles --- components/Header/index.tsx | 16 +++++++++++++--- 1 file changed, 13 insertions(+), 3 deletions(-) diff --git a/components/Header/index.tsx b/components/Header/index.tsx index 57b9073..6ccc6a2 100644 --- a/components/Header/index.tsx +++ b/components/Header/index.tsx @@ -1,7 +1,9 @@ import React from 'react'; import Link from 'next/link'; import CONFIG from '@/lib/configs'; +import COLORS from '@/styles/colors'; import { Flex } from '@/styles/containers'; +import { P3 } from '@/styles/text'; import { useAuth } from '@/utils/AuthProvider'; import { useProfile } from '@/utils/ProfileProvider'; import Icon from '../Icon'; @@ -32,14 +34,22 @@ export default function Header({ toggleNavColumn }: HeaderProps) { } // Not onboarded - return Complete Onboarding; + return ( + + Complete Onboarding + + ); } // Not logged-in user return ( - Login - Sign Up + + Login + + + Sign Up + ); }; From 9e0651235fbf5a31837fe033c2ea0b0945603246 Mon Sep 17 00:00:00 2001 From: Catherine Tan Date: Sun, 29 Dec 2024 15:00:48 -0800 Subject: [PATCH 24/28] rename useTitleCase to toTitleCase; style Clear Filters button --- app/seasonal-planting-guide/page.tsx | 12 ++++++------ app/seasonal-planting-guide/styles.ts | 4 ++-- components/PlantCalendarList/index.tsx | 2 +- components/PlantCalendarRow/index.tsx | 2 +- components/PlantCard/index.tsx | 8 +++----- components/PlantCardKey/index.tsx | 4 ++-- components/YourPlantDetails/index.tsx | 4 ++-- utils/helpers.ts | 2 +- 8 files changed, 18 insertions(+), 20 deletions(-) diff --git a/app/seasonal-planting-guide/page.tsx b/app/seasonal-planting-guide/page.tsx index 9b2d48b..0a3e30e 100644 --- a/app/seasonal-planting-guide/page.tsx +++ b/app/seasonal-planting-guide/page.tsx @@ -1,6 +1,7 @@ 'use client'; import React, { useEffect, useState } from 'react'; +import { SmallButton } from '@/components/Buttons'; import FilterDropdownMultiple from '@/components/FilterDropdownMultiple'; import FilterDropdownSingle from '@/components/FilterDropdownSingle'; import { PlantCalendarList } from '@/components/PlantCalendarList'; @@ -15,7 +16,7 @@ import { seasonOptions, usStateOptions, } from '@/utils/dropdownOptions'; -import { useTitleCase } from '@/utils/helpers'; // is this necessary? +import { toTitleCase } from '@/utils/helpers'; import { useProfile } from '@/utils/ProfileProvider'; import { FilterContainer, @@ -54,9 +55,7 @@ export default function SeasonalPlantingGuide() { useEffect(() => { if (profileReady && profileData) { setSelectedUsState({ - label: - profileData.us_state.charAt(0) + - profileData.us_state.slice(1).toLowerCase(), // can't use useTitleCase here, lint error + label: toTitleCase(profileData.us_state), value: profileData.us_state, }); } @@ -107,8 +106,9 @@ export default function SeasonalPlantingGuide() { placeholder="Planting Type" disabled={!selectedUsState} /> - - + + Clear Filters + {!selectedUsState ? ( diff --git a/app/seasonal-planting-guide/styles.ts b/app/seasonal-planting-guide/styles.ts index cf67cb9..7550e4b 100644 --- a/app/seasonal-planting-guide/styles.ts +++ b/app/seasonal-planting-guide/styles.ts @@ -18,6 +18,7 @@ export const HeaderContainer = styled.div` z-index: 2; `; +//TODO: consolidate styling for Filters in view plants and seasonal planting guide export const FilterContainer = styled.div` display: flex; flex-direction: row; @@ -25,8 +26,7 @@ export const FilterContainer = styled.div` margin-top: 12px; position: relative; overflow-x: auto; - padding-top: 1px; - padding-bottom: 1px; + align-items: center; `; export const StateOptionsContainer = styled.div` diff --git a/components/PlantCalendarList/index.tsx b/components/PlantCalendarList/index.tsx index aeedb05..2a19859 100644 --- a/components/PlantCalendarList/index.tsx +++ b/components/PlantCalendarList/index.tsx @@ -40,7 +40,7 @@ const months = [ 'Dec', ]; -const MonthHeader = () => { +export const MonthHeader = () => { return ( {months.map((month, index) => ( diff --git a/components/PlantCalendarRow/index.tsx b/components/PlantCalendarRow/index.tsx index 23d2988..ab09614 100644 --- a/components/PlantCalendarRow/index.tsx +++ b/components/PlantCalendarRow/index.tsx @@ -1,7 +1,7 @@ import React, { memo, useMemo } from 'react'; import COLORS from '@/styles/colors'; import { fillCalendarGridArrayRowWithColor } from '@/utils/helpers'; -import MonthHeader from '../MonthHeader'; +import { MonthHeader } from '../PlantCalendarList'; import SeasonColorKey from '../SeasonColorKey'; import { CalendarCell, CalendarGrid } from './styles'; diff --git a/components/PlantCard/index.tsx b/components/PlantCard/index.tsx index 28bb290..72fdc94 100644 --- a/components/PlantCard/index.tsx +++ b/components/PlantCard/index.tsx @@ -1,7 +1,7 @@ import React, { memo } from 'react'; import { P1 } from '@/styles/text'; import { Plant } from '@/types/schema'; -import { mapMonthToSeason, useTitleCase } from '@/utils/helpers'; +import { mapMonthToSeason, toTitleCase } from '@/utils/helpers'; import DifficultyLevelBar from '../DifficultyLevelBar'; import Icon from '../Icon'; import { @@ -48,15 +48,13 @@ const PlantCard = memo(function PlantCard({ - {useTitleCase( - mapMonthToSeason(plant.outdoors_start) || 'Unknown', - )} + {toTitleCase(mapMonthToSeason(plant.outdoors_start) || 'Unknown')} - {useTitleCase(plant.harvest_season)} + {toTitleCase(plant.harvest_season)} diff --git a/components/PlantCardKey/index.tsx b/components/PlantCardKey/index.tsx index 672640f..c5185f1 100644 --- a/components/PlantCardKey/index.tsx +++ b/components/PlantCardKey/index.tsx @@ -4,7 +4,7 @@ import COLORS from '@/styles/colors'; import { Flex } from '@/styles/containers'; import { P3 } from '@/styles/text'; import { DifficultyLevelEnum } from '@/types/schema'; -import { useTitleCase } from '@/utils/helpers'; +import { toTitleCase } from '@/utils/helpers'; import DifficultyLevelBar from '../DifficultyLevelBar'; import Icon from '../Icon'; import { @@ -25,7 +25,7 @@ const DifficultyBarAndLabel = ({ - {useTitleCase(difficultyLevel)} + {toTitleCase(difficultyLevel)} ); }; diff --git a/components/YourPlantDetails/index.tsx b/components/YourPlantDetails/index.tsx index 53f45f9..3254f34 100644 --- a/components/YourPlantDetails/index.tsx +++ b/components/YourPlantDetails/index.tsx @@ -5,7 +5,7 @@ import COLORS from '@/styles/colors'; import { Flex } from '@/styles/containers'; import { P1, P3 } from '@/styles/text'; import { PlantingTypeEnum } from '@/types/schema'; -import { formatTimestamp, useTitleCase } from '@/utils/helpers'; +import { formatTimestamp, toTitleCase } from '@/utils/helpers'; import Icon from '../Icon'; import { Container, Header } from './style'; @@ -39,7 +39,7 @@ export default function YourPlantDetails({ {DetailRow('calendar', `Date Planted: ${formatTimestamp(datePlanted)}`)} - {DetailRow('plantHand', `Planting Type: ${useTitleCase(plantingType)}`)} + {DetailRow('plantHand', `Planting Type: ${toTitleCase(plantingType)}`)} {recentHarvestDate && DetailRow( 'plant', diff --git a/utils/helpers.ts b/utils/helpers.ts index 1655700..cefc898 100644 --- a/utils/helpers.ts +++ b/utils/helpers.ts @@ -226,7 +226,7 @@ export function checkUsState( return plant.us_state === selectedState; } -export function useTitleCase(text: string) { +export function toTitleCase(text: string) { return text.charAt(0) + text.slice(1).toLowerCase(); } From 293eccda3a9d2fa47e8a8326b50b8a9fda642985 Mon Sep 17 00:00:00 2001 From: Catherine Tan Date: Sun, 29 Dec 2024 15:34:41 -0800 Subject: [PATCH 25/28] prevent whitespace collapse in filter text --- app/seasonal-planting-guide/page.tsx | 6 ++---- app/seasonal-planting-guide/styles.ts | 6 +++++- components/Buttons.tsx | 2 +- 3 files changed, 8 insertions(+), 6 deletions(-) diff --git a/app/seasonal-planting-guide/page.tsx b/app/seasonal-planting-guide/page.tsx index 0a3e30e..8db3e1a 100644 --- a/app/seasonal-planting-guide/page.tsx +++ b/app/seasonal-planting-guide/page.tsx @@ -8,7 +8,7 @@ import { PlantCalendarList } from '@/components/PlantCalendarList'; import SearchBar from '@/components/SearchBar'; import SeasonColorKey from '@/components/SeasonColorKey'; import COLORS from '@/styles/colors'; -import { Box, Flex } from '@/styles/containers'; +import { Box } from '@/styles/containers'; import { H1, H3 } from '@/styles/text'; import { DropdownOption, PlantingTypeEnum, SeasonEnum } from '@/types/schema'; import { @@ -123,9 +123,7 @@ export default function SeasonalPlantingGuide() { ) : ( - - - + ` // Unique to Small Button border-radius: 20px; min-width: 60px; - height: 24px; + min-height: 24px; // to prevent Clear Filters text overflow padding: 4px 10px; `; From 954d7dee5fdcd9fa5d593292ae03254a7213c0fc Mon Sep 17 00:00:00 2001 From: Catherine Tan Date: Sun, 29 Dec 2024 16:56:30 -0800 Subject: [PATCH 26/28] add instanceId to both dropdowns --- components/FilterDropdownMultiple/index.tsx | 1 + components/FilterDropdownSingle/index.tsx | 1 + 2 files changed, 2 insertions(+) diff --git a/components/FilterDropdownMultiple/index.tsx b/components/FilterDropdownMultiple/index.tsx index 69ede4c..ace12fb 100644 --- a/components/FilterDropdownMultiple/index.tsx +++ b/components/FilterDropdownMultiple/index.tsx @@ -103,6 +103,7 @@ export default function FilterDropdownMultiple({ // use custom styled components instead of default components components={{ MultiValue: StyledMultiValue, Option: CustomOption }} menuPosition="fixed" + instanceId="dropdown-multiple" /> ); } diff --git a/components/FilterDropdownSingle/index.tsx b/components/FilterDropdownSingle/index.tsx index 492f2b5..88648c0 100644 --- a/components/FilterDropdownSingle/index.tsx +++ b/components/FilterDropdownSingle/index.tsx @@ -46,6 +46,7 @@ export default function FilterDropdownSingle({ isSearchable={false} hideSelectedOptions={false} menuPosition="fixed" + instanceId="dropdown-single" /> ); } From f41df1b8c89683537bcaad0774084a0fdc621046 Mon Sep 17 00:00:00 2001 From: Catherine Tan Date: Sun, 29 Dec 2024 22:24:21 -0800 Subject: [PATCH 27/28] clean up PlantCardKey styling --- components/PlantCardKey/index.tsx | 39 +++++++++++-------------------- components/PlantCardKey/styles.ts | 13 ++++++----- 2 files changed, 21 insertions(+), 31 deletions(-) diff --git a/components/PlantCardKey/index.tsx b/components/PlantCardKey/index.tsx index c5185f1..0a955f2 100644 --- a/components/PlantCardKey/index.tsx +++ b/components/PlantCardKey/index.tsx @@ -22,9 +22,7 @@ const DifficultyBarAndLabel = ({ }) => { return ( - + {toTitleCase(difficultyLevel)} ); @@ -53,14 +51,7 @@ export default function PlantCardKey() { Plant Card Key - + Planting Difficulty Level @@ -69,22 +60,20 @@ export default function PlantCardKey() { - - + + + Icon Key + + + + + + - - - Icon Key - - - - - - ); } diff --git a/components/PlantCardKey/styles.ts b/components/PlantCardKey/styles.ts index f50b01a..be4d428 100644 --- a/components/PlantCardKey/styles.ts +++ b/components/PlantCardKey/styles.ts @@ -4,7 +4,7 @@ import COLORS from '@/styles/colors'; export const PlantCardKeyContainer = styled.div` display: flex; flex-direction: column; - border-radius: 10px; + border-radius: 12px; box-shadow: 2px 0px 8px 0px rgba(0, 0, 0, 0.1); background-color: white; border: none; @@ -16,6 +16,7 @@ export const PlantCardKeyContainer = styled.div` z-index: 1000; min-width: 168px; min-height: 200px; + width: max-content; // creates triangle pointer above plant card key &::before { @@ -37,28 +38,28 @@ export const Title = styled.div` justify-content: center; align-items: center; background-color: ${COLORS.shrub}; - border-radius: 10px 10px 0px 0px; + border-radius: 12px 12px 0px 0px; color: white; - padding: 8px 0px 8px 0px; + padding: 8px 0px; border: none; `; export const DifficultyLevelsContainer = styled.div` display: flex; flex-direction: row; - padding: 8px; gap: 20px; + justify-content: space-between; `; export const HorizontalLine = styled.div` + margin-top: 4px; width: 100%; height: 1px; - background-color: #e4e4e4; + background-color: ${COLORS.lightgray}; `; export const IconKeyContainer = styled.div` display: flex; flex-direction: column; - padding: 8px 12px 12px 16px; gap: 4px; `; From 79061538e7b360846d8c535bbea477250185c4f4 Mon Sep 17 00:00:00 2001 From: Catherine Tan Date: Sun, 29 Dec 2024 23:41:40 -0800 Subject: [PATCH 28/28] fix text styling of dropdown options --- .../my-garden/[userPlantId]/page.tsx | 1 - app/seasonal-planting-guide/styles.ts | 2 +- components/Button.tsx | 46 ------------------- components/FilterDropdownMultiple/index.tsx | 32 ++++++------- components/FilterDropdownMultiple/styles.ts | 41 ++++++++++------- components/FilterDropdownSingle/styles.ts | 23 +++++++--- 6 files changed, 54 insertions(+), 91 deletions(-) delete mode 100644 components/Button.tsx diff --git a/app/plant-page/my-garden/[userPlantId]/page.tsx b/app/plant-page/my-garden/[userPlantId]/page.tsx index e26c845..d02f676 100644 --- a/app/plant-page/my-garden/[userPlantId]/page.tsx +++ b/app/plant-page/my-garden/[userPlantId]/page.tsx @@ -114,7 +114,6 @@ export default function UserPlantPage() {

Planting Timeline

- {/*add SeasonalColorKey here */} -// >(({ children, ...props }, ref) => { -// return ( -// -// ); -// }); -// Button.displayName = 'Button'; - -interface SmallRoundedButtonProps { - $primaryColor?: string; - $secondaryColor: string; -} - -export const SmallRoundedButton = styled.button` - font-family: inherit; - padding: 10px 20px; - border-radius: 15px; - box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.05); - border: 0.5px solid ${({ $secondaryColor }) => $secondaryColor}; - background-color: ${({ $primaryColor }) => - $primaryColor ? $primaryColor : 'white'}; - color: ${({ $primaryColor, $secondaryColor }) => - $primaryColor ? 'white' : $secondaryColor}; - font-size: 16px; - cursor: pointer; - transition: - background-color 0.3s ease, - border-color 0.3s ease; - - &:hover { - background-color: ${({ $primaryColor, $secondaryColor }) => - $primaryColor ? $primaryColor : $secondaryColor}; - color: ${({ $primaryColor, $secondaryColor }) => - $primaryColor ? $secondaryColor : 'white'}; - border-color: ${({ $secondaryColor }) => $secondaryColor}; - } -`; diff --git a/components/FilterDropdownMultiple/index.tsx b/components/FilterDropdownMultiple/index.tsx index ace12fb..f6f6e66 100644 --- a/components/FilterDropdownMultiple/index.tsx +++ b/components/FilterDropdownMultiple/index.tsx @@ -8,7 +8,7 @@ import Select, { } from 'react-select'; import { P3 } from '@/styles/text'; import { DropdownOption } from '@/types/schema'; -import { customSelectStyles, StyledOption } from './styles'; +import { customSelectStyles } from './styles'; interface FilterDropdownProps { value: DropdownOption[]; @@ -31,27 +31,23 @@ export default function FilterDropdownMultiple({ // overrides the default MultiValue to display custom text // displays first selected value followed by + n if more than 1 selected - // StyledMultiValue appears for each selected option, so if more than 1 is selected, + // CustomMultiValue appears for each selected option, so if more than 1 is selected, // the rest of the selected options are not shown, instead the + n is shown as part of the first option - const StyledMultiValue = ({ + const CustomMultiValue = ({ ...props }: MultiValueProps< DropdownOption, true, GroupBase> >) => { - const { selectProps, data } = props; + const { selectProps, data, index } = props; if (Array.isArray(selectProps.value)) { - // find index of the selected option and check if its the first - const index = selectProps.value.findIndex( - (option: DropdownOption) => option.value === data.value, - ); const isFirst = index === 0; // find number of remaining selected options const additionalCount = selectProps.value.length - 1; return ( - + {/* display label of first selected option */} {isFirst ? ( <> @@ -75,15 +71,13 @@ export default function FilterDropdownMultiple({ ) => { return ( - - null} //no-op - style={{ marginRight: 8 }} // spacing between checkbox and text - /> - {props.label} - + null} //no-op + style={{ marginRight: 8 }} // spacing between checkbox and text + /> + {props.label} ); }; @@ -101,7 +95,7 @@ export default function FilterDropdownMultiple({ isSearchable={false} hideSelectedOptions={false} // use custom styled components instead of default components - components={{ MultiValue: StyledMultiValue, Option: CustomOption }} + components={{ MultiValue: CustomMultiValue, Option: CustomOption }} menuPosition="fixed" instanceId="dropdown-multiple" /> diff --git a/components/FilterDropdownMultiple/styles.ts b/components/FilterDropdownMultiple/styles.ts index 316d6eb..edd2cb2 100644 --- a/components/FilterDropdownMultiple/styles.ts +++ b/components/FilterDropdownMultiple/styles.ts @@ -1,13 +1,7 @@ import { StylesConfig } from 'react-select'; -import styled from 'styled-components'; import COLORS from '@/styles/colors'; import { DropdownOption } from '@/types/schema'; -export const StyledOption = styled.div` - display: flex; - align-items: center; -`; - // custom styles for react-select component // Option type is DropdownOption and isMulti is true export const customSelectStyles = (): StylesConfig< @@ -17,20 +11,23 @@ export const customSelectStyles = (): StylesConfig< // container control: (baseStyles, state) => ({ ...baseStyles, - borderRadius: '57px', + borderRadius: '56px', + height: '30px', border: `0.5px solid ${COLORS.midgray}`, backgroundColor: state.isDisabled ? COLORS.lightgray : '#fff', padding: '8px 14px', color: COLORS.midgray, minWidth: '138px', + width: 'max-content', // prevent collapse on scroll }), // placeholder text placeholder: baseStyles => ({ ...baseStyles, color: COLORS.midgray, fontSize: '0.75rem', + fontWeight: 400, padding: '0px', - margin: '0px', + margin: 'auto', }), // hide vertical bar between arrow and text indicatorSeparator: baseStyles => ({ @@ -49,6 +46,10 @@ export const customSelectStyles = (): StylesConfig< marginLeft: '-4px', // move the dropdown indicator to the left, cant override text styles color: COLORS.midgray, }), + menu: baseStyles => ({ + ...baseStyles, + minWidth: 'max-content', + }), // container for selected multi option multiValue: baseStyles => ({ ...baseStyles, @@ -57,17 +58,23 @@ export const customSelectStyles = (): StylesConfig< padding: '0px', margin: '0px', }), + // The following styles aren't used (see CustomMultiValue) // multi option display text - multiValueLabel: baseStyles => ({ + // multiValueLabel: baseStyles => ({ + // ...baseStyles, + // fontSize: '0.75rem', + // color: `${COLORS.black}`, + // padding: '0px', + // }), + // // hide 'x' next to each multi option + // multiValueRemove: baseStyles => ({ + // ...baseStyles, + // display: 'none', + // }), + option: baseStyles => ({ ...baseStyles, + // style as a P3 with fontWeight 400 fontSize: '0.75rem', - color: `${COLORS.black} !important`, - padding: '0px', - paddingLeft: '0px', - }), - // hide 'x' next to each multi option - multiValueRemove: baseStyles => ({ - ...baseStyles, - display: 'none', + fontWeight: 400, }), }); diff --git a/components/FilterDropdownSingle/styles.ts b/components/FilterDropdownSingle/styles.ts index 0823d76..7b449ea 100644 --- a/components/FilterDropdownSingle/styles.ts +++ b/components/FilterDropdownSingle/styles.ts @@ -24,7 +24,8 @@ export const customSelectStyles = ( // container control: (baseStyles, state) => ({ ...baseStyles, - borderRadius: '57px', + borderRadius: '56px', + height: '30px', border: `0.5px solid ${state.hasValue ? COLORS.shrub : COLORS.midgray}`, backgroundColor: state.isDisabled ? COLORS.lightgray @@ -32,17 +33,17 @@ export const customSelectStyles = ( ? COLORS.shrub : '#fff', padding: '8px 14px', - color: COLORS.midgray, minWidth: $isSmall ? '93px' : '150px', }), // placeholder text placeholder: baseStyles => ({ ...baseStyles, + padding: '0px', + margin: 'auto', + // style as a P3 with fontWeight 400 color: COLORS.midgray, fontSize: '0.75rem', - padding: '0px', - margin: '0px', - justifySelf: 'center', + fontWeight: 400, }), // hide vertical bar between arrow and text indicatorSeparator: baseStyles => ({ @@ -67,8 +68,16 @@ export const customSelectStyles = ( border: '0px', padding: '0px', margin: '0px', - fontSize: '0.75rem', - color: state.hasValue ? `#fff` : `${COLORS.black} !important`, paddingLeft: '0px', + // style as a P3 with fontWeight 400 + color: state.hasValue ? `#fff` : `${COLORS.black}`, // replace with `#fff`? + fontSize: '0.75rem', + fontWeight: 400, + }), + option: baseStyles => ({ + ...baseStyles, + // style as a P3 with fontWeight 400 + fontSize: '0.75rem', + fontWeight: 400, }), });