From 7f9d28c4e146f1c37c7d5ec0dcea8f4a90949f62 Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Date: Wed, 1 Nov 2023 23:30:33 -0300
Subject: [PATCH] Fixed market card design

---
 src/frontend/src/components/ui/button.tsx     |   1 +
 src/frontend/src/components/ui/card.tsx       |   2 +-
 .../StorePage/components/market-card.tsx      | 161 ++++++++----------
 src/frontend/src/style/applies.css            |   8 +-
 4 files changed, 76 insertions(+), 96 deletions(-)

diff --git a/src/frontend/src/components/ui/button.tsx b/src/frontend/src/components/ui/button.tsx
index becc8d5f1..031e7527c 100644
--- a/src/frontend/src/components/ui/button.tsx
+++ b/src/frontend/src/components/ui/button.tsx
@@ -23,6 +23,7 @@ const buttonVariants = cva(
       size: {
         default: "h-10 py-2 px-4",
         sm: "h-9 px-3 rounded-md",
+        xs: "py-1 px-1 rounded-md",
         lg: "h-11 px-8 rounded-md",
       },
     },
diff --git a/src/frontend/src/components/ui/card.tsx b/src/frontend/src/components/ui/card.tsx
index c904310cd..459396f46 100644
--- a/src/frontend/src/components/ui/card.tsx
+++ b/src/frontend/src/components/ui/card.tsx
@@ -8,7 +8,7 @@ const Card = React.forwardRef<
   <div
     ref={ref}
     className={cn(
-      "flex flex-col justify-between rounded-lg border bg-card text-card-foreground shadow-sm transition-all hover:shadow-lg",
+      "flex flex-col justify-between rounded-lg border bg-muted text-card-foreground shadow-sm transition-all hover:shadow-lg",
       className
     )}
     {...props}
diff --git a/src/frontend/src/pages/StorePage/components/market-card.tsx b/src/frontend/src/pages/StorePage/components/market-card.tsx
index 1bca8e4c9..a1559e46d 100644
--- a/src/frontend/src/pages/StorePage/components/market-card.tsx
+++ b/src/frontend/src/pages/StorePage/components/market-card.tsx
@@ -1,7 +1,6 @@
 import { useContext, useEffect, useRef, useState } from "react";
 import ShadTooltip from "../../../components/ShadTooltipComponent";
 import IconComponent from "../../../components/genericIconComponent";
