fix: table header

forbole · Mar 8, 2024 · c9590aa · c9590aa
1 parent 2972f0d
commit c9590aa
Show file tree

Hide file tree

Showing 3 changed files with 62 additions and 44 deletions.
diff --git a/src/features/core/components/table.tsx b/src/features/core/components/table.tsx
@@ -4,37 +4,48 @@ import { chevron } from "../lib/icons";
 
 type Props<SortMethod> = PropsWithChildren & {
   onSort?: (method: SortMethod) => void;
+  rigthAlign?: boolean;
   sort?: SortMethod;
   sorting?: [string, string];
 };
 
 export const HeaderTitleBase = <SortMethod extends string>({
   children,
   onSort,
+  rigthAlign,
   sort,
   sorting,
 }: Props<SortMethod>) => {
   const sortingOrder = ((sorting || []) as string[]).concat(["none"]);
   const sortingIndex = sort ? sortingOrder.indexOf(sort) : -1;
 
   return (
-    <div className="text-[14px] font-normal leading-[14px] tracking-wider">
-      <span className="relative">
-        {children}{" "}
-        {!!onSort && !!sort && (
-          <button
-            className="absolute right-[-16px] top-[6px] cursor-pointer"
+    <div
+      className={[
+        "flex flex-row text-[14px] font-normal leading-[14px] tracking-wider",
+        rigthAlign ? "justify-end" : "",
+      ].join(" ")}
+    >
+      <button
+        className={[
+          "flex flex-row items-center gap-[8px]",
+          onSort ? "cursor-pointer" : "",
+        ].join(" ")}
+        onClick={() => {
+          if (!onSort || !sort) return;
+
+          const nextIndex =
+            (1 + sortingOrder.indexOf(sort)) % sortingOrder.length;
+
+          const nextSorting = sortingOrder[nextIndex];
+
+          onSort?.(nextSorting as SortMethod);
+        }}
+      >
+        <span>{children}</span>
+        {onSort && (
+          <span
             dangerouslySetInnerHTML={{ __html: chevron }}
-            onClick={() => {
-              if (!onSort) return;
-
-              const nextIndex =
-                (1 + sortingOrder.indexOf(sort)) % sortingOrder.length;
-
-              const nextSorting = sortingOrder[nextIndex];
-
-              onSort?.(nextSorting as SortMethod);
-            }}
             style={{
               rotate: (() => {
                 if (sortingIndex === 0) {
@@ -46,7 +57,7 @@ export const HeaderTitleBase = <SortMethod extends string>({
             }}
           />
         )}
-      </span>
+      </button>
     </div>
   );
 };
diff --git a/src/features/staking/components/delegation-details.tsx b/src/features/staking/components/delegation-details.tsx
@@ -67,13 +67,13 @@ export const DetailsTrigger = ({
 
 const gridStyle = {
   gap: "16px",
-  gridTemplateColumns: "60px 1.5fr repeat(4, 1fr)",
+  gridTemplateColumns: "2fr repeat(4, 1fr)",
   minWidth: 800,
   overflow: "auto",
 };
 
 const rowStyle =
-  "grid w-full items-center justify-between gap-2 p-2 mb-[24px] last:mb-[0px] bg-black rounded-[8px]";
+  "grid w-full items-center justify-between gap-2 p-2 mb-[16px] last:mb-[0px] bg-black rounded-[8px]";
 
 const wrapperStyle =
   "w-full overflow-auto rounded-[24px] bg-bg-600 pb-4 text-typo-100 px-[16px]";
@@ -112,15 +112,15 @@ const DelegationRowBase = ({
 
   return (
     <div className={rowStyle} style={gridStyle}>
-      <div className="flex items-center justify-start">
-        <img
-          alt="Validator logo"
-          className="block w-[50px] rounded-full"
-          src={logo}
-          style={{ height: 50, width: 50 }}
-        />
-      </div>
       <div className="flex flex-1 flex-row justify-start gap-4">
+        <div className="flex items-center justify-start">
+          <img
+            alt="Validator logo"
+            className="block w-[50px] rounded-full"
+            src={logo}
+            style={{ height: 50, width: 50 }}
+          />
+        </div>
         <div className="flex flex-col justify-start gap-2 text-left">
           <div className="text-[14px] font-bold leading-[20px]">
             {validator?.description.moniker || ""}
@@ -288,7 +288,7 @@ const DelegationHeaderTitle = HeaderTitleBase<DelegationSortMethod>;
 const UnbondingHeaderTitle = HeaderTitleBase<SortMethod>;
 
 const headerStyle =
-  "grid w-full items-center justify-between gap-2 p-4 uppercase";
+  "grid w-full items-center justify-between gap-2 py-4 px-2 uppercase";
 
 const DelegationDetails = () => {
   const stakingRef = useStaking();
@@ -357,24 +357,26 @@ const DelegationDetails = () => {
           return (
             <div className={wrapperStyle}>
               <div className={headerStyle} style={gridStyle}>
-                <div />
                 <DelegationHeaderTitle>Delegations</DelegationHeaderTitle>
                 <DelegationHeaderTitle
                   onSort={setDelegationsSortMethod}
+                  rigthAlign
                   sort={delegationsSortMethod}
                   sorting={["staked-asc", "staked-desc"]}
                 >
-                  <div className="text-right">Staked Amount</div>
+                  Staked Amount
                 </DelegationHeaderTitle>
                 <DelegationHeaderTitle
                   onSort={setDelegationsSortMethod}
+                  rigthAlign
                   sort={delegationsSortMethod}
                   sorting={["commission-asc", "commission-desc"]}
                 >
                   <div className="text-right">Commission</div>
                 </DelegationHeaderTitle>
                 <DelegationHeaderTitle
                   onSort={setDelegationsSortMethod}
+                  rigthAlign
                   sort={delegationsSortMethod}
                   sorting={["rewards-asc", "rewards-desc"]}
                 >
@@ -423,20 +425,23 @@ const DelegationDetails = () => {
           return (
             <div className={wrapperStyle}>
               <div className={headerStyle} style={gridStyle}>
-                <div />
-                <UnbondingHeaderTitle>Unstakings</UnbondingHeaderTitle>
+                <UnbondingHeaderTitle rigthAlign>
+                  Unstakings
+                </UnbondingHeaderTitle>
                 <UnbondingHeaderTitle
                   onSort={setUnbondingsSortMethod}
+                  rigthAlign
                   sort={unbondingsSortMethod}
                   sorting={["staked-asc", "staked-desc"]}
                 >
                   <div className="text-right">Staked Amount</div>
                 </UnbondingHeaderTitle>
-                <UnbondingHeaderTitle>
+                <UnbondingHeaderTitle rigthAlign>
                   <div className="text-right">Status</div>
                 </UnbondingHeaderTitle>
                 <UnbondingHeaderTitle
                   onSort={setUnbondingsSortMethod}
+                  rigthAlign
                   sort={unbondingsSortMethod}
                   sorting={["date-asc", "date-desc"]}
                 >

diff --git a/src/features/staking/components/validators-table.tsx b/src/features/staking/components/validators-table.tsx
@@ -36,7 +36,7 @@ const minGridWidth = 800;
 
 const gridStyle = {
   gap: "16px",
-  gridTemplateColumns: "60px 1.3fr repeat(3, 1fr) 80px 100px",
+  gridTemplateColumns: "350px repeat(3, 1fr) 80px 100px",
   minWidth: minGridWidth,
 };
 
@@ -70,17 +70,17 @@ const ValidatorRow = ({
         className="grid w-full items-center justify-between gap-2 p-4"
         style={gridStyle}
       >
-        <div className="flex items-center justify-start">
-          <img
-            alt="Validator logo"
-            className="block w-[50px] rounded-full"
-            src={logo}
-            style={{ height: 50, width: 50 }}
-          />
-        </div>
         <div className="flex flex-1 flex-row justify-start gap-4">
+          <div className="flex items-center justify-start">
+            <img
+              alt="Validator logo"
+              className="block w-[50px] rounded-full"
+              src={logo}
+              style={{ height: 50, minHeight: 50, minWidth: 50, width: 50 }}
+            />
+          </div>
           <div className="flex flex-col justify-start gap-2 text-left">
-            <div className="text-[14px] font-bold leading-[20px]">
+            <div className="max-w-[300px] overflow-hidden truncate text-[14px] font-bold leading-[20px]">
               {validator.description.moniker}
             </div>
             <AddressShort address={validator.operatorAddress} />
@@ -263,7 +263,6 @@ const ValidatorsTable = () => {
           className="grid w-full items-center justify-between gap-2 bg-bg-500 p-4 uppercase"
           style={gridStyle}
         >
-          <div />
           <HeaderTitle
             onSort={setSortMethod}
             sort={sortMethod}
@@ -273,20 +272,23 @@ const ValidatorsTable = () => {
           </HeaderTitle>
           <HeaderTitle
             onSort={setSortMethod}
+            rigthAlign
             sort={sortMethod}
             sorting={["staked-asc", "staked-desc"]}
           >
             <div className="text-right">Staked Amount</div>
           </HeaderTitle>
           <HeaderTitle
             onSort={setSortMethod}
+            rigthAlign
             sort={sortMethod}
             sorting={["commission-asc", "commission-desc"]}
           >
             <div className="text-right">Commission</div>
           </HeaderTitle>
           <HeaderTitle
             onSort={setSortMethod}
+            rigthAlign
             sort={sortMethod}
             sorting={["voting-power-asc", "voting-power-desc"]}
           >