From b869d1b42c4017b4200588f9f845418221f3250a Mon Sep 17 00:00:00 2001
From: Marlon Baeten <marlon@tweedegolf.com>
Date: Thu, 26 Sep 2024 09:32:57 +0200
Subject: [PATCH] Tweak design + fix typo's

---
 src/App.tsx        |  5 +++--
 src/SkillTable.tsx |  6 +++---
 src/Skills.tsx     |  9 +++------
 src/data.json      | 32 ++++++++++++++++----------------
 src/index.css      | 38 +++++++++++++++++++++++++++++++-------
 5 files changed, 56 insertions(+), 34 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index c19ef89..42414a5 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -55,8 +55,9 @@ export default function App() {
       </div>
 
       <p className="actions">
+        Ook je vaardigheden in kaart brengen? Klik: <br />
         <button onClick={() => navigate(true)}>
-          Vaardighedenkompas
+          Vaardighedencheck
         </button>
       </p>
 
@@ -88,7 +89,7 @@ export default function App() {
             <svg>
               <use xlinkHref="#icon-printer" />
             </svg>
-            Printen
+            Printen of opslaan PDF
           </button>
         </p>
       </div>
diff --git a/src/SkillTable.tsx b/src/SkillTable.tsx
index 7b6f974..318814f 100644
--- a/src/SkillTable.tsx
+++ b/src/SkillTable.tsx
@@ -35,9 +35,9 @@ export default function SkillTable({ state, select, mark }: SkillTableProps) {
             <tr>
               <th
                 colSpan={6}
-                className="skillCategory"
+                className={`theme ${category.name.toLowerCase()}`}
               >
-                Lijst vaardigheden: {category.name}
+                <h3>Lijst vaardigheden: {category.name}</h3>
               </th>
             </tr>
             {category.groups.map((group) => (
@@ -47,7 +47,7 @@ export default function SkillTable({ state, select, mark }: SkillTableProps) {
                   colSpan={6}>{group.name}</th>
                 </tr>
                 {group.items.map((item, index) => (
-                    <tr className="selectable" key={item.name}>
+                    <tr className={`selectable ${item.basic ? 'basic' : ''}`} key={item.name}>
                       <th scope="row">{index + 1}</th>
                       <td className="skill-grade">
                         <label data-tooltip={item.basic === null ? '*' : (item.basic ? 'Basisvaardigheid' : 'Facultatieve vaardigheid')}>
diff --git a/src/Skills.tsx b/src/Skills.tsx
index ec0d243..4e937e0 100644
--- a/src/Skills.tsx
+++ b/src/Skills.tsx
@@ -17,7 +17,7 @@ export default function Skills({ state, selectSkill, markSkill, navigate, noteSk
     <>
       <header>
         <div>
-          <h1>Vaardighedenkompas</h1>
+          <h1>Vaardighedencheck</h1>
           <p>
             Overzicht vaardigheden per ICPC-categorie
           </p>
@@ -38,10 +38,7 @@ export default function Skills({ state, selectSkill, markSkill, navigate, noteSk
           <code>F</code> = Facultatieve vaardigheid
         </p>
         <p>
-          <code>*</code> = Ten tijde van de inventarisatie om het huidige overzicht in te delen,
-          ontbrak het onderdeel 'palliatieve en terminale zorg' in dit overzicht en is dus
-          niet meegenomen in de indeling. In 2024 vindt een herijking van deze lijst plaats,
-          dan zal het onderdeel 'palliatieve en terminale zorg' meegenomen worden. 
+          <code>*</code> = nog niet landelijke bepaald of deze vaardigheid tot de basis behoort
         </p>
       </div>
 
@@ -99,7 +96,7 @@ export default function Skills({ state, selectSkill, markSkill, navigate, noteSk
             <svg>
               <use xlinkHref="#icon-printer" />
             </svg>
-            Printen
+            Printen of opslaan PDF
           </button>
         </p>
       </div>
diff --git a/src/data.json b/src/data.json
index 0edf2c3..0842829 100644
--- a/src/data.json
+++ b/src/data.json
@@ -1078,7 +1078,7 @@
           "name": "Ogen",
           "items": [
             {
-              "name": "inspectie (conjuntiva, sclerae, cornea, diepte/helderheid VOK, iris, pupil/pupilreacties, oogleden, adnexen, traansysteem)",
+              "name": "inspectie (conjunctiva, sclerae, cornea, diepte/helderheid VOK, iris, pupil/pupilreacties, oogleden, adnexen, traansysteem)",
               "basic": true
             },
             {
@@ -1147,7 +1147,7 @@
               "basic": true
             },
             {
-              "name": "beoordeling gehoorgang en trommelvlies(otoscopie)",
+              "name": "beoordeling gehoorgang en trommelvlies (otoscopie)",
               "basic": true
             },
             {
@@ -1181,7 +1181,7 @@
           "name": "Mammae",
           "items": [
             {
-              "name": "inspectie. Palpatie (incl. regionale lymfklieren) ",
+              "name": "inspectie, palpatie (incl. regionale lymfklieren) ",
               "basic": true
             }
           ]
@@ -1207,7 +1207,7 @@
           "name": "Bloedsomloop",
           "items": [
             {
-              "name": "hart(palpatie ictus, percussie hartgrenzen, auscultatie harttonen/souffles)",
+              "name": "hart (palpatie ictus, percussie hartgrenzen, auscultatie harttonen/souffles)",
               "basic": true
             },
             {
@@ -1244,7 +1244,7 @@
               "basic": true
             },
             {
-              "name": "meningeale prikkeling, HZ, coördinatie",
+              "name": "meningeale prikkeling, hersenzenuwen, coördinatie",
               "basic": true
             },
             {
@@ -1281,7 +1281,7 @@
           "name": "Abdomen",
           "items": [
             {
-              "name": "inspectie, auscultatie(darmgeruis, souffles), percussie, palpatie (milt, lever, lymfklieren)",
+              "name": "inspectie, auscultatie (darmgeruis, souffles), percussie, palpatie (milt, lever, lymfklieren)",
               "basic": true
             },
             {
@@ -1313,7 +1313,7 @@
               "basic": true
             },
             {
-              "name": "zwangerschap: uitwendig onderzoek. Uterus (fundushoogte, contracties/tonus, cortonen)",
+              "name": "zwangerschap: uitwendig onderzoek uterus (fundushoogte, contracties/tonus, cortonen)",
               "basic": false
             },
             {
@@ -1391,7 +1391,7 @@
               "basic": true
             },
             {
-              "name": "KOH preparaat huid, haren, nagels",
+              "name": "KOH-preparaat huid, haren, nagels",
               "basic": false
             },
             {
@@ -1399,7 +1399,7 @@
               "basic": true
             },
             {
-              "name": "shave biopt",
+              "name": "shavebiopt",
               "basic": true
             },
             {
@@ -1475,7 +1475,7 @@
           "name": "Ogen",
           "items": [
             {
-              "name": "EHBO oogletsel (spoelen, medicatie,verband)",
+              "name": "EHBO oogletsel (spoelen, medicatie, verband)",
               "basic": true
             },
             {
@@ -1542,7 +1542,7 @@
           "name": "Bloedsomloop",
           "items": [
             {
-              "name": "Handelingen bij tachycardie",
+              "name": "handelingen bij tachycardie",
               "basic": true
             }
           ]
@@ -1555,7 +1555,7 @@
               "basic": true
             },
             {
-              "name": "toedienen/instructie medicatie via inhalatie (voorzetkamer.verneveling)",
+              "name": "toedienen/instructie medicatie via inhalatie (voorzetkamer, verneveling)",
               "basic": true
             },
             {
@@ -1580,7 +1580,7 @@
           "name": "Abdomen",
           "items": [
             {
-              "name": "Incisie perianaal abces",
+              "name": "incisie perianaal abces",
               "basic": true
             },
             {
@@ -1645,7 +1645,7 @@
           "name": "Bewegingsapparaat",
           "items": [
             {
-              "name": "aanleggen vingerspalk (bij Malletvinger)",
+              "name": "aanleggen vingerspalk (bij malletvinger)",
               "basic": true
             },
             {
@@ -1665,7 +1665,7 @@
               "basic": true
             },
             {
-              "name": "Injectie schouder (gewricht)",
+              "name": "injectie schouder (gewricht)",
               "basic": true
             },
             {
@@ -1733,7 +1733,7 @@
               "basic": false
             },
             {
-              "name": "Inbrengen/ verwijderen subcut. anticonceptie",
+              "name": "inbrengen/verwijderen subcutane anticonceptie",
               "basic": false
             },
             {
diff --git a/src/index.css b/src/index.css
index 5978c13..68f3bdf 100644
--- a/src/index.css
+++ b/src/index.css
@@ -156,7 +156,7 @@ header h1 {
 .legenda {
   display: inline-block;
   padding: 1rem;
-  margin-bottom: 0.5rem;
+  margin-bottom: 1.5rem;
   border: 1px solid #eaeaea;
   background-color: #fafafa;
   max-width: 40rem;
@@ -297,21 +297,45 @@ table.form tr.selectable:hover {
   background: #fafafa;
 }
 
-table.form.skills .skillCategory {
-  font-size: 2rem;
-  font-weight: bold;
-  padding-left: 0;
+table.form.skills tr.selectable {
+  color: #46506d;
+} 
+
+table.form.skills tr.selectable.basic {
+  color: #0c3197;
+}
+
+table.form.skills .theme {
   border: none;
 }
 
+table.form.skills .theme  h3 {
+  text-shadow: none;
+}
 
 table.form.skills .skillGroup {
-  background: #DAECF3;
-  color: #3eacd6;
+  background: #beedff;
+  color: #2284aa;
   font-weight: bold;
   border: none;
 }
 
+table.form.skills .theme.diagnostiek {
+  background-color: #9ad48c;
+}
+
+table.form.skills .theme.diagnostiek h3 {
+  color: #405a3a;
+}
+
+table.form.skills .theme.therapie {
+  background-color: #f3e074;
+}
+
+table.form.skills .theme.therapie h3 {
+  color: #74682f;
+}
+
 @media screen and (max-width: 768px) {
   table.form thead th {
     padding: 0.25rem;