diff --git a/src/features/core/components/table.tsx b/src/features/core/components/table.tsx index 13ed9d3..c61ebf1 100644 --- a/src/features/core/components/table.tsx +++ b/src/features/core/components/table.tsx @@ -4,6 +4,7 @@ import { chevron } from "../lib/icons"; type Props = PropsWithChildren & { onSort?: (method: SortMethod) => void; + rigthAlign?: boolean; sort?: SortMethod; sorting?: [string, string]; }; @@ -11,6 +12,7 @@ type Props = PropsWithChildren & { export const HeaderTitleBase = ({ children, onSort, + rigthAlign, sort, sorting, }: Props) => { @@ -18,23 +20,32 @@ export const HeaderTitleBase = ({ const sortingIndex = sort ? sortingOrder.indexOf(sort) : -1; return ( -
- - {children}{" "} - {!!onSort && !!sort && ( -
); }; diff --git a/src/features/staking/components/delegation-details.tsx b/src/features/staking/components/delegation-details.tsx index 674d14c..ab34145 100644 --- 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 (
-
- Validator logo -
+
+ Validator logo +
{validator?.description.moniker || ""} @@ -288,7 +288,7 @@ const DelegationHeaderTitle = HeaderTitleBase; const UnbondingHeaderTitle = HeaderTitleBase; 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,17 +357,18 @@ const DelegationDetails = () => { return (
-
Delegations -
Staked Amount
+ Staked Amount
@@ -375,6 +376,7 @@ const DelegationDetails = () => { @@ -423,20 +425,23 @@ const DelegationDetails = () => { return (
-
- Unstakings + + Unstakings +
Staked Amount
- +
Status
diff --git a/src/features/staking/components/validators-table.tsx b/src/features/staking/components/validators-table.tsx index 671e7f7..ccfc5e4 100644 --- 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} > -
- Validator logo -
+
+ Validator logo +
-
+
{validator.description.moniker}
@@ -263,7 +263,6 @@ const ValidatorsTable = () => { className="grid w-full items-center justify-between gap-2 bg-bg-500 p-4 uppercase" style={gridStyle} > -
{ @@ -280,6 +280,7 @@ const ValidatorsTable = () => { @@ -287,6 +288,7 @@ const ValidatorsTable = () => {