241 design errors (#311)

SCCapstone · Apr 3, 2023 · 830ae80 · 830ae80
2 parents f97f89f + 981c4dc
commit 830ae80
Show file tree

Hide file tree

Showing 10 changed files with 98 additions and 92 deletions.
diff --git a/components/Sidebar/panels/Notifications/Notification.tsx b/components/Sidebar/panels/Notifications/Notification.tsx
@@ -27,9 +27,9 @@ const Notification = ({
             title
           )}
         </h4>
-        <h5 className="text-xs">{timestamp}</h5>
+        <h5 className="text-xs text-primary">{timestamp}</h5>
       </header>
-      <p>{body}</p>
+      <p className="text-primary">{body}</p>
       <div className="card-actions justify-end">
         <DismissButton notificationId={notificationId} />
       </div>

diff --git a/components/feed/DeleteButton.tsx b/components/feed/DeleteButton.tsx
@@ -6,6 +6,8 @@ import { useState, useTransition } from "react";
 import deleteFeedItem from "@/lib/feed/deleteFeedItem";
 import unsaveFeedItem from "@/lib/savedFeedItems/unsaveFeedItem";
 
+import { TrashSolid } from "../ui/favoriteIcon/icons";
+
 const DeleteButton = ({
   userId,
   postId,
@@ -36,24 +38,10 @@ const DeleteButton = ({
       type="button"
       onClick={(e) => void handleDelete(e)}
       disabled={isMutating}
-      className={`${isMutating ? "loading" : ""} btn`}
+      className={`${isMutating ? "loading" : ""} btn btn-ghost btn-secondary`}
       title="Delete feed item"
     >
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        width="16"
-        height="16"
-        fill="currentColor"
-        className="bi bi-trash"
-        viewBox="0 0 16 16"
-      >
-        {" "}
-        <path d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6z" />{" "}
-        <path
-          fillRule="evenodd"
-          d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1zM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118zM2.5 3V2h11v1h-11z"
-        />{" "}
-      </svg>
+      <TrashSolid />
     </button>
   );
 };

diff --git a/components/feed/FeedItem.tsx b/components/feed/FeedItem.tsx
@@ -25,7 +25,7 @@ const FeedItem = ({
   <div id={data.id}>
     <div className="h-fit">
       <div className="flex flex-row justify-between items-center">
-        <div className="flex flex-row items-center pb-4">
+        <div className="flex flex-row items-top pb-4 pt-4">
           {/* @ts-expect-error Server Component */}
           <ProfileImage username={data.username} />
           <div>
@@ -37,11 +37,6 @@ const FeedItem = ({
             <p>{data.timestamp.toDate().toLocaleString()}</p>
           </div>
         </div>
-        <div>
-          {currentUser.username === data.username && (
-            <DeleteButton userId={data.userId} postId={data.id} />
-          )}
-        </div>
       </div>
       <p>{data.content}</p>
       {data.musicItem && (
@@ -64,21 +59,22 @@ const FeedItem = ({
           )}
         </div>
       )}
-      <div className="flex flex-row justify-between items-center pt-30 pb-5 pl-15">
-        <div>
-          <LikeButton
-            userId={currentUser.id}
-            postId={data.id}
-            likes={data.likedIds.length}
-            likedIds={data.likedIds}
-            username={currentUser.username}
-          />
-        </div>
+      <div className="btn-group-horizontal pt-30 pb-5 pl-15">
+        <LikeButton
+          userId={currentUser.id}
+          postId={data.id}
+          likes={data.likedIds.length}
+          likedIds={data.likedIds}
+          username={currentUser.username}
+        />
         <SaveFeedItemButton
           userId={currentUser.id}
           postId={data.id}
           savedItemIds={savedItemIds}
         />
+        {currentUser.username === data.username && (
+          <DeleteButton userId={data.userId} postId={data.id} />
+        )}
       </div>
     </div>
     <div className="flex flex-col justify-start">

diff --git a/components/feed/FeedTextBox.tsx b/components/feed/FeedTextBox.tsx
@@ -36,7 +36,7 @@ const FeedTextBox = ({ user }: { user: User }) => {
         <div className="rounded-t-lg">
           <textarea
             id="comment"
-            className="textarea w-full rounded-none border-none rounded-t-lg"
+            className="textarea w-full rounded-none input-bordered rounded-t-lg"
             placeholder="Write your musical thoughts..."
             value={postText}
             onChange={(e) => setPostText(e.target.value)}

diff --git a/components/feed/LikeButton.tsx b/components/feed/LikeButton.tsx
@@ -3,7 +3,6 @@
 import { useRouter } from "next/navigation";
 import { useState, useTransition } from "react";
 
-import { formatNumber } from "@/lib/formatters";
 import { likeItem, unlikeItem } from "@/lib/likeButton";
 
 const LikeButton = ({
@@ -45,33 +44,30 @@ const LikeButton = ({
   };
 
   return (
-    <div className="flex flex-row items-center">
-      <button
-        className={`btn btn-ghost ${isMutating ? "loading" : ""}`}
-        type="button"
-        onClick={(e) => void handleClick(e)}
-        title="Like feed item"
+    <button
+      className={`btn btn-ghost btn-secondary ${isMutating ? "loading" : ""}`}
+      type="button"
+      onClick={(e) => void handleClick(e)}
+      title="Like feed item"
+    >
+      <svg
+        className={liked ? "fill-current" : "fill-base-100"}
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+        xmlns="http://www.w3.org/2000/svg"
+        aria-disabled={isMutating}
       >
-        <svg
-          className={liked ? "fill-white" : "fill-base-100"}
-          width="24"
-          height="24"
-          viewBox="0 0 24 24"
-          xmlns="http://www.w3.org/2000/svg"
-          aria-disabled={isMutating}
-        >
-          <path
-            d="M5.57256 9.09995L9.2306 1C9.95823 1 10.6561 1.28446 11.1706 1.79081C11.6851 2.29715 11.9741 2.9839 11.9741 3.69998V7.29996H17.1503C17.4154 7.297 17.678 7.35081 17.9199 7.45765C18.1618 7.5645 18.3772 7.72182 18.5512 7.91872C18.7251 8.11562 18.8535 8.34739 18.9275 8.59798C19.0014 8.84856 19.0191 9.11197 18.9793 9.36995L17.7173 17.4699C17.6511 17.8991 17.4296 18.2903 17.0935 18.5715C16.7574 18.8527 16.3293 19.0048 15.8882 18.9999H5.57256M5.57256 9.09995V18.9999M5.57256 9.09995H2.82902C2.34394 9.09995 1.87872 9.28959 1.53571 9.62715C1.1927 9.96472 1 10.4226 1 10.8999V17.1999C1 17.6773 1.1927 18.1351 1.53571 18.4727C1.87872 18.8102 2.34394 18.9999 2.82902 18.9999H5.57256"
-            stroke={liked ? "black" : "white"}
-            className={liked ? "stroke-base-100" : "stroke-white"}
-            strokeWidth="2"
-            strokeLinecap="round"
-            strokeLinejoin="round"
-          />
-        </svg>
-      </button>
-      <p>{formatNumber(likes)}</p>
-    </div>
+        <path
+          d="M5.57256 9.09995L9.2306 1C9.95823 1 10.6561 1.28446 11.1706 1.79081C11.6851 2.29715 11.9741 2.9839 11.9741 3.69998V7.29996H17.1503C17.4154 7.297 17.678 7.35081 17.9199 7.45765C18.1618 7.5645 18.3772 7.72182 18.5512 7.91872C18.7251 8.11562 18.8535 8.34739 18.9275 8.59798C19.0014 8.84856 19.0191 9.11197 18.9793 9.36995L17.7173 17.4699C17.6511 17.8991 17.4296 18.2903 17.0935 18.5715C16.7574 18.8527 16.3293 19.0048 15.8882 18.9999H5.57256M5.57256 9.09995V18.9999M5.57256 9.09995H2.82902C2.34394 9.09995 1.87872 9.28959 1.53571 9.62715C1.1927 9.96472 1 10.4226 1 10.8999V17.1999C1 17.6773 1.1927 18.1351 1.53571 18.4727C1.87872 18.8102 2.34394 18.9999 2.82902 18.9999H5.57256"
+          className="stroke-current"
+          strokeWidth="2"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </svg>
+      {likes}
+    </button>
   );
 };
 

diff --git a/components/feed/SaveFeedItemButton.tsx b/components/feed/SaveFeedItemButton.tsx
@@ -42,7 +42,7 @@ const SaveFeedItemButton = ({
 
   return (
     <button
-      className={`btn btn-ghost ${isMutating ? "loading" : ""}`}
+      className={`btn btn-ghost btn-secondary ${isMutating ? "loading" : ""}`}
       type="button"
       onClick={(e) => void handleClick(e)}
       title="Save feed item"
@@ -51,12 +51,12 @@ const SaveFeedItemButton = ({
         width="24"
         height="24"
         viewBox="0 0 24 24"
-        className={saved ? "fill-white" : "fill-base-100"}
+        className={saved ? "fill-current" : "fill-base-100"}
         xmlns="http://www.w3.org/2000/svg"
       >
         <path
           d="M19 21L12 16L5 21V5C5 4.46957 5.21071 3.96086 5.58579 3.58579C5.96086 3.21071 6.46957 3 7 3H17C17.5304 3 18.0391 3.21071 18.4142 3.58579C18.7893 3.96086 19 4.46957 19 5V21Z"
-          stroke="white"
+          className="stroke-current"
           strokeWidth="2"
           strokeLinecap="round"
           strokeLinejoin="round"

diff --git a/components/feed/index.tsx b/components/feed/index.tsx
@@ -33,27 +33,44 @@ const FeedPage = ({
   currentUser: User;
   savedItemIds?: string[];
   showLinks?: boolean;
-}) => (
-  <div>
-    <FeedFilterButtons />
-    {showLinks && (
-      <>
-        <FeedTextBox user={currentUser} />
-        <div className="divider" />
-      </>
-    )}
-    <ul>
-      {data.map((feedItem) => (
-        <FeedItem
-          key={feedItem.id}
-          data={feedItem}
-          currentUser={currentUser}
-          savedItemIds={savedItemIds}
-          showLink={showLinks}
-        />
-      ))}
-    </ul>
-  </div>
-);
+}) => {
+  if (data.length === 0) {
+    return (
+      <div>
+        <FeedFilterButtons />
+        {showLinks && (
+          <>
+            <FeedTextBox user={currentUser} />
+            <div className="divider" />
+          </>
+        )}
+        <p>No feed items.</p>
+      </div>
+    );
+  }
+
+  return (
+    <div>
+      <FeedFilterButtons />
+      {showLinks && (
+        <>
+          <FeedTextBox user={currentUser} />
+          <div className="divider" />
+        </>
+      )}
+      <ul>
+        {data.map((feedItem) => (
+          <FeedItem
+            key={feedItem.id}
+            data={feedItem}
+            currentUser={currentUser}
+            savedItemIds={savedItemIds}
+            showLink={showLinks}
+          />
+        ))}
+      </ul>
+    </div>
+  );
+};
 
 export default FeedPage;
diff --git a/components/music/MusicButtons.tsx b/components/music/MusicButtons.tsx
@@ -48,7 +48,7 @@ const MusicButtons = ({
       target="_blank"
       rel="noopener noreferrer"
     >
-      <SpotifyIcon /> <span className="pl-1">Open in Spotify</span>
+      <SpotifyIcon /> <span className="pl-1 text-xs">Open in Spotify</span>
     </a>
   </div>
 );

diff --git a/components/ui/UsernameLink.tsx b/components/ui/UsernameLink.tsx
@@ -7,10 +7,7 @@ const UsernameLink = ({
   username: string;
   children?: React.ReactNode;
 }) => (
-  <Link
-    className="link link-hover link-secondary"
-    href={`/profile/${username}`}
-  >
+  <Link className="link link-hover link-primary" href={`/profile/${username}`}>
     {children ?? username}
   </Link>
 );

diff --git a/components/ui/favoriteIcon/icons.tsx b/components/ui/favoriteIcon/icons.tsx
@@ -23,3 +23,15 @@ export const HeartSolid = () => (
     <path d="M47.6 300.4L228.3 469.1c7.5 7 17.4 10.9 27.7 10.9s20.2-3.9 27.7-10.9L464.4 300.4c30.4-28.3 47.6-68 47.6-109.5v-5.8c0-69.9-50.5-129.5-119.4-141C347 36.5 300.6 51.4 268 84L256 96 244 84c-32.6-32.6-79-47.5-124.6-39.9C50.5 55.6 0 115.2 0 185.1v5.8c0 41.5 17.2 81.2 47.6 109.5z" />
   </svg>
 );
+
+export const TrashSolid = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 448 512"
+    className="fill-current stroke-current"
+    width={24}
+    height="24"
+  >
+    <path d="M135.2 17.7C140.6 6.8 151.7 0 163.8 0H284.2c12.1 0 23.2 6.8 28.6 17.7L320 32h96c17.7 0 32 14.3 32 32s-14.3 32-32 32H32C14.3 96 0 81.7 0 64S14.3 32 32 32h96l7.2-14.3zM32 128H416V448c0 35.3-28.7 64-64 64H96c-35.3 0-64-28.7-64-64V128zm96 64c-8.8 0-16 7.2-16 16V432c0 8.8 7.2 16 16 16s16-7.2 16-16V208c0-8.8-7.2-16-16-16zm96 0c-8.8 0-16 7.2-16 16V432c0 8.8 7.2 16 16 16s16-7.2 16-16V208c0-8.8-7.2-16-16-16zm96 0c-8.8 0-16 7.2-16 16V432c0 8.8 7.2 16 16 16s16-7.2 16-16V208c0-8.8-7.2-16-16-16z" />
+  </svg>
+);