-import ElementStack from "../../../components/stackedComponents";
 import { Badge } from "../../../components/ui/badge";
 import { Button } from "../../../components/ui/button";
 import {
@@ -125,9 +124,29 @@ export const MarketCardComponent = ({ data }: { data: storeComponent }) => {
               <span className="flex w-full items-center gap-2 word-break-break-word">
                 {data.name}
               </span>
-              <Badge size="sm" variant="gray">
-                Free
-              </Badge>
+              <div className="flex gap-3">
+                <ShadTooltip content="Components">
+                  <span className="flex items-center gap-1.5 text-xs text-muted-foreground">
+                    <IconComponent name="ToyBrick" className="h-4 w-4" />
+                    {totalComponentsMetadata()}
+                  </span>
+                </ShadTooltip>
+                <ShadTooltip content="Likes">
+                  <span className="flex items-center gap-1.5 text-xs text-muted-foreground">
+                    <IconComponent
+                      name="Heart"
+                      className={classNames("h-4 w-4 ")}
+                    />
+                    {likes_count ?? 0}
+                  </span>
+                </ShadTooltip>
+                <ShadTooltip content="Downloads">
+                  <span className="flex items-center gap-1.5 text-xs text-muted-foreground">
+                    <IconComponent name="DownloadCloud" className="h-4 w-4" />
+                    {data.downloads_count}
+                  </span>
+                </ShadTooltip>
+              </div>
             </CardTitle>
           </div>
           <CardDescription className="pb-2 pt-2">
@@ -139,103 +158,63 @@ export const MarketCardComponent = ({ data }: { data: storeComponent }) => {
       <CardFooter>
         <div className="flex w-full items-center justify-between gap-2">
           <div className="flex w-full flex-wrap items-end justify-between gap-2">
-            <div className=" flex items-center gap-3">
-              <ShadTooltip
-                styleClasses="bg-transparent border-none shadow-none"
-                side="right"
-                content={
-                  <div className="flex flex-wrap gap-1">
-                    {data.tags
-                      .sort((a, b) => a.name.length - b.name.length)
-                      .map((tag, index) => (
-                        <div className="">
-                          <Badge
-                            key={index}
-                            className="bg-card shadow-md"
-                            size="sm"
-                            variant="outline"
-                          >
-                            {tag.name}
-                          </Badge>
-                        </div>
-                      ))}
-                  </div>
-                }
-              >
-                <div className="pr-2 hover:opacity-40">
-                  {data.tags.length > 0 ? (
-                    <ElementStack>
-                      {data.tags.map((tag, index) => (
-                        <Badge
-                          key={index}
-                          size="md"
-                          className="bg-card"
-                          variant="outline"
-                        >
-                          {tag.name}
-                        </Badge>
-                      ))}
-                    </ElementStack>
-                  ) : (
-                    <Badge size="md" variant="outline">
-                      -
-                    </Badge>
-                  )}
-                </div>
-              </ShadTooltip>
-              <ShadTooltip content="Components">
-                <span className="flex items-center gap-1.5 text-xs text-foreground">
-                  <IconComponent name="ToyBrick" className="h-4 w-4" />
-                  {totalComponentsMetadata()}
-                </span>
-              </ShadTooltip>
-              <ShadTooltip content="Favorites">
-                <button
-                  onClick={handleLike}
-                  className="flex items-center gap-1.5 text-xs text-foreground"
+            <div className="flex w-full flex-1 flex-wrap gap-2">
+              {data.tags.length > 0 &&
+                data.tags.map((tag, index) => (
+                  <Badge
+                    key={index}
+                    size="md"
+                    className="bg-card"
+                    variant="outline"
+                  >
+                    {tag.name}
+                  </Badge>
+                ))}
+            </div>
+            <div className="flex gap-0.5">
+              <ShadTooltip content="Like">
+                <Button
+                  variant="ghost"
+                  size="xs"
+                  className="whitespace-nowrap"
+                  onClick={() => {
+                    handleLike();
+                  }}
                 >
                   <IconComponent
                     name="Heart"
                     className={classNames(
-                      "h-4 w-4 ",
+                      "h-6 w-6 p-0.5",
                       liked_by_user ? "fill-destructive stroke-destructive" : ""
                     )}
                   />
-                  {likes_count ?? 0}
-                </button>
+                </Button>
               </ShadTooltip>
-              <ShadTooltip content="Downloads">
-                <span className="flex items-center gap-1.5 text-xs text-foreground">
-                  <IconComponent name="DownloadCloud" className="h-4 w-4" />
-                  {data.downloads_count}
-                </span>
+              <ShadTooltip content="Add to Account">
+                <Button
+                  variant="ghost"
+                  size="xs"
+                  className="whitespace-nowrap"
+                  onClick={() => {
+                    if (loading) {
+                      return;
+                    }
+                    if (!added) {
+                      handleAdd();
+                    } else {
+                      handleInstall();
+                    }
+                  }}
+                >
+                  <IconComponent
+                    name={
+                      loading ? "Loader2" : added ? "GitBranchPlus" : "Plus"
+                    }
+                    className={"h-6 w-6" + (loading ? " animate-spin" : "")}
+                  />
+                </Button>
               </ShadTooltip>
             </div>
-            <Button
-              variant="outline"
-              size="sm"
-              className="whitespace-nowrap "
-              onClick={() => {
-                if (loading) {
-                  return;
-                }
-                if (!added) {
-                  handleAdd();
-                } else {
-                  handleInstall();
-                }
-              }}
-            >
-              <IconComponent
-                name={
-                  loading ? "Loader2" : added ? "GitBranchPlus" : "BookmarkPlus"
-                }
-                className={
-                  "main-page-nav-button" + (loading ? " animate-spin" : "")
-                }
-              />
-              {added ? "Use Template" : "Add to Account"}
-            </Button>
           </div>
         </div>
       </CardFooter>
diff --git a/src/frontend/src/style/applies.css b/src/frontend/src/style/applies.css
index aedb23c28..7c5c66ebe 100644
--- a/src/frontend/src/style/applies.css
+++ b/src/frontend/src/style/applies.css
@@ -205,15 +205,15 @@
   }
 
   .loading-page-panel {
-    @apply flex h-full w-full items-center justify-center bg-muted;
+    @apply flex h-full w-full items-center justify-center bg-background;
   }
 
   .main-page-panel {
-    @apply flex-max-width h-full flex-col overflow-auto bg-muted px-16;
+    @apply flex-max-width h-full flex-col overflow-auto bg-background px-16;
   }
 
   .admin-page-panel {
-    @apply flex-max-width h-full flex-col overflow-auto bg-muted px-16;
+    @apply flex-max-width h-full flex-col overflow-auto bg-background px-16;
   }
 
   .main-page-nav-arrangement {
@@ -241,7 +241,7 @@
   }
 
   .community-page-arrangement {
-    @apply flex-max-width h-full flex-col overflow-auto bg-muted px-16;
+    @apply flex-max-width h-full flex-col overflow-auto bg-background px-16;
   }
 
   .community-page-nav-arrangement {