Improve CSS, read properties from JSON

Start work on progress bars

src/App.css

@@ -18,5 +18,17 @@
 
 #root > div {
     flex: 1 1 0;
-    padding: 2rem;
+    padding: 1rem 2rem;
+}
+
+button {
+    font-family: inherit;
+    font-size: inherit;
+    font-weight: inherit;
+}
+
+h1 {
+    font-size: 1.3rem;
+    font-weight: 700;
+    margin-block: 1rem;
 }

src/App.tsx

@@ -1,12 +1,32 @@
 import "./App.css";
 import ScoreCard from "./components/ScoreCard.tsx";
 import SummaryCard from "./components/SummaryCard.tsx";
+import data from "./assets/data.json";
+
+export type DataEntry = {
+    category: string;
+    score: number;
+    icon: string;
+};
+
+export type ScoreCardProps = {
+    score: number;
+    message: string;
+    description: string;
+};
+
+const overviewData: ScoreCardProps = {
+    score: 76,
+    message: "Great",
+    description:
+        "You scored higher than 65% of people who have taken these tests.",
+};
 
 export default function App() {
     return (
         <>
-            <ScoreCard />
-            <SummaryCard />
+            <ScoreCard {...overviewData} />
+            <SummaryCard {...data} />
         </>
     );
 }

src/components/ScoreCard.tsx

@@ -1,5 +1,7 @@
 import styled from "styled-components";
 import { gradient, neutral } from "./colors.json";
+import changeAlpha from "./alpha";
+import { ScoreCardProps } from "../App";
 
 const StyledDiv = styled.div`
     color: ${neutral.white};
@@ -18,45 +20,72 @@ const StyledDiv = styled.div`
         flex: 1 1 200px;
     }
 
