Made Dialog component for 'How we calc...' button

src/components/Results/EnergyScore/calcbutton.jsx

@@ -1,9 +1,87 @@
 import React, { useState } from 'react';
-import { Button } from '@mui/material';
-import { sparkles } from 'ionicons/icons';
+import { Button, Dialog, DialogTitle, DialogContent, Card, CardContent, Typography, Box, Grid } from '@mui/material';
 import { IonIcon } from '@ionic/react';
+import { star } from 'ionicons/icons';
 
-const CalcButton = () => {
+const ScoreBlock = ({ score }) => (
+  <Grid container direction="column" justifyContent="center" alignItems="center" style={{ height: '50vh' }}>
+    <Typography variant="h4" align="center">Your Home's Clean Energy Score:</Typography>
+    <Typography variant="h2" align="center">{score} out of 100</Typography>
+    <Typography variant="body1" align="center">Your score is based on the estimated CO2 emissions of your home.</Typography>
+    <Box mt={3}>
+      <Typography variant="body1" align="center">
+        <span style={{ color: 'darkred' }}>0</span> = the highest possible emissions
+      </Typography>
+      <Typography variant="body1" align="center">
+        <span style={{ color: 'gold' }}>50</span> = an average home
+      </Typography>
+      <Typography variant="body1" align="center">
+        <span style={{ color: 'teal' }}>100</span> = a zero-emissions home
+      </Typography>
+    </Box>
+  </Grid>
+);
+
+const ScoreDetailsCard = (props) => {
+  const {
+    zipCode,
+    state,
+    solarIndex,
+    heatingDegreeDays,
+    coolingDegreeDays,
+    groundWaterTemp,
+    homeVolume,
+    airChangesPerHour,
+    wallRValue,
+    atticRValue,
+    glazingPercentage,
+    heatLossBTUs,
+    solarHeatGainBTUs
+  } = props.props;
+  return (
+    <Card>
+      <CardContent>
+        <Typography variant="h6" gutterBottom>
+          The Science Behind Your Score
+        </Typography>
+        <Typography paragraph>
+          Many things go into estimating the CO₂ emissions of a home - the size of your home, the outside temperature through the year, the materials and insulation in your home, and much more!
+        </Typography>
+        <Typography paragraph>
+          Here's a look at what we estimated some of those factors to be based on your answers.
+        </Typography>
+
+        <Box my={2}>
+          <Typography variant="subtitle1">What we estimate:</Typography>
+
+          <Grid container>
+            <Grid item xs={6}>
+              <Typography variant="subtitle2">Your Location</Typography>
+              <Typography>- Zip Code: {zipCode}</Typography>
+              <Typography>- State: {state}</Typography>
+              <Typography>- Average Solar Index: {solarIndex}</Typography>
+              <Typography>- Annual Heating Degree Days: {heatingDegreeDays}</Typography>
+              <Typography>- Annual Cooling Degree Days: {coolingDegreeDays}</Typography>
+              <Typography>- Average Ground Water Temp: {groundWaterTemp}° F</Typography>
+            </Grid>
+            <Grid item xs={6}>
+              <Typography variant="subtitle2">Your Home</Typography>
+              <Typography>- Home Volume: {homeVolume} ft³</Typography>
+              <Typography>- Air Changes per Hour (ACH): {airChangesPerHour}</Typography>
+              <Typography>- Insulated Wall R Value: {wallRValue}</Typography>
+              <Typography>- Insulated Attic/Roof R Value: {atticRValue}</Typography>
+              <Typography>- Glazing Percentage: {glazingPercentage}%</Typography>
+              <Typography>- Annual BTUs of Heat Loss: {heatLossBTUs} million</Typography>
+              <Typography>- Annual BTUs of Solar Heat Gain: {solarHeatGainBTUs} million</Typography>
+            </Grid>
+          </Grid>
+        </Box>
+      </CardContent>
+    </Card>
+  );
+};
+
+const CalcButton = (props) => {
   const [open, setOpen] = useState(false);
 
   const handleClickOpen = () => {
@@ -17,9 +95,18 @@ const CalcButton = () => {
   return (
     <div>
       <Button onClick={handleClickOpen} style={{ width: '100%' }}>
-        <IonIcon icon={sparkles} style={{ fontSize: '30px', margin: '10px' }} />
+        <IonIcon icon={star} style={{ fontSize: '30px', margin: '10px' }} />
         How We Calculate this
       </Button>
+      <Dialog open={open} onClose={handleClose}>
+        <DialogTitle>Calculation Guide:</DialogTitle>
+        <DialogContent>
+          <ScoreBlock score={props.score} />
+          <ScoreDetailsCard
+            props={props.details}
+          />
+        </DialogContent>
+      </Dialog>
     </div>
   );
 };

src/components/Results/EnergyScore/energyscore.jsx

@@ -37,7 +37,10 @@ const EnergyScore = (props) => {
           </div>
           <Grid container justifyContent="space-between">
             <Grid item xs={8}>
-              <CalcButton />
+              <CalcButton
+                score={props.score}
+                details={props.details}
+              />
               <CompareButton 
                 yourHomeValue={props.yourHomeValue}
                 avgHomeState={props.avgHomeState}

src/components/Results/IndividualScore/individualscore.jsx

@@ -106,16 +106,18 @@ const IndividualScore = (props) => {
         </DialogTitle>
         <DialogContent>
           <hr style={{ color: 'lightgray' }} />
-          <Typography variant="h2"><IonIcon icon={documentText} style={{ marginRight: '10px' }}/> System Report Card</Typography>
+          <Typography variant="h2" marginTop={2}>
+            <IonIcon icon={documentText} style={{ marginRight: '10px' }}/> System Report Card
+          </Typography>
           <div style={{ display: 'flex', flexWrap: 'wrap' }}>
             {props.content.map((item, index) => (
               <Typography key={index} variant="body1" style={{ marginRight: '10px' }}>
                 <IonIcon icon={item.icon}/> {item.title}
               </Typography>
             ))}
           </div>
-          <Typography variant="h2" style={{margin: 10}}>
-            <IonIcon icon={bulb}/> Recommendations
+          <Typography variant="h2" marginTop={2}>
+            <IonIcon icon={bulb} style={{ marginRight: '10px' }}/> Recommendations
           </Typography>
           <TableContainer component={Paper}>
             <Table aria-label="Recommend table">

src/pages/Results.jsx

@@ -30,9 +30,11 @@ const Results = (props) => {
   return (
     <div className="results">
       <Header />
-      <Grid container spacing={4}>
+      <Grid container spacing={4} sx={{ width: '95vw', margin: 'auto' }}>
         <Grid item xs={12} md={4.5}>
           <EnergyScore 
+            score={score}
+            co2Emission={co2Emission} 
             yourHomeValue={co2Emission}
             avgHomeState={16000}
             avgHomeUS={avgHomeState}

src/styles/page.css

@@ -18,4 +18,4 @@
   color: red;
   font-size: 1.5rem;
   margin-top: 1rem;
-}
+}