fix(web): skeleton styling and small css fixes

Author: kemuru

web/src/pages/Courts/CourtDetails/Stats.tsx

@@ -86,7 +86,7 @@ const stats: IStat[] = [
   {
     title: "PNK redistributed",
     coinId: 0,
-    getText: (data) => formatPNK(data?.paidPNK, 18),
+    getText: (data) => formatPNK(data?.paidPNK),
     getSubtext: (data, coinPrice) => formatUSD(Number(formatUnitsWei(data?.paidPNK)) * (coinPrice ?? 0)),
     color: "purple",
     icon: PNKRedistributedIcon,

web/src/pages/Courts/CourtDetails/index.tsx

@@ -39,7 +39,7 @@ const StyledBreadcrumb = styled(Breadcrumb)`
 `;
 
 const StyledBreadcrumbSkeleton = styled.div`
-  margin-top: 16px;
+  margin-bottom: 12px;
 `;
 
 const CourtDetails: React.FC = () => {

web/src/styles/global-style.ts

@@ -98,4 +98,9 @@ export const GlobalStyle = createGlobalStyle`
       color: ${({ theme }) => theme.primaryText};
     }
   }
+
+  .react-loading-skeleton {
+    --base-color: ${({ theme }) => theme.skeletonBackground};
+    --highlight-color: ${({ theme }) => theme.skeletonHighlight};
+  }
 `;

web/src/styles/themes.ts

@@ -34,6 +34,9 @@ export const lightTheme = {
   tintPurple: "#F4F0FA",
 
   transitionSpeed: "0.25s",
+
+  skeletonBackground: "#EBEBEB",
+  skeletonHighlight: "#F5F5F5",
 };
 
 export const darkTheme = {
@@ -70,4 +73,7 @@ export const darkTheme = {
   tintPurple: "#2F0960",
 
   transitionSpeed: "0.25s",
+
+  skeletonBackground: "#3A2270",
+  skeletonHighlight: "#3E307C",
 };

web/src/utils/commify.ts

@@ -48,5 +48,7 @@ export function commify(value: string | number): string {
     }
   }
 
+  if (suffix === ".0") suffix = "";
+
   return negative + formatted.join(",") + suffix;
 }