From 3a700576c816ee460f2b9a33aa53cf2c97403f20 Mon Sep 17 00:00:00 2001
From: ChinPTeo <58355994+ChinPTeo@users.noreply.github.com>
Date: Fri, 12 Aug 2022 01:39:31 +1000
Subject: [PATCH 1/3] trying out css

---
 src/Pages/DB/DB.tsx | 80 ++++++++++++++++++---------------------------
 1 file changed, 32 insertions(+), 48 deletions(-)

diff --git a/src/Pages/DB/DB.tsx b/src/Pages/DB/DB.tsx
index 0664734c..44acd058 100644
--- a/src/Pages/DB/DB.tsx
+++ b/src/Pages/DB/DB.tsx
@@ -11,26 +11,35 @@ const charNames = IngameNamesJson.English.character_names;
 type CharEntry = [keyof typeof charNames, string];
 
 function CharCard({ charEntry }: { charEntry: CharEntry }) {
+  const tooLongNames = [
+    "Kaedehara Kazuha",
+    "Kamisato Ayaka",
+    "Raiden Shogun",
+    "Sangonomiya Kokomi",
+    "Kamisato Ayato",
+    "Shikanoin Heizou",
+    "Traveler (Anemo)",
+    "Traveler (Geo)",
+    "Traveler (Electro)",
+    "Traveler (Pyro)",
+  ];
   const [_, setLocation] = useLocation();
   const [shortName, name] = charEntry;
   return (
     <div
-      className="hover:bg-gray-600 border border-gray-700 hover:border-gray-400 rounded-md relative"
-      style={{ display: "inline-block", margin: "5px" }}
+      className="hover:bg-gray-600 border border-gray-700 hover:border-gray-400 rounded-md max-h"
       onClick={() => setLocation(`/db/${shortName}`)}
     >
       <img
         src={`/images/avatar/${shortName}.png`}
         alt={name}
-        className="w-16"
-        style={{ margin: "auto" }}
+        className="margin-auto"
       />
-      <div
-        className="top-0 right-0 text-sm font-semibold text-grey-300"
-        style={{ textAlign: "center" }}
-      >
-        {name}
-      </div>
+      {tooLongNames.includes(name) ? (
+        <div className="text-xs   text-center">{name}</div>
+      ) : (
+        <div className="text-md   text-center">{name}</div>
+      )}
     </div>
   );
 }
@@ -39,42 +48,19 @@ const LOCALSTORAGE_DISC_KEY = "gcsim-db-disclaimer-show";
 
 function CharsView({ characters }: { characters: CharEntry[] }) {
   // TODO consider removing this, idk what does it do lol
-  const parentRef = React.useRef<HTMLDivElement>(null!);
   return (
     <div className="h-full w-full pl-2 pr-2">
-      <AutoSizer defaultHeight={100}>
-        {({ height, width }) => (
+      <div className="grid grid-cols-12 gap-2">
+        {characters.map((entry) => (
           <div
-            ref={parentRef}
-            style={{
-              minHeight: "100px",
-              height: height,
-              width: width,
-              overflow: "auto",
-              position: "relative",
-            }}
-            id="resize-inner"
+            key={entry[0]}
+            className=""
+            // ref={virtualRow.measureRef}
           >
-            <div
-              className="ListInner"
-              style={{
-                width: width - 50,
-                position: "relative",
-              }}
-            >
-              {characters.map(entry => (
-                <div
-                  key={entry[0]}
-                  style={{ display: "inline-block" }}
-                  // ref={virtualRow.measureRef}
-                >
-                  <CharCard charEntry={entry} />
-                </div>
-              ))}
-            </div>
+            <CharCard charEntry={entry} />
           </div>
-        )}
-      </AutoSizer>
+        ))}
+      </div>
     </div>
   );
 }
@@ -103,19 +89,16 @@ export function DB() {
       )
     : charsEntries;
   return (
-    <main className="flex flex-col h-full m-2 w-full xs:w-full sm:w-[640px] hd:w-full wide:w-[1160px] ml-auto mr-auto ">
+    <div className="flex flex-col h-full m-2 w-full xs:w-full sm:w-[640px] hd:w-full wide:w-[1160px] ml-auto mr-auto ">
       <LolDanger />
       <div className="flex flex-row items-center">
-        <div
-          className="ml-auto flex flex-row gap-x-1"
-          style={{ marginLeft: "0", marginRight: "auto" }}
-        >
+        <div className=" flex flex-row gap-x-1">
           <ShowFaqsButton setShowDisclaimer={setShowDisclaimer} />
           <InputGroup
             leftIcon="search"
             placeholder={t("db.type_to_search")}
             value={searchString}
-            onChange={e => setSearchString(e.target.value)}
+            onChange={(e) => setSearchString(e.target.value)}
           />
         </div>
       </div>
@@ -128,9 +111,10 @@ export function DB() {
         onClose={() => setShowDisclaimer(false)}
         hideAlways={hideDisclaimer}
       />
-    </main>
+    </div>
   );
 }
