From ba162565ab24a50c1535a1c64efce954340dedbe Mon Sep 17 00:00:00 2001
From: Simon <simon.priet@gmail.com>
Date: Wed, 15 Jun 2022 22:46:15 +0200
Subject: [PATCH 1/4] fix(#19): started making changes

It cost me everything
---
 src/components/TeamMembers/styles.module.scss | 15 +++------------
 1 file changed, 3 insertions(+), 12 deletions(-)

diff --git a/src/components/TeamMembers/styles.module.scss b/src/components/TeamMembers/styles.module.scss
index edc7070..ada1f84 100755
--- a/src/components/TeamMembers/styles.module.scss
+++ b/src/components/TeamMembers/styles.module.scss
@@ -1,25 +1,18 @@
 @import "../../theme/variables";
 @import "../../theme/mixins";
-
 .volunteers {
     padding: 0;
     list-style: none;
 }
 
 $height: 24px;
-
 .volunteer {
-    height: $height;
-    line-height: $height;
-    margin-bottom: 3px;
+    display: grid;
+    grid-template-columns: minmax(min-content, 5fr) min-content min-content;
 }
 
 .volunteerName {
-    display: inline-block;
-    height: $height;
-    width: 230px;
-    padding-right: 4px;
-    text-align: right;
+    grid-column: 1;
 }
 
 .volunteerEmail {
@@ -44,11 +37,9 @@ $height: 24px;
     text-align: center;
     background-color: $color-red;
     color: transparent;
-
     &.unknown {
         background-color: $color-grey-medium;
     }
-
     &.available {
         background-color: $color-green;
     }

From 1462a05745d6e4d592f87a9572396391e376f524 Mon Sep 17 00:00:00 2001
From: Simon <simon.priet@gmail.com>
Date: Wed, 15 Jun 2022 22:48:52 +0200
Subject: [PATCH 2/4] refactor(#19): updated gitignore to not be flooded by
 compiled css

---
 .gitignore | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/.gitignore b/.gitignore
index 73a4726..e94a694 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,6 +1,11 @@
 # Dependencies
 node_modules
 
+# Sass compiled files
+*.module.css
+*.css.map
+*.css
+
 # Testing
 coverage
 
@@ -19,3 +24,5 @@ access/*
 *.log
 .idea
 announces/*
+/styles.module.css
+.vscode/settings.json

From 3d139b9cbba46b2a8cd5daf339c9bc87533b4a84 Mon Sep 17 00:00:00 2001
From: Simon <simon.priet@gmail.com>
Date: Wed, 15 Jun 2022 23:12:55 +0200
Subject: [PATCH 3/4] fix(#19): continuing working

---
 src/components/TeamMembers/TeamMembers.tsx | 18 ++++++++----------
 1 file changed, 8 insertions(+), 10 deletions(-)

diff --git a/src/components/TeamMembers/TeamMembers.tsx b/src/components/TeamMembers/TeamMembers.tsx
index da7df73..eda24ac 100644
--- a/src/components/TeamMembers/TeamMembers.tsx
+++ b/src/components/TeamMembers/TeamMembers.tsx
@@ -73,22 +73,20 @@ const TeamMembers: FC<Props> = ({ teamId }): JSX.Element => {
     if (volunteers.length === 0) return <div />
 
     return (
-        <ul className={styles.volunteers}>
-            <li>
-                <div className={styles.volunteerName} />
-                <div className={styles.dayTitle}>S ({volunteers.filter(hasDay("S")).length})</div>
-                <div className={styles.dayTitle}>D ({volunteers.filter(hasDay("D")).length})</div>
-            </li>
+        <div className={styles.volunteers}>
+            <div className={styles.volunteerName} />
+            <div className={styles.dayTitle}>S ({volunteers.filter(hasDay("S")).length})</div>
+            <div className={styles.dayTitle}>D ({volunteers.filter(hasDay("D")).length})</div>
             {volunteers.map((volunteer) => (
-                <li key={volunteer.id} className={styles.volunteer}>
-                    <div className={styles.volunteerName}>
+                <>
+                    <div key={volunteer.id} className={styles.volunteerName}>
                         {volunteer.firstname} {volunteer.lastname}
                     </div>
                     <DaysAvailability volunteer={volunteer} />
                     <VolunteerEmail email={volunteer.email} />
-                </li>
+                </>
             ))}
-        </ul>
+        </div>
     )
 }
 

From f1c7c1cbb87b24b6ec4e1f843bbc4e1d69984922 Mon Sep 17 00:00:00 2001
From: Simon <simon.priet@gmail.com>
Date: Wed, 15 Jun 2022 23:12:55 +0200
Subject: [PATCH 4/4] fix(#19): continuing working

---
 .vscode/settings.json                         |  3 ++-
 src/components/TeamMembers/TeamMembers.tsx    | 18 ++++++++----------
 src/components/TeamMembers/styles.module.scss | 18 ------------------
 3 files changed, 10 insertions(+), 29 deletions(-)

diff --git a/.vscode/settings.json b/.vscode/settings.json
index fdc96e8..f2970f2 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -1,3 +1,4 @@
 {
-    "eslint.lintTask.enable": true
+    "eslint.lintTask.enable": true,
+    "conventionalCommits.scopes": ["#17", "#20", "#19"]
 }
diff --git a/src/components/TeamMembers/TeamMembers.tsx b/src/components/TeamMembers/TeamMembers.tsx
index da7df73..eda24ac 100644
--- a/src/components/TeamMembers/TeamMembers.tsx
+++ b/src/components/TeamMembers/TeamMembers.tsx
@@ -73,22 +73,20 @@ const TeamMembers: FC<Props> = ({ teamId }): JSX.Element => {
     if (volunteers.length === 0) return <div />
 
     return (
-        <ul className={styles.volunteers}>
-            <li>
-                <div className={styles.volunteerName} />
-                <div className={styles.dayTitle}>S ({volunteers.filter(hasDay("S")).length})</div>
-                <div className={styles.dayTitle}>D ({volunteers.filter(hasDay("D")).length})</div>
-            </li>
+        <div className={styles.volunteers}>
+            <div className={styles.volunteerName} />
+            <div className={styles.dayTitle}>S ({volunteers.filter(hasDay("S")).length})</div>
+            <div className={styles.dayTitle}>D ({volunteers.filter(hasDay("D")).length})</div>
             {volunteers.map((volunteer) => (
-                <li key={volunteer.id} className={styles.volunteer}>
-                    <div className={styles.volunteerName}>
+                <>
+                    <div key={volunteer.id} className={styles.volunteerName}>
                         {volunteer.firstname} {volunteer.lastname}
                     </div>
                     <DaysAvailability volunteer={volunteer} />
                     <VolunteerEmail email={volunteer.email} />
-                </li>
+                </>
             ))}
-        </ul>
+        </div>
     )
 }
 
diff --git a/src/components/TeamMembers/styles.module.scss b/src/components/TeamMembers/styles.module.scss
index ada1f84..4a1f350 100755
--- a/src/components/TeamMembers/styles.module.scss
+++ b/src/components/TeamMembers/styles.module.scss
@@ -11,24 +11,6 @@ $height: 24px;
     grid-template-columns: minmax(min-content, 5fr) min-content min-content;
 }
 
-.volunteerName {
-    grid-column: 1;
-}
-
-.volunteerEmail {
-    display: inline-block;
-    height: $height;
-    padding-left: 4px;
-}
-
-.dayTitle {
-    display: inline-block;
-    width: 50px;
-    height: $height;
-    margin: 0 2px;
-    text-align: center;
-}
-
 .day {
     display: inline-block;
     width: 50px;