xd

visoftsolutions · Nov 5, 2023 · 64294b7 · 64294b7
1 parent 792f9f1
commit 64294b7
Show file tree

Hide file tree

Showing 3 changed files with 55 additions and 34 deletions.
diff --git a/web/src/app/chats/public/page.tsx b/web/src/app/chats/public/page.tsx
@@ -180,7 +180,6 @@ export default function Profile({ params }: { params: { address: string } }) {
               <button onClick={() => open()}>Connect your wallet</button>
             ) : (
               <>
-                <div>Address: {address}</div>
                 {!isRegistered ? (
                   <div>
                     To manage notifications, sign and register an identity
@@ -218,7 +217,7 @@ export default function Profile({ params }: { params: { address: string } }) {
         )}
       </>
 
-      <div className="grid grid-cols-1 gap-4">
+      <div className="grid grid-cols-1 gap-1">
         {messages
           .map((el) => ({
             id: el.id,
@@ -235,29 +234,31 @@ export default function Profile({ params }: { params: { address: string } }) {
 
       <form
         onSubmit={handleNotifySubmit}
-        className="flex flex-col max-w-md mx-auto"
+        className="flex flex-col gap-1"
       >
-        <div>
-          <label
-            htmlFor="message"
-            className="block text-sm font-medium text-gray-700"
-          >
-            Message:
-          </label>
+        <label
+          htmlFor="message"
+          className="block text-sm font-medium text-gray-300"
+        >
+            Message
+        </label>
+
+        <div className="flex gap-2 w-full">
           <input
             id="message"
             value={notificationMessage}
             onChange={(e) => setNotificationMessage(e.target.value)}
             required
-            className="text-black mt-1 p-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-1 focus:ring-blue-500 focus:border-blue-500"
+            className="w-full text-gray-200 text-sm p-2 border border-gray-900 bg-gray-900 rounded-md shadow-sm focus:outline-none focus:ring-1 focus:ring-yellow-400 focus:border-yellow-400"
           />
-        </div>
-        <button
-          type="submit"
-          className="mt-4 py-2 px-4 bg-blue-500 text-white font-semibold rounded-md shadow hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-600 focus:ring-opacity-50"
-        >
+
+          <button
+            type="submit"
+            className="py-2 px-4 bg-yellow-400 text-gray-900 font-semibold rounded-md shadow hover:bg-yellow-500 text-sm"
+          >
           Send
-        </button>
+          </button>
+        </div>
       </form>
     </SectionLayout>
   );

diff --git a/web/src/components/MessageTile.tsx b/web/src/components/MessageTile.tsx
@@ -8,13 +8,32 @@ export function MessageTileComponent({
     isMy: boolean;
   };
 }) {
+  function pad(num: number) {
+    return ("0"+num).slice(-2);
+  }
+
+
+  const getTime = () => {
+    const date = new Date(params.date);
+
+    return pad(date.getHours())+":"+pad(date.getMinutes());
+  };
+
   return (
-    <div className="flex gap-4 items-center">
-      <span className="text-gray-400">{`${params.date}`}</span>
+    <div className="flex items-center font-medium">
+
       {params.isMy ? (
-        <span className="text-yellow-400">{`${params.msg}`}</span>
+        <div className="flex items-center mr-auto">
+          <span className="w-12">{getTime()}</span>
+          <span className="text-yellow-400 px-2 py-1">{`${params.msg}`}</span>
+        </div>
+
       ) : (
-        <span className="text-red-400">{`${params.msg}`}</span>
+        <div className="flex flex-row-reverse items-center ml-auto">
+          <span className="w-12">{getTime()}</span>
+          <span className="px-2 py-1 text-gray-200">{`${params.msg}`}</span>
+        </div>
+
       )}
     </div>
   );

diff --git a/web/src/components/SideNav.tsx b/web/src/components/SideNav.tsx
@@ -5,9 +5,10 @@ import Link from "next/link";
 import truncateEthAddress from "truncate-eth-address";
 import Image from "next/image";
 import { Listbox } from "@headlessui/react";
-import { AiOutlineArrowDown } from "react-icons/ai";
+import { AiFillLock, AiOutlineArrowDown } from "react-icons/ai";
 import { useWalletContext } from "@/context/wallet";
 import { useLocalStorage } from "@/hooks/useLocalStorage";
+import { BsFillChatDotsFill, BsFillPersonLinesFill, BsSearchHeart } from "react-icons/bs";
 
 export function SideNav() {
   const walletContextCheck = useWalletContext();
@@ -78,24 +79,24 @@ export function SideNav() {
       </div>
 
       <div className="flex flex-col gap-4">
-        <Link className="text-lg" href={"/chats"}>
-          Chats
+        <Link className="text-lg flex gap-2 items-center" href={"/chats"}>
+          <BsFillChatDotsFill size={16} /> Chats
         </Link>
-        <Link className="text-lg" href={"/chats/public"}>
-          Public
+        <Link className="text-lg flex gap-2 items-center" href={"/chats/public"}>
+          <BsFillPersonLinesFill size={16} /> Troll Box
         </Link>
-        <Link className="text-lg" href={"/chats/private"}>
-          Private
+        <Link className="text-lg flex gap-2 items-center" href={"/chats/private"}>
+          <AiFillLock size={16} /> Private
         </Link>
-        <Link className="text-lg" href={"/keys"}>
+        {/* <Link className="text-lg" href={"/keys"}>
           Keys
+        </Link> */}
+        <Link className="text-lg flex gap-2 items-center" href={"/explore"}>
+          <BsSearchHeart size={16} /> Explore
         </Link>
-        <Link className="text-lg" href={"/explore"}>
-          Explore
-        </Link>
-        <Link className="text-lg" href={"/airdrop"}>
+        {/* <Link className="text-lg" href={"/airdrop"}>
           Airdrop
-        </Link>
+        </Link> */}
       </div>
 
       {/* {isConnected && <button className='border-yellow-400 border text-yellow-400 font-medium py-2 px-4 rounded-md' onClick={() => open()}>Disconnect wallet</button>} */}