+
 function ShowFaqsButton({
   setShowDisclaimer,
 }: {

From c4ba871a0672c4a5cc0265b8db39abf6940fb531 Mon Sep 17 00:00:00 2001
From: ChinPTeo <58355994+ChinPTeo@users.noreply.github.com>
Date: Fri, 12 Aug 2022 02:03:15 +1000
Subject: [PATCH 2/3] trying out more css

---
 src/Pages/DB/DB.tsx | 64 +++++++++++++++++++++++++++++++++++----------
 1 file changed, 50 insertions(+), 14 deletions(-)

diff --git a/src/Pages/DB/DB.tsx b/src/Pages/DB/DB.tsx
index 44acd058..b123530d 100644
--- a/src/Pages/DB/DB.tsx
+++ b/src/Pages/DB/DB.tsx
@@ -23,23 +23,59 @@ function CharCard({ charEntry }: { charEntry: CharEntry }) {
     "Traveler (Electro)",
     "Traveler (Pyro)",
   ];
+  const rareCharNames = [
+    "amber",
+    "barbara",
+    "beidou",
+    "bennett",
+    "chongyun",
+    "diona",
+    "fischl",
+    "gorou",
+    "kaeya",
+    "kujousara",
+    "lisa",
+    "kuki",
+    "ningguang",
+    "noelle",
+    "razor",
+    "heizou",
+    "rosaria",
+    "sucrose",
+    "sayu",
+    "thoma",
+    "xiangling",
+    "xinyan",
+    "xingqiu",
+    "yanfei",
+    "yunjin",
+  ];
+
   const [_, setLocation] = useLocation();
   const [shortName, name] = charEntry;
+  console.log(name);
+
+  const legendaryCss = "hover:bg-opacity-30     bg-opacity-60 bg-[#FFB13F] ";
+  const rareCss = "hover:bg-opacity-30     bg-opacity-60 bg-[#D28FD6]";
   return (
-    <div
-      className="hover:bg-gray-600 border border-gray-700 hover:border-gray-400 rounded-md max-h"
-      onClick={() => setLocation(`/db/${shortName}`)}
-    >
-      <img
-        src={`/images/avatar/${shortName}.png`}
-        alt={name}
-        className="margin-auto"
-      />
-      {tooLongNames.includes(name) ? (
-        <div className="text-xs   text-center">{name}</div>
-      ) : (
-        <div className="text-md   text-center">{name}</div>
-      )}
+    <div className=" border-gray-700 border-2  rounded-md">
+      <div
+        className={rareCharNames.includes(shortName) ? rareCss : legendaryCss}
+        onClick={() => setLocation(`/db/${shortName}`)}
+      >
+        <img
+          src={`/images/avatar/${shortName}.png`}
+          alt={name}
+          className="margin-auto"
+        />
+      </div>
+      <div>
+        {tooLongNames.includes(name) ? (
+          <div className="text-xs   text-center">{name}</div>
+        ) : (
+          <div className="text-md   text-center">{name}</div>
+        )}
+      </div>
     </div>
   );
 }

From e63532ed4da6df7534e093e22db99cc54a132953 Mon Sep 17 00:00:00 2001
From: ChinPTeo <58355994+ChinPTeo@users.noreply.github.com>
Date: Wed, 17 Aug 2022 00:14:47 +1000
Subject: [PATCH 3/3] Improved styling

---
 src/Pages/DB/DB.tsx | 79 +++++++++++++++++++++------------------------
 1 file changed, 37 insertions(+), 42 deletions(-)

diff --git a/src/Pages/DB/DB.tsx b/src/Pages/DB/DB.tsx
index b123530d..2103a611 100644
--- a/src/Pages/DB/DB.tsx
+++ b/src/Pages/DB/DB.tsx
@@ -3,7 +3,6 @@ import React from "react";
 import { useLocation } from "wouter";
 import { useTranslation } from "react-i18next";
 import { Disclaimer } from "./Disclaimer";
-import AutoSizer from "react-virtualized-auto-sizer";
 import IngameNamesJson from "../../../public/locales/IngameNames.json";
 
 // todo use translation for char names
@@ -53,28 +52,33 @@ function CharCard({ charEntry }: { charEntry: CharEntry }) {
 
   const [_, setLocation] = useLocation();
   const [shortName, name] = charEntry;
-  console.log(name);
 
-  const legendaryCss = "hover:bg-opacity-30     bg-opacity-60 bg-[#FFB13F] ";
-  const rareCss = "hover:bg-opacity-30     bg-opacity-60 bg-[#D28FD6]";
+  const legendaryCss = "bg-opacity-60 bg-[#FFB13F] ";
+  const rareCss = "bg-opacity-60 bg-[#D28FD6]";
   return (
     <div className=" border-gray-700 border-2  rounded-md">
-      <div
-        className={rareCharNames.includes(shortName) ? rareCss : legendaryCss}
-        onClick={() => setLocation(`/db/${shortName}`)}
-      >
-        <img
-          src={`/images/avatar/${shortName}.png`}
-          alt={name}
-          className="margin-auto"
-        />
-      </div>
-      <div>
-        {tooLongNames.includes(name) ? (
-          <div className="text-xs   text-center">{name}</div>
-        ) : (
-          <div className="text-md   text-center">{name}</div>
-        )}
+      <div className="hover:opacity-50">
+        <div
+          className={rareCharNames.includes(shortName) ? rareCss : legendaryCss}
+          onClick={() => setLocation(`/db/${shortName}`)}
+        >
+          <img
+            src={`/images/avatar/${shortName}.png`}
+            alt={name}
+            className="margin-auto"
+          />
+        </div>
+        <div>
+          {tooLongNames.includes(name) ? (
+            <div className="text-xs flex items-center justify-center text-center h-8 bg-slate-600 ">
+              {name}
+            </div>
+          ) : (
+            <div className="text-md flex items-center justify-center text-center h-8 bg-slate-600 ">
+              {name}
+            </div>
+          )}
+        </div>
       </div>
     </div>
   );
@@ -83,16 +87,11 @@ function CharCard({ charEntry }: { charEntry: CharEntry }) {
 const LOCALSTORAGE_DISC_KEY = "gcsim-db-disclaimer-show";
 
 function CharsView({ characters }: { characters: CharEntry[] }) {
-  // TODO consider removing this, idk what does it do lol
   return (
-    <div className="h-full w-full pl-2 pr-2">
-      <div className="grid grid-cols-12 gap-2">
+    <div className="p-4">
+      <div className="grid grid-cols-3 gap-2 wide:grid-cols-12">
         {characters.map((entry) => (
-          <div
-            key={entry[0]}
-            className=""
-            // ref={virtualRow.measureRef}
-          >
+          <div key={entry[0]}>
             <CharCard charEntry={entry} />
           </div>
         ))}
@@ -125,23 +124,19 @@ export function DB() {
       )
     : charsEntries;
   return (
-    <div className="flex flex-col h-full m-2 w-full xs:w-full sm:w-[640px] hd:w-full wide:w-[1160px] ml-auto mr-auto ">
+    <div className="flex flex-col  m-2 w-full xs:w-full sm:w-[640px] hd:w-full wide:w-[1160px] ml-auto mr-auto ">
       <LolDanger />
-      <div className="flex flex-row items-center">
-        <div className=" flex flex-row gap-x-1">
-          <ShowFaqsButton setShowDisclaimer={setShowDisclaimer} />
-          <InputGroup
-            leftIcon="search"
-            placeholder={t("db.type_to_search")}
-            value={searchString}
-            onChange={(e) => setSearchString(e.target.value)}
-          />
-        </div>
+      <div className=" flex flex-row gap-x-1">
+        <ShowFaqsButton setShowDisclaimer={setShowDisclaimer} />
+        <InputGroup
+          leftIcon="search"
+          placeholder={t("db.type_to_search")}
+          value={searchString}
+          onChange={(e) => setSearchString(e.target.value)}
+        />
       </div>
       <div className="border-b-2 mt-2 border-gray-300" />
-      <div className="p-2 grow ">
-        <CharsView characters={filteredChars} />
-      </div>
+      <CharsView characters={filteredChars} />
       <Disclaimer
         isOpen={showDisclaimer}
         onClose={() => setShowDisclaimer(false)}