admin msg html tags fix, added X to close modals

src/components/layout.js

@@ -89,7 +89,7 @@ export default function Layout({
         </div>
         {sidebarOpen ? (
           <>
-            <div id="sideBarLinks">
+            <div id="sideBarLinks" className="sidebarLinks">
               {Object.keys(tabs).map((key) => {
                 const item = tabs[key]
                 return (
@@ -178,7 +178,9 @@ export default function Layout({
                 }}
               >
                 <div style={{ textAlign: 'center' }}>Üzenet admintól:</div>
-                <div>{userSpecificMotd.msg}</div>
+                <div
+                  dangerouslySetInnerHTML={{ __html: userSpecificMotd.msg }}
+                />
               </Modal>
             ) : null}
           </>

src/components/modal.js

@@ -36,6 +36,16 @@ export default function Modal(props) {
         }}
         className={styles.modalContent}
       >
+        {closeClick && (
+          <div
+            className={styles.close}
+            onClick={() => {
+              closeClick()
+            }}
+          >
+            ❌
+          </div>
+        )}
         {props.children}
       </div>
     </div>

src/components/modal.module.css

@@ -20,3 +20,14 @@
   padding: 20px;
   cursor: auto;
 }
+
+.close {
+  cursor: pointer;
+  font-size: 18px;
+  position: absolute;
+
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  display: inline;
+}

src/defaultStyles.css

@@ -42,7 +42,7 @@ a {
   padding: 1px 16px;
 }
 
-.sidebar a {
+.sidebarLinks a {
   display: block;
   color: black;
   padding: 16px;
@@ -50,12 +50,12 @@ a {
   color: var(--bright-color);
 }
 
-.sidebar a.active {
+.sidebarLinks a.active {
   background-color: var(--text-color);
   color: black;
 }
 
-.sidebar a:hover:not(.active) {
+.sidebarLinks a:hover:not(.active) {
   background-color: #555;
   color: white;
 }