From 39a7699de3ecc7fdc859de1397d7f37d77f69600 Mon Sep 17 00:00:00 2001
From: Carlos Valente <34649812+cpvalente@users.noreply.github.com>
Date: Wed, 28 Jul 2021 14:37:46 +0200
Subject: [PATCH] style: cleanup empty fields

---
 client/src/features/info/Info.module.css | 20 +++++++++++++++++---
 client/src/features/info/InfoTitle.jsx   | 22 ++++++++++++++++++----
 2 files changed, 35 insertions(+), 7 deletions(-)

diff --git a/client/src/features/info/Info.module.css b/client/src/features/info/Info.module.css
index fc8fb38d7..c6c63793d 100644
--- a/client/src/features/info/Info.module.css
+++ b/client/src/features/info/Info.module.css
@@ -19,16 +19,30 @@
   padding: 0;
   margin: 0;
   font-size: 0.9em;
-  color: #aaa;
+  color: #ccc;
   display: flex;
   justify-content: space-between;
 }
 
-.label {
+.label,
+.emptyLabel {
   padding: 0;
   margin: 0;
   font-size: 0.9em;
-  color: #ccc;
+}
+
+.label {
+  font-size: 0.9em;
+  color: #aaa;
+}
+
+.label::after {
+  content: ': ';
+}
+
+.emptyLabel {
+  font-size: 0.8em;
+  color: #555;
 }
 
 .notes {
diff --git a/client/src/features/info/InfoTitle.jsx b/client/src/features/info/InfoTitle.jsx
index a6e8a46cb..31759057e 100644
--- a/client/src/features/info/InfoTitle.jsx
+++ b/client/src/features/info/InfoTitle.jsx
@@ -7,6 +7,12 @@ export default function InfoTitle(props) {
   const [collapsed, setCollapsed] = useState(false);
 
   const { title, data } = props;
+
+  const noTitl = data.title == null || data.title === '';
+  const noPres = data.presenter == null || data.presenter === '';
+  const noSubt = data.subtitle == null || data.subtitle === '';
+  const noNote = data.note == null || data.note === '';
+
   return (
     <div className={style.container}>
       <div className={style.header}>
@@ -21,19 +27,27 @@ export default function InfoTitle(props) {
       {!collapsed && (
         <>
           <div>
-            <span className={style.label}>Title: </span>
+            <span className={noTitl ? style.emptyLabel : style.label}>
+              Title
+            </span>
             {data.title}
           </div>
           <div>
-            <span className={style.label}>Presenter: </span>
+            <span className={noPres ? style.emptyLabel : style.label}>
+              Presenter
+            </span>
             {data.presenter}
           </div>
           <div>
-            <span className={style.label}>Subtitle: </span>
+            <span className={noSubt ? style.emptyLabel : style.label}>
+              Subtitle
+            </span>
             {data.subtitle}
           </div>
           <div className={style.notes}>
-            <span className={style.label}>Note: </span>
+            <span className={noNote ? style.emptyLabel : style.label}>
+              Note
+            </span>
             {data.note}
           </div>
         </>