💄 📱 Details done.

results-summary-component/index.html

@@ -37,25 +37,37 @@
   <div class="Results__section ResultsDetailed">
     <div class="ResultsCard__title--detailed">Summary</div>
 
-    <div class="ResultsDetailed__category CategoryScore">
+    <div class="ResultsDetailed__category CategoryScore--reaction">
+      <img
+        alt="lightning bolt icon"
+        class="CategoryScore__icon"
+        src="./assets/images/icon-reaction.svg"
+      >
       <span class="CategoryScore__title">Reaction</span>
       <span class="CategoryScore__score">80</span>
       <span class="CategoryScore__max">/ 100</span>
     </div>
 
-    <div class="ResultsDetailed__category CategoryScore">
+    <div class="ResultsDetailed__category CategoryScore--memory">
+      <img alt="brain icon" class="CategoryScore__icon" src="./assets/images/icon-memory.svg">
       <span class="CategoryScore__title">Memory</span>
       <span class="CategoryScore__score">92</span>
       <span class="CategoryScore__max">/ 100</span>
     </div>
 
-    <div class="ResultsDetailed__category CategoryScore">
+    <div class="ResultsDetailed__category CategoryScore--verbal">
+      <img
+        alt="speech bubble icon"
+        class="CategoryScore__icon"
+        src="./assets/images/icon-verbal.svg"
+      >
       <span class="CategoryScore__title">Verbal</span>
       <span class="CategoryScore__score">61</span>
       <span class="CategoryScore__max">/ 100</span>
     </div>
 
-    <div class="ResultsDetailed__category CategoryScore">
+    <div class="ResultsDetailed__category CategoryScore--visual">
+      <img alt="eye icon" class="CategoryScore__icon" src="./assets/images/icon-visual.svg">
       <span class="CategoryScore__title">Visual</span>
       <span class="CategoryScore__score">72</span>
       <span class="CategoryScore__max">/ 100</span>

results-summary-component/package-lock.json

@@ -14,6 +14,7 @@
         "postcss-extend-rule": "^4.0.0",
         "postcss-include-media": "^1.1.1",
         "postcss-nested": "^6.0.1",
+        "postcss-nested-ancestors": "^3.0.0",
         "vite": "^4.3.2"
       }
     },
@@ -434,6 +435,18 @@
         "@esbuild/win32-x64": "0.17.19"
       }
     },
+    "node_modules/escape-string-regexp": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
+      "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==",
+      "dev": true,
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/fsevents": {
       "version": "2.3.2",
       "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
@@ -577,6 +590,28 @@
         "postcss": "^8.2.14"
       }
     },
