Finish up the desktop layout

Render list
Make it look closer to the source design

src/App.css

@@ -19,6 +19,10 @@
 #root > div {
     flex: 1 1 0;
     padding: 1rem 2rem;
+    width: 360px;
+    @media screen and (max-width: 768px) {
+        width: 100%;
+    }
 }
 
 button {
@@ -30,5 +34,6 @@ button {
 h1 {
     font-size: 1.3rem;
     font-weight: 700;
-    margin-block: 1rem;
+    margin-block-start: 1rem;
+    margin-block-end: 0.75rem;
 }

src/App.tsx

@@ -1,5 +1,5 @@
 import "./App.css";
-import ScoreCard from "./components/ScoreCard.tsx";
+import ResultCard from "./components/ResultCard.tsx";
 import SummaryCard from "./components/SummaryCard.tsx";
 import data from "./assets/data.json";
 
@@ -19,14 +19,14 @@ const overviewData: ScoreCardProps = {
     score: 76,
     message: "Great",
     description:
-        "You scored higher than 65% of people who have taken these tests.",
+        "You scored higher than 65% of the people who have taken these tests.",
 };
 
 export default function App() {
     return (
         <>
-            <ScoreCard {...overviewData} />
-            <SummaryCard {...data} />
+            <ResultCard {...overviewData} />
+            <SummaryCard items={...data} />
         </>
     );
 }

src/components/ScoreCard.tsx → src/components/ResultCard.tsx

@@ -30,12 +30,13 @@ const StyledDiv = styled.div`
     }
 
     #result-title {
-        font-size: 2rem;
+        font-size: 1.75rem;
         font-weight: 700;
     }
     #result-description {
         color: ${changeAlpha(neutral["white"], 75)};
-        width: 75%;
+        width: 80%;
+        max-width: 400px;
         margin-block-end: 1.5rem;
     }
 `;
@@ -52,7 +53,7 @@ export default function ScoreCard(props: ScoreCardProps) {
 }
 
 const Circle = styled.div`
-    width: 66%;
+    width: 200px;
     aspect-ratio: 1/1;
     border-radius: 100%;
     background: linear-gradient(

src/components/SummaryCard.tsx

@@ -9,10 +9,19 @@ const StyledDiv = styled.div`
     flex-direction: column;
 `;
 
-export default function SummaryCard({ data }: any) {
+interface Props {
+    items: DataEntry[];
+}
+
+export default function SummaryCard({ items }: Props) {
     return (
         <StyledDiv>
             <h1>Summary</h1>
+            <div className="bars">
+                {items.map((item, index) => (
+                    <Progressbar key={index} {...item} i={index} />
+                ))}
+            </div>
             <Button>Continue</Button>
         </StyledDiv>
     );
@@ -33,5 +42,5 @@ const Button = styled.button`
     border: transparent;
     border-radius: 2rem;
     padding: 1rem;
-    margin-block: 1rem;
+    margin-block: auto;
 `;

src/components/SummaryProgessbars.tsx

@@ -6,36 +6,68 @@ type ProgressbarProps = {
     icon: string;
     category: string;
     score: number;
+    i: number;
 };
 
 const Graph = styled.div<{ $color: string }>`
     display: flex;
-    padding: 0.5rem;
-    color: ${(props) => props.$color};
-    background-color: ${(props) => changeAlpha(props.$color, 10)};
+    grid-gap: 0.1rem;
+    padding: 0.75rem 1rem;
+    border-radius: 0.5rem;
+    margin-block: 1rem;
+    background-color: ${(props) => changeAlpha(props.$color, 5)};
+
+    > div {
+        display: flex;
+    }
+    .category {
+        flex-grow: 1;
+        color: ${(props) => props.$color};
+        grid-gap: 1rem;
+        img {
+            width: 1.2rem;
+        }
+    }
+    .score {
+        font-weight: 800;
+        color: ${changeAlpha(neutral["dark-gray-blue"], 50)};
+        span:first-of-type {
+            color: ${neutral["dark-gray-blue"]};
+        }
+        grid-gap: 0.3rem;
+    }
 `;
 
 export default function Progressbar({
     icon,
     category,
     score,
+    i,
 }: ProgressbarProps) {
-    const colorsArr = Object.keys(primary);
+    icon = icon.replace(".", "src");
 
-    const barColor = (i: number) => {
+    /**
+     * Retrieves the color from the colorsArr based on the given index i.
+     */
+    const getBarColor = (i: number): string => {
+        const colorsArr = Object.values(primary);
         while (i >= colorsArr.length) {
             i -= colorsArr.length;
         }
         return colorsArr[i % colorsArr.length];
     };
+    let color: string = getBarColor(i);
 
     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>
+        <Graph $color={color}>
+            <div className="category">
+                <img src={icon} aria-hidden alt="icon" />
+                <span>{category}</span>
+            </div>
+            <div className="score">
+                <span>{score}</span>
+                <span>/</span>
+                <span>100</span>
             </div>
         </Graph>
     );