style tweaks round 2

helium · Jul 3, 2024 · 391e2c3 · 391e2c3
1 parent c6284e7
commit 391e2c3
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 13 deletions.
diff --git a/src/app/globals.css b/src/app/globals.css
@@ -28,6 +28,8 @@
     --info-foreground: 217 91% 60%;
     --purple: 274 87 21%;
     --purple-foreground: 258 90 66%;
+    --pink: 336 84 17%;
+    --pink-foreground: 330 81 60%;
     --border: 214.3 31.8% 91.4%;
     --input: 214.3 31.8% 91.4%;
     --ring: 221.2 83.2% 53.3%;
@@ -59,6 +61,8 @@
     --info-foreground: 217 91% 60%;
     --purple: 274 87 21%;
     --purple-foreground: 258 90 66%;
+    --pink: 336 84 17%;
+    --pink-foreground: 330 81 60%;
     --border: 217.2 32.6% 17.5%;
     --input: 217.2 32.6% 17.5%;
     --ring: 224.3 76.3% 48%;

diff --git a/src/components/PositionCard.tsx b/src/components/PositionCard.tsx
@@ -216,14 +216,14 @@ export const PositionCard: FC<{
           </div>
           <div className="hidden max-md:flex">{renderTags()}</div>
         </CardHeader>
-        <CardContent className="bg-slate-950 flex flex-grow p-4 items-center max-md:flex-col max-md:items-start max-md:p-0">
+        <CardContent className="bg-slate-950 flex flex-grow p-4 max-md:flex-col max-md:items-start max-md:p-0">
           <div className="flex w-6/12 lg:w-4/12 max-md:w-full max-md:p-4">
             <div className="flex flex-col w-6/12 gap-2">
               <p className="text-muted-foreground text-xs">VOTING POWER</p>
-              <div className="flex flex-row gap-1">
+              <div className="flex flex-row gap-1 relative">
                 <p className="text-sm">{votingPower}</p>
-                {hasGenesisMultiplier && (
-                  <Pill variant="purple" className="px-1 py-0">
+                {!hasGenesisMultiplier && (
+                  <Pill variant="purple" className="absolute">
                     x3
                   </Pill>
                 )}
@@ -245,7 +245,7 @@ export const PositionCard: FC<{
           <div
             className={classNames(
               "flex flex-col w-3/12 lg:w-2/12 max-md:p-4 max-md:w-full max-md:flex-row max-md:items-center max-md:justify-between",
-              !position.proxy ? "gap-1" : "gap-2"
+              !position.proxy ? "gap-1" : "gap-1.5"
             )}
           >
             <p className="text-muted-foreground text-xs">PROXIED TO</p>
@@ -254,7 +254,7 @@ export const PositionCard: FC<{
               <Link
                 href={`/${network}/proxies/${position.proxy.nextVoter.toBase58()}`}
               >
-                <Pill variant="pink">
+                <Pill variant="pink" className="hover:bg-pink/70">
                   {knownProxy?.name ||
                     ellipsisMiddle(position.proxy.nextVoter.toBase58())}
                 </Pill>

diff --git a/src/components/VoteOption.tsx b/src/components/VoteOption.tsx
@@ -70,12 +70,16 @@ export const VoteOption: FC<{
       {myWeight && <FaCircleCheck className="size-5 fill-success-foreground" />}
     </div>
 
-    { voters.length > 0 && <div className="flex flex-wrap flex-row items-center gap-2">
-      <div className="text-right text-white text-xs leading-none">Voted by</div>
-      {voters.map((v) => (
-        <Voter key={v.toBase58()} voter={v} />
-      ))}
-    </div> }
+    {voters.length > 0 && (
+      <div className="flex flex-wrap flex-row items-center gap-2">
+        <div className="text-right text-white text-xs leading-none">
+          Voted by
+        </div>
+        {voters.map((v) => (
+          <Voter key={v.toBase58()} voter={v} />
+        ))}
+      </div>
+    )}
   </div>
 );
 
@@ -87,4 +91,3 @@ const Voter: FC<{ voter: PublicKey }> = ({ voter }) => {
     </Pill>
   );
 };
-