style: responsive UI (#192)

* fix: lint issues * style: updated responsive design * fix: fixed ui responsie bug * refactor: close mobile menu on link click * fix: lint issues
pendulum-chain · Jun 19, 2023 · 5a9a828 · 5a9a828
1 parent fd128e4
commit 5a9a828
Show file tree

Hide file tree

Showing 18 changed files with 113 additions and 94 deletions.
diff --git a/src/assets/AmplitudeLogo.tsx b/src/assets/AmplitudeLogo.tsx
@@ -1,9 +1,11 @@
-interface Props {
+import { HTMLAttributes } from 'react';
+
+interface Props extends HTMLAttributes<SVGSVGElement> {
   className?: string;
 }
 
-const AmplitudeLogo = ({ className }: Props) => (
-  <svg fill="none" xmlns="http://www.w3.org/2000/svg" className={className}>
+const AmplitudeLogo = ({ className, ...rest }: Props) => (
+  <svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" className={className} {...rest}>
     <path
       d="M3.8606 9.50286C3.8606 9.50286 4.34281 10.9582 4.61302 11.6738C4.88323 12.3895 5.03867 12.8273 5.71325 12.8259C5.99852 12.8252 6.29641 12.4543 6.62941 11.6738C7.01913 10.6583 7.4623 9.50286 7.4623 9.50286H3.8606Z"
       fill="#4EE59A"

diff --git a/src/components/ChainSelector.tsx b/src/components/ChainSelector.tsx
@@ -14,13 +14,18 @@ const ChainSelector = ({ tenantName }: { tenantName: TenantName | undefined }):
   return (
     <>
       <Dropdown vertical="end" className="w-30">
-        <Button size="sm" color="ghost" className="text-sm border-base-300 bg-base-200 h-9" title={tenantName}>
+        <Button
+          size="sm"
+          color="ghost"
+          className="text-sm border-base-300 bg-base-200 min-h-[2.25rem] h-auto px-2 sm:px-3"
+          title={tenantName}
+        >
           {tenantName === TenantName.Pendulum ? (
             <PendulumLogo className="w-5 h-6 mr-1" />
           ) : (
-            <AmplitudeLogo className="w-5 h-5 mr-1" />
+            <AmplitudeLogo className="w-5 h-5 mr-1 " />
           )}
-          <span className="text-sm mr-5">{tenantName ? toTitle(tenantName) : ''}</span>
+          <span className="text-sm mr-1 sm:mr-3">{tenantName ? toTitle(tenantName) : ''}</span>
           <ChevronDownIcon className="w-3 h-3" stroke-width="2" />
         </Button>
         <Dropdown.Menu className="w-30 mt-1.5 p-1 text-sm border-base-300 border bg-base-200 rounded-xl shadow-none">

diff --git a/src/components/CloseButton.tsx b/src/components/CloseButton.tsx
@@ -4,12 +4,13 @@ import { ButtonProps } from 'react-daisyui/dist/Button/Button';
 export const CloseButton = (props: ButtonProps) => (
   <Button
     color="ghost"
-    size="md"
+    size="sm"
     shape="circle"
-    className="absolute right-4 top-4 text-xl font-thin"
+    className="absolute right-4 top-4 text-xl font-thin !leading-5 w-[2.25rem] h-[2.25rem]"
     style={{ color: 'var(--secondary)' }}
+    type="button"
     {...props}
   >
-    ⨯
+    <span className="text-[1.25em]">⨯</span>
   </Button>
 );
diff --git a/src/components/Layout/Nav.tsx b/src/components/Layout/Nav.tsx
@@ -42,7 +42,7 @@ const CollapseMenu = ({
   );
 };
 
-const NavItem = ({ item }: { item: LinkItem }) => {
+const NavItem = ({ item, onClick }: { item: LinkItem; onClick?: () => void }) => {
   const { link, prefix, suffix, title, props } = item;
   const isExternal = link.startsWith('http');
   const linkUi = (
@@ -54,17 +54,21 @@ const NavItem = ({ item }: { item: LinkItem }) => {
   );
   const cls = `nav-item ${props?.className?.()}`;
   return isExternal ? (
-    <a href={link} {...props} className={cls}>
+    <a href={link} {...props} className={cls} onClick={onClick}>
       {linkUi}
     </a>
   ) : (
-    <NavLink to={link} {...props} className={cls}>
+    <NavLink to={link} {...props} onClick={onClick} className={cls}>
       {linkUi}
     </NavLink>
   );
 };
 
-const Nav = memo(() => {
+export type NavProps = {
+  onClick?: () => void;
+};
+
+const Nav = memo(({ onClick }: NavProps) => {
   const { state } = useGlobalState();
 
   return (
@@ -85,12 +89,12 @@ const Nav = memo(() => {
           >
             <div className="submenu">
               {item.submenu.map((subItem, j) => (
-                <NavItem key={`${i}-${j}`} item={subItem} />
+                <NavItem key={`${i}-${j}`} item={subItem} onClick={onClick} />
               ))}
             </div>
           </CollapseMenu>
         ) : (
-          <NavItem key={i} item={item} />
+          <NavItem key={i} item={item} onClick={onClick} />
         );
       })}
     </nav>

diff --git a/src/components/Layout/index.tsx b/src/components/Layout/index.tsx
@@ -1,17 +1,18 @@
+import { Bars3Icon } from '@heroicons/react/20/solid';
 import { memo, useEffect, useMemo, useState } from 'preact/compat';
 import { Outlet, useParams } from 'react-router-dom';
 import { useGlobalState } from '../../GlobalStateProvider';
 import AmplitudeLogo from '../../assets/amplitud-logo.svg';
 import PendulumLogo from '../../assets/pendulum-logo.png';
 import { config } from '../../config';
 import { TenantName } from '../../models/Tenant';
+import ChainSelector from '../ChainSelector';
 import OpenWallet from '../OpenWallet';
 import Nav from './Nav';
 import NetworkId from './NetworkId';
 import SocialAndTermLinks from './SocialAndTermLinks';
 import Versions from './Versions';
 import './styles.sass';
-import ChainSelector from '../ChainSelector';
 
 export default function Layout(): JSX.Element | null {
   const [visible, setVisible] = useState(false);
@@ -69,7 +70,7 @@ export default function Layout(): JSX.Element | null {
             style={isPendulum ? {} : { marginTop: 20, marginBottom: 30, marginLeft: 30 }}
           />
           {isTestnet && <div className="foucoco-tag">Foucoco testnet</div>}
-          <Nav />
+          <Nav onClick={() => setVisible(false)} />
           <div className="sidebar-footer">
             <Versions tenantName={state.tenantName} />
             <NetworkId />
@@ -81,7 +82,9 @@ export default function Layout(): JSX.Element | null {
         <header>
           <div className="flex items-center flex-row-reverse h-15 gap-2">
             <div className="mobile-menu">
-              <button className="menu" onClick={() => setVisible((prev) => !prev)} />
+              <button type="button" onClick={() => setVisible((prev) => !prev)}>
+                <Bars3Icon className="w-7" />
+              </button>
             </div>
             <OpenWallet dAppName={dAppName} />
             <ChainSelector tenantName={state.tenantName} />

diff --git a/src/components/Layout/styles.sass b/src/components/Layout/styles.sass
@@ -3,24 +3,18 @@ $medium: 1023px
 $menu: 32px
 
 .mobile-menu
-  display: none
-  width: $menu
-  height: $menu
-  padding: 4px
   margin-left: 4px
-  transition: opacity .2s ease-out
-  opacity: .8
-  :hover
-    opacity: .75
-  @media screen and (max-width: $medium)
-    display: block
 
-  .menu
-    width: 100%
-    height: 100%
-    background: transparent center center no-repeat url(../../assets/bars.svg)
-    svg
-      filter: invert(58%) sepia(0%) saturate(2%) hue-rotate(360deg) brightness(91%) contrast(83%)
+  button
+    display: none
+    width: $menu
+    height: $menu
+    transition: opacity .2s ease-out
+    opacity: .9
+    :hover
+      opacity: .85
+    @media screen and (max-width: $medium)
+      display: block
 
 #sidebar-wrapper
   position: static
@@ -64,7 +58,7 @@ $menu: 32px
 
 nav
   margin: 0 10px auto 10px
-  
+
   .nav-item
     position: relative
     width: 100%
@@ -90,7 +84,7 @@ nav
 
     &:hover, &.active
       background-color: var(--selected-nav-item)
-    
+
     &.coming-soon
       pointer-events: none
       color: var(--text-primary-disabled)
@@ -111,7 +105,7 @@ nav
       width: 140px
       height: auto
       color: var(--text-primary)
-    
+
     .coming-soon-tag
       position: absolute
       right: 0.1em

diff --git a/src/components/OpenWallet.tsx b/src/components/OpenWallet.tsx
@@ -1,4 +1,4 @@
-import { ArrowTrendingUpIcon } from '@heroicons/react/20/solid';
+import { ArrowLeftOnRectangleIcon, ArrowTrendingUpIcon } from '@heroicons/react/20/solid';
 import { WalletSelect } from '@talismn/connect-components';
 import { Button, Dropdown } from 'react-daisyui';
 import { useGlobalState } from '../GlobalStateProvider';
@@ -13,28 +13,40 @@ const OpenWallet = ({ dAppName }: { dAppName: string }): JSX.Element => {
   const { query, balance } = useAccountBalance();
   const { ss58Format, tokenSymbol } = useNodeInfoState().state;
 
+  const trimmedAddress = address
+    ? trimAddress(ss58Format ? getAddressForFormat(address, ss58Format) : address, 4)
+    : undefined;
   return (
     <>
-      {address ? (
-        <Dropdown vertical="end">
+      {trimmedAddress ? (
+        <Dropdown vertical="end" end>
           <Button
             size="sm"
             color="ghost"
-            className="text-sm border-base-300 border-1 bg-base-200 h-9"
+            className="text-sm border-base-300 border-1 bg-base-200 min-h-[2.25rem] h-auto px-1 sm:px-3"
             title={wallet?.title}
           >
             {query.isLoading ? (
-              <Skeleton className="bg-[rgba(0,0,0,.06)] px-2 py-1 mr-2">10000.00 TKN</Skeleton>
+              <Skeleton className="bg-[rgba(0,0,0,.06)] px-2 py-1 mr-2 hidden sm:flex">10000.00 TKN</Skeleton>
             ) : (
-              <span className="flex items-center bg-[rgba(0,0,0,.06)] px-2 py-0.5 mr-2 rounded-lg">
+              <span className="items-center bg-[rgba(0,0,0,.06)] px-2 py-0.5 mr-2 rounded-lg hidden sm:flex">
                 <ArrowTrendingUpIcon className="w-5 h-5 mr-1 text-primary" /> {balance} {tokenSymbol}
               </span>
             )}
-            {trimAddress(ss58Format ? getAddressForFormat(address, ss58Format) : address, 4)}
+            {trimmedAddress}
             <img src={wallet?.logo?.src || ''} className="w-[20px] ml-2" alt={wallet?.logo?.alt || ''} />
           </Button>
-          <Dropdown.Menu className="w-40 p-1">
-            <Dropdown.Item onClick={removeWalletAccount}>Disconnect</Dropdown.Item>
+          <Dropdown.Menu className="card card-compact min-w-[200px] p-3 shado">
+            <div className="flex items-center gap-2 text-gray-500">
+              <strong>{trimmedAddress}</strong>
+            </div>
+            <p className="truncate my-6 text-center text-2xl font-bold" title={`${balance} ${tokenSymbol}`}>
+              {balance} {tokenSymbol}
+            </p>
+            <Button color="secondary" size="sm" onClick={removeWalletAccount}>
+              <ArrowLeftOnRectangleIcon className="mr-2 w-5" />
+              Disconnect
+            </Button>
           </Dropdown.Menu>
         </Dropdown>
       ) : (

diff --git a/src/components/PublicKey/index.tsx b/src/components/PublicKey/index.tsx
@@ -81,7 +81,6 @@ interface AddressProps {
 
 // tslint:disable-next-line no-shadowed-variable
 export const ClickableAddress = memo(function ClickableAddress(props: AddressProps) {
-  console.log(props.inline);
   return (
     <Button
       className="rounded h-1 p-1 m-0"

diff --git a/src/components/Table/index.tsx b/src/components/Table/index.tsx
@@ -136,23 +136,17 @@ const Table = <T,>({
               );
             })}
           </tbody>
-          <tfoot>
-            <tr className="border-t border-base-100">
-              <td colSpan={columns.length}>
-                <Pagination
-                  className="justify-end text-gray-400 normal-case font-normal"
-                  currentIndex={pageIndex}
-                  pageSize={pageSize}
-                  totalCount={totalCount}
-                  pageCount={getPageCount()}
-                  onPrev={previousPage}
-                  onNext={nextPage}
-                />
-              </td>
-            </tr>
-          </tfoot>
         </table>
       </div>
+      <Pagination
+        className="justify-end text-gray-400 normal-case font-normal text-sm mt-1"
+        currentIndex={pageIndex}
+        pageSize={pageSize}
+        totalCount={totalCount}
+        pageCount={getPageCount()}
+        onPrev={previousPage}
+        onNext={nextPage}
+      />
     </>
   );
 };

diff --git a/src/pages/bridge/Issue.tsx b/src/pages/bridge/Issue.tsx
@@ -74,7 +74,7 @@ function FeeBox(props: FeeBoxProps): JSX.Element {
   }, [amount, bridgeFee]);
 
   return (
-    <div className="shadow bg-base-100 rounded-lg p-4 my-4 flex flex-col">
+    <div className="shadow bg-base-100 rounded-lg p-4 my-4 flex flex-col text-sm xs:text-base">
       <div className="flex justify-between">
         <span>To {network}</span>
         <span>
@@ -83,19 +83,19 @@ function FeeBox(props: FeeBoxProps): JSX.Element {
       </div>
       <div className="flex justify-between mt-2">
         <span>Bridge Fee</span>
-        <span>
+        <span className="text-right">
           {bridgeFee.toString()} {bridgedAsset?.getCode()}
         </span>
       </div>
       <div className="flex justify-between mt-2">
         <span>Security Deposit</span>
-        <span>
+        <span className="text-right">
           {griefingCollateral.toString()} {nativeCurrency}
         </span>
       </div>
       <div className="flex justify-between mt-2">
         <span>Transaction Fee</span>
-        <span>
+        <span className="text-right">
           {transactionFee.toFixed(12)} {nativeCurrency}
         </span>
       </div>
@@ -375,15 +375,15 @@ function Issue(props: IssueProps): JSX.Element {
   }, [api, getIssueRequest, requestIssueExtrinsic, selectedVault, walletAccount]);
 
   return (
-    <div className="flex items-center justify-center h-full space-walk grid place-items-center py-4">
+    <div className="flex items-center justify-center h-full space-walk py-4">
       <ConfirmationDialog
         issueRequest={submittedIssueRequest}
         visible={confirmationDialogVisible}
         onClose={() => setConfirmationDialogVisible(false)}
       />
-      <div style={{ width: 500 }}>
+      <div className="w-full">
         <form className="px-5 flex flex-col" onSubmit={handleSubmit(submitRequestIssueExtrinsic)}>
-          <div className="flex items-center">
+          <div className="flex flex-col xs:flex-row xs:items-center gap-1">
             <Controller
               control={control}
               rules={{
@@ -416,7 +416,6 @@ function Issue(props: IssueProps): JSX.Element {
                 />
               )}
             />
-            <div className="px-1" />
             {wrappedAssets && (
               <AssetSelector
                 selectedAsset={selectedAsset}

diff --git a/src/pages/bridge/Redeem.tsx b/src/pages/bridge/Redeem.tsx
@@ -315,13 +315,13 @@ function Redeem(props: RedeemProps): JSX.Element {
   }, [api, getRedeemRequest, requestRedeemExtrinsic, selectedVault, walletAccount]);
 
   return (
-    <div className="flex items-center justify-center h-full space-walk grid place-items-center py-4">
+    <div className="flex items-center justify-center h-full space-walk py-4 w-full">
       <ConfirmationDialog
         redeemRequest={submittedRedeemRequest}
         visible={confirmationDialogVisible}
         onClose={() => setConfirmationDialogVisible(false)}
       />
-      <div style={{ width: 500 }}>
+      <div className="w-full">
         <form className="px-5 flex flex-col" onSubmit={handleSubmit(submitRequestRedeemExtrinsic)}>
           <div className="flex items-center">
             <Controller

diff --git a/src/pages/bridge/index.tsx b/src/pages/bridge/index.tsx
@@ -1,8 +1,8 @@
 import { useMemo, useState } from 'preact/hooks';
 import { Card, Tabs } from 'react-daisyui';
+import { useNodeInfoState } from '../../NodeInfoProvider';
 import Issue from './Issue';
 import Redeem from './Redeem';
-import { useNodeInfoState } from '../../NodeInfoProvider';
 import './styles.css';
 
 function Bridge(): JSX.Element | null {
@@ -22,9 +22,9 @@ function Bridge(): JSX.Element | null {
   }, [chain, nativeCurrency, tabValue, wrappedCurrencyPrefix]);
 
   return chain ? (
-    <div className="h-full flex items-center justify-center grid place-items-center mt-4">
-      <Card className="bridge-card min-h-500 min-w-535 w-fit">
-        <div className="flex justify-between px-10 mt-5">
+    <div className="h-full flex items-center justify-center mt-4">
+      <Card className="bridge-card min-h-500 w-full max-w-[520px]">
+        <div className="flex justify-between px-4 xs:px-10 mt-5">
           <Tabs className="flex flex-grow" boxed value={tabValue} onChange={setTabValue}>
             <Tabs.Tab className="w-2/4 h-fit p-2" value={0}>
               To {chain}