fix(BurnDashboard): Alignment and capitalization (#318)

* Fix alignment in burn section * Remove trailing seperator and rounded corners at the end of burn category gauge * Make all category labels lower case except acronyms
ultrasoundmoney · Feb 14, 2024 · 6035345 · 6035345
1 parent 1872c32
commit 6035345
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 11 deletions.
diff --git a/src/mainsite/api/burn-categories.ts b/src/mainsite/api/burn-categories.ts
@@ -23,18 +23,18 @@ export const categoryId = [
 export type CategoryId = typeof categoryId[number];
 
 export const categoryDisplayMap: Record<CategoryId, string> = {
-  "l1-bridge": "L1 Bridge",
+  "l1-bridge": "L1 bridge",
   cex: "CEX",
-  defi: "DeFi",
-  gaming: "Gaming",
+  defi: "defi",
+  gaming: "gaming",
   l1: "L1",
   l2: "L2",
   mev: "MEV",
-  misc: "Misc (CEX, memecoins, etc)",
+  misc: "misc (CEX, memecoins, etc)",
   nft: "NFTs",
-  transfers: "ETH Transfers",
-  creations: "Contract creations",
-  woof: "Woof",
+  transfers: "ETH transfers",
+  creations: "contract creations",
+  woof: "woof",
 };
 
 export const getIsKnownCategory = (u: unknown): u is CategoryId =>

diff --git a/src/mainsite/components/BurnCategoryWidget.tsx b/src/mainsite/components/BurnCategoryWidget.tsx
@@ -395,10 +395,10 @@ const CategorySegmentItem: FC<{
 }> = ({ isLast, category, isFirst }) => (
   <>
     <CategorySegment
-      rounded={isFirst ? "left" : isLast ? "right" : undefined}
+      rounded={isFirst ? "left" : undefined}
       {...category}
     />
-    <div className="z-10 w-0.5 h-2 bg-slateus-500"></div>
+    {!isLast && <div className="z-10 w-0.5 h-2 bg-slateus-500"></div>}
   </>
 );
 
@@ -574,6 +574,7 @@ const BurnCategoryWidget: FC<Props> = ({ onClickTimeFrame, timeFrame }) => {
 
   return (
     <BurnGroupBase
+      backgroundClassName="h-[508px]"
       onClickTimeFrame={onClickTimeFrame}
       title="burn categories"
       timeFrame={timeFrame}

diff --git a/src/mainsite/components/BurnRecords.tsx b/src/mainsite/components/BurnRecords.tsx
@@ -81,9 +81,9 @@ const BurnRecords: FC<Props> = ({ onClickTimeFrame, timeFrame}) => {
       <div
         className={`
           mt-4 -mr-3 flex
-          h-60 flex-col
+          h-72 flex-col
           gap-y-6
-          overflow-y-auto md:h-64
+          overflow-y-auto md:h-72
           ${scrollbarStyles["styled-scrollbar-vertical"]}
           ${scrollbarStyles["styled-scrollbar"]}
         `}