style(challenge modal): add themes styling

src/components/challenge-modal/challenge-modal.module.css

@@ -44,6 +44,7 @@
   font-size: 10pt;
   outline: medium none;
   width: 298px;
+  filter: var(--filter80);
   padding: 2px;
   margin-bottom: 1px;
 }
@@ -75,5 +76,6 @@
 .challengeFooter button {
   margin: 5px 5px 0 0;
   cursor: pointer;
+  filter: var(--filter80);
   text-transform: capitalize;
 }

src/themes.css

@@ -183,6 +183,15 @@
   --catalog-post-menu-btn-opacity: 0.5;
   --catalog-post-menu-btn-hover-opacity: 1;
 
+  /* challenge modal */
+  --challenge-modal-background-color: #d6daf0;
+  --challenge-modal-border: 1px solid #b7c5d9;
+  --challenge-modal-title-background-color: #98e;
+  --challenge-modal-title-text-color: #000;
+  --challenge-modal-title-border: 1px solid #000;
+  --challenge-modal-title-font-size: 10pt;
+  --challenge-modal-title-font-weight: 700;
+
   /* homepage */
   --homepage-infobox-text-color: #000;
   --homepage-infobox-bar-text-color: #000;
@@ -202,6 +211,7 @@
   /* desktop buttons */
   --button-desktop-text-color: #34345c;
   --button-desktop-text-color-hover: #d00;
+  --close-button-background-image: url("/public/assets/buttons/cross-blue.png");
 
   /* mobile buttons */
   --button-font-size-mobile: 10pt;
@@ -320,10 +330,20 @@
   --catalog-post-menu-btn-opacity: 0.5;
   --catalog-post-menu-btn-hover-opacity: 1;
 
+  /* challenge modal */
+  --challenge-modal-background-color: #f0e0d6;
+  --challenge-modal-border: 1px solid #d9bfb7;
+  --challenge-modal-title-background-color: #ea8;
+  --challenge-modal-title-text-color: #800;
+  --challenge-modal-title-border: 1px solid #800;
+  --challenge-modal-title-font-size: 12pt;
+  --challenge-modal-title-font-weight: 700;
+
   /* desktop buttons */
   --button-desktop-text-color: #00e;
   --button-desktop-text-color-hover: red;
   --button-text-decoration: underline;
+  --close-button-background-image: url("/public/assets/buttons/cross-red.png");
 
   /* mobile buttons */
   --button-font-size-mobile: 11pt;
@@ -430,6 +450,15 @@
   --body-font-family: times new roman, serif;
   --body-font-size: 12pt;
 
+  /* challenge modal */
+  --challenge-modal-background-color: #d6daf0;
+  --challenge-modal-border: 1px solid #b7c5d9;
+  --challenge-modal-title-background-color: #98e;
+  --challenge-modal-title-text-color: #000;
+  --challenge-modal-title-border: 1px solid #000;
+  --challenge-modal-title-font-size: 12pt;
+  --challenge-modal-title-font-weight: 700;
+
   /* homepage */
   --homepage-infobox-text-color: #000;
   --homepage-infobox-bar-text-color: #000;
@@ -450,6 +479,7 @@
   --button-desktop-text-color: #34345c;
   --button-text-decoration: underline;
   --button-desktop-text-color-hover: #d00;
+  --close-button-background-image: url("/public/assets/buttons/cross-blue.png");
 
   /* mobile buttons */
   --button-font-size-mobile: 11pt;
@@ -569,9 +599,19 @@
   --catalog-post-menu-btn-opacity: 0.5;
   --catalog-post-menu-btn-hover-opacity: 1;
 
+  /* challenge modal */
+  --challenge-modal-background-color: #282a2e;
+  --challenge-modal-border: 1px solid #111;
+  --challenge-modal-title-background-color: #282a2e;
+  --challenge-modal-title-text-color: #c5c8c6;
+  --challenge-modal-title-border: unset;
+  --challenge-modal-title-font-size: 10pt;
+  --challenge-modal-title-font-weight: 700;
+
   /* desktop buttons */
   --button-desktop-text-color: #81a2be;
   --button-desktop-text-color-hover: #5f89ac;
+  --close-button-background-image: url("/public/assets/buttons/cross-dark.png");
 
   /* filter for inputs */
   --filter80: brightness(85%);
@@ -701,9 +741,19 @@
   --catalog-post-menu-btn-opacity: 0.5;
   --catalog-post-menu-btn-hover-opacity: 1;
 
+  /* challenge modal */
+  --challenge-modal-background-color: #ddd;
+  --challenge-modal-border: 1px solid #ccc;
+  --challenge-modal-title-background-color: #ddd;
+  --challenge-modal-title-text-color: #333;
+  --challenge-modal-title-border: unset;
+  --challenge-modal-title-font-size: 10pt;
+  --challenge-modal-title-font-weight: 700;
+
   /* desktop buttons */
   --button-desktop-text-color: #f60;
   --button-desktop-text-color-hover: #f30;
+  --close-button-background-image: url("/public/assets/buttons/cross-photon.png");
 
   /* mobile buttons */
   --button-font-size-mobile: 10pt;