ui fixes

Nester-xyz · Jun 28, 2023 · a3a97f8 · a3a97f8
1 parent d0dea3f
commit a3a97f8
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 37 deletions.
diff --git a/src/Page/Feed/index.tsx b/src/Page/Feed/index.tsx
@@ -4,7 +4,7 @@ import PostCard from "../../components/PageComponents/Feed/PostCard";
 import { BlobRef } from "@atproto/api";
 import PostLoader from "../../components/PageComponents/Feed/PostLoader";
 import { appContext } from "../../context/appContext";
-
+import { HiOutlinePencilSquare } from 'react-icons/hi2'
 import { agent, refreshSession } from "../../utils";
 import { dataGotFromApi } from "../../components/@types/Feed/Feed";
 // the component begins here
@@ -195,12 +195,13 @@ const Feed = () => {
           submitPost={submitPost}
         />
       ) : (
-        <div className="w-full h-full">
+        <div className="w-full h-full relative">
           <button
-            className="md:hidden z-30 fixed bottom-20 right-8 w-12 h-12 bg-blue-500 rounded-full text-4xl flex items-center justify-center text-white pb-[6px]"
+            // className="md:hidden z-30 fixed bottom-20 right-8 w-12 h-12 bg-blue-500 rounded-full text-4xl flex items-center justify-center text-white pb-[6px]"
+            className="md:hidden p-3 fixed right-10 bottom-20 z-30 bg-blue-500 rounded-full text-2xl text-white"
             onClick={() => setShowAddPost(true)}
           >
-            +
+            <HiOutlinePencilSquare />
           </button>
 
           <div className="grid grid-cols-4 gap-5 h-screen relative">

diff --git a/src/components/PageComponents/Feed/PostCard.tsx b/src/components/PageComponents/Feed/PostCard.tsx
@@ -360,9 +360,8 @@ const PostCard = ({
                 <LuRepeat2 /> &nbsp;{" "}
               </div>
               <div
-                className={`break-all text-sm line-clamp-1 ${
-                  reason?.did !== params.did && "cursor-pointer"
-                }`}
+                className={`break-all text-sm line-clamp-1 ${reason?.did !== params.did && "cursor-pointer"
+                  }`}
                 onClick={() => {
                   console.log(reason);
                   if (reason?.did == params.did) return;
@@ -374,9 +373,8 @@ const PostCard = ({
                 {" "}
                 Reposted by{" "}
                 <span
-                  className={`${
-                    reason?.did !== params.did && "hover:underline"
-                  }`}
+                  className={`${reason?.did !== params.did && "hover:underline"
+                    }`}
                 >
                   {reason?.by}
                 </span>
@@ -418,9 +416,8 @@ const PostCard = ({
 
                       {/* handle and username */}
                       <div
-                        className={`flex items-center gap-2  ${
-                          did !== params.did && "cursor-pointer hover:underline"
-                        }`}
+                        className={`flex items-center gap-2  ${did !== params.did && "cursor-pointer hover:underline"
+                          }`}
                         onClick={() => {
                           console.log(did);
                           if (did == params.did) return;
@@ -446,9 +443,8 @@ const PostCard = ({
                         <BiShare /> &nbsp;{" "}
                       </div>
                       <div
-                        className={`text-sm break-all line-clamp-1 ${
-                          reply?.did !== params.did && "cursor-pointer"
-                        }`}
+                        className={`text-sm break-all line-clamp-1 ${reply?.did !== params.did && "cursor-pointer"
+                          }`}
                         onClick={() => {
                           console.log(reply);
                           if (reply?.did == params.did) return;
@@ -459,9 +455,8 @@ const PostCard = ({
                       >
                         Replied to{" "}
                         <span
-                          className={`${
-                            reply?.did !== params.did && "hover:underline"
-                          }`}
+                          className={`${reply?.did !== params.did && "hover:underline"
+                            }`}
                         >
                           {reply?.by}
                         </span>
@@ -488,18 +483,18 @@ const PostCard = ({
         {image?.length == 0
           ? ""
           : image && (
-              <div>
-                {/* Render the post image */}
-                <div className="aspect-video overflow-hidden">
-                  <img
-                    src={image}
-                    alt=""
-                    className="h-full object-contain  cursor-pointer"
-                    onClick={() => setShowImageModal(true)}
-                  />
-                </div>
+            <div>
+              {/* Render the post image */}
+              <div className="aspect-video overflow-hidden">
+                <img
+                  src={image}
+                  alt=""
+                  className="h-full object-contain  cursor-pointer"
+                  onClick={() => setShowImageModal(true)}
+                />
               </div>
-            )}
+            </div>
+          )}
         {embed?.$type === "app.bsky.embed.record#view" &&
           embed?.data?.$type !== "app.bsky.feed.defs#generatorView" && (
             <div className="flex flex-col p-4 border border-slate-300 rounded-lg mt-[4px]">
@@ -522,10 +517,9 @@ const PostCard = ({
                     )}
                   </div>
                   <div
-                    className={`flex items-center gap-2  ${
-                      embed.data?.author?.did !== params.did &&
+                    className={`flex items-center gap-2  ${embed.data?.author?.did !== params.did &&
                       "cursor-pointer hover:underline"
-                    }`}
+                      }`}
                     onClick={() => {
                       console.log(did);
                       if (embed.data?.author?.did == params.did) return;
@@ -609,9 +603,8 @@ const PostCard = ({
         <div
           id="modal"
           onClick={() => setShowImageModal(false)}
-          className={`${
-            showImageModal ? "opacity-100" : "opacity-0 pointer-events-none"
-          } fixed top-0 left-0 z-40 w-screen h-screen bg-black/70 flex justify-center items-center transition-opacity duration-300`}
+          className={`${showImageModal ? "opacity-100" : "opacity-0 pointer-events-none"
+            } fixed top-0 left-0 z-40 w-screen h-screen bg-black/70 flex justify-center items-center transition-opacity duration-300`}
         >
           {/* <a
             className="fixed z-90 top-6 right-8 text-white text-5xl font-bold"
@@ -629,7 +622,7 @@ const PostCard = ({
                     ? embed?.data?.embeds[0]?.images?.[0]?.thumb
                     : image
                 }
-                className=" w-full max-h-[520px] object-contain relative"
+                className=" w-full max-h-[490px] object-contain relative"
               />
               <div className="absolute -top-12 right-8 w-4 h-4">
                 <div