From 903cfc10eed1b1d9280f08d89b966849760f2fe8 Mon Sep 17 00:00:00 2001
From: Nathaniel Tampus <contact@nize.ph>
Date: Thu, 16 Feb 2023 22:00:19 +0800
Subject: [PATCH] add refactoring note on top of page

---
 .../src/components/Header/Header.module.css   | 14 ++++++++
 client/src/components/Header/Header.tsx       | 33 ++++++++++++-------
 2 files changed, 35 insertions(+), 12 deletions(-)

diff --git a/client/src/components/Header/Header.module.css b/client/src/components/Header/Header.module.css
index e09bc6f..6149e85 100644
--- a/client/src/components/Header/Header.module.css
+++ b/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;
+}
diff --git a/client/src/components/Header/Header.tsx b/client/src/components/Header/Header.tsx
index ec74611..092cbd9 100644
--- a/client/src/components/Header/Header.tsx
+++ b/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>
+    </>
   );
 };