diff --git a/assets/KDM-Icons/icons.tsx b/assets/KDM-Icons/icons.tsx index edce44e..cc519f1 100644 --- a/assets/KDM-Icons/icons.tsx +++ b/assets/KDM-Icons/icons.tsx @@ -1,14 +1,19 @@ -export const CheckmarkIcon = () => ( +import COLORS from '@/styles/colors'; + +export const CheckmarkIcon = (props: { + width: string | undefined; + height: string | undefined; +}) => ( ); @@ -27,3 +32,33 @@ export const DotDotDotIcon = () => ( /> ); + +export const OpenIcon = () => ( + + + +); + +export const CloseIcon = () => ( + + + +); diff --git a/assets/Project-Modal-Tag-Icons/icons.tsx b/assets/Project-Modal-Tag-Icons/icons.tsx new file mode 100644 index 0000000..cf70578 --- /dev/null +++ b/assets/Project-Modal-Tag-Icons/icons.tsx @@ -0,0 +1,44 @@ +export const UtilityIcon = () => ( + + + +); + +export const ProjectSizeIcon = () => ( + + + +); + +export const LastUpdatedIcon = () => ( + + + +); diff --git a/components/DefaultTag/index.tsx b/components/DefaultTag/index.tsx new file mode 100644 index 0000000..559d5fa --- /dev/null +++ b/components/DefaultTag/index.tsx @@ -0,0 +1,77 @@ +import { + LastUpdatedIcon, + ProjectSizeIcon, + UtilityIcon, +} from '@/assets/Project-Modal-Tag-Icons/icons'; +import COLORS from '@/styles/colors'; +import { TagText1 } from '../../styles/texts'; +import { DefaultTagStyles } from './styles'; + +export default function DefaultTag({ + content, + icon_category, + size, +}: { + content: string | undefined; + icon_category: string; + size: number | undefined; +}) { + const categories: { [key: string]: JSX.Element } = { + 'Utility Service Territory': , + 'Project Size': , + 'Last Updated': , + }; + + const utility_territories: { [key: string]: string } = { + NGRID: 'National Grid', + 'RG&E': ' Rochester Gas & Electric', + NYSEG: 'NYS Electric & Gas', + 'CHG&E': 'Central Hudson Gas & Electric', + ORU: 'Orange & Rockland Utilities', + LIPA: 'Long Island Power Authority', + ConEd: 'Consolidated Edison', + }; + + const icon = icon_category ? categories[icon_category] : null; + + const getProjectScale = () => { + if (!size) { + return null; + } + if (size <= 5) { + return 'Community Scale'; + } else if (size >= 25) { + return 'Utility Scale'; + } else { + return null; + } + }; + + const getContent = () => { + if (icon_category === 'Utility Service Territory') { + return ( + + {icon}{' '} + + {content ? utility_territories[content] : null} + + + ); + } + if (icon_category === 'Project Size') { + const scale = getProjectScale(); + return scale ? ( + + {icon} {scale} + + ) : null; + } + return ( + + {icon} {content} + + ); + }; + + return
{icon && getContent()}
; +} diff --git a/components/DefaultTag/styles.ts b/components/DefaultTag/styles.ts new file mode 100644 index 0000000..9e2cdee --- /dev/null +++ b/components/DefaultTag/styles.ts @@ -0,0 +1,14 @@ +import styled from 'styled-components'; +import COLORS from '@/styles/colors'; + +export const DefaultTagStyles = styled.div` + display: flex; + gap: 0.625rem; + height: 1.2rem; + padding: 0.1rem 0.625rem; + align-items: center; + flex-direction: row; + gap: 0.375rem; + border-radius: 5px; + background: ${COLORS.electricBlue10}; +`; diff --git a/components/KDMDropdown/index.tsx b/components/KDMDropdown/index.tsx new file mode 100644 index 0000000..3ed16a6 --- /dev/null +++ b/components/KDMDropdown/index.tsx @@ -0,0 +1,104 @@ +import { CheckmarkIcon, CloseIcon, OpenIcon } from '@/assets/KDM-Icons/icons'; +import { SubHeading2, TagText2 } from '@/styles/texts'; +import { Milestone } from '@/types/schema'; +import KeyDevelopmentMilestone from '../KeyDevelopmentMilestone'; +import { + CompletionIndicatorTag, + Header, + KDMContainer, + ProgressBar, + ProgressBox, +} from './styles'; + +export default function KDMDropdown({ + key_development_milestones, + isOpen, + setIsOpen, +}: { + key_development_milestones: Milestone[] | undefined; + isOpen: boolean; + setIsOpen: React.Dispatch>; +}) { + // Map KDMs + const KDMs = key_development_milestones?.map( + (milestone: Milestone, i: number) => { + return ( + + ); + }, + ); + + const totalCompletedKDMs = key_development_milestones + ? Object.values(key_development_milestones).reduce( + (a, item) => a + (item.completed === true ? 1 : 0), + 0, + ) + : 0; + + const ProgressBarContent = key_development_milestones?.map( + (milestone: Milestone, i: number) => { + return ( + + ); + }, + ); + + const toggleKDM = () => { + setIsOpen(!isOpen); + }; + + return ( + +
+ KEY DEVELOPMENT MILESTONES + + + {totalCompletedKDMs} / 6 + + {isOpen ? : } +
+ {isOpen ? KDMs : {ProgressBarContent}} +
+ /* + {isActive ? ( + filter.id === 'technology' ? ( + + ) : filter.id === 'status' ? ( + + ) : // Add other filter dropdown components here + null + ) : ( + handleButtonClick(filter)}> + {filter.icon} + {filter.label} + + + )} + */ + ); +} diff --git a/components/KDMDropdown/styles.ts b/components/KDMDropdown/styles.ts new file mode 100644 index 0000000..10dd9e2 --- /dev/null +++ b/components/KDMDropdown/styles.ts @@ -0,0 +1,63 @@ +import { styled } from 'styled-components'; +import COLORS from '@/styles/colors'; + +export const KDMContainer = styled.div` + display: flex; + flex-direction: column; + justify-content: flex-start; + align-items: center; + width: 16.95rem; + gap: 0.875rem; + padding: 1.25rem 1.4rem; + border-radius: 12px 12px 8px 8px; + border: 1px solid rgba(46, 58, 89, 0.05); + box-shadow: 0px -2px 5px 0px rgba(255, 255, 255, 0.1); +`; + +export const Header = styled.button` + display: flex; + flex-direction: row; + align-items: center; + justify-content: space-between; + width: 100%; + + /* remove button's complete styling */ + background: none; + color: inherit; + border: none; + padding: 0; + font: inherit; + cursor: pointer; + outline: inherit; +`; + +export const CompletionIndicatorTag = styled.div` + display: flex; + flex-direction: row; + align-items: center; + justify-content: space-between; + border-radius: 5px; + background: ${COLORS.electricBlue10}; + padding: 0.2rem 0.35rem; + gap: 0.25rem; +`; + +export const ProgressBar = styled.div` + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; + width: 100%; +`; + +export const ProgressBox = styled.div<{ completed: boolean }>` + width: 2.625rem; + height: 0.5rem; + border-radius: 2px; + background: ${COLORS.electricBlue}; + opacity: ${props => (props.completed ? '0.85' : '0.5')}; + box-shadow: ${props => + props.completed + ? '0px 3px 4px 0px rgba(46, 58, 89, 0.10)' + : '0px 2px 4px 0px rgba(73, 116, 224, 0.10) inset'}; +`; diff --git a/components/KeyDevelopmentMilestone/index.tsx b/components/KeyDevelopmentMilestone/index.tsx index 4e14adc..a176828 100644 --- a/components/KeyDevelopmentMilestone/index.tsx +++ b/components/KeyDevelopmentMilestone/index.tsx @@ -1,5 +1,5 @@ import { CheckmarkIcon, DotDotDotIcon } from '../../assets/KDM-Icons/icons'; -import { Milestone, MilestoneLabel } from './styles'; +import { Milestone, MilestoneLabel, MilestoneTitle } from './styles'; export default function KeyDevelopmentMilestone({ completed, @@ -44,11 +44,15 @@ export default function KeyDevelopmentMilestone({ return ( - {milestoneLabels[index]} - - {completed ? : } - {statusLabel} - + + {milestoneLabels[index]} + {completed ? ( + + ) : ( + + )} + + {statusLabel} ); } diff --git a/components/KeyDevelopmentMilestone/styles.ts b/components/KeyDevelopmentMilestone/styles.ts index 62a5d49..794d883 100644 --- a/components/KeyDevelopmentMilestone/styles.ts +++ b/components/KeyDevelopmentMilestone/styles.ts @@ -1,22 +1,23 @@ import styled from 'styled-components'; import COLORS from '../../styles/colors'; import * as fonts from '../../styles/fonts'; +import { CoinbaseSans } from '../../styles/fonts'; export const Milestone = styled.div<{ completed: boolean }>` padding-top: 0.5rem; padding-left: 0.9375rem; - width: 6.96875rem; - height: 1.71875rem; + width: 17rem; + height: 2.375rem; flex-shrink: 0; - border-radius: 12px 4px 4px 4px; + border-radius: 1rem 0.3125rem 0.3125rem 0.3125rem; border-top: ${props => props.completed - ? '0.5px solid #4974E0' - : '0.5px solid rgba(46, 58, 89, 0.20)'}; + ? `0.0625rem solid ${COLORS.electricBlue}` + : `0.0625rem solid ${COLORS.grey80}`}; border-left: ${props => props.completed - ? '0.5px solid #4974E0' - : '0.5px solid rgba(46, 58, 89, 0.20)'}; + ? `0.25px solid ${COLORS.electricBlue}` + : `0.25px solid ${COLORS.grey80}`}; background: ${props => props.completed ? 'linear-gradient(0deg, rgba(73, 116, 224, 0.00) 0%, rgba(73, 116, 224, 0.08) 100%)' @@ -30,10 +31,11 @@ export const Milestone = styled.div<{ completed: boolean }>` line-height: normal; /* kdm inner white shadow */ - box-shadow: 0px 3px 1px 0px #fff inset; + box-shadow: 0px 4px 0px 0px #fff inset; `; export const MilestoneLabel = styled.p<{ status: boolean }>` + font: ${CoinbaseSans.style}; margin-top: 0.125rem; margin-bottom: 0; display: flex; @@ -42,3 +44,11 @@ export const MilestoneLabel = styled.p<{ status: boolean }>` color: ${props => props.status ? 'rgba(73, 116, 224, 0.45)' : 'rgba(46, 58, 89, 0.3)'}; `; + +export const MilestoneTitle = styled.div` + width: 95%; + display: flex; + flex-direction: row; + align-items: center; + justify-content: space-between; +`; diff --git a/components/ProjectItem/index.tsx b/components/ProjectItem/index.tsx index 6e44dc1..86738ac 100644 --- a/components/ProjectItem/index.tsx +++ b/components/ProjectItem/index.tsx @@ -22,7 +22,7 @@ import { SolarPvIcon, } from '@/assets/Technology-Tag-Icons/icons'; import COLORS from '@/styles/colors'; -import { BodyText1, Heading2, TagText1, TagText2 } from '@/styles/texts'; +import { BodyText1, Heading2, TagText1 } from '@/styles/texts'; import { Project } from '@/types/schema'; import { DeveloperInfo, @@ -174,7 +174,7 @@ export default function ProjectItem({ - {size} MW + {size} MW {energyTypeIconMap[renewable_energy_technology ?? '']} diff --git a/components/ProjectModal/index.tsx b/components/ProjectModal/index.tsx index b78327a..bd72b8d 100644 --- a/components/ProjectModal/index.tsx +++ b/components/ProjectModal/index.tsx @@ -5,6 +5,7 @@ import { FiX, FiZap } from 'react-icons/fi'; import Modal from 'react-modal'; import Image from 'next/image'; import { DeveloperIcon } from '@/assets/Project-Icons/icons'; +import COLORS from '@/styles/colors'; import { queryDefaultImages, queryProjectbyId, @@ -14,20 +15,20 @@ import { AccentText2, BodyText1, Heading1, + SubHeading2, } from '../../styles/texts'; -import { Milestone, Project } from '../../types/schema'; -import KeyDevelopmentMilestone from '../KeyDevelopmentMilestone'; +import { Project } from '../../types/schema'; +import DefaultTag from '../DefaultTag'; +import KDMDropdown from '../KDMDropdown'; import StatusTags from '../StatusTag'; import TechnologyTags from '../TechnologyTag'; import { AdditionalInfo, - AdditionalText, - AllKDMS, CloseButton, DetailsContainer, Developer, DeveloperText, - Divider, + LastUpdatedDiv, modalContentStyles, modalOverlayStyles, ProjectDetails, @@ -35,7 +36,13 @@ import { projectImageStyles, ProjectName, ProjectOverview, - ProjectSize, + ProjectSizeDiv, + SizeInfo, + SizeLabel, + TechnologyDiv, + TechnologyInfo, + TechnologyLabel, + UtilityDiv, } from './styles'; export default function ProjectModal({ @@ -91,21 +98,19 @@ export default function ProjectModal({ key_development_milestones, proposed_cod, // approved + // interconnection_number, + // permit_process: string | null; + // permit_application_number: string | null; + // last_updated: Date; + utility, + last_updated_display, + has_energy_storage, + has_pumped_storage, + storage_size, } = project || {}; // Map KDMs - const KDMs = key_development_milestones?.map( - (milestone: Milestone, i: number) => { - return ( - - ); - }, - ); + const [isKDMOpen, setIsKDMOpen] = useState(false); const getProjectImageSrc = () => { return project_image || defaultImage || ''; @@ -122,6 +127,22 @@ export default function ProjectModal({ setSelectedProjectId(null); // close modal }; + const getProjectSize = () => { + if (has_energy_storage || has_pumped_storage) { + return size + ' + ' + storage_size; + } + return size; + }; + + function convertLastUpdatedDateToString() { + if (!last_updated_display) return ''; + const res = new Date(last_updated_display); + const year = String(res.getFullYear()); + const month = res.toLocaleString('default', { month: 'long' }); + const day = String(res.getDate()).padStart(2, '0'); + return `${month} ${day}, ${year}`; + } + return ( {project_name?.toUpperCase()} - - + - - - - {size} - - Megawatts - - - {KDMs} - - - DETAILS - - - - {additional_information} - - + {utility ? ( + + UTILITY + + + ) : null} + + + PROJECT SIZE + + + + + {getProjectSize()} + MW + + + + + TECHNOLOGY + + + + {has_pumped_storage ? ( + + ) : null} + {has_energy_storage ? ( + + ) : null} + + + + {additional_information ? ( + + + DETAILS + {additional_information} + + + ) : null} + + LAST UPDATED + + ); diff --git a/components/ProjectModal/styles.ts b/components/ProjectModal/styles.ts index 3e44909..06292d1 100644 --- a/components/ProjectModal/styles.ts +++ b/components/ProjectModal/styles.ts @@ -37,6 +37,8 @@ export const ProjectDetails = styled.div` background: ${COLORS.white}; width: 21.6rem; overflow-y: auto; + gap: 0.75rem; + padding-bottom: 0.75rem; `; export const projectImageStyles: CSSProperties = { @@ -96,46 +98,96 @@ export const CloseButton = styled.button` cursor: pointer; `; -export const ProjectSize = styled.div` +export const UtilityDiv = styled.div` + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; + width: 16.95rem; + padding: 0.75rem 1.4rem; + border-radius: 12px 12px 8px 8px; + border: 1px solid rgba(46, 58, 89, 0.05); + box-shadow: 0px -2px 5px 0px rgba(255, 255, 255, 0.1); +`; + +export const ProjectSizeDiv = styled.div` + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: flex-end; + width: 16.95rem; + padding: 1.25rem 1.4rem; + border-radius: 8px 8px 12px 12px; + border: 1px solid rgba(46, 58, 89, 0.05); + box-shadow: 0px -2px 5px 0px rgba(255, 255, 255, 0.1); +`; + +export const SizeLabel = styled.div` display: flex; - align-items: baseline; - width: 16.25rem; - padding-top: 1.2rem; + flex-direction: column; gap: 0.5rem; `; -export const Divider = styled.hr` - width: 16.25rem; - border: 0; - height: 1px; - margin: 0px 0; - background: rgba(46, 58, 89, 0.1); +export const SizeInfo = styled.div` + display: flex; + flex-direction: row; + justify-content: flex-start; + gap: 0.3rem; + align-items: flex-end; `; -export const AdditionalInfo = styled.div` - width: 16.25rem; - padding: 1.25rem; +export const TechnologyDiv = styled.div` + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: flex-start; + width: 16.95rem; + padding: 1.25rem 1.4rem; + border-radius: 8px 8px 12px 12px; + border: 1px solid rgba(46, 58, 89, 0.05); + box-shadow: 0px -2px 5px 0px rgba(255, 255, 255, 0.1); `; -export const DetailsContainer = styled.div<{ $isDetailsEmpty: boolean }>` +export const TechnologyLabel = styled.div` display: flex; - visibility: ${({ $isDetailsEmpty }) => - $isDetailsEmpty ? 'hidden' : 'visible'}; - align-items: center; - width: 100%; + flex-direction: column; gap: 0.5rem; `; -export const AdditionalText = styled.div` - padding-top: 1.25rem; +export const TechnologyInfo = styled.div` + display: flex; + flex-direction: column; + gap: 0.5rem; `; -export const AllKDMS = styled.div` +export const AdditionalInfo = styled.div` display: flex; - flex-wrap: wrap; - width: 16.625rem; - height: 8.25rem; - margin-top: 1.9375rem; - margin-bottom: 1.25rem; + flex-direction: column; + width: 16.95rem; + padding: 1.25rem 1.4rem; + border-radius: 8px 8px 12px 12px; + border: 1px solid rgba(46, 58, 89, 0.05); + box-shadow: + 0px 2px 4px 0px rgba(77, 87, 114, 0.08), + 0px -2px 5px 0px rgba(255, 255, 255, 0.1); gap: 0.75rem; `; + +export const DetailsContainer = styled.div` + display: flex; + align-items: center; + width: 100%; + gap: 0.5rem; +`; + +export const LastUpdatedDiv = styled.div` + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; + width: 16.95rem; + padding: 0.75rem 1.4rem; + border-radius: 8px 8px 12px 12px; + border: 1px solid rgba(46, 58, 89, 0.05); + box-shadow: 0px -2px 5px 0px rgba(255, 255, 255, 0.1); +`; diff --git a/components/StatusTag/index.tsx b/components/StatusTag/index.tsx index 61ce365..208f82a 100644 --- a/components/StatusTag/index.tsx +++ b/components/StatusTag/index.tsx @@ -1,21 +1,17 @@ +import COLORS from '@/styles/colors'; import { CalendarIcon, GreenDotOperationalIcon, GreyDotInProgressIcon, } from '../../assets/Status-Tag-Icons/icons'; import { TagText1 } from '../../styles/texts'; -import { - AllTagStyles, - CODTagStyles, - ProposedCODTagStyles, - StatusTagStyles, -} from './styles'; +import { AllTagStyles, CODTagStyles, TagStyle } from './styles'; export default function StatusTag({ projectStatus, cod, }: { - projectStatus: string | undefined; + projectStatus: string; cod: Date | undefined; }) { function convertDateToString() { @@ -27,31 +23,40 @@ export default function StatusTag({ return `${month}.${day}.${year}`; } - if (projectStatus === 'Operational') { - return ( - - Operational - - ); - } - - if (projectStatus === 'Proposed') { - return cod ? ( - - - Proposed - - - - COD {convertDateToString()} - - - ) : ( - - Proposed - - ); - } + const statusIcon: { [key: string]: JSX.Element } = { + Operational: , + Proposed: , + }; + const statusTextColor: { [key: string]: string } = { + Operational: COLORS.aceGreen, + Proposed: COLORS.ashGrey, + }; - return null; + return ( +
+ {cod ? ( + + + {statusIcon[projectStatus]}{' '} + + {projectStatus} + + + + + + COD {convertDateToString()} + + + + ) : ( + + {statusIcon[projectStatus]}{' '} + + {projectStatus} + + + )} +
+ ); } diff --git a/components/StatusTag/styles.ts b/components/StatusTag/styles.ts index 8acbf47..29ef61f 100644 --- a/components/StatusTag/styles.ts +++ b/components/StatusTag/styles.ts @@ -1,34 +1,29 @@ import styled from 'styled-components'; +import COLORS from '@/styles/colors'; -const BaseTagStyles = styled.div` - border-radius: 6.25rem; - border: 0.031rem solid rgba(46, 58, 89, 0.25); - display: inline-flex; - height: 1.375rem; +const BaseTagStyle = styled.div` + display: flex; + gap: 0.625rem; + height: 1.2rem; padding: 0.1rem 0.625rem; align-items: center; flex-direction: row; - gap: 0.25rem; + gap: 0.375rem; + border-radius: 5px; `; -export const StatusTagStyles = styled(BaseTagStyles)``; - -export const ProposedCODTagStyles = styled(BaseTagStyles)` - border-left: none; - border-top: none; - border-bottom: none; +export const TagStyle = styled(BaseTagStyle)<{ $color: string }>` + background: ${({ $color }) => `${$color}10`}; `; -export const CODTagStyles = styled.div` - display: inline-flex; - height: 1.375rem; - align-items: center; - flex-direction: row; - gap: 0.25rem; - white-space: nowrap; +export const CODTagStyles = styled(BaseTagStyle)` + background: ${COLORS.electricBlue10}; `; -export const AllTagStyles = styled(BaseTagStyles)` - padding-left: 0rem; - gap: 0.375rem; +export const AllTagStyles = styled.div` + padding-left: 0.1rem; + gap: 0.35rem; + display: flex; + justify-content: flex-start; + align-items: center; `; diff --git a/components/TechnologyTag/index.tsx b/components/TechnologyTag/index.tsx index fd1ac74..19e56d7 100644 --- a/components/TechnologyTag/index.tsx +++ b/components/TechnologyTag/index.tsx @@ -50,13 +50,28 @@ export default function TechnologyTag({ ), }; + const colorMap: { [key: string]: string } = { + 'Offshore Wind': COLORS.electricBlue, + 'Energy Storage': COLORS.teal, + Geothermal: COLORS.earthyGreen, + Hydroelectric: COLORS.frenchBlue, + 'Land-Based Wind': COLORS.skyBlue, + 'Pumped Storage': COLORS.cyanBlue, + 'Solar PV': COLORS.solarYellow, + }; + const icon = technology ? iconMap[technology] : null; return (
{icon && ( - - {icon} {technology} + + {icon}{' '} + + {technology} + )}
diff --git a/components/TechnologyTag/styles.ts b/components/TechnologyTag/styles.ts index 5ea5db8..eb5eaa7 100644 --- a/components/TechnologyTag/styles.ts +++ b/components/TechnologyTag/styles.ts @@ -1,10 +1,10 @@ import styled from 'styled-components'; -export const TechnologyTagStyles = styled.div` - border-radius: 6.25rem; - border: 0.031rem solid rgba(46, 58, 89, 0.25); +export const TechnologyTagStyles = styled.div<{ $backgroundColor: string }>` + border-radius: 5px; + background: ${({ $backgroundColor }) => `${$backgroundColor}10`}; display: inline-flex; - height: 1.375rem; + height: 1.2rem; padding: 0.1rem 0.625rem; align-items: center; flex-direction: row; diff --git a/styles/colors.ts b/styles/colors.ts index 9f0b142..f81a3de 100644 --- a/styles/colors.ts +++ b/styles/colors.ts @@ -6,13 +6,16 @@ const COLORS = { green: '#0E7B30', earthyGreen: '#4D8B31', chateauGreen: '#3D9458', + aceGreen: '#1BA546', navy: '#2E3A59', electricBlue: '#4974E0', + electricBlue10: '#F6F8FD', + electricBlue50: '#4974E099', lightBlue: '#92ACED', teal: '#4896BC', frenchBlue: '#0072BB', - skyBlue: '#96CEE5', - cyanBlue: '#68C6E2', + skyBlue: '#6DA2B8', + cyanBlue: '#3CA0BE', veryLightGrey: '#F4F4F4', lightGrey: '#D9D9D9', ashGrey: '#818181', @@ -23,6 +26,7 @@ const COLORS = { navy75: '#626C83', navy30: '#FAFAFB', navy85: '#4C5671', + grey80: '#A1A6B4CC', }; export default COLORS; diff --git a/styles/texts.ts b/styles/texts.ts index a7ca691..f71b752 100644 --- a/styles/texts.ts +++ b/styles/texts.ts @@ -61,7 +61,7 @@ export const SubHeading1 = styled.h2` export const SubHeading2 = styled.h2` ${TextStylesCoinbaseMono} - font-size: 0.625rem; + font-size: 0.7rem; color: ${COLORS.navy75}; font-style: normal; font-weight: 400; @@ -89,11 +89,11 @@ export const BodyText2 = styled.p` export const AccentText1 = styled.h4` ${TextStylesCoinbaseText} - font-size: 3rem; + font-size: 2rem; font-style: normal; color: ${COLORS.navy85}; font-weight: 400; - line-height: normal; + line-height: 2rem; `; export const AccentText2 = styled.h4` @@ -107,20 +107,21 @@ export const AccentText2 = styled.h4` export const TagText1 = styled.p` ${TextStylesCoinbaseText} - color: ${COLORS.navy75}; font-size: 0.625rem; font-style: normal; font-weight: 300; line-height: normal; + color: ${({ $color }) => $color || COLORS.navy75}; `; export const TagText2 = styled.p` ${TextStylesCoinbaseText} color: ${COLORS.electricBlue}; - font-size: 0.625rem; + font-size: 10px; font-style: normal; - font-weight: 300; + font-weight: 500; line-height: normal; + letter-spacing: 0.2px; `; export const MarkerInfoWindowText1 = styled.p` diff --git a/types/schema.d.ts b/types/schema.d.ts index c77e498..31b16fc 100644 --- a/types/schema.d.ts +++ b/types/schema.d.ts @@ -16,7 +16,7 @@ export type Project = { assembly_district: number; project_image: string | null; additional_information: string | null; - key_development_milestones: Milestone[] | null; + key_development_milestones: Milestone[]; permit_process: string | null; proposed_cod: Date; approved: boolean; @@ -24,10 +24,11 @@ export type Project = { permit_process: string | null; permit_application_number: string | null; last_updated: Date; + utility: string | null; + last_updated_display: Date; has_energy_storage: boolean; has_pumped_storage: boolean; - storage_size: number; - utility_service_provider: string; + storage_size: number | null; }; export interface Option {