From c89a2170a4b50afeed4b0e66977146d1a94afedb Mon Sep 17 00:00:00 2001
From: Hunter Chang <716376+ChangoMan@users.noreply.github.com>
Date: Thu, 29 Aug 2024 00:01:37 +0800
Subject: [PATCH] style: Style admin rating stars. Add count to tabs. (#68)

---
 .../app/admin/_components/SubmissionCard.tsx  | 31 +++++++++++--------
 .../admin/_components/SubmissionComments.tsx  |  2 +-
 .../app/admin/_components/SubmissionTabs.tsx  | 13 ++++++--
 .../admin/_components/submission-rating.css   | 11 +++++++
 4 files changed, 41 insertions(+), 16 deletions(-)
 create mode 100644 packages/nextjs/app/admin/_components/submission-rating.css

diff --git a/packages/nextjs/app/admin/_components/SubmissionCard.tsx b/packages/nextjs/app/admin/_components/SubmissionCard.tsx
index 1e2907e..e3a66d4 100644
--- a/packages/nextjs/app/admin/_components/SubmissionCard.tsx
+++ b/packages/nextjs/app/admin/_components/SubmissionCard.tsx
@@ -2,6 +2,7 @@
 
 import { useRouter } from "next/navigation";
 import { SubmissionComments } from "./SubmissionComments";
+import "./submission-rating.css";
 import { useMutation } from "@tanstack/react-query";
 import { useAccount } from "wagmi";
 import { Address } from "~~/components/scaffold-eth";
@@ -83,7 +84,7 @@ export const SubmissionCard = ({ submission }: { submission: Submission }) => {
   const telegramUser = submission.telegram?.replace("@", "");
 
   return (
-    <div key={submission.id} className="card bg-secondary text-secondary-content border border-primary rounded-none">
+    <div key={submission.id} className="card bg-base-200 text-secondary-content border border-gray-300 rounded-none">
       <div className="card-body p-4">
         <h2 className="card-title mb-3 xl:text-2xl">{submission.title}</h2>
         <div className="flex flex-wrap justify-between items-center gap-4">
@@ -162,7 +163,7 @@ export const SubmissionCard = ({ submission }: { submission: Submission }) => {
         <p>{submission.description}</p>
         {submission.feedback && <p>Extensions feedback: {submission.feedback}</p>}
 
-        <div className="flex items-center">
+        <div className="flex items-center justify-between">
           <div className="rating flex items-center">
             <input
               type="radio"
@@ -176,26 +177,30 @@ export const SubmissionCard = ({ submission }: { submission: Submission }) => {
               <input
                 type="radio"
                 name={`rating_${submission.id}`}
-                className="mask mask-star"
+                className="mask mask-star-2 star bg-amber-500 peer peer-hover:bg-amber-400"
                 title={(i + 1).toString()}
                 checked={score === i + 1}
                 key={i}
                 onChange={() => vote(i + 1)}
               />
             ))}
-            {score > 0 && (
-              <label className="cursor-pointer underline text-sm ml-3" htmlFor={`rating_${submission.id}_0`}>
-                Clear
-              </label>
-            )}
           </div>
+          {score > 0 && (
+            <label
+              className="cursor-pointer underline text-sm ml-3 hover:no-underline"
+              htmlFor={`rating_${submission.id}_0`}
+            >
+              Clear
+            </label>
+          )}
         </div>
 
-        <SubmissionComments submission={submission} />
-
-        <div className="badge badge-accent flex flex-col p-8 border border-accent-content">
-          <div className="text-2xl font-bold">{scoreAvg}</div>
-          <div>{submission.votes.length} votes</div>
+        <div className="mt-4 flex items-center justify-between">
+          <div className="badge badge-accent flex flex-col shrink-0 p-8 border border-accent-content">
+            <div className="text-2xl font-bold">{scoreAvg}</div>
+            <div>{submission.votes.length} votes</div>
+          </div>
+          <SubmissionComments submission={submission} />
         </div>
       </div>
     </div>
diff --git a/packages/nextjs/app/admin/_components/SubmissionComments.tsx b/packages/nextjs/app/admin/_components/SubmissionComments.tsx
index bbbcd59..fff593c 100644
--- a/packages/nextjs/app/admin/_components/SubmissionComments.tsx
+++ b/packages/nextjs/app/admin/_components/SubmissionComments.tsx
@@ -47,7 +47,7 @@ export const SubmissionComments = ({ submission }: { submission: Submission }) =
   };
 
   return (
-    <div className="drawer drawer-end">
+    <div className="drawer drawer-end w-auto">
       <input id={`comments_drawer_${submission.id}`} type="checkbox" className="drawer-toggle" />
       <div className="drawer-content">
         <label
diff --git a/packages/nextjs/app/admin/_components/SubmissionTabs.tsx b/packages/nextjs/app/admin/_components/SubmissionTabs.tsx
index 67d2d80..10cc007 100644
--- a/packages/nextjs/app/admin/_components/SubmissionTabs.tsx
+++ b/packages/nextjs/app/admin/_components/SubmissionTabs.tsx
@@ -28,6 +28,9 @@ export const SubmissionTabs = ({ submissions }: { submissions: Submission[] }) =
     },
   );
 
+  const votedLabel = connectedAddress ? `Voted (${voted.length})` : "Voted (-)";
+  const notVotedLabel = connectedAddress ? `Not Voted (${notVoted.length})` : "Not Voted (-)";
+
   return (
     <div className="max-w-7xl container mx-auto px-6">
       <div role="tablist" className="tabs tabs-bordered tabs-lg">
@@ -36,7 +39,7 @@ export const SubmissionTabs = ({ submissions }: { submissions: Submission[] }) =
           name="submission_tabs"
           role="tab"
           className="tab whitespace-nowrap"
-          aria-label="Not Voted"
+          aria-label={notVotedLabel}
           defaultChecked
         />
         <div role="tabpanel" className="tab-content py-6">
@@ -55,7 +58,13 @@ export const SubmissionTabs = ({ submissions }: { submissions: Submission[] }) =
           </div>
         </div>
 
-        <input type="radio" name="submission_tabs" role="tab" className="tab whitespace-nowrap" aria-label="Voted" />
+        <input
+          type="radio"
+          name="submission_tabs"
+          role="tab"
+          className="tab whitespace-nowrap"
+          aria-label={votedLabel}
+        />
         <div role="tabpanel" className="tab-content py-6">
           <div className="grid gap-6 md:grid-cols-2 xl:grid-cols-3">
             {voted.map(submission => {
diff --git a/packages/nextjs/app/admin/_components/submission-rating.css b/packages/nextjs/app/admin/_components/submission-rating.css
new file mode 100644
index 0000000..506a99b
--- /dev/null
+++ b/packages/nextjs/app/admin/_components/submission-rating.css
@@ -0,0 +1,11 @@
+.rating .rating-hidden  {
+    @apply w-0;
+}
+
+.rating:hover .star {
+    @apply bg-amber-500;
+}
+
+.rating:hover .star.peer:hover ~ .peer-hover\:bg-amber-400 {
+    @apply bg-amber-500 bg-opacity-20;
+}
\ No newline at end of file