From d0127afe1b2a733adcf8e4c53937de736fd61bd3 Mon Sep 17 00:00:00 2001
From: "plebeius.eth" <mottoes_recap0u@icloud.com>
Date: Wed, 20 Mar 2024 13:00:11 +0100
Subject: [PATCH] add post form toggle UI

---
 src/app.tsx                                   |  9 ++++---
 src/components/post-form/index.ts             |  1 +
 src/components/post-form/post-form.module.css | 15 +++++++++++
 src/components/post-form/post-form.tsx        | 11 ++++++++
 src/themes.css                                | 26 +++++++++++++++++++
 5 files changed, 58 insertions(+), 4 deletions(-)
 create mode 100644 src/components/post-form/index.ts
 create mode 100644 src/components/post-form/post-form.module.css
 create mode 100644 src/components/post-form/post-form.tsx

diff --git a/src/app.tsx b/src/app.tsx
index 50c456d2..f8f22b94 100644
--- a/src/app.tsx
+++ b/src/app.tsx
@@ -1,12 +1,13 @@
 import { useEffect } from 'react';
 import { Outlet, Route, Routes, useLocation } from 'react-router-dom';
-import Home from './views/home';
+import { isHomeView } from './lib/utils/view-utils';
 import styles from './app.module.css';
 import useTheme from './hooks/use-theme';
+import Home from './views/home';
 import Subplebbit from './views/subplebbit';
-import { isHomeView } from './lib/utils/view-utils';
 import BoardNav from './components/board-nav';
 import BoardBanner from './components/board-banner';
+import PostForm from './components/post-form';
 
 const App = () => {
   const [theme] = useTheme();
@@ -29,8 +30,8 @@ const App = () => {
     <>
       <BoardNav />
       <BoardBanner />
-      {/*<PostForm />
-      <Stats /> */}
+      <PostForm />
+      {/* <Stats /> */}
       <Outlet />
     </>
   );
diff --git a/src/components/post-form/index.ts b/src/components/post-form/index.ts
new file mode 100644
index 00000000..0eb63f3c
--- /dev/null
+++ b/src/components/post-form/index.ts
@@ -0,0 +1 @@
+export { default } from './post-form';
diff --git a/src/components/post-form/post-form.module.css b/src/components/post-form/post-form.module.css
new file mode 100644
index 00000000..c5d55d41
--- /dev/null
+++ b/src/components/post-form/post-form.module.css
@@ -0,0 +1,15 @@
+.togglePostForm {
+  font-size: var(--post-form-toggle-font-size);
+  font-weight: var(--post-form-toggle-font-weight);
+  text-align: center;
+}
+
+.togglePostForm span {
+  color: var(--post-form-toggle-text-color);
+  text-decoration: var(--post-form-toggle-text-decoration);
+}
+
+.togglePostForm span:hover {
+  cursor: pointer;
+  color: var(--post-form-toggle-text-color-hover);
+}
\ No newline at end of file
diff --git a/src/components/post-form/post-form.tsx b/src/components/post-form/post-form.tsx
new file mode 100644
index 00000000..18ced8bd
--- /dev/null
+++ b/src/components/post-form/post-form.tsx
@@ -0,0 +1,11 @@
+import styles from './post-form.module.css';
+
+const PostForm = () => {
+  return (
+    <div className={styles.togglePostForm}>
+      [<span>Start a New Thread</span>]
+    </div>
+  );
+};
+
+export default PostForm;
diff --git a/src/themes.css b/src/themes.css
index 19d3065b..eb848ec6 100644
--- a/src/themes.css
+++ b/src/themes.css
@@ -27,6 +27,10 @@
   --internal-link-text-color-hover: #e00;
   --internal-link-text-decoration: none;
   --internal-link-text-decoration-hover: underline;
+  --post-form-toggle-font-size: 22px;
+  --post-form-toggle-font-weight: 700;
+  --post-form-toggle-text-color: #00e;
+  --post-form-toggle-text-color-hover: red;
   --text-color: maroon;
   --text-color-on-color1: #fff;
   --text-color-on-color2: #800;
@@ -65,6 +69,10 @@
   --internal-link-text-color-hover: #d00;
   --internal-link-text-decoration: none;
   --internal-link-text-decoration-hover: underline;
+  --post-form-toggle-font-size: 22px;
+  --post-form-toggle-font-weight: 700;
+  --post-form-toggle-text-color: #34345c;
+  --post-form-toggle-text-color-hover: #d00;
   --text-color: #000;
   --text-color-on-color1: #000;
   --text-color-on-color2: #000;
@@ -97,6 +105,11 @@
   --internal-link-text-color-hover: #e00;
   --internal-link-text-decoration: underline;
   --internal-link-text-decoration-hover: underline;
+  --post-form-toggle-font-size: 22px;
+  --post-form-toggle-font-weight: 700;
+  --post-form-toggle-text-color: #00e;
+  --post-form-toggle-text-decoration: underline;
+  --post-form-toggle-text-color-hover: red;
   --text-color: maroon;
   --text-color-on-color1: #fff;
   --text-color-on-color2: #800;
@@ -131,6 +144,11 @@
   --internal-link-text-color-hover: #d00;
   --internal-link-text-decoration: underline;
   --internal-link-text-decoration-hover: underline;
+  --post-form-toggle-font-size: 22px;
+  --post-form-toggle-font-weight: 700;
+  --post-form-toggle-text-color: #34345c;
+  --post-form-toggle-text-decoration: underline;
+  --post-form-toggle-text-color-hover: #d00;
   --text-color: #000;
   --text-color-on-color1: #000;
   --text-color-on-color2: #000;
@@ -164,6 +182,10 @@
   --hr-height: 0px;
   --internal-link-text-color: #81a2be;
   --internal-link-text-color-hover: #5f89ac;
+  --post-form-toggle-font-size: 22px;
+  --post-form-toggle-font-weight: 700;
+  --post-form-toggle-text-color: #81a2be;
+  --post-form-toggle-text-color-hover: #5f89ac;
   --text-color: #c5c8c6;
   --text-color-standard: #c5c8c6;
   --text-color-on-color1: #c5c8c6;
@@ -192,5 +214,9 @@
   --hr-height: 0px;
   --internal-link-text-color: #f60;
   --internal-link-text-color-hover: #f30;
+  --post-form-toggle-font-size: 22px;
+  --post-form-toggle-font-weight: 700;
+  --post-form-toggle-text-color: #f60;
+  --post-form-toggle-text-color-hover: #f30;
   --text-color: #333;
 }
\ No newline at end of file