add post form toggle UI

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 />
+      <PostForm />
-      <Stats /> */}
+      {/* <Stats /> */}
       <Outlet />
     </>
   );

src/components/post-form/index.ts

@@ -0,0 +1 @@
+export { default } from './post-form';

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);
+}

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;

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;
 }