From da6afec153f9642157740b73c1f9dfef81db7c76 Mon Sep 17 00:00:00 2001 From: Justin Lee Date: Fri, 8 Nov 2024 14:25:51 -0800 Subject: [PATCH 1/4] Added Project Item component --- app/testing/page.tsx | 23 +++ assets/Icons/icons.tsx | 187 +++++++++++++++++++ assets/KDM-Icons/icons.tsx | 29 --- components/KeyDevelopmentMilestone/index.tsx | 2 +- components/ProjectItem/index.tsx | 159 ++++++++++++++++ components/ProjectItem/styles.ts | 89 +++++++++ components/ProjectModal/index.tsx | 8 +- types/schema.d.ts | 6 + 8 files changed, 466 insertions(+), 37 deletions(-) create mode 100644 app/testing/page.tsx create mode 100644 assets/Icons/icons.tsx delete mode 100644 assets/KDM-Icons/icons.tsx create mode 100644 components/ProjectItem/index.tsx create mode 100644 components/ProjectItem/styles.ts diff --git a/app/testing/page.tsx b/app/testing/page.tsx new file mode 100644 index 0000000..89b07a7 --- /dev/null +++ b/app/testing/page.tsx @@ -0,0 +1,23 @@ +'use client'; + +import { CSSProperties } from 'react'; +import ProjectItem from '@/components/ProjectItem'; + +export default function Home() { + return ( +
+ +
+ ); +} + +// CSS styles + +const mainStyles: CSSProperties = { + width: '100%', + height: '100%', + display: 'flex', + flexDirection: 'column', + alignItems: 'center', + justifyContent: 'center', +}; diff --git a/assets/Icons/icons.tsx b/assets/Icons/icons.tsx new file mode 100644 index 0000000..e497aa3 --- /dev/null +++ b/assets/Icons/icons.tsx @@ -0,0 +1,187 @@ +export const CheckmarkIcon = () => ( + + + +); + +export const DotDotDotIcon = () => ( + + + +); + +export const OperationalIcon = () => ( + + + +); + +export const SmallSizeIcon = () => ( + + + +); + +export const SmallLandBasedWindIcon = () => ( + + + +); + +export const SmallSolarPowerIcon = () => ( + + + +); + +export const SmallHydroelectricIcon = () => ( + + + +); + +export const SmallOffshoreWindIcon = () => ( + + + + + +); + +export const SmallGeothermalIcon = () => ( + + + +); + +export const SmallEnergyStorageIcon = () => ( + + + + +); + +export const SmallPumpedStorage = () => ( + + + +); diff --git a/assets/KDM-Icons/icons.tsx b/assets/KDM-Icons/icons.tsx deleted file mode 100644 index edce44e..0000000 --- a/assets/KDM-Icons/icons.tsx +++ /dev/null @@ -1,29 +0,0 @@ -export const CheckmarkIcon = () => ( - - - -); - -export const DotDotDotIcon = () => ( - - - -); diff --git a/components/KeyDevelopmentMilestone/index.tsx b/components/KeyDevelopmentMilestone/index.tsx index 572b7f1..1691510 100644 --- a/components/KeyDevelopmentMilestone/index.tsx +++ b/components/KeyDevelopmentMilestone/index.tsx @@ -1,4 +1,4 @@ -import { CheckmarkIcon, DotDotDotIcon } from '../../assets/KDM-Icons/icons'; +import { CheckmarkIcon, DotDotDotIcon } from '../../assets/Icons/icons'; import { Milestone, MilestoneLabel } from './styles'; export default function KeyDevelopmentMilestone({ diff --git a/components/ProjectItem/index.tsx b/components/ProjectItem/index.tsx new file mode 100644 index 0000000..15cbd06 --- /dev/null +++ b/components/ProjectItem/index.tsx @@ -0,0 +1,159 @@ +'use client'; + +import { useEffect, useState } from 'react'; +import Image from 'next/image'; +import { + queryDefaultImages, + queryProjectbyId, +} from '@/api/supabase/queries/query'; +import { + OperationalIcon, + SmallEnergyStorageIcon, + SmallGeothermalIcon, + SmallHydroelectricIcon, + SmallLandBasedWindIcon, + SmallOffshoreWindIcon, + SmallPumpedStorage, + SmallSizeIcon, + SmallSolarPowerIcon, +} from '@/assets/Icons/icons'; +import { Project } from '@/types/schema'; +import ProjectModal from '../ProjectModal'; +import { + projectImageStyles, + ProjectInfo, + ProjectName, + ProjectSize, + ProjectSizeAndType, + ProjectStatus, + ProjectType, + StyledProjectItem, +} from './styles'; + +export default function ProjectItem({ project_id }: { project_id: number }) { + const [project, setProject] = useState(null); + const [defaultImage, setDefaultImage] = useState(null); + const [modalOpen, setModalOpen] = useState(false); + + useEffect(() => { + queryProjectbyId(project_id).then(data => { + setProject(data); + }); + }, [project_id]); + + useEffect(() => { + // Fetch default image when project data is available + const fetchDefaultImage = async () => { + if (!project?.project_image && project?.renewable_energy_technology) { + try { + const fetchedImage = await queryDefaultImages( + project.renewable_energy_technology, + ); + setDefaultImage(fetchedImage.default_image); + } catch (error) { + console.error('Error fetching default image:', error); + } + } + }; + fetchDefaultImage(); + }, [project]); + + const { + // id, + project_name, + renewable_energy_technology, + size, + // developer, + // longitude, + // latitude, + project_status, + // county, + // town, + // region, + // state_senate_district, + // assembly_district, + project_image, + // additional_information, + // key_development_milestones, + // proposed_cod, + // approved + } = project || {}; + + const getProjectImageSrc = () => { + return project_image || defaultImage || ''; + }; + + const projectImageAlt = project_image + ? `${project_name} project image` + : defaultImage + ? `${renewable_energy_technology} default image` + : 'No image available'; + + let projectTypeIcon = <>; + switch (renewable_energy_technology) { + case 'Land-Based Wind': + projectTypeIcon = ; + break; + case 'Solar': + projectTypeIcon = ; + break; + case 'Hydroelectric': + projectTypeIcon = ; + break; + case 'Offshore Wind': + projectTypeIcon = ; + break; + case 'Geothermal': + projectTypeIcon = ; + break; + case 'Energy Storage': + projectTypeIcon = ; + break; + case 'Pumped Storage': + projectTypeIcon = ; + break; + } + + const handleProjectClick = () => { + setModalOpen(true); + }; + + if (modalOpen) { + return ( + setModalOpen(false)} + openFirst={true} + /> + ); + } + + return ( + + + {project_name?.toUpperCase()} + + + {project_status} + + + + + {size} MW + + + {projectTypeIcon} + {renewable_energy_technology} + + + + {projectImageAlt} + + ); +} diff --git a/components/ProjectItem/styles.ts b/components/ProjectItem/styles.ts new file mode 100644 index 0000000..a1faafd --- /dev/null +++ b/components/ProjectItem/styles.ts @@ -0,0 +1,89 @@ +import { CSSProperties } from 'react'; +import styled from 'styled-components'; +import COLORS from '@/styles/colors'; +import { CoinbaseSans, CoinbaseText } from '@/styles/fonts'; + +export const StyledProjectItem = styled.button` + display: flex; + align-items: center; + width: 20rem; + height: 7.625rem; + flex-shrink: 0; + border-radius: 18px; + border-top: 1px solid rgba(46, 58, 89, 0.1); + border-bottom: 1px solid rgba(46, 58, 89, 0.1); + border-left: 0; + border-right: 0; + background: rgba(255, 255, 255, 0.9); + padding-top: 0; + padding-bottom: 0; +`; + +export const projectImageStyles: CSSProperties = { + width: '7.75rem', + height: '6.75rem', + borderRadius: '0px 12px 12px 0px', + opacity: '0.9', + background: 'url() lightgray 50% / cover no-repeat', + marginLeft: '-0.9375rem', +}; + +export const ProjectInfo = styled.div` + width: 12.625rem; + height: 6.75rem; + border-radius: 0px 7.5px 7.5px 0px; + border-right: 1px solid #eff0f3; + background: rgba(255, 255, 255, 1); + box-shadow: 1px 0px 4px 0px rgba(255, 255, 255, 0.25); + padding-left: 0.875rem; + z-index: 2; +`; + +export const ProjectName = styled.div` + color: ${COLORS.navy}; + font-family: ${CoinbaseSans}; + font-size: 0.9375rem; + font-style: normal; + font-weight: 400; + line-height: normal; + margin-top: 1.75rem; + text-align: left; +`; + +export const ProjectStatus = styled.div` + display: flex; + justify-content: flex-start; + align-items: center; + gap: 0.3125rem; + color: rgba(46, 58, 89, 0.75); + font-family: ${CoinbaseText}; + font-size: 0.625rem; + font-style: normal; + font-weight: 300; + line-height: normal; + margin-top: 0.3125rem; +`; + +export const ProjectSizeAndType = styled.div` + display: flex; + gap: 0.5rem; + color: ${COLORS.navy}; + font-family: ${CoinbaseSans}; + font-size: 0.625rem; + font-style: normal; + font-weight: 300; + line-height: normal; + margin-top: 1.625rem; +`; + +export const ProjectSize = styled.div` + display: flex; + align-items: center; + gap: 0.25rem; +`; + +export const ProjectType = styled.div` + display: flex; + align-items: center; + gap: 0.25rem; +`; diff --git a/components/ProjectModal/index.tsx b/components/ProjectModal/index.tsx index d1935f1..4136bf7 100644 --- a/components/ProjectModal/index.tsx +++ b/components/ProjectModal/index.tsx @@ -15,7 +15,7 @@ import { Heading1, TagText1, } from '../../styles/texts'; -import { Project } from '../../types/schema'; +import { Milestone, Project } from '../../types/schema'; import KeyDevelopmentMilestone from '../KeyDevelopmentMilestone'; import { AdditionalInfo, @@ -36,12 +36,6 @@ import { ProjectSize, } from './styles'; -interface Milestone { - milestoneTitle: string; - completed: boolean; - date: string | null; -} - export default function ProjectModal({ project_id, closeModal, diff --git a/types/schema.d.ts b/types/schema.d.ts index 74560a8..f8137c6 100644 --- a/types/schema.d.ts +++ b/types/schema.d.ts @@ -19,3 +19,9 @@ export type Project = { proposed_cod: Date; approved: boolean; }; + +export type Milestone = { + milestoneTitle: string; + completed: boolean; + date: string | null; +}; From b478288164f248dd1e1eb74d2fa528fb20579078 Mon Sep 17 00:00:00 2001 From: Justin Lee Date: Fri, 8 Nov 2024 15:34:35 -0800 Subject: [PATCH 2/4] meep --- app/testing/page.tsx | 2 +- components/ProjectItem/index.tsx | 7 ++++--- components/ProjectItem/styles.ts | 14 +------------- 3 files changed, 6 insertions(+), 17 deletions(-) diff --git a/app/testing/page.tsx b/app/testing/page.tsx index 89b07a7..6b9dbfc 100644 --- a/app/testing/page.tsx +++ b/app/testing/page.tsx @@ -6,7 +6,7 @@ import ProjectItem from '@/components/ProjectItem'; export default function Home() { return (
- +
); } diff --git a/components/ProjectItem/index.tsx b/components/ProjectItem/index.tsx index 15cbd06..ff7d96e 100644 --- a/components/ProjectItem/index.tsx +++ b/components/ProjectItem/index.tsx @@ -17,6 +17,7 @@ import { SmallSizeIcon, SmallSolarPowerIcon, } from '@/assets/Icons/icons'; +import { TagText1, TagText2 } from '@/styles/texts'; import { Project } from '@/types/schema'; import ProjectModal from '../ProjectModal'; import { @@ -134,16 +135,16 @@ export default function ProjectItem({ project_id }: { project_id: number }) { {project_name?.toUpperCase()} - {project_status} + {project_status} - {size} MW + {size} MW {projectTypeIcon} - {renewable_energy_technology} + {renewable_energy_technology} diff --git a/components/ProjectItem/styles.ts b/components/ProjectItem/styles.ts index a1faafd..d4cb65e 100644 --- a/components/ProjectItem/styles.ts +++ b/components/ProjectItem/styles.ts @@ -1,7 +1,7 @@ import { CSSProperties } from 'react'; import styled from 'styled-components'; import COLORS from '@/styles/colors'; -import { CoinbaseSans, CoinbaseText } from '@/styles/fonts'; +import { CoinbaseSans } from '@/styles/fonts'; export const StyledProjectItem = styled.button` display: flex; @@ -55,24 +55,12 @@ export const ProjectStatus = styled.div` justify-content: flex-start; align-items: center; gap: 0.3125rem; - color: rgba(46, 58, 89, 0.75); - font-family: ${CoinbaseText}; - font-size: 0.625rem; - font-style: normal; - font-weight: 300; - line-height: normal; margin-top: 0.3125rem; `; export const ProjectSizeAndType = styled.div` display: flex; gap: 0.5rem; - color: ${COLORS.navy}; - font-family: ${CoinbaseSans}; - font-size: 0.625rem; - font-style: normal; - font-weight: 300; - line-height: normal; margin-top: 1.625rem; `; From 3fcf0f0568b58311fc49c6b34a1c064b70ff2b4f Mon Sep 17 00:00:00 2001 From: Justin Lee Date: Fri, 8 Nov 2024 19:16:01 -0800 Subject: [PATCH 3/4] fixed font issues kinda --- components/ProjectItem/index.tsx | 6 ++++-- components/ProjectItem/styles.ts | 13 ++----------- styles/texts.ts | 9 +++++++++ 3 files changed, 15 insertions(+), 13 deletions(-) diff --git a/components/ProjectItem/index.tsx b/components/ProjectItem/index.tsx index ff7d96e..096bb38 100644 --- a/components/ProjectItem/index.tsx +++ b/components/ProjectItem/index.tsx @@ -17,7 +17,7 @@ import { SmallSizeIcon, SmallSolarPowerIcon, } from '@/assets/Icons/icons'; -import { TagText1, TagText2 } from '@/styles/texts'; +import { Heading2, TagText1, TagText2 } from '@/styles/texts'; import { Project } from '@/types/schema'; import ProjectModal from '../ProjectModal'; import { @@ -132,7 +132,9 @@ export default function ProjectItem({ project_id }: { project_id: number }) { return ( - {project_name?.toUpperCase()} + + {project_name?.toUpperCase()} + {project_status} diff --git a/components/ProjectItem/styles.ts b/components/ProjectItem/styles.ts index d4cb65e..861cb60 100644 --- a/components/ProjectItem/styles.ts +++ b/components/ProjectItem/styles.ts @@ -1,7 +1,5 @@ import { CSSProperties } from 'react'; import styled from 'styled-components'; -import COLORS from '@/styles/colors'; -import { CoinbaseSans } from '@/styles/fonts'; export const StyledProjectItem = styled.button` display: flex; @@ -40,13 +38,7 @@ export const ProjectInfo = styled.div` `; export const ProjectName = styled.div` - color: ${COLORS.navy}; - font-family: ${CoinbaseSans}; - font-size: 0.9375rem; - font-style: normal; - font-weight: 400; - line-height: normal; - margin-top: 1.75rem; + margin-top: 1.5rem; text-align: left; `; @@ -55,13 +47,12 @@ export const ProjectStatus = styled.div` justify-content: flex-start; align-items: center; gap: 0.3125rem; - margin-top: 0.3125rem; `; export const ProjectSizeAndType = styled.div` display: flex; gap: 0.5rem; - margin-top: 1.625rem; + margin-top: 1.5rem; `; export const ProjectSize = styled.div` diff --git a/styles/texts.ts b/styles/texts.ts index 8129368..1d532aa 100644 --- a/styles/texts.ts +++ b/styles/texts.ts @@ -43,6 +43,15 @@ export const Heading1 = styled.h1` line-height: normal; `; +export const Heading2 = styled.h2` + ${TextStylesCoinbaseSans} + font-size: 0.9375rem; + color: ${COLORS.navy}; + font-style: normal; + font-weight: 400; + line-height: normal; +`; + export const SubHeading1 = styled.h2` ${TextStylesCoinbaseSans} font-size: 0.875rem; From e12a5bc96c1317ac241e2fb15dace7e66c22d764 Mon Sep 17 00:00:00 2001 From: Justin Lee Date: Sun, 10 Nov 2024 18:34:18 -0800 Subject: [PATCH 4/4] minor fixes --- app/testing/page.tsx | 2 +- assets/Icons/icons.tsx | 34 +++++++++++++++++++++----------- components/ProjectItem/index.tsx | 21 ++++++++++++++++---- styles/colors.ts | 1 + styles/texts.ts | 2 +- 5 files changed, 43 insertions(+), 17 deletions(-) diff --git a/app/testing/page.tsx b/app/testing/page.tsx index 6b9dbfc..89b07a7 100644 --- a/app/testing/page.tsx +++ b/app/testing/page.tsx @@ -6,7 +6,7 @@ import ProjectItem from '@/components/ProjectItem'; export default function Home() { return (
- +
); } diff --git a/assets/Icons/icons.tsx b/assets/Icons/icons.tsx index e497aa3..7ea4aa6 100644 --- a/assets/Icons/icons.tsx +++ b/assets/Icons/icons.tsx @@ -40,6 +40,18 @@ export const OperationalIcon = () => ( ); +export const InProgressIcon = () => ( + + + +); + export const SmallSizeIcon = () => ( ( ); @@ -97,8 +109,8 @@ export const SmallHydroelectricIcon = () => ( fill="none" > @@ -114,15 +126,15 @@ export const SmallOffshoreWindIcon = () => ( fill="none" > ( d="M5.4716 2.13159L5.3978 2.11821C5.38121 2.20972 5.33022 2.29396 5.25235 2.35538C5.17436 2.41689 5.07475 2.45123 4.97109 2.45132L4.97087 2.45132C4.94663 2.45142 4.92244 2.4495 4.89859 2.4456L4.89806 2.44551C4.84129 2.43664 4.78717 2.41746 4.73879 2.38925C4.69041 2.36103 4.64883 2.32441 4.6162 2.28171C4.58359 2.23902 4.56054 2.19105 4.5481 2.1406C4.53567 2.09017 4.53403 2.03802 4.54325 1.98704L4.54328 1.98684C4.6383 1.45307 4.93408 0.967066 5.37924 0.616347C5.82452 0.265543 6.38992 0.0733078 6.97441 0.0750115H6.97462C7.09111 0.0750115 7.20186 0.118203 7.28274 0.193607C7.36344 0.268846 7.40769 0.369721 7.40769 0.473695C7.40769 0.577669 7.36344 0.678545 7.28274 0.753783C7.20189 0.82916 7.09119 0.872348 6.97475 0.872379M5.4716 2.13159L5.39775 2.11849C5.45994 1.76791 5.65377 1.45058 5.94298 1.22272C6.23205 0.994968 6.59782 0.871128 6.97475 0.872379M5.4716 2.13159C5.53044 1.79992 5.71399 1.49862 5.98939 1.28163C6.2648 1.06465 6.61406 0.946155 6.97462 0.947379M5.4716 2.13159C5.4516 2.24188 5.39039 2.34202 5.29879 2.41427C5.2072 2.48652 5.09113 2.52621 4.97116 2.52632C4.94277 2.52643 4.91444 2.52419 4.88648 2.51961C4.82063 2.50933 4.75761 2.48704 4.70101 2.45403C4.6444 2.42102 4.59534 2.37794 4.5566 2.32724C4.51787 2.27654 4.49024 2.21922 4.47528 2.15855C4.46033 2.09789 4.45834 2.03507 4.46944 1.97369L6.97462 1.1542e-05C7.10937 1.1542e-05 7.2386 0.0499174 7.33388 0.13875C7.42916 0.227583 7.48269 0.348066 7.48269 0.473695C7.48269 0.599324 7.42916 0.719807 7.33388 0.80864C7.2386 0.897473 7.10937 0.947379 6.97462 0.947379M6.97475 0.872379C6.97479 0.872379 6.97484 0.872379 6.97488 0.872379L6.97462 0.947379M6.97475 0.872379C6.97471 0.872379 6.97467 0.872379 6.97462 0.872379V0.947379M1.90033 8.12763H1.94651L1.9673 8.0864C2.49761 7.03451 3.08394 5.52825 3.1489 3.91843L3.14891 3.91823C3.15581 3.7354 3.23883 3.56107 3.38225 3.43264C3.52583 3.30407 3.71848 3.23194 3.91953 3.2329H3.91989H7.66009H7.66016C7.86041 3.2327 8.05215 3.30456 8.19564 3.43219C8.33896 3.55966 8.42294 3.73265 8.43195 3.9147C8.51755 5.67518 9.39173 7.36037 9.82162 8.09068L9.84338 8.12763H9.88626H10.7004C10.8169 8.12763 10.9277 8.17082 11.0085 8.24623C11.0892 8.32147 11.1335 8.42234 11.1335 8.52632C11.1335 8.63029 11.0892 8.73117 11.0085 8.80641C10.9277 8.88181 10.8169 8.925 10.7004 8.925H1.21656C1.10008 8.925 0.989326 8.88181 0.908449 8.80641C0.82775 8.73117 0.783496 8.63029 0.783496 8.52632C0.783496 8.42234 0.827749 8.32147 0.908449 8.24623C0.989326 8.17082 1.10008 8.12763 1.21656 8.12763H1.90033ZM7.57444 4.10001L7.56954 4.03027H7.49962H6.82221H6.74212L6.74737 4.11018C6.84821 5.64749 7.40875 7.07643 7.91829 8.08642L7.93908 8.12763H7.98525H8.73803H8.86331L8.80414 8.01721C8.30968 7.09442 7.68345 5.6503 7.57444 4.10001ZM2.94711 8.021L2.89749 8.12763H3.01511H6.86793H6.98555L6.93593 8.021C6.44458 6.96492 5.96361 5.58223 5.87629 4.10086L5.87213 4.03027H5.80142H4.08162H4.01091L4.00675 4.10086C3.91944 5.58223 3.43846 6.96492 2.94711 8.021ZM6.49716 1.77255C6.57804 1.69715 6.68878 1.65396 6.80527 1.65396H6.97462C7.3073 1.65396 7.62731 1.5308 7.86403 1.31009C8.10094 1.08922 8.23511 0.788483 8.23511 0.473695C8.23511 0.369721 8.27936 0.268846 8.36006 0.193607C8.44094 0.118203 8.55169 0.0750115 8.66817 0.0750115C8.78466 0.0750115 8.89541 0.118203 8.97628 0.193607C9.05696 0.268823 9.10121 0.369661 9.10124 0.473603C9.10059 0.99618 8.87769 1.49834 8.47951 1.86957C8.08116 2.24097 7.54001 2.45072 6.97454 2.45132H6.80527C6.68878 2.45132 6.57804 2.40813 6.49716 2.33273C6.41646 2.25749 6.37221 2.15662 6.37221 2.05264C6.37221 1.94867 6.41646 1.84779 6.49716 1.77255Z" fill="#4D8B31" stroke="white" - stroke-width="0.15" + strokeWidth="0.15" /> ); @@ -160,13 +172,13 @@ export const SmallEnergyStorageIcon = () => ( d="M2.87528 6.40012C2.725 6.40012 2.58086 6.34042 2.47459 6.23415C2.36832 6.12788 2.30862 5.98374 2.30862 5.83346V3.16679C2.30862 3.0165 2.36832 2.87237 2.47459 2.7661C2.58086 2.65982 2.725 2.60012 2.87528 2.60012H6.77529V6.40012H2.87528Z" fill="#4896BC" stroke="white" - stroke-width="0.2" + strokeWidth="0.2" /> ); diff --git a/components/ProjectItem/index.tsx b/components/ProjectItem/index.tsx index 096bb38..7f7514b 100644 --- a/components/ProjectItem/index.tsx +++ b/components/ProjectItem/index.tsx @@ -7,6 +7,7 @@ import { queryProjectbyId, } from '@/api/supabase/queries/query'; import { + InProgressIcon, OperationalIcon, SmallEnergyStorageIcon, SmallGeothermalIcon, @@ -17,7 +18,7 @@ import { SmallSizeIcon, SmallSolarPowerIcon, } from '@/assets/Icons/icons'; -import { Heading2, TagText1, TagText2 } from '@/styles/texts'; +import { Heading2, TagText2 } from '@/styles/texts'; import { Project } from '@/types/schema'; import ProjectModal from '../ProjectModal'; import { @@ -84,6 +85,18 @@ export default function ProjectItem({ project_id }: { project_id: number }) { return project_image || defaultImage || ''; }; + // Sets status label to "Operational" or "In Progress" + let projectStatus = project_status; + if (project_status !== 'Operational') { + projectStatus = 'In Progress'; + } + + // Sets status icon to OperationalIcon or InProgressIcon + let statusIcon = ; + if (project_status !== 'Operational') { + statusIcon = ; + } + const projectImageAlt = project_image ? `${project_name} project image` : defaultImage @@ -95,7 +108,7 @@ export default function ProjectItem({ project_id }: { project_id: number }) { case 'Land-Based Wind': projectTypeIcon = ; break; - case 'Solar': + case 'Solar PV': projectTypeIcon = ; break; case 'Hydroelectric': @@ -136,8 +149,8 @@ export default function ProjectItem({ project_id }: { project_id: number }) { {project_name?.toUpperCase()} - - {project_status} + {statusIcon} + {projectStatus} diff --git a/styles/colors.ts b/styles/colors.ts index 5b0b6e0..c6ed1f9 100644 --- a/styles/colors.ts +++ b/styles/colors.ts @@ -1,5 +1,6 @@ const COLORS = { navy: '#2E3A59', + navy75: '#626C83', electricBlue: '#4974E0', lightBlue: '#92ACED', green: '#0E7B30', diff --git a/styles/texts.ts b/styles/texts.ts index 1d532aa..97646f1 100644 --- a/styles/texts.ts +++ b/styles/texts.ts @@ -112,7 +112,7 @@ export const TagText1 = styled.p` export const TagText2 = styled.p` ${TextStylesCoinbaseText} - color: ${COLORS.navy}; + color: ${COLORS.navy75}; font-size: 0.625rem; font-style: normal; font-weight: 300;