carbon capture modal

.github/workflows/chromatic.yml

@@ -10,6 +10,7 @@ on:
       - feature/storybook-update
       - develop
       - feature/redesign-explore-btn
+      - feature/carbon_capture_modal
 # List of jobs
 jobs:
   chromatic-deployment:

public/static/locales/en/projectDetails.json

@@ -1,3 +1,14 @@
 {
-    "satelliteAnalysis": "Satellite Analysis"
-}
+  "satelliteAnalysis": "Satellite Analysis",
+  "beforeIntervention": "Before intervention",
+  "co₂Quantity": "~{{quantity}}t",
+  "before": "before {{date}}",
+  "byProject": "By Project",
+  "byProjectCO₂Quantity": "v{{quantity}}t",
+  "since": "since {{date}}",
+  "sitePotential": "Site Potential",
+  "seeMore": "See More",
+  "seeLess": "See Less",
+  "totalCo2Captured": "Total CO₂ Captured",
+  "tons": "tons"
+}

src/temp/CarbonCapture/BarGraph.tsx

@@ -0,0 +1,102 @@
+import style from './CarbonCapture.module.scss';
+import { useTranslation } from 'next-i18next';
+import { getFormattedNumber } from '../../utils/getFormattedNumber';
+
+interface CO2BarGraphProps {
+  beforeIntervation: number;
+  byProject: number;
+  sitePotential: number;
+}
+
+export const CO2BarGraph = ({
+  beforeIntervation,
+  byProject,
+  sitePotential,
+}: CO2BarGraphProps) => {
+  const calculatePercentage = (value: number, sitePotential: number) => {
+    return (value / sitePotential) * 100;
+  };
+
+  const beforeIntervationPercentage = calculatePercentage(
+    beforeIntervation,
+    sitePotential
+  );
+  const byProjectPercentage = calculatePercentage(byProject, sitePotential);
+
+  return (
+    <div className={style.carbonCaptureIndicator}>
+      <div
+        style={{
+          width: `${beforeIntervationPercentage}%`,
+        }}
+        className={style.beforeIntervationIndicator}
+      />
+
+      <div
+        style={{
+          width: `${byProjectPercentage}%`,
+        }}
+        className={style.byProjectIndicator}
+      />
+
+      <div
+        style={{
+          width: `${
+            100 - (beforeIntervationPercentage + byProjectPercentage)
+          }%`,
+        }}
+        className={style.projectPotential}
+      />
+    </div>
+  );
+};
+
+export const CO2CaptureData = ({
+  beforeIntervation,
+  byProject,
+  sitePotential,
+}: CO2BarGraphProps) => {
+  const { t, i18n } = useTranslation(['projectDetails']);
+  return (
+    <div className={style.carbonCaptureDataContainerMain}>
+      <div>
+        <p className={style.beforeIntervationData}>
+          {t('projectDetails:co₂Quantity', {
+            quantity: getFormattedNumber(i18n.language, beforeIntervation),
+          })}
+        </p>
+        <p className={style.beforeIntervationLabel}>
+          {t('projectDetails:beforeIntervention')}
+        </p>
+        <p className={style.beforeIntervationDate}>
+          {t('projectDetails:before', {
+            date: 2018,
+          })}
+        </p>
+      </div>
+      <div>
+        <p className={style.byProjectData}>
+          {t('projectDetails:byProjectCO₂Quantity', {
+            quantity: getFormattedNumber(i18n.language, byProject),
+          })}
+        </p>
+        <p className={style.byProjectLabel}>{t('projectDetails:byProject')}</p>
+        <p className={style.byProjectDate}>
+          {t('projectDetails:since', {
+            date: 2018,
+          })}
+        </p>
+      </div>
+      <div className={style.sitePotentialDataContainer}>
+        <p className={style.sitePotentialData}>
+          {t('projectDetails:co₂Quantity', {
+            quantity: getFormattedNumber(i18n.language, sitePotential),
+          })}
+        </p>
+        <p className={style.sitePotentialLabel}>
+          {t('projectDetails:sitePotential')}
+        </p>
+      </div>
+    </div>
+  );
+};

src/temp/CarbonCapture/CarbonCapture.module.scss