-    .circle {
-        width: 50%;
-        aspect-ratio: 1/1;
-        border-radius: 100%;
-        background: linear-gradient(
-            0deg,
-            ${gradient["persian-blue"]},
-            ${gradient["violet-blue"]}
-        );
-        display: grid;
-        place-items: center;
-        @media screen and (max-width: 768px) {
-            width: 200px;
-        }
+    h1 {
+        color: ${changeAlpha(neutral["white"], 75)};
     }
+
     span {
         display: block;
         margin: 0.5rem;
     }
+
+    #result-title {
+        font-size: 2rem;
+        font-weight: 700;
+    }
+    #result-description {
+        color: ${changeAlpha(neutral["white"], 75)};
+        width: 75%;
+        margin-block-end: 1.5rem;
+    }
 `;
 
-export default function ScoreCard() {
+export default function ScoreCard(props: ScoreCardProps) {
     return (
         <StyledDiv>
-            <span>Your result</span>
-            <Score />
-            <span>Great</span>
-            <span>
-                Scored higher than 65% of people who have taken these tests.
-            </span>
+            <h1>Your Result</h1>
+            <Score score={props.score} />
+            <span id="result-title">{props.message}</span>
+            <span id="result-description">{props.description}</span>
         </StyledDiv>
     );
 }
 
-function Score() {
+const Circle = styled.div`
+    width: 66%;
+    aspect-ratio: 1/1;
+    border-radius: 100%;
+    background: linear-gradient(
+        0deg,
+        ${gradient["persian-blue"]},
+        ${gradient["violet-blue"]}
+    );
+    margin: 1rem;
+    position: relative;
+    display: grid;
+    place-items: center;
+    @media screen and (max-width: 768px) {
+        width: 200px;
+    }
+
+    #result-score {
+        font-size: 4rem;
+        font-weight: 800;
+        position: absolute;
+        transform: translateY(-6.66%);
+    }
+    #result-percent {
+        color: ${changeAlpha(neutral["white"], 50)};
+        position: absolute;
+        bottom: 15%;
+    }
+`;
+
+function Score({ score }: { score: number }) {
     return (
-        <div className="circle">
-            <span>76</span>
-            <span>of 100</span>
-        </div>
+        <Circle>
+            <span id="result-score">{score}</span>
+            <span id="result-percent">of 100</span>
+        </Circle>
     );
 }

src/components/SummaryCard.tsx

@@ -1,15 +1,15 @@
 import styled from "styled-components";
-import { primary, gradient, neutral } from "./colors.json";
-
-console.log(primary);
+import Progressbar from "./SummaryProgessbars";
+import { gradient, neutral } from "./colors.json";
+import { DataEntry } from "../App";
 
 const StyledDiv = styled.div`
     color: ${neutral["dark-gray-blue"]};
     display: flex;
     flex-direction: column;
 `;
 
-export default function SummaryCard() {
+export default function SummaryCard({ data }: any) {
     return (
         <StyledDiv>
             <h1>Summary</h1>

src/components/SummaryProgessbars.tsx

@@ -0,0 +1,42 @@
+import styled from "styled-components";
+import { primary, neutral } from "./colors.json";
+import changeAlpha from "./alpha";
+
+type ProgressbarProps = {
+    icon: string;
+    category: string;
+    score: number;
+};
+
+const Graph = styled.div<{ $color: string }>`
+    display: flex;
+    padding: 0.5rem;
+    color: ${(props) => props.$color};
+    background-color: ${(props) => changeAlpha(props.$color, 10)};
+`;
+
+export default function Progressbar({
+    icon,
+    category,
+    score,
+}: ProgressbarProps) {
+    const colorsArr = Object.keys(primary);
+
+    const barColor = (i: number) => {
+        while (i >= colorsArr.length) {
+            i -= colorsArr.length;
+        }
+        return colorsArr[i % colorsArr.length];
+    };
+
+    return (
+        <Graph $color={barColor(key)}>
+            <img src={icon} aria-hidden alt="icon" />
+            <span className="title">{category}</span>
+            <div>
+                <span className="score">{score}</span>
+                <span className="percent">100</span>
+            </div>
+        </Graph>
+    );
+}

src/components/alpha.ts

@@ -0,0 +1,12 @@
+/**
+ * Gets the hsla value and changes the last property
+ *
+ * I am aware this is a hilariously overengineered solution,
+ * and I'm proud of it.
+ */
+export default function changeAlpha(color: string, alphaVal: number): string {
+    const params: string[] = color.split(", ");
+    let transparency: number = alphaVal / 100;
+    params[3] = transparency.toString() + ")";
+    return params.join(", ");
+}

src/components/colors.json

@@ -1,20 +1,20 @@
 {
   "primary": {
-    "light-red": "hsl(0, 100%, 67%)",
-    "orange-yellow": "hsl(39, 100%, 56%)",
-    "green-teal": "hsl(166, 100%, 37%)",
-    "cobalt-blue": "hsl(234, 85%, 45%)"
+    "light-red": "hsla(0, 100%, 67%, 1)",
+    "orange-yellow": "hsla(39, 100%, 56%, 1)",
+    "green-teal": "hsla(166, 100%, 37%, 1)",
+    "cobalt-blue": "hsla(234, 85%, 45%, 1)"
   },
   "gradient": {
-    "light-slate-blue": "hsl(252, 100%, 67%)",
-    "light-royal-blue": "hsl(241, 81%, 54%)",
+    "light-slate-blue": "hsla(252, 100%, 67%, 1)",
+    "light-royal-blue": "hsla(241, 81%, 54%, 1)",
     "violet-blue": "hsla(256, 72%, 46%, 1)",
     "persian-blue": "hsla(241, 72%, 46%, 0)"
   },
   "neutral": {
-    "white": "hsl(0, 0%, 100%)",
-    "pale-blue": "hsl(221, 100%, 96%)",
-    "light-lavender": "hsl(241, 100%, 89%)",
-    "dark-gray-blue": "hsl(224, 30%, 27%)"
+    "white": "hsla(0, 0%, 100%, 1)",
+    "pale-blue": "hsla(221, 100%, 96%, 1)",
+    "light-lavender": "hsla(241, 100%, 89%, 1)",
+    "dark-gray-blue": "hsla(224, 30%, 27%, 1)"
   }
 }

src/index.css

@@ -26,9 +26,3 @@ body {
     min-width: 320px;
     min-height: 100dvh;
 }
-
-button {
-    font-family: inherit;
-    font-size: inherit;
-    font-weight: inherit;
-}