From 1e8280d4923b85f876394d58306f981a7b3b3897 Mon Sep 17 00:00:00 2001
From: smolgrrr <smolgrrr@protonmail.com>
Date: Mon, 20 Nov 2023 01:00:57 +1100
Subject: [PATCH] UI work

---
 client/src/components/Forms/PostFormCard.tsx   | 12 +++---------
 client/src/components/Header/Header.tsx        |  4 ++--
 client/src/components/Home.tsx                 | 10 +++++-----
 client/src/components/Modals/CardContainer.tsx |  2 +-
 client/src/components/Settings.tsx             |  7 +++----
 5 files changed, 14 insertions(+), 21 deletions(-)

diff --git a/client/src/components/Forms/PostFormCard.tsx b/client/src/components/Forms/PostFormCard.tsx
index 238a457..afc450f 100644
--- a/client/src/components/Forms/PostFormCard.tsx
+++ b/client/src/components/Forms/PostFormCard.tsx
@@ -187,17 +187,11 @@ const NewNoteCard = ({
             }}
         >
             <input type="hidden" name="MAX_FILE_SIZE" defaultValue={2.5 * 1024 * 1024} />
-            <div
-                id="togglePostFormLink"
-                className="text-lg text-neutral-500 text-center mb-2 font-semibold"
-            >
-                {tagType === 'Reply' ? 'Reply to thread' : 'Start New Thread'}
-            </div>
-            <div className="px-4 pt-4 flex flex-col bg-neutral-900 rounded-lg">
+            <div className="px-4 flex flex-col rounded-lg">
                 <textarea
                     name="com"
                     wrap="soft"
-                    className="shadow-lg w-full px-4 py-3 h-28 rounded-md outline-none focus:outline-none bg-neutral-800 border border-neutral-700 text-white placeholder:text-neutral-500"
+                    className="shadow-lg w-full px-4 py-3 h-28 rounded-md outline-none focus:outline-none bg-black border border-neutral-700 text-white placeholder:text-neutral-500"
                     placeholder="Shitpost here..."
                     value={comment}
                     onChange={(e) => setComment(e.target.value)}
@@ -267,7 +261,7 @@ const NewNoteCard = ({
                             </div>
                             <button
                                 type="submit"
-                                className={`h-9 inline-flex items-center justify-center px-4 rounded-lg text-white font-medium text-sm ${doingWorkProp || uploadingFile ? 'bg-blue-900 cursor-not-allowed' : 'bg-blue-500 hover:bg-blue-600'}`}
+                                className={`bg-black border h-9 inline-flex items-center justify-center px-4 rounded-lg text-white font-medium text-sm ${doingWorkProp || uploadingFile ? 'cursor-not-allowed' : ''}`}
                                 disabled={doingWorkProp || uploadingFile}
                             >
                                 Submit
diff --git a/client/src/components/Header/Header.tsx b/client/src/components/Header/Header.tsx
index a7750c3..3a717dc 100644
--- a/client/src/components/Header/Header.tsx
+++ b/client/src/components/Header/Header.tsx
@@ -10,8 +10,8 @@ export default function Header() {
         <a href="/">
           <div className="flex items-center gap-2">
             <img src="/icon.png" className="h-12" alt="logo" />
-            <span className="font-semibold text-white text-sm">
-              The Wired
+            <span className="font-semibold text-white">
+              {'>'}.. Wired
             </span>
           </div>
         </a>
diff --git a/client/src/components/Home.tsx b/client/src/components/Home.tsx
index 92a6aac..28ec543 100644
--- a/client/src/components/Home.tsx
+++ b/client/src/components/Home.tsx
@@ -55,7 +55,7 @@ const Home = () => {
       <div className="w-full px-4 sm:px-0 sm:max-w-xl mx-auto my-2">
         <NewNoteCard />
       </div>
-      <div className="flex items-center justify-center w-full py-4 z-2">
+      <div className="flex w-full px-8 z-2">
         <label htmlFor="toggleB" className="flex items-center cursor-pointer">
           <div className="relative">
             <input
@@ -65,11 +65,11 @@ const Home = () => {
               checked={sortByTime}
               onChange={toggleSort}
             />
-            <div className="block bg-gray-600 w-10 h-6 rounded-full"></div>
-            <div className={`dot absolute left-1 top-1 bg-white w-4 h-4 rounded-full transition ${sortByTime ? 'transform translate-x-full bg-blue-400' : '' }`} ></div>
+            <div className="block bg-gray-600 w-8 h-4 rounded-full"></div>
+            <div className={`dot absolute left-1 top-0.5 bg-white w-3 h-3 rounded-full transition ${sortByTime ? 'transform translate-x-full bg-blue-400' : '' }`} ></div>
           </div>
-          <div className={`ml-3 text-neutral-500 font-medium ${sortByTime ? 'text-neutral-500' : ''}`}>
-            {sortByTime ? 'Sort by recent' : 'Sort by PoW'}
+          <div className={`ml-2 text-neutral-500 text-sm ${sortByTime ? 'text-neutral-500' : ''}`}>
+            {sortByTime ? 'Time' : 'PoW'}
           </div>
         </label>
       </div>
diff --git a/client/src/components/Modals/CardContainer.tsx b/client/src/components/Modals/CardContainer.tsx
index 1d83099..ab0e5ed 100644
--- a/client/src/components/Modals/CardContainer.tsx
+++ b/client/src/components/Modals/CardContainer.tsx
@@ -2,7 +2,7 @@ import { PropsWithChildren } from "react";
 
 export default function CardContainer({ children }: PropsWithChildren) {
   return (
-    <div className="card break-inside-avoid mb-4 bg-gradient-to-r from-black to-neutral-900 h-min">
+    <div className="card break-inside-avoid mb-4 h-min">
       <div className="card-body">{children}</div>
     </div>
   );
diff --git a/client/src/components/Settings.tsx b/client/src/components/Settings.tsx
index 212a349..9fc43e3 100644
--- a/client/src/components/Settings.tsx
+++ b/client/src/components/Settings.tsx
@@ -37,7 +37,7 @@ const Settings = () => {
               type="number"
               value={filterDifficulty}
               onChange={e => setFilterDifficulty(e.target.value)}
-              className="w-full px-3 py-2 border rounded-md text-black"
+              className="w-full px-3 py-2 border rounded-md bg-black"
             />
           </div>
 
@@ -52,11 +52,11 @@ const Settings = () => {
               type="number"
               value={difficulty}
               onChange={e => setDifficulty(e.target.value)}
-              className="w-full px-3 py-2 border rounded-md text-black"
+              className="w-full px-3 py-2 border rounded-md bg-black"
             />
           </div>
         </div>
-        <button className="bg-gradient-to-r from-blue-900 to-cyan-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
+        <button className="bg-black border text-white font-bold py-2 px-4 rounded">
           Save Settings
         </button>
       </form>
@@ -80,7 +80,6 @@ const Settings = () => {
           </div>
         </div>
       </div>
-      <img className="block sm:hidden h-20 mx-auto mt-auto" src="/pepe.png"/>
     </div>
 
   );