@@ -0,0 +1,180 @@
+@import '../../theme/theme';
+
+.carbonCaptureMainContainer {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.carbonCaptureInfoContainer {
+  display: flex;
+  height: 111px;
+  flex-direction: column;
+  gap: 12px;
+  padding-left: 15.5px;
+  padding-right: 15.5px;
+}
+
+.carbonCaptureLabelMainContainer {
+  font-size: $fontXXSmall;
+  display: flex;
+  justify-content: space-between;
+}
+
+.carbonCaptureLabelContainer {
+  display: flex;
+  align-items: center;
+  > .carbonCapture {
+    display: flex;
+    font-weight: 700;
+    gap: 2px;
+    p {
+      font-weight: 400;
+    }
+  }
+  .unit {
+    margin-left: 1px;
+  }
+}
+
+.carbonCaptureDetailContainer {
+  padding-left: 16px;
+  padding-right: 16px;
+  padding-top: 16px;
+  border: 1px solid rgba(111, 207, 151, 0.02);
+  background: linear-gradient(
+      0deg,
+      rgba(33, 150, 83, 0.1) 0%,
+      rgba(33, 150, 83, 0.1) 100%
+    ),
+    $light;
+
+  height: 70px;
+  border-radius: 12px;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.carbonCaptureIndicator {
+  max-width: 274px;
+  height: 11px;
+  display: flex;
+  border-radius: 3px;
+
+  .beforeIntervationIndicator {
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 122, 73, 1);
+    border-top-left-radius: 3px;
+    border-bottom-left-radius: 3px;
+  }
+  .byProjectIndicator {
+    width: 100%;
+    background: rgba(104, 176, 48, 1);
+    height: 100%;
+  }
+  .projectPotential {
+    width: 100%;
+    background: $light;
+    height: 100%;
+    border-top-right-radius: 3px;
+    border-bottom-right-radius: 3px;
+  }
+}
+
+.carbonCaptureDataContainerMain {
+  display: flex;
+  width: 100%;
+  justify-content: space-between;
+}
+.carbonCaptureDataContainer {
+  display: flex;
+  padding-left: 16px;
+  padding-top: 4px;
+  padding-right: 16px;
+}
+.beforeIntervationData {
+  color: $primaryColorNew;
+  font-size: $fontXXXSmallNew;
+  font-weight: 700;
+}
+.beforeIntervationLabel {
+  font-size: $fontXXXSmallNew;
+  font-weight: 400;
+}
+.beforeIntervationDate {
+  font-size: 6px;
+  color: $nonDonatableProjectBackgroundColor;
+}
+.byProjectData {
+  color: $primaryColor;
+  font-size: $fontXXXSmallNew;
+  font-weight: 700;
+}
+.byProjectLabel {
+  font-size: $fontXXXSmallNew;
+  font-weight: 400;
+}
+.byProjectDate {
+  font-size: 6px;
+  color: $nonDonatableProjectBackgroundColor;
+}
+.sitePotentialDataContainer {
+  display: flex;
+  align-items: flex-end;
+  flex-direction: column;
+  .sitePotentialData {
+    color: #333;
+    font-size: $fontXXXSmallNew;
+    font-weight: bold;
+  }
+  .sitePotentialLabel {
+    font-size: $fontXXXSmallNew;
+    font-weight: 400;
+  }
+}
+
+.carbonCaptureModal {
+  max-width: 338px;
+  border-radius: 16px;
+  overflow: hidden;
+  background-color: $light;
+}
+
+.infoIconContainer {
+  cursor: pointer;
+}
+
+.seeMoreButton {
+  background: linear-gradient(0deg, $primaryColorNew 0%, $primaryColorNew 100%),
+    $light;
+  width: 100%;
+  height: 27px;
+  margin-top: 24px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+}
+
+.seeMoreLabel {
+  font-size: $fontXXXSmallNew;
+  font-weight: 700;
+  color: $light;
+}
+
+.downArrow {
+  margin-left: 5px;
+  margin-bottom: 5px;
+}
+
+.horizontalLine {
+  position: relative;
+  top: -8px;
+}
+
+.carbonCaptureValue {
+  margin-left: 2px;
+  font-weight: 400;
+}