Improve dark mode of icons + inputs improvements

src/lib/components/Apps/components/QandA/index.svelte

@@ -16,7 +16,7 @@
       name: 'Evgeniy',
       question: "I'am looking at this and it looks great",
       vote: 1,
-      answered: false,
+      answered: false
     },
     {
       id: 2,
@@ -24,22 +24,22 @@
       question:
         'Thanks for the feedback, what do you think about my website. https://rotimibest.com',
       vote: 4,
-      answered: false,
+      answered: false
     },
     {
       id: 3,
       name: 'Vitalii Marushko',
       question: 'Всем привет',
       vote: 20,
-      answered: false,
+      answered: false
     },
     {
       id: 4,
       name: 'Natasha',
       question: 'Привет Виталий',
       vote: 0,
-      answered: false,
-    },
+      answered: false
+    }
   ];
 
   function handleSend() {
@@ -54,15 +54,15 @@
         name: 'You',
         question,
         vote: 0,
-        answered: false,
-      },
+        answered: false
+      }
     ];
 
     question = null;
 
     setTimeout(() => {
       bodyRef.scrollTo({
-        top: bodyRef.scrollHeight,
+        top: bodyRef.scrollHeight
       });
     }, 100);
   }
@@ -104,22 +104,15 @@
           {@html marked(question.question)}
         </article>
       </div>
-      <button
-        class={`${question.answered && 'active'}`}
-        on:click={handleMarkAnswered(question.id)}
-      >
-        <CheckmarkOutline size={20} class="carbon-icon" />
+      <button class={`${question.answered && 'active'}`} on:click={handleMarkAnswered(question.id)}>
+        <CheckmarkOutline size={20} class="carbon-icon dark:text-white" />
       </button>
     </div>
   {/each}
 </div>
 
 <div class="footer">
-  <TextField
-    placeholder="Say something"
-    bind:value={question}
-    onKeyDown={handleKeyDown}
-  />
+  <TextField placeholder="Say something" bind:value={question} onKeyDown={handleKeyDown} />
 </div>
 
 <style lang="scss">

src/lib/components/Apps/index.svelte

@@ -56,7 +56,7 @@
       onClick={handleAppClick}
       selected={APPS_CONSTANTS.APPS.LIVE_CHAT === selectedApp}
     >
-      <SendAlt size={24} class="carbon-icon" />
+      <SendAlt size={24} class="carbon-icon dark:text-white" />
     </IconButton>
 
     <IconButton
@@ -65,7 +65,7 @@
       onClick={handleAppClick}
       selected={APPS_CONSTANTS.APPS.QANDA === selectedApp}
     >
-      <Forum size={24} class="carbon-icon" />
+      <Forum size={24} class="carbon-icon dark:text-white" />
     </IconButton>
 
     <IconButton
@@ -74,7 +74,7 @@
       onClick={handleAppClick}
       selected={APPS_CONSTANTS.APPS.NOTES === selectedApp}
     >
-      <AlignBoxTopLeft size={24} class="carbon-icon" />
+      <AlignBoxTopLeft size={24} class="carbon-icon dark:text-white" />
     </IconButton>
 
     <IconButton
@@ -83,7 +83,7 @@
       onClick={handleAppClick}
       selected={APPS_CONSTANTS.APPS.POLL === selectedApp}
     >
-      <ChartPie size={24} class="carbon-icon" />
+      <ChartPie size={24} class="carbon-icon dark:text-white" />
     </IconButton>
   </div>