fix: responsive ui in banners

forbole · Mar 22, 2024 · b40d3a3 · b40d3a3
1 parent 640ea4e
commit b40d3a3
Show file tree

Hide file tree

Showing 4 changed files with 44 additions and 20 deletions.
diff --git a/src/features/staking/components/delegation-details.tsx b/src/features/staking/components/delegation-details.tsx
@@ -56,12 +56,12 @@ export const DetailsTrigger = ({
   setIsShowingDetails,
 }: Props) => (
   <button
-    className="text-primary-500 flex flex-row items-center gap-2"
+    className="text-primary-500 flex flex-row items-center gap-2 text-[14px]"
     onClick={() => {
       setIsShowingDetails(!isShowingDetails);
     }}
   >
-    {isShowingDetails ? "Hide details" : "Show details"}
+    {isShowingDetails ? "Hide details" : "View details"}
     <div
       dangerouslySetInnerHTML={{ __html: pointer }}
       style={{

diff --git a/src/features/staking/components/main-page.tsx b/src/features/staking/components/main-page.tsx
@@ -24,7 +24,10 @@ function StakingPage() {
     <>
       <div className="page-container flex flex-col gap-6 px-[12px] pb-[24px] md:px-[24px]">
         <div className="mt-[40px] flex flex-row justify-between text-left">
-          <Title>Your Staking Overview</Title>
+          <Title>
+            <span className="hidden md:block">Your Staking Overview</span>
+            <span className="block md:hidden">Your Overview</span>
+          </Title>
           {canShowDetail && (
             <DetailsTrigger
               isShowingDetails={isShowingDetails}

diff --git a/src/features/staking/components/validator-delegation.tsx b/src/features/staking/components/validator-delegation.tsx
@@ -32,7 +32,18 @@ import DelegationDetails, {
   DetailsTrigger,
   getCanShowDetails,
 } from "./delegation-details";
-import { DivisorVertical } from "./divisor";
+import { DivisorHorizontal, DivisorVertical } from "./divisor";
+
+const Divisor = () => (
+  <>
+    <div className="absolute bottom-0 right-[20px] top-0 hidden md:block">
+      <DivisorVertical />
+    </div>
+    <div className="block w-full translate-y-[12px] md:hidden">
+      <DivisorHorizontal />
+    </div>
+  </>
+);
 
 export default function ValidatorDelegation() {
   const searchParams = useSearchParams();
@@ -90,7 +101,7 @@ export default function ValidatorDelegation() {
       </div>
     </div>
   ) : (
-    <div className="grid min-w-[1000px] grid-cols-4 rounded-[24px] bg-bg-600 p-[24px]">
+    <div className="flex flex-col gap-[32px] rounded-[24px] bg-bg-600 p-[24px] md:grid md:grid-cols-4 md:gap-0">
       <div className="relative">
         <Heading8>Claimable Rewards (XION)</Heading8>
         <div className="mb-[8px] mt-[12px] flex flex-row items-center gap-[8px]">
@@ -124,9 +135,7 @@ export default function ValidatorDelegation() {
             <BodyMedium>{formatXionToUSD(totalRewards)}</BodyMedium>
           </div>
         </div>
-        <div className="absolute bottom-0 right-[20px] top-0">
-          <DivisorVertical />
-        </div>
+        <Divisor />
       </div>
       <div className="relative">
         <Heading8>My Delegation (XION)</Heading8>
@@ -138,9 +147,7 @@ export default function ValidatorDelegation() {
           )}
         </div>
         <BodyMedium>{formatXionToUSD(userTotalDelegation)}</BodyMedium>
-        <div className="absolute bottom-0 right-[20px] top-0">
-          <DivisorVertical />
-        </div>
+        <Divisor />
       </div>
       <div className="flex flex-row gap-[16px]">
         <div className="relative w-full">
@@ -157,9 +164,7 @@ export default function ValidatorDelegation() {
               ? formatXionToUSD(getXionCoin(availableToStakeBN))
               : "-"}
           </BodyMedium>
-          <div className="absolute bottom-0 right-[20px] top-0">
-            <DivisorVertical />
-          </div>
+          <Divisor />
         </div>
       </div>
       <div className="flex flex-row gap-[16px]">

diff --git a/src/features/staking/components/validators-table.tsx b/src/features/staking/components/validators-table.tsx
@@ -35,11 +35,13 @@ import {
 import AddressShort from "./address-short";
 import TokenColors from "./token-colors";
 
-const minGridWidth = 800;
+const minGridWidth = 1000;
+
+const commonGridClasses =
+  "grid-cols-[150px_repeat(3,1fr)_80px_100px] md:grid-cols-[350px_repeat(3,1fr)_80px_100px]";
 
 const gridStyle = {
   gap: "16px",
-  gridTemplateColumns: "350px repeat(3, 1fr) 80px 100px",
   minWidth: minGridWidth,
 };
 
@@ -70,7 +72,10 @@ const ValidatorRow = ({
       }}
     >
       <div
-        className="grid w-full items-center justify-between gap-2 p-4"
+        className={[
+          "grid w-full items-center justify-between gap-2 p-4",
+          commonGridClasses,
+        ].join(" ")}
         style={gridStyle}
       >
         <div className="flex flex-1 flex-row justify-start gap-4">
@@ -241,21 +246,32 @@ const ValidatorsTable = () => {
               setCurrentTab("active");
             }}
           >
-            Active ({activeValidators.length})
+            Active
+            <span className="hidden md:inline-block">
+              {" "}
+              ({activeValidators.length})
+            </span>
           </TabButton>
           <TabButton
             active={currentTab === "inactive"}
             onClick={() => {
               setCurrentTab("inactive");
             }}
           >
-            Inactive ({inactiveValidators.length})
+            Inactive
+            <span className="ml-[4px] hidden md:inline-block">
+              {" "}
+              ({inactiveValidators.length})
+            </span>
           </TabButton>
         </div>
       </div>
       <div className="min-h-[100px] overflow-auto rounded-[24px] bg-bg-600 pb-4 text-typo-100">
         <div
-          className="grid w-full items-center justify-between gap-2 bg-bg-500 p-4 uppercase"
+          className={[
+            "grid w-full items-center justify-between gap-2 bg-bg-500 p-4 uppercase",
+            commonGridClasses,
+          ].join(" ")}
           style={gridStyle}
         >
           <HeaderTitle