+    "node_modules/postcss-nested-ancestors": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-nested-ancestors/-/postcss-nested-ancestors-3.0.0.tgz",
+      "integrity": "sha512-6U/LLSSaEDWIaBfi7/1PZuRkGXXllndiit2BTFu6u5i3QxAzBjxMKbPDyLCg/DtzhON0rKnfvGQ+UEd7se2Pnw==",
+      "dev": true,
+      "dependencies": {
+        "escape-string-regexp": "^4.0.0",
+        "postcss-resolve-nested-selector": "^0.1.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "peerDependencies": {
+        "postcss": "^8.0.0"
+      }
+    },
+    "node_modules/postcss-resolve-nested-selector": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/postcss-resolve-nested-selector/-/postcss-resolve-nested-selector-0.1.1.tgz",
+      "integrity": "sha512-HvExULSwLqHLgUy1rl3ANIqCsvMS0WHss2UOsXhXnQaZ9VCc2oBvIpXrl00IUFT5ZDITME0o6oiXeiHr2SAIfw==",
+      "dev": true
+    },
     "node_modules/postcss-selector-parser": {
       "version": "6.0.13",
       "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.13.tgz",

results-summary-component/package.json

@@ -11,6 +11,7 @@
   "postcss": {
     "plugins": {
       "postcss-extend-rule": {},
+      "postcss-nested-ancestors": {},
       "postcss-nested": {},
       "postcss-include-media": {
         "phone": "375px",
@@ -22,6 +23,7 @@
     "postcss-extend-rule": "^4.0.0",
     "postcss-include-media": "^1.1.1",
     "postcss-nested": "^6.0.1",
+    "postcss-nested-ancestors": "^3.0.0",
     "vite": "^4.3.2"
   },
   "dependencies": {

results-summary-component/style.css

@@ -8,9 +8,13 @@
 
 :root {
     --c-red: hsl(0, 100%, 67%);
+    --c-red-t: hsl(0, 100%, 67%, 0.1);
     --c-yellow: hsl(39, 100%, 56%);
+    --c-yellow-t: hsl(39, 100%, 56%, 0.1);
     --c-green: hsl(166, 100%, 37%);
+    --c-green-t: hsl(166, 100%, 37%, 0.1);
     --c-blue: hsl(234, 85%, 45%);
+    --c-blue-t: hsl(234, 85%, 45%, 0.1);
 
     --c-bg-main-start: hsl(252, 100%, 67%);
     --c-bg-main-end: hsl(241, 81%, 54%);
@@ -23,6 +27,7 @@
     --c-n-pale-blue: hsl(221, 100%, 96%);
     --c-n-lavender: hsl(241, 100%, 89%);
     --c-n-gray-blue: hsl(224, 30%, 27%);
+    --c-n-gray-blue-t: hsl(224, 30%, 27%, 0.5);
 
     --f-size: 16px;
     --f-family: 'Hanken Grotesk', serif;
@@ -41,6 +46,7 @@ body {
 
     &__title {
         font-size: calc(var(--f-size) + 2px);
+        font-weight: var(--f-bold);
 
         &--summary {
             @extend .ResultsCard__title;
@@ -50,6 +56,7 @@ body {
 
         &--detailed {
             @extend .ResultsCard__title;
+            margin-bottom: 1.5rem;
         }
     }
 }
@@ -89,3 +96,74 @@ body {
         }
     }
 }
+
+.ResultsDetailed {
+    padding: 1.5rem 2rem;
+    color: var(--c-n-gray-blue);
+
+    &__category {
+        width: 100%;
+        margin: 1.3rem 0;
+    }
+}
+
+.CategoryScore {
+    display: flex;
+    padding: 1.25rem 1rem;
+    border-radius: 10px;
+
+    &__icon {
+        margin-right: .75rem;
+    }
+
+    &__score {
+        margin-right: .5rem;
+        margin-left: auto;
+        font-weight: var(--f-bold);
+        color: var(--c-n-gray-blue);
+    }
+
+    &__max {
+        font-weight: var(--f-bold);
+        color: var(--c-n-gray-blue-t);
+    }
+
+    &--reaction {
+        @extend .CategoryScore;
+        color: var(--c-red);
+        background-color: var(--c-red-t);
+    }
+
+    &--memory {
+        @extend .CategoryScore;
+        color: var(--c-yellow);
+        background-color: var(--c-yellow-t);
+    }
+
+    &--verbal {
+        @extend .CategoryScore;
+        color: var(--c-green);
+        background-color: var(--c-green-t);
+    }
+
+    &--visual {
+        @extend .CategoryScore;
+        color: var(--c-blue);
+        background-color: var(--c-blue-t);
+    }
+}
+
+.Button {
+    width: 100%;
+    padding: 1rem;
+    font-size: calc(var(--f-size) + 2px);
+    font-weight: var(--f-bold);
+    color: var(--c-n-white);
+    background-color: var(--c-n-gray-blue);
+    border: none;
+    border-radius: 30px;
+
+    &:hover {
+        background-image: linear-gradient(to bottom, var(--c-bg-main-start), var(--c-bg-main-end));
+    }
+}