Add voha logo

src/App.tsx

@@ -2,18 +2,30 @@ import Results from './Results';
 import Table from './Table';
 import usePersistence, { upload } from './usePersistence';
 import { copyLink, downloadFile, saveStateLocal } from './util';
+import voha from './voha.jpg';
 
 export default function App() {
   const { state, select, mark, note, setState } = usePersistence();
 
   return (
     <>
-      <h1>Ervaringskompas</h1>
+      <header>
+        <div>
+          <h1>Ervaringskompas</h1>
+          <p>
+            Als huisarts in opleiding is het de bedoeling om uiteindelijk op alle
+            huisartgeneeskundige thema’s ervaring en bekwaamheid op te bouwen.
+            Dit ervaringskompas is bedoeld als reflectie instrument om zelf in
+            kaart te brengen welke ervaring je -in de breedte en diepte van het
+            vak- hebt kunnen opdoen. Op basis daarvan kun je je leerproces in de
+            praktijk verder vorm en richting te geven.
+          </p>
+        </div>
+        <div>
+          <img src={voha} alt="Vervolgopleiding tot huisarts" />
+        </div>
+      </header>
 
-      <p>
-        Welke ervaring heb je opgedaan met deze beroepsactiviteit in de praktijk
-        (in een huisartsgeneekundige setting)?
-      </p>
       <div className="legenda">
         <h2>Legenda</h2>
         <ol>

src/Marked.tsx

@@ -22,6 +22,11 @@ export default function Marked({ state, mark }: MarkedProps) {
               onChange={() => mark(themeIndex, index, false)}
               aria-label="Verwijderen"
             />
+            <span className="tag">
+              <span style={{ background: theme.color }}></span>
+              {theme.name}:
+            </span>
+            &nbsp;
             {experience.name}
           </li>
         );

src/index.css

@@ -114,6 +114,36 @@ textarea {
   min-height: 8rem;
 }
 
+header {
+  display: flex;
+}
+
+header div:nth-child(1) {
+  flex: 0.6;
+}
+
+header div:nth-child(2) {
+  flex: 0.4;
+  max-width: 500px;
+}
+
+@media screen and (max-width: 768px) {
+  header {
+    display: block;
+  }
+
+  header img {
+    max-width: 80%;
+  }
+}
+
+header h1 {
+  padding-left: 4rem;
+  font-size: 3rem;
+  background: url('./icon.svg') no-repeat left center;
+  background-size: 3rem;;
+}
+
 @media screen and (min-width: 1400px) {
   #root {
     max-width: 1262px;
@@ -296,6 +326,15 @@ table.form tr.selectable:hover {
   width: 2.5rem;
 }
 
+.tag span {
+  width: 1rem;
+  height: 1rem;
+  display: inline-block;
+  border-radius: 0.5rem;
+  vertical-align: text-top;
+  margin-right: 0.25rem;
+}
+
 @media screen and (max-width: 768px) {
   .result table {
     width: 100%;

src/util.ts

@@ -97,3 +97,10 @@ export function downloadFile(state: State) {
   link.click();
   link.remove();
 }
+
+export function hexToRgbA(color: string, opacity: number){
+  const c = color.substring(1).split('');
+  const n = parseInt('0x' + c.join(''), 16);
+
+  return `rgba(${[(n>>16)&255, (n>>8)&255, n&255].join(',')},${opacity})`;
+}