From 60353455d7a6b9df4fbe98e23f6ee7a0a494f4c3 Mon Sep 17 00:00:00 2001
From: christn <c.k.e.koopmann@gmail.com>
Date: Wed, 14 Feb 2024 15:39:28 +0800
Subject: [PATCH] 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
---
 src/mainsite/api/burn-categories.ts            | 14 +++++++-------
 src/mainsite/components/BurnCategoryWidget.tsx |  5 +++--
 src/mainsite/components/BurnRecords.tsx        |  4 ++--
 3 files changed, 12 insertions(+), 11 deletions(-)

diff --git a/src/mainsite/api/burn-categories.ts b/src/mainsite/api/burn-categories.ts
index c148a8e8..793d1b21 100644
--- 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
index 01540542..09c60f11 100644
--- 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
index dc9aa4e0..b7497e00 100644
--- 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"]}
         `}