feat: redesing scanner responsive mobile

rango-exchange · Dec 11, 2023 · f6a8c88 · f6a8c88
1 parent 3e84c73
commit f6a8c88
Show file tree

Hide file tree

Showing 47 changed files with 756 additions and 243 deletions.
diff --git a/components/common/Button/LinkButton.tsx b/components/common/Button/LinkButton.tsx
@@ -24,7 +24,7 @@ export function LinkButton(props: PropsWithChildren<LinkButtonProps>) {
   return (
     <Link
       onClick={onClick}
-      className={`transition-all hover:bg-opacity-90 overflow-hidden  relative py-15 flex items-center justify-center px-20 font-medium	 text-18  md:leading-snug md:text-18 text-baseForeground bg-secondary-500 rounded-soft ${
+      className={`transition-all hover:bg-opacity-90 overflow-hidden  relative py-10 md:py-15 flex items-center justify-center px-20 font-medium	text-16 md:text-18  md:leading-snug md:text-18 text-baseForeground bg-secondary-500 rounded-soft ${
         props.className ? props.className : ''
       }`}
       href={props.href}>

diff --git a/components/common/Button/index.tsx b/components/common/Button/index.tsx
@@ -25,7 +25,7 @@ export function Button(props: PropsWithChildren<ButtonProps>) {
   return (
     <button
       onClick={handleClick}
-      className={`transition-all hover:bg-opacity-90 overflow-hidden relative py-3 flex items-center justify-center px-4 text-18 font-semibold md:leading-snug text-baseForeground bg-secondary-500 rounded-micro ${
+      className={`transition-all hover:bg-opacity-90 overflow-hidden relative py-8 md:py-12 flex items-center justify-center px-4 text-16 md:text-18 font-medium md:font-semibold md:leading-snug text-baseForeground bg-secondary-500 rounded-soft md:rounded-micro ${
         props.className || ''
       }`}>
       {props.children}

diff --git a/components/common/Footer/ListItem.tsx b/components/common/Footer/ListItem.tsx
@@ -4,7 +4,7 @@ import { ListItemProps } from './Footer.type';
 function ListItem(props: ListItemProps) {
   const { title, openInNewTab, location, icon: Icon } = props;
   return (
-    <li className="item-center flex pb-2.5 text-16 font-medium	leading-[0.8rem] text-neutral-200 lg:text-16 lg:leading-5	">
+    <li className="item-center flex pb-2.5 text-12 md:text-16 md:font-medium	leading-[0.8rem] text-neutral-200 lg:text-16 lg:leading-5	">
       {Icon && <Icon className="text-neutral-200" />}
       <Link
         target={openInNewTab ? '_blank' : '_self'}

diff --git a/components/common/Footer/index.tsx b/components/common/Footer/index.tsx
@@ -6,57 +6,59 @@ function Footer() {
   return (
     <footer className="relative flex w-full flex-col">
       <div className="w-full bg-neutral-500 flex flex-col items-center">
-        <div className="container p-50 flex flex-col items-center">
-          <div className="text-baseForeground text-45 font-semibold">
+        <div className="container px-25 py-30 md:p-50 flex flex-col items-center">
+          <div className="text-baseForeground text-center text-18 md:text-45 font-semibold">
             Start secure swaps across blockchains
           </div>
-          <div className="text-18 text-neutral-200">
+          <div className="text-14 md:text-18 mt-15 md:mt-0 text-center text-neutral-200">
             Swap across 64+ blockchains and 100+ DEX/Bridge Protocols in a
             simple UI
           </div>
           <LinkButton
-            className="mt-[60px] w-[257px]"
+            className="mt-35 md:mt-[60px] w-[257px]"
             href="https://app.rango.exchange/">
             Open App
           </LinkButton>
         </div>
       </div>
-      <div className="w-full bg-baseBackground pt-[100px]">
+      <div className="w-full bg-baseBackground pt-40 md:pt-[100px]">
         <div className="relative w-full bg-footer-mask bg-contain bg-right-bottom bg-no-repeat pb-16 md:bg-[right_1.5rem]">
-          <div className="mx-auto flex container  flex-col justify-between px-[1.875rem] lg:flex-row lg:px-0">
+          <div className="mx-auto flex container  flex-col justify-between px-30 lg:flex-row lg:px-0">
             <div className="mb-10 text-left lg:mb-0 lg:max-w-[19.4375rem]">
-              <h3 className="mb-3.5 text-left text-22	font-medium text-baseForeground lg:text-[1.1rem] lg:leading-[1.4rem]">
+              <h3 className="mb-3.5 text-left text-16 md:text-22	font-medium text-baseForeground lg:text-[1.1rem] lg:leading-[1.4rem]">
                 About Rango
               </h3>
-              <p className="w-full text-16 leading-[1.5rem] text-neutral-200	">
+              <p className="w-full text-12 md:text-16 leading-[1.5rem] text-neutral-200	">
                 Rango is a cutting-edge routing and aggregation protocol for all
                 cross-chain and on-chain swaps, aggregating bridges and DEXs in
                 crypto world. You can swap native assets like Bitcoin, Ethereum,
                 Matic, ... to each other in a decentralized manner.
               </p>
             </div>
-            <div className="mb-10">
-              <h3 className="mb-3 text-left text-22 font-medium	text-baseForeground	lg:mb-3.5 lg:text-[1.1rem] lg:leading-[1.4rem]">
-                Products
-              </h3>
-              <ul className="w-full">
-                {products.map((link, index) => (
-                  <ListItem key={index} {...link} />
-                ))}
-              </ul>
-            </div>
-            <div className="mb-10">
-              <h3 className="mb-3 text-left text-22 font-medium	text-baseForeground	lg:mb-3.5 lg:text-[1.1rem] lg:leading-[1.4rem]">
-                Documentation
-              </h3>
-              <ul className="w-full">
-                {documentation.map((link, index) => (
-                  <ListItem key={index} {...link} />
-                ))}
-              </ul>
+            <div className="grid grid-cols-2 md:flex md:w-[50%] md:justify-around mt-40 md:mt-0 md:mb-10">
+              <div>
+                <h3 className="mb-3 text-left text-14 md:text-22 font-medium	text-baseForeground	lg:mb-3.5 lg:text-[1.1rem] lg:leading-[1.4rem]">
+                  Products
+                </h3>
+                <ul className="w-full">
+                  {products.map((link, index) => (
+                    <ListItem key={index} {...link} />
+                  ))}
+                </ul>
+              </div>
+              <div className="mb-10">
+                <h3 className="mb-3 text-left text-14 md:text-22 font-medium	text-baseForeground	lg:mb-3.5 lg:leading-[1.4rem]">
+                  Documentation
+                </h3>
+                <ul className="w-full">
+                  {documentation.map((link, index) => (
+                    <ListItem key={index} {...link} />
+                  ))}
+                </ul>
+              </div>
             </div>
             <div>
-              <h3 className="mb-3 text-left text-22 font-medium	text-baseForeground	lg:mb-3.5 lg:text-[1.1rem] lg:leading-[1.4rem]">
+              <h3 className="mb-3 text-left mt-25 md:mt-0 text-14 md:text-22 font-medium	text-baseForeground	lg:mb-3.5  lg:leading-[1.4rem]">
                 Social Media
               </h3>
               <ul className="w-full">
@@ -69,7 +71,7 @@ function Footer() {
         </div>
       </div>
 
-      <span className="w-full bg-neutral-500 p-2.5 text-center text-16 text-baseForeground md:text-base md:leading-6">
+      <span className="w-full bg-neutral-500 p-2.5 text-center text-10 md:text-16 text-baseForeground md:text-base md:leading-6">
         Copyright © 2023 Rango Exchange. All rights reserved.
       </span>
     </footer>

diff --git a/components/common/IconStatus/index.tsx b/components/common/IconStatus/index.tsx
@@ -9,7 +9,9 @@ function IconStatus(props: PropsType) {
   return (
     <>
       <StatusIcon size="1.25rem" className={`${hasTitle ? 'mr-5' : ''}`} />
-      {hasTitle && <div className={`text-16 ${textColor}`}>{status}</div>}
+      {hasTitle && (
+        <div className={`text-14 md:text-16 ${textColor}`}>{status}</div>
+      )}
     </>
   );
 }

diff --git a/components/common/Layout/index.tsx b/components/common/Layout/index.tsx
@@ -12,7 +12,7 @@ function Layout(props: PropsWithChildren<LayoutProps>) {
       </Head>
       <Navbar theme={'light'} />
       <main
-        className="w-full  min-h-[800px] pb-50 bg-neutral-300  bg-body-mask bg-cover"
+        className="w-full min-h-600 md:min-h-[800px] pb-30 md:pb-50 bg-neutral-300  bg-body-mask bg-cover"
         style={{
           width: '-webkit-fill-available',
         }}>

diff --git a/components/common/Navbar/MobileMenu.tsx b/components/common/Navbar/MobileMenu.tsx
@@ -43,7 +43,7 @@ function MobileMenu(props: MobileMenuProps) {
             onClick={handleBackDropClick}
           />
           <div
-            className={`fixed top-0 right-0 flex h-full w-10/12 flex-col items-center justify-between overflow-x-auto rounded-l-3xl bg-baseForeground px-5 pb-10  pt-[1.875rem] 
+            className={`fixed top-0 right-0 flex h-full w-10/12 flex-col items-center justify-between overflow-x-auto rounded-l-large bg-baseForeground px-20 py-30  pt-[1.875rem] 
             animate-menu
             ${active ? 'animate-mount-menu' : ''}`}>
             <nav className="w-full">

diff --git a/components/common/Navbar/index.tsx b/components/common/Navbar/index.tsx
@@ -14,7 +14,7 @@ function Navbar(props: NavbarProps) {
       } items-center justify-center`}>
       <div
         className={
-          'container flex w-full  items-center justify-center px-6  text-baseForeground xl:px-0'
+          'container flex w-full  items-center justify-center px-25  text-baseForeground xl:md-0'
         }>
         <Media between={['xs', 'xl']}>
           {(className, renderChildren) => (

diff --git a/components/common/SearchBox/SearchInput.tsx b/components/common/SearchBox/SearchInput.tsx
@@ -21,17 +21,19 @@ function SearchInput() {
   return (
     <form
       onSubmit={onSubmit}
-      className="bg-neutral-500 w-[66%] py-8 flex items-center rounded-soft">
-      <div className="w-full px-25 flex justify-center items-center">
+      className="bg-none md:bg-neutral-500 w-full md:w-[66%] md:py-8 flex justify-center md:justify-start items-center rounded-soft flex-col md:flex-row ">
+      <div className="w-full bg-neutral-500 md:bg-none p-12 rounded-soft md:rounded-none md:py-0 md:px-25 flex justify-center items-center">
         <SearchIcon className="mr-5 text-neutral-400" />
         <input
-          className="w-full text-neutral-200 bg-neutral-500 focus:outline-0 overflow-hidden text-16"
-          placeholder="Search by Request ID / Wallet Address / Txn Hash"
+          className="w-full text-neutral-200 bg-neutral-500 focus:outline-0 overflow-hidden text-14 md:text-16"
+          placeholder="Search by Request ID / Wallet..."
           onChange={(e) => setQuery(e.target.value)}
         />
       </div>
 
-      <Button onClick={onSubmit} className="mr-10 w-[112px] py-15 px-20">
+      <Button
+        onClick={onSubmit}
+        className="mt-10 md:mt-0 mr-0 md:mr-10 w-full md:w-[112px] py-15 px-20 ">
         Search
       </Button>
     </form>

diff --git a/components/common/SearchBox/index.tsx b/components/common/SearchBox/index.tsx
@@ -2,11 +2,11 @@ import SearchInput from './SearchInput';
 
 function SearchBox() {
   return (
-    <div className="container flex flex-col items-center my-[100px]">
-      <h1 className="w-full font-semibold text-56 text-center text-baseForeground ">
+    <div className="container px-25 md:px-0 flex flex-col items-center my-35 md:my-[100px]">
+      <h1 className="w-full font-semibold md:text-56 text-28 text-center text-baseForeground ">
         Rango Swaps Explorer
       </h1>
-      <p className="w-full text-22 mb-[45px] text-neutral-200 text-center">
+      <p className="w-full mt-10 md:mt-0 md:text-22 text-16 mb-[45px] text-neutral-200 text-center">
         Track all transactions on Rango Exchange
       </p>
       <SearchInput />

diff --git a/components/common/Table/TableBody.tsx b/components/common/Table/TableBody.tsx
@@ -3,26 +3,35 @@ import { TableBodyProps } from './Table.type';
 import dayjs from 'dayjs';
 import utc from 'dayjs/plugin/utc';
 import { columns } from './Table.helper';
+import isMobile from 'is-mobile';
+import Link from 'next/link';
 
 dayjs.extend(utc);
 
 function TableBody(props: TableBodyProps) {
   const { data } = props;
-
+  const IsMobile = isMobile();
   return (
     <div className="w-full">
       {data.map((item) => {
         const { requestId } = item;
         return (
           <div
             key={requestId}
-            className="w-full grid grid-cols-11 hover:bg-hoverBackground even:bg-surfacesBackground ">
+            className="w-full flex flex-col p-15 mt-15 md:mt-0 md:p-0 rounded-micro md:-rounded-none md:grid md:grid-cols-11 bg-surfacesBackground md:bg-transparent md:hover:bg-hoverBackground md:even:bg-surfacesBackground ">
             {columns.map((col) => {
               const CellComponent = col.component;
               return CellComponent ? (
                 <CellComponent key={col.id} column={col} swapItem={item} />
               ) : null;
             })}
+            {IsMobile && (
+              <Link
+                href={`/swap/${requestId}`}
+                className="w-full text-center rounded-micro mt-30 border border-primary-600 py-10 text-primary-600 text-16 font-semibold">
+                Detail
+              </Link>
+            )}
           </div>
         );
       })}

diff --git a/components/common/Table/cells/AmountCell.tsx b/components/common/Table/cells/AmountCell.tsx
@@ -1,9 +1,10 @@
 import { GassIcon } from 'components/icons';
 import { CellProps } from '../Table.type';
 import { getPercentageChange } from 'utils/amountConverter';
+import isMobile from 'is-mobile';
 
 function AmountCell(props: CellProps) {
-  const { swapItem } = props;
+  const { swapItem, column } = props;
   const { stepsSummary } = swapItem;
   const fromToken = stepsSummary.length ? stepsSummary[0]?.fromToken : null;
   const toToken = stepsSummary.length
@@ -24,18 +25,23 @@ function AmountCell(props: CellProps) {
     return acc;
   }, 0);
 
+  const IsMobile = isMobile();
+
   return (
-    <div className="flex flex-col col-span-2 justify-center items-start p-20 ">
-      <div className="text-16 text-neutral-400 mb-5 flex items-center">
+    <div className="flex flex-col md:col-span-2 justify-center items-start md:p-20 ">
+      {IsMobile && (
+        <div className="text-12 mt-10 text-primary-500">{column.title}</div>
+      )}
+      <div className="text-14 md:text-16 text-neutral-400 md:mb-5 flex items-center">
         <span className="mr-5">
           {usdToAmount && `~$${usdToAmount.toFixed(2)}`}
         </span>
         <span>{changePercentage ? `(${changePercentage}%)` : ''}</span>
       </div>
-      <div className="flex items-center">
+      <div className="text-12 md:text-14 flex items-center">
         <GassIcon className="text-neutral-400" size="0.875rem" />
-        <span className="text-14 px-5 text-neutral-400">Fee</span>
-        <span className="text-14 text-neutral-400">{`$${
+        <span className="px-5 text-neutral-400">Fee</span>
+        <span className="text-neutral-400">{`$${
           gasFee ? gasFee.toFixed(2) : '--'
         }`}</span>
       </div>

diff --git a/components/common/Table/cells/RequestIDCell.tsx b/components/common/Table/cells/RequestIDCell.tsx
@@ -3,24 +3,29 @@ import dayjs from 'dayjs';
 import utc from 'dayjs/plugin/utc';
 import { CellProps } from '../Table.type';
 import ButtonCopyIcon from 'components/common/ButtonCopyIcon';
+import isMobile from 'is-mobile';
 
 dayjs.extend(utc);
 
 function RequestIDCell(props: CellProps) {
-  const { swapItem } = props;
+  const { swapItem, column } = props;
   const { requestId, transactionTime } = swapItem;
 
   const router = useRouter();
+  const IsMobile = isMobile();
 
   const handleSwapDetails = (id: string) => {
     router.push(`/swap/${id}`);
   };
 
   return (
-    <div className="flex flex-col col-span-3 items-start p-20">
-      <div className="flex justify-center items-center mb-5">
+    <div className="flex flex-col md:col-span-3 items-start md:p-20">
+      {IsMobile && (
+        <div className="text-12 text-primary-500">{column.title}</div>
+      )}
+      <div className="flex justify-center items-center md:mb-5">
         <button
-          className="text-16 text-primary-500 mr-5 hover:text-secondary-500"
+          className="text-14 md:text-16 text-primary-500 mr-5 hover:text-secondary-500"
           onClick={() => handleSwapDetails(requestId)}>
           {`${requestId.slice(0, 8)}...${requestId.slice(
             requestId.length - 8,
@@ -29,7 +34,7 @@ function RequestIDCell(props: CellProps) {
         </button>
         <ButtonCopyIcon text={requestId} />
       </div>
-      <div className="text-14 text-neutral-400">
+      <div className="text-12 md:text-14 text-neutral-400">
         {dayjs
           .utc(transactionTime)
           .local()

diff --git a/components/common/Table/cells/StatusCell.tsx b/components/common/Table/cells/StatusCell.tsx
@@ -1,23 +1,29 @@
 import { StepsIcon } from 'components/icons';
 import { CellProps } from '../Table.type';
 import IconStatus from 'components/common/IconStatus';
+import isMobile from 'is-mobile';
 
 function StatusCell(props: CellProps) {
-  const { swapItem } = props;
+  const { swapItem, column } = props;
   const { status, stepsSummary } = swapItem;
   const successStep = stepsSummary.filter(
     (item) => item.status === 'success',
   ).length;
 
+  const IsMobile = isMobile();
+
   return (
-    <div className="flex flex-col col-span-2 justify-center p-20">
+    <div className="flex flex-col col-span-2 justify-center md:p-20">
+      {IsMobile && (
+        <div className="text-12 mt-25 text-primary-500">{column.title}</div>
+      )}
       <div className="flex items-center">
         <IconStatus status={status} hasTitle />
       </div>
       {stepsSummary?.length && (
-        <div className="flex items-center mt-5">
+        <div className="flex items-center md:mt-5">
           <StepsIcon className="text-neutral-400 mr-5" />
-          <span className="text-14 text-neutral-400">{`${successStep}/${stepsSummary.length}`}</span>
+          <span className="text-12 md:text-14 text-neutral-400">{`${successStep}/${stepsSummary.length}`}</span>
         </div>
       )}
     </div>