improve mobile ui

pendulum-chain · Jul 23, 2024 · f8d8284 · f8d8284
1 parent 2e1bfa1
commit f8d8284
Show file tree

Hide file tree

Showing 7 changed files with 27 additions and 30 deletions.
diff --git a/src/components/ChainSelector.tsx b/src/components/ChainSelector.tsx
@@ -1,5 +1,4 @@
 import { ChevronDownIcon } from '@heroicons/react/20/solid';
-import { isDesktop } from 'react-device-detect';
 import AmplitudeLogo from '../assets/AmplitudeLogo';
 import PendulumLogo from '../assets/PendulumLogo';
 import { toTitle } from '../helpers/string';
@@ -13,16 +12,16 @@ const ChainSelector = (): JSX.Element => {
   return (
     <details className="w-30 dropdown">
       <summary
-        className="text-sm border-base-300 bg-base-200 min-h-[2.1rem] h-auto px-2 sm:px-3 btn btn-sm btn-ghost"
+        className="text-sm border-base-300 bg-base-200 min-h-[2.1rem] h-auto px-2 sm:px-3 btn btn-sm btn-ghost flex"
         title={currentTenant}
       >
         {currentTenant === TenantName.Pendulum ? (
           <PendulumLogo className="w-4 h-5 mr-1" />
         ) : (
           <AmplitudeLogo className="w-4 h-4 mr-1 " />
         )}
-        {isDesktop ? <span className="mr-1 text-sm sm:mr-2">{currentTenant ? toTitle(currentTenant) : ''}</span> : <></>}
-        <ChevronDownIcon className="w-4 h-4" stroke-width="2" />
+        <span className="mr-1 text-sm sm:mr-2">{currentTenant ? toTitle(currentTenant) : ''}</span>
+        <ChevronDownIcon className="hidden sm:block w-4 h-4" stroke-width="2" />
       </summary>
       <ul className="text-sm border-base-300 border bg-base-200 rounded-xl shadow-none menu dropdown-content z-[1]">
         {options.map((option, i) => (

diff --git a/src/components/GetToken/index.tsx b/src/components/GetToken/index.tsx
@@ -1,5 +1,6 @@
 import { Button } from 'react-daisyui';
 import { NavLink } from 'react-router-dom';
+import { isDesktop } from 'react-device-detect';
 
 import ampe from '../../assets/ampe.svg';
 import pen from '../../assets/pen.svg';
@@ -9,7 +10,6 @@ import { useAccountBalance } from '../../shared/useAccountBalance';
 import useSwitchChain from '../../hooks/useSwitchChain';
 import { useNodeInfoState } from '../../NodeInfoProvider';
 import { TenantName } from '../../models/Tenant';
-import { isDesktop } from 'react-device-detect';
 
 const tenantColors = {
   [TenantName.Pendulum]: {

diff --git a/src/components/Layout/index.tsx b/src/components/Layout/index.tsx
@@ -64,15 +64,9 @@ export default function Layout(): JSX.Element | null {
       </div>
       <section>
         <header>
-          <div className="flex flex-row-reverse items-center gap-2 h-15">
-            <div className="mobile-menu">
-              <button type="button" onClick={() => setVisible((prev) => !prev)}>
-                <Bars3Icon className="w-7" />
-              </button>
-            </div>
-            <OpenWallet isHeader />
-            <ChainSelector />
+          <div className="flex items-center justify-end gap-2 h-15">
             <GetToken />
+            <ChainSelector />
             <div className="hidden mr-2 dropdown dropdown-end">
               <button className="flex items-center py-2 space-x-2 btn no-animation">
                 <span className={`${isPendulum ? 'text-white' : ''}  text-md`}>
@@ -100,6 +94,12 @@ export default function Layout(): JSX.Element | null {
                 </li>
               </ul>
             </div>
+            <OpenWallet isHeader />
+            <div className="mobile-menu">
+              <button type="button" onClick={() => setVisible((prev) => !prev)}>
+                <Bars3Icon className="w-7" />
+              </button>
+            </div>
           </div>
         </header>
         <main className="flex-wrap flex-grow w-full px-4 py-4">

diff --git a/src/components/Wallet/modals/DisconnectModal/index.tsx b/src/components/Wallet/modals/DisconnectModal/index.tsx
@@ -1,9 +1,9 @@
 import { Wallet, WalletAccount } from '@talismn/connect-wallets';
 import { UseQueryResult } from '@tanstack/react-query';
 import { FrameSystemAccountInfo } from '@polkadot/types/lookup';
-
 import { ArrowLeftEndOnRectangleIcon } from '@heroicons/react/20/solid';
 import { Button, Dropdown } from 'react-daisyui';
+
 import { getAddressForFormat } from '../../../../helpers/addressFormatter';
 import { useNodeInfoState } from '../../../../NodeInfoProvider';
 import { useAccountBalance } from '../../../../shared/useAccountBalance';
@@ -23,7 +23,7 @@ const WalletButton = ({ wallet, query, balance, tokenSymbol, walletAccount }: Wa
   <Button
     size="sm"
     color="ghost"
-    className="text-sm border-base-300 border-1 bg-base-200 min-h-[2.1rem] h-auto px-1 sm:px-3 overflow-hidden ellipsis max-w36 sm:max-w-fit"
+    className="text-sm border-base-300 border-1 bg-base-200 min-h-[2.1rem] h-auto px-5 sm:px-3 overflow-hidden ellipsis max-w36 sm:max-w-fit"
     title={wallet?.title}
     type="button"
   >
@@ -34,8 +34,8 @@ const WalletButton = ({ wallet, query, balance, tokenSymbol, walletAccount }: Wa
         {balance} {tokenSymbol}
       </span>
     )}
-    <p className="truncate">{walletAccount?.name}</p>
-    <img src={wallet?.logo?.src || ''} className="w-[20px] ml-2" alt={wallet?.logo?.alt || ''} />
+    <p className="hidden sm:block truncate">{walletAccount?.name}</p>
+    <img src={wallet?.logo?.src || ''} className="w-[20px] sm:ml-2" alt={wallet?.logo?.alt || ''} />
   </Button>
 );
 
@@ -56,7 +56,7 @@ const WalletDropdownMenu = ({
   tokenSymbol,
   removeWalletAccount,
 }: WalletDropdownMenuProps) => (
-  <Dropdown.Menu className="text-center border border-base-300 bg-base-200 shadow-lg min-w-[240px] p-3 mt-2">
+  <Dropdown.Menu className="text-center border border-base-300 bg-base-200 shadow-lg min-w-[240px] p-3 mt-2 right-0">
     <div className="text-sm text-neutral-400">{walletAccount?.name}</div>
     <div className="text-neutral-500">
       <CopyableAddress

diff --git a/src/pages/dashboard/Portfolio.tsx b/src/pages/dashboard/Portfolio.tsx
@@ -13,7 +13,7 @@ function Portfolio() {
   }, []);
 
   return (
-    <div className="card portfolio rounded-md bg-base-100 mr-20">
+    <div className="card portfolio rounded-md bg-base-100">
       <div className="p-4 flex flex-row justify-between">
         <div className="font-bold text-xl">Wallet</div>
         <div className="text-xl" title={accountTotalBalance.toString()}>

diff --git a/src/pages/spacewalk/bridge/index.tsx b/src/pages/spacewalk/bridge/index.tsx
@@ -69,15 +69,15 @@ function Bridge(): JSX.Element | null {
         />
         <Card className="bridge-card bg-base-200 min-h-500 w-full max-w-[520px] rounded-lg">
           <div className="flex justify-between px-5 mt-5">
-            <Tabs className="flex justify-center flex-grow w-5/6 tabs-boxed">
-              <Tabs.Tab className="w-2/5 p-2 h-fit" {...getTabProps(0)}>
+            <Tabs className="flex justify-center flex-grow sm:w-5/6 tabs-boxed">
+              <Tabs.Tab className="w-1/2 sm:w-2/5 p-2 h-full text-xs sm:text-sm " {...getTabProps(0)}>
                 {chain.toLowerCase() === TenantName.Pendulum && <PendulumLogo className="w-6 h-6 mr-1" />}
                 {(chain.toLowerCase() === TenantName.Amplitude || chain.toLowerCase() === TenantName.Foucoco) && (
                   <AmplitudeLogo className="w-6 h-6 mr-1" />
                 )}
                 To {chain}
               </Tabs.Tab>
-              <Tabs.Tab className="w-2/5 p-2 h-fit" {...getTabProps(1)}>
+              <Tabs.Tab className="w-1/2 sm:w-2/5 p-2 h-full text-xs sm:text-sm " {...getTabProps(1)}>
                 <StellarLogo className="w-6 h-6 mr-1" />
                 To Stellar
               </Tabs.Tab>

diff --git a/src/pages/staking/index.tsx b/src/pages/staking/index.tsx
@@ -2,13 +2,11 @@ import { CollatorRewards } from './CollatorRewards/CollatorRewards';
 import CollatorsTable from './CollatorsTable';
 import './styles.css';
 
-function Collators() {
-  return (
-    <div className="overflow-x-hidden xl:mx-40 lg:mx-10 collators-list-container">
-      <CollatorRewards />
-      <CollatorsTable />
-    </div>
-  );
-}
+const Collators = () => (
+  <div className="overflow-x-hidden xl:mx-40 lg:mx-10 collators-list-container">
+    <CollatorRewards />
+    <CollatorsTable />
+  </div>
+);
 
 export default Collators;