feat: start with responsive ui

forbole · Mar 7, 2024 · 8de4d65 · 8de4d65
1 parent be08715
commit 8de4d65
Show file tree

Hide file tree

Showing 6 changed files with 78 additions and 43 deletions.
diff --git a/src/app/globals.css b/src/app/globals.css
@@ -25,30 +25,6 @@ body {
 }
 
 @layer components {
-  .heading2 {
-    @apply text-[40px] font-bold leading-[36px] text-white;
-  }
-
-  .heading8 {
-    @apply text-[14px] font-bold leading-[16px];
-  }
-
-  .typo-hero {
-    @apply text-[32px] font-light leading-[38px];
-  }
-
-  .typo-title {
-    @apply text-[24px] font-bold leading-[28px] text-white;
-  }
-
-  .typo-body-medium {
-    @apply text-[16px] font-normal leading-[24px] text-typo-125;
-  }
-
-  .typo-validator-name {
-    @apply text-[32px] font-bold leading-[36px] text-white;
-  }
-
   .page-container {
     @apply w-full max-w-[1136px];
   }

diff --git a/src/features/core/components/base.tsx b/src/features/core/components/base.tsx
@@ -15,27 +15,58 @@ type TypographyProps = PropsWithChildren & {
 };
 
 export const Title = ({ children, className = "" }: TypographyProps) => (
-  <div className={["typo-title", className].join(" ")}>{children}</div>
+  <div
+    className={[
+      "text-[24px] font-bold leading-[28px] text-white",
+      className,
+    ].join(" ")}
+  >
+    {children}
+  </div>
 );
 
 export const HeroText = ({ children, className = "" }: TypographyProps) => (
-  <div className={["typo-hero", className].join(" ")}>{children}</div>
+  <div
+    className={["text-[32px] font-light leading-[38px]", className].join(" ")}
+  >
+    {children}
+  </div>
 );
 
 export const Heading2 = ({ children, className = "" }: TypographyProps) => (
-  <div className={["heading2", className].join(" ")}>{children}</div>
+  <div
+    className={[
+      "text-white; text-[40px] font-bold leading-[36px]",
+      className,
+    ].join(" ")}
+  >
+    {children}
+  </div>
 );
 
 export const Heading8 = ({
   children,
   className = "",
   color = "text-typo-150",
 }: TypographyProps & { color?: string }) => (
-  <div className={["heading8", color, className].join(" ")}>{children}</div>
+  <div
+    className={["text-[14px] font-bold leading-[16px]", color, className].join(
+      " ",
+    )}
+  >
+    {children}
+  </div>
 );
 
 export const BodyMedium = ({ children, className = "" }: TypographyProps) => (
-  <div className={["typo-body-medium", className].join(" ")}>{children}</div>
+  <div
+    className={[
+      "text-[16px] font-normal leading-[24px] text-typo-125",
+      className,
+    ].join(" ")}
+  >
+    {children}
+  </div>
 );
 
 type NavLinkProps = {
@@ -262,3 +293,20 @@ export const SearchInput = (props: SearchInputProps) => (
     />
   </div>
 );
+
+type TabButtonProps = React.DetailedHTMLProps<
+  React.ButtonHTMLAttributes<HTMLButtonElement>,
+  HTMLButtonElement
+> & {
+  active?: boolean;
+};
+
+export const TabButton = ({ active, ...props }: TabButtonProps) => (
+  <button
+    {...props}
+    className={[
+      "pb-[4px] text-[12px] uppercase leading-[12px] tracking-[1.5px]",
+      active ? "border-b-[1px]" : "",
+    ].join(" ")}
+  />
+);
diff --git a/src/features/staking/components/main-page.tsx b/src/features/staking/components/main-page.tsx
@@ -21,7 +21,7 @@ function StakingPage() {
 
   return (
     <>
-      <div className="page-container flex flex-col gap-6 px-[24px] pb-[24px]">
+      <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>
           {canShowDetail && (

diff --git a/src/features/staking/components/staking-overview.tsx b/src/features/staking/components/staking-overview.tsx
@@ -34,13 +34,13 @@ const StakingOverview = () => {
   if (!isConnected) {
     return (
       <div
-        className="flex min-h-[212px] flex-col items-center justify-center gap-[32px] uppercase"
+        className="flex min-h-[212px] flex-col items-center justify-center gap-[32px] px-[12px] uppercase"
         style={{
           backgroundImage: `url(${basePath}/overview-bg.png)`,
           borderRadius: 24,
         }}
       >
-        <HeroText>Please Log In To View</HeroText>
+        <HeroText className="text-center">Please Log In To View</HeroText>
         <div>
           <Button
             className="min-w-[150px]"
@@ -67,7 +67,7 @@ const StakingOverview = () => {
 
   return (
     <div
-      className="grid min-h-[144px] flex-col items-center justify-center gap-[32px]"
+      className="grid min-h-[144px] flex-col items-center justify-center gap-[32px] overflow-auto"
       style={{
         backgroundImage: `url(${basePath}/overview-bg.png)`,
         borderRadius: 24,

diff --git a/src/features/staking/components/validator-page.tsx b/src/features/staking/components/validator-page.tsx
@@ -106,7 +106,7 @@ export default function ValidatorPage() {
               src={logo || defaultAvatar}
             />
             <div className="flex flex-1 items-center gap-[16px]">
-              <div className="typo-validator-name">
+              <div className="text-[32px] font-bold leading-[36px] text-white">
                 {validatorDetails.description.moniker || ""}
               </div>
               {hasStakedInValidator && (

diff --git a/src/features/staking/components/validators-table.tsx b/src/features/staking/components/validators-table.tsx
@@ -8,6 +8,7 @@ import {
   ButtonPill,
   NavLink,
   SearchInput,
+  TabButton,
   Title,
 } from "@/features/core/components/base";
 import { HeaderTitleBase } from "@/features/core/components/table";
@@ -31,9 +32,12 @@ import {
 import AddressShort from "./address-short";
 import TokenColors from "./token-colors";
 
+const minGridWidth = 800;
+
 const gridStyle = {
   gap: "16px",
   gridTemplateColumns: "60px 1.5fr repeat(3, 1fr) 80px 80px",
+  minWidth: minGridWidth,
 };
 
 type ValidatorItemProps = {
@@ -56,7 +60,12 @@ const ValidatorRow = ({
   const votingPowerPercStr = formatVotingPowerPerc(votingPowerPerc);
 
   return (
-    <div className="flex w-full flex-col items-center justify-between gap-2">
+    <div
+      className="flex w-full flex-col items-center justify-between gap-2"
+      style={{
+        minWidth: minGridWidth,
+      }}
+    >
       <div
         className="grid w-full items-center justify-between gap-2 p-4"
         style={gridStyle}
@@ -222,32 +231,34 @@ const ValidatorsTable = () => {
 
   return (
     <>
-      <div className="grid grid-cols-3">
-        <div className="flex w-full flex-row justify-start gap-[16px]">
+      <div className="flex flex-col  md:grid md:grid-cols-3">
+        <div className="flex w-full flex-col justify-start gap-[32px] md:flex-row md:gap-[16px]">
           <Title>Validators</Title>
           <SearchInput
             onChange={(e) => setSearchValue(e.target.value)}
             value={searchValue}
           />
         </div>
-        <div className="flex flex-row items-center justify-center gap-[40px]">
-          <button
+        <div className="mt-[12px] flex flex-row items-center justify-center gap-[40px] uppercase md:mt-0">
+          <TabButton
+            active={currentTab === "active"}
             onClick={() => {
               setCurrentTab("active");
             }}
           >
             Active ({activeValidators.length})
-          </button>
-          <button
+          </TabButton>
+          <TabButton
+            active={currentTab === "inactive"}
             onClick={() => {
               setCurrentTab("inactive");
             }}
           >
             Inactive ({inactiveValidators.length})
-          </button>
+          </TabButton>
         </div>
       </div>
-      <div className="min-h-[100px] overflow-hidden rounded-[24px] bg-bg-600 pb-4 text-typo-100">
+      <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"
           style={gridStyle}