add refactoring note on top of page

client/src/components/Header/Header.module.css

@@ -13,3 +13,17 @@
   background: transparent;
   color: var(--blue12);
 }
+
+.note {
+  text-align: center;
+  background-color: var(--blue2);
+  padding: 0.9em 0;
+  font-size: 0.7em;
+  width: 100%;
+  color: var(--blue12);
+}
+
+.note a {
+  color: var(--blue11);
+  text-decoration: underline;
+}

client/src/components/Header/Header.tsx

@@ -29,18 +29,27 @@ const Header = () => {
   }
 
   return (
-    <header className={styles.header}>
-      <Link to="/" className={styles.title}>
-        chessu
-      </Link>
-      <button
-        className={styles.themeToggle}
-        type="button"
-        onClick={() => changeTheme(darkTheme ? "light" : "dark")}
-      >
-        {darkTheme ? <SunIcon /> : <MoonIcon />}
-      </button>
-    </header>
+    <>
+      <div className={styles.note}>
+        This project is currently undergoing a major refactor & redesign. (
+        <a href="https://github.com/nizewn/chessu/pull/4" target="_blank" rel="noreferrer">
+          #4
+        </a>
+        )
+      </div>
+      <header className={styles.header}>
+        <Link to="/" className={styles.title}>
+          chessu
+        </Link>
+        <button
+          className={styles.themeToggle}
+          type="button"
+          onClick={() => changeTheme(darkTheme ? "light" : "dark")}
+        >
+          {darkTheme ? <SunIcon /> : <MoonIcon />}
+        </button>
+      </header>
+    </>
   );
 };