Tweak styles to match current theme

Author: bacurrah

src/widgets/Notepad.css

@@ -4,41 +4,37 @@
   display: flex;
   flex-direction: column;
   padding: 12px;
-  box-sizing: border-box;
-
-  /* card style */
-  background-color: #ffffff;
-  border-radius: 12px;
-  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
-  border: 1px solid #e0e0e0;
 }
 
 .title {
   font-size: 1.2rem;
   font-weight: 700;
   margin-bottom: 10px;
-  color: #000;
+  color: #fffc;
   text-align: center;
 }
 
 /* The note area */
 .textarea {
-  flex: 1; 
-  width: 100%;  
+  flex: 1;
+  width: 100%;
   resize: none;
-  border: 1px solid #ccc;
-  border-radius: 8px;
   padding: 10px;
   font-size: 0.95rem;
   font-family: "Inter", sans-serif;
-  color: #000;
-  background-color: #fafafa;
-  box-sizing: border-box;
+  color: #fffc;
+  background-color: #fff0;
   outline: none;
-  transition: border-color 0.2s, background-color 0.2s;
+  transition:
+    border-color 0.2s,
+    background-color 0.2s;
+}
+
+.textarea::placeholder {
+  color: #fff6;
 }
 
 .textarea:focus {
-  border-color: #4CAF50;
-  background-color: #fff;
-}
+  border-color: #fff4;
+  background-color: #0002;
+}

src/widgets/Notepad.tsx

@@ -1,4 +1,5 @@
 import React, { useState, useEffect } from "react";
+import globalStyles from "../App.css";
 import styles from "./Notepad.css";
 
 export function Notepad() {
@@ -16,14 +17,14 @@ export function Notepad() {
   }, [note]);
 
   return (
-    <div className={styles.body}>
+    <div className={[globalStyles.container, styles.body].join(" ")}>
       <h3 className={styles.title}>My Notes</h3>
       <textarea
-        className={styles.textarea}
+        className={[globalStyles.container, styles.textarea].join(" ")}
         value={note}
         onChange={(e) => setNote(e.target.value)}
         placeholder="Type your notes here..."
       />
     </div>
   );
-}
+}

src/widgets/ToDoList.css

@@ -4,35 +4,29 @@
   height: 100%;
   display: flex;
   flex-direction: column;
-  align-items: stretch;      /* stretch title and list to full width */
+  align-items: stretch; /* stretch title and list to full width */
   justify-content: flex-start;
   padding: 12px;
   box-sizing: border-box;
   overflow: hidden;
-
-  /* Card style */
-  background-color: #ffffff;  /* white card */
-  border-radius: 12px;        /* rounded corners */
-  box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* subtle shadow */
-  border: 1px solid #e0e0e0; /* light border for card separation */
 }
 
 /* Title at the top */
 .title {
   font-size: 1.2rem;
   font-weight: 700;
   margin-bottom: 10px;
-  color: #000;
+  color: #fffc;
   text-align: center;
 }
 
 /* Task list */
 .todo-list {
-  list-style: none;         /* remove default bullets */
+  list-style: none; /* remove default bullets */
   padding: 0;
   margin: 0 0 10px 0;
-  flex: 1;                  /* fill available space */
-  overflow-y: auto;         /* scroll if too many tasks */
+  flex: 1; /* fill available space */
+  overflow-y: auto; /* scroll if too many tasks */
 }
 
 /* Each task item */
@@ -41,31 +35,32 @@
   justify-content: space-between;
   align-items: center;
   padding: 6px 8px;
-  border-bottom: 1px solid #f0f0f0;
+  border-bottom: 1px solid #fff4;
+  border-radius: 4px;
   cursor: pointer;
   transition: background 0.2s;
 }
 
 .todo-list li:hover {
-  background-color: #f9f9f9;  /* subtle hover effect */
+  background-color: #fff2; /* subtle hover effect */
 }
 
 /* Bullet point before task */
 .todo-list li span::before {
   content: "•";
-  color: #4CAF50;     
+  color: #fff8;
   display: inline-block;
   width: 1em;
   margin-right: 6px;
-  font-size: 1.3rem;    /* bigger bullet */
+  font-size: 1.3rem; /* bigger bullet */
   line-height: 1;
   vertical-align: middle;
 }
 
 /* Task text */
 .todo-list li span {
-  color: #000;            /* black text */
-  flex: 1;                /* fill available width */
+  color: #fffc; /* black text */
+  flex: 1; /* fill available width */
 }
 
 /* Completed task style */
@@ -76,9 +71,9 @@
 
 /* Checkmark delete button */
 .delete-task {
-  background: transparent;       /* empty square */
-  border: 2px solid #4CAF50;    /* green border */
-  color: #4CAF50;                /* green checkmark */
+  background: transparent; /* empty square */
+  border: 2px solid #fff4; /* green border */
+  color: #fff8; /* green checkmark */
   border-radius: 4px;
   width: 22px;
   height: 22px;
@@ -90,11 +85,13 @@
   justify-content: center;
   padding: 0;
   line-height: 1;
-  transition: background 0.2s, color 0.2s;
+  transition:
+    background 0.2s,
+    color 0.2s;
 }
 
 .delete-task:hover {
-  background: #e6f4ea;           /* light green background on hover */
+  background: #fff4; /* light green background on hover */
 }
 
 /* Input container */
@@ -107,28 +104,28 @@
 .todo-input-container input {
   flex: 1;
   padding: 6px 8px;
-  border: 1px solid #ccc;
   border-radius: 6px;
   font-size: 0.95rem;
+  color: #fffc;
   outline: none;
   transition: border-color 0.2s;
 }
 
 .todo-input-container input:focus {
-  border-color: #4CAF50;       /* green accent on focus */
+  border-color: #fff4; /* green accent on focus */
 }
 
 .todo-input-container button {
   padding: 6px 12px;
-  border: none;
+  border: 1px solid #fff2;
   border-radius: 6px;
-  background-color: #4CAF50;
+  background-color: #fff4;
   color: #fff;
   font-weight: 600;
   cursor: pointer;
   transition: background 0.2s;
 }
 
 .todo-input-container button:hover {
-  background-color: #43a047;
+  background-color: #fff6;
 }

src/widgets/ToDoList.tsx

@@ -1,5 +1,8 @@
 import React, { useState, useEffect } from "react";
+
+import globalStyles from "../App.css";
 import styles from "./ToDoList.css";
+import { XIcon } from "@phosphor-icons/react";
 
 interface Task {
   text: string;
@@ -40,10 +43,10 @@ export function ToDoList() {
   };
 
   return (
-    <div className={styles.body}>
+    <div className={[globalStyles.container, styles.body].join(" ")}>
       {/* Title at the top */}
       <h3 className={styles.title}>My To-Do List</h3>
-      
+
       <ul className={styles["todo-list"]}>
         {tasks.map((task, i) => (
           <li
@@ -59,14 +62,15 @@ export function ToDoList() {
                 deleteTask(i);
               }}
             >
-              ✓
+              <XIcon weight="bold"></XIcon>
             </button>
           </li>
         ))}
       </ul>
 
       <div className={styles["todo-input-container"]}>
         <input
+          className={globalStyles.container}
           value={input}
           onChange={(e) => setInput(e.target.value)}
           placeholder="Add a new task..."