Better taghelper color (genshinsim#2126)

* allow dbcard className override * add separators * restyle colors * tweak margin and colors * get rid of card border
soloxcx · Mar 24, 2024 · 17f26ed · 17f26ed
1 parent 149b6bf
commit 17f26ed
Show file tree

Hide file tree

Showing 7 changed files with 118 additions and 31 deletions.
diff --git a/ui/packages/components/package.json b/ui/packages/components/package.json
@@ -9,6 +9,7 @@
     "build-storybook": "storybook build"
   },
   "dependencies": {
+    "@radix-ui/react-separator": "^1.0.3",
     "@radix-ui/react-slot": "^1.0.2",
     "@radix-ui/react-toast": "^1.1.5",
     "class-variance-authority": "^0.7.0",

diff --git a/ui/packages/components/src/Cards/DBCard/DBCard.tsx b/ui/packages/components/src/Cards/DBCard/DBCard.tsx
@@ -1,18 +1,25 @@
 import tagData from "@gcsim/data/src/tags.json";
 import { db, model } from "@gcsim/types";
 import { Card, CardContent, CardFooter } from "../../common/ui/card";
+import { cn } from "../../lib/utils";
 import { AvatarCard } from "../AvatarCard/AvatarCard";
 import { CardBadge } from "../CardBadge/CardBadge";
 
 type DBCardProps = {
   entry: db.IEntry;
   skipTags?: number | number[];
+  className?: string;
 
   //optional send to simulator
   footer?: JSX.Element;
 };
 
-export const DBCard = ({ entry, footer, skipTags = 1 }: DBCardProps) => {
+export const DBCard = ({
+  entry,
+  footer,
+  className = "",
+  skipTags = 1,
+}: DBCardProps) => {
   const team: (model.ICharacter | null)[] = entry.summary?.team ?? [];
   if (team.length < 4) {
     const diff = 4 - team.length;
@@ -41,11 +48,13 @@ export const DBCard = ({ entry, footer, skipTags = 1 }: DBCardProps) => {
       />
     ));
 
+  const cc = cn("m-2 bg-slate-800 min-[1300px]:w-[1225px]", className);
+
   return (
-    <Card className="m-2 bg-slate-800 min-[1300px]:w-[1225px] ">
+    <Card className={cc}>
       <CardContent className="p-3 flex flex-col gap-y-2">
         <div className="flex flex-row flex-wrap gap-2 place-content-center">
-          <Card className="flex flex-col bg-slate-800 border-0 pt-1 min-[420px]:basis-0">
+          <Card className="flex flex-col bg-transparent border-0 pt-1 min-[420px]:basis-0">
             <AvatarCard chars={team} className="min-[420px]:w-[420px]" />
             <div className="flex flex-row flex-wrap gap-1 p-2 max-w-full justify-center">
               <CardBadge

diff --git a/ui/packages/components/src/common/ui/index.ts b/ui/packages/components/src/common/ui/index.ts
@@ -1,5 +1,6 @@
 export { Button } from "./button";
 export { Input } from "./input";
+export * from "./separator";
 export * from "./toast";
 export * from "./toaster";
 export * from "./use-toast";
diff --git a/ui/packages/components/src/common/ui/separator.tsx b/ui/packages/components/src/common/ui/separator.tsx
@@ -0,0 +1,29 @@
+import * as SeparatorPrimitive from "@radix-ui/react-separator";
+import * as React from "react";
+
+import { cn } from "../../lib/utils";
+
+const Separator = React.forwardRef<
+  React.ElementRef<typeof SeparatorPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
+>(
+  (
+    { className, orientation = "horizontal", decorative = true, ...props },
+    ref
+  ) => (
+    <SeparatorPrimitive.Root
+      ref={ref}
+      decorative={decorative}
+      orientation={orientation}
+      className={cn(
+        "shrink-0 bg-border",
+        orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
+        className
+      )}
+      {...props}
+    />
+  )
+);
+Separator.displayName = SeparatorPrimitive.Root.displayName;
+
+export { Separator };
diff --git a/ui/packages/storybook/src/stories/DBCard.stories.tsx b/ui/packages/storybook/src/stories/DBCard.stories.tsx
@@ -66,6 +66,18 @@ export const PrimaryMobile: Story = {
   },
 };
 
+export const BGOverride: Story = {
+  args: {
+    className: "bg-orange-600",
+    entry: dbEntries.data[0],
+    footer: (
+      <a href="#">
+        <Button className="bg-blue-700 opacity-90">Show Results Page</Button>
+      </a>
+    ),
+  },
+};
+
 const longDesc = _.merge(_.cloneDeep(dbEntries.data[0]), {
   description: `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ullamcorper eu felis vitae suscipit. Sed suscipit commodo lectus at rutrum. Integer dictum laoreet augue a tincidunt. Praesent rutrum nunc non sodales vulputate. Nunc eget purus tincidunt, euismod ligula nec, feugiat diam. Sed lobortis scelerisque nulla, at ultrices diam viverra quis. Pellentesque leo justo, venenatis id dapibus sit amet, mollis quis sem. Proin leo nunc, commodo a tempus non, vehicula id felis. Donec accumsan non odio at laoreet.
 

diff --git a/ui/packages/taghelper/src/App.tsx b/ui/packages/taghelper/src/App.tsx
@@ -1,5 +1,10 @@
-import { Button, DBCard, Toaster, useToast } from "@gcsim/components";
-import { Card } from "@gcsim/components/src/common/ui/card";
+import {
+  Button,
+  DBCard,
+  Separator,
+  Toaster,
+  useToast,
+} from "@gcsim/components";
 import "@gcsim/components/src/index.css";
 import { db } from "@gcsim/types";
 import axios from "axios";
@@ -102,13 +107,14 @@ function App({ id }: { id: string }) {
     .map((e, i) => {
       return (
         <DBCard
+          className="border-0"
           key={"entry-" + i}
           entry={e}
           skipTags={-1}
           footer={
-            <>
+            <div className="flex flex-row flex-wrap place-content-end mr-2 gap-4">
               <Button
-                className="bg-yellow-600 ml-auto mr-2"
+                className="bg-yellow-600"
                 onClick={() => {
                   copyReplace(e["_id"]);
                 }}
@@ -117,51 +123,59 @@ function App({ id }: { id: string }) {
               </Button>
               <a
                 href={"https://gcsim.app/db/" + e["_id"]}
-                className="mr-2"
                 target="_blank"
                 rel="noopener noreferrer"
               >
                 <Button className="bg-blue-600">Result Viewer</Button>
               </a>
-            </>
+            </div>
           }
         />
       );
     });
 
   return (
     <div className="flex flex-col place-items-center m-4">
-      <Card className="m-2 bg-green-900 text-white p-2 w-full flex flex-col place-items-center">
-        Showing entries with the same team for id: {id}
+      <div className="m-2 text-white p-2 w-full flex flex-col place-items-center">
+        <span className="text-lg font-semibold">
+          Showing entries with the same team for id: {id}
+        </span>
         {main !== null ? (
           <DBCard
+            className="bg-stone-800 border-0"
             entry={main}
             skipTags={-1}
             footer={
-              <a
-                href={"https://gcsim.app/db/" + id}
-                className=" ml-auto mr-2"
-                target="_blank"
-                rel="noopener noreferrer"
-              >
-                <Button className="bg-blue-600">Result Viewer</Button>
-              </a>
+              <div className="flex flex-row flex-wrap place-content-end mr-2 gap-4">
+                <Button className=" bg-red-600" onClick={() => copy("reject")}>
+                  Copy Reject
+                </Button>
+                <Button
+                  className="bg-green-600"
+                  onClick={() => copy("approve")}
+                >
+                  Copy Approve
+                </Button>
+                <a
+                  href={"https://gcsim.app/db/" + id}
+                  className=""
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  <Button className="bg-blue-600">Result Viewer</Button>
+                </a>
+              </div>
             }
           />
         ) : null}
-        <div className="w-full flex flex-row place-content-center">
-          <Button className=" bg-red-600" onClick={() => copy("reject")}>
-            Copy Reject
-          </Button>
-          <Button className="ml-4 bg-blue-600" onClick={() => copy("approve")}>
-            Copy Approve
-          </Button>
-        </div>
-      </Card>
-      <Card className="m-2 p-2 bg-blue-900 text-white w-full flex flex-col place-items-center">
-        <span>Existing sims with same characters</span>
+      </div>
+      <Separator />
+      <div className="m-2 p-2  text-white w-full flex flex-col place-items-center">
+        <span className="text-lg font-semibold">
+          Existing sims with same characters
+        </span>
         {rows.length > 0 ? rows : <div>Nothing found</div>}
-      </Card>
+      </div>
       <Toaster />
     </div>
   );

diff --git a/ui/yarn.lock b/ui/yarn.lock
@@ -4464,6 +4464,7 @@ __metadata:
   resolution: "@gcsim/components@workspace:packages/components"
   dependencies:
     "@chromatic-com/storybook": ^1.2.25
+    "@radix-ui/react-separator": ^1.0.3
     "@radix-ui/react-slot": ^1.0.2
     "@radix-ui/react-toast": ^1.1.5
     "@types/react": ^18.2.66
@@ -6866,6 +6867,26 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@radix-ui/react-separator@npm:^1.0.3":
+  version: 1.0.3
+  resolution: "@radix-ui/react-separator@npm:1.0.3"
+  dependencies:
+    "@babel/runtime": ^7.13.10
+    "@radix-ui/react-primitive": 1.0.3
+  peerDependencies:
+    "@types/react": "*"
+    "@types/react-dom": "*"
+    react: ^16.8 || ^17.0 || ^18.0
+    react-dom: ^16.8 || ^17.0 || ^18.0
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+    "@types/react-dom":
+      optional: true
+  checksum: 42f8c95e404de2ce9387040d78049808a48d423cd4c3bad8cca92c4b0bcbdcb3566b5b52a920d4e939a74b51188697f20a012221f0e630fc7f56de64096c15d2
+  languageName: node
+  linkType: hard
+
 "@radix-ui/react-slot@npm:1.0.2, @radix-ui/react-slot@npm:^1.0.2":
   version: 1.0.2
   resolution: "@radix-ui/react-slot@npm:1.0.2"