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 {