getwax · JohnGuilding · May 9, 2023 · May 9, 2023 · May 9, 2023 · May 9, 2023
diff --git a/extension/source/Home/Onboarding/OnboardingActionPanel.tsx b/extension/source/Home/Onboarding/OnboardingActionPanel.tsx
@@ -24,7 +24,9 @@ const OnboardingActionPanel: FunctionComponent = () => {
     <div
       className={[
         'h-screen',
-        'p-32',
+        'p-4',
+        'md:p-8',
+        'xl:p-28',
         'flex',
         'flex-col',
         'flex-grow',
@@ -33,7 +35,7 @@ const OnboardingActionPanel: FunctionComponent = () => {
       ].join(' ')}
     >
       <WorkflowNumbers max={3} />
-      <div className="w-96">
+      <div className="w-[24rem] lg:w-[28rem]">
         {
           [
             <PasswordCreationPanel

diff --git a/extension/source/Home/Onboarding/OnboardingInfoPanel.tsx b/extension/source/Home/Onboarding/OnboardingInfoPanel.tsx
@@ -56,19 +56,19 @@ const OnboardingInfoPanel: FunctionComponent = () => {
   return (
     <div className="bg-blue-500 flex flex-col w-2/5">
       <div
-        className="h-screen p-32 flex flex-col justify-between"
+        className="h-screen p-4 md:p-8 xl:p-28 flex flex-col justify-between"
         style={{
           background: `center no-repeat url(${runtime.getURL(
             'assets/info-panel-pretty-curve.svg',
           )})`,
         }}
       >
         <div
-          className="h-64 w-full rounded-md"
+          className="h-24 md:h-40 lg:h-64 w-full rounded-md"
           style={{
             background: `url(${runtime.getURL(
               `assets/onboarding-art-${pageIndex + 1}.svg`,
-            )}) no-repeat center`,
+            )}) no-repeat center contain`,
           }}
         />
         <div className="flex-grow text-white py-8">

diff --git a/extension/source/Home/Onboarding/ReviewSecretPhrasePanel.tsx b/extension/source/Home/Onboarding/ReviewSecretPhrasePanel.tsx
@@ -103,7 +103,7 @@ const ReviewSecretPhrasePanel: FunctionComponent<{
   };
 
   return (
-    <div className="w-[28rem]">
+    <div className="w-[24rem] lg:w-[28rem]">
       <div className="mb-10">
         <div className="font-bold">
           Ok, last step before you get started with Quill!

diff --git a/extension/source/Home/Onboarding/ViewSecretPhrasePanel.tsx b/extension/source/Home/Onboarding/ViewSecretPhrasePanel.tsx
@@ -17,7 +17,7 @@ const ViewSecretPhrasePanel: FunctionComponent<{
   }
 
   return (
-    <div className="w-[28rem]">
+    <div className="w-[24rem] lg:w-[28rem]">
       <div className="mb-10">
         <div className="font-bold">
           Congratulations!

diff --git a/extension/source/Home/Wallet/Navigation.tsx b/extension/source/Home/Wallet/Navigation.tsx
@@ -1,12 +1,15 @@
 import * as React from 'react';
 import {
+  List,
+  CaretDoubleLeft,
   Wallet,
   Link as LinkIcon,
   AddressBook,
   GearSix,
   Lock,
 } from 'phosphor-react';
 import { Link, useLocation } from 'react-router-dom';
+import { useState } from 'react';
 import QuillHeading from '../../components/QuillHeading';
 
 const navigationTargets = [
@@ -35,6 +38,7 @@ const navigationTargets = [
 
 export const Navigation: React.FunctionComponent = () => {
   const { pathname } = useLocation();
+  const [sidebarVisible, setSidebarVisible] = useState(false);
 
   const isCurrentRoute = (target: string) => {
     if (pathname === target) {
@@ -49,30 +53,79 @@ export const Navigation: React.FunctionComponent = () => {
   };
 
   return (
-    <div className="flex flex-col w-52 px-4 py-12">
-      <QuillHeading />
-      <div className="mt-8 flex flex-col gap-4 justify-items-center">
-        {navigationTargets.map((item) => (
-          <Link to={item.link ?? item.target} key={item.name}>
-            <div
-              className={`flex gap-4 p-3 rounded-lg ${
-                isCurrentRoute(item.target) && 'bg-grey-200'
-              }`}
-            >
-              <span
-                className={`${isCurrentRoute(item.target) && 'text-blue-500'}`}
+    <nav className="flex">
+      <div
+        className={`${
+          sidebarVisible ? 'absolute' : 'flex-1'
+        } items-center justify-center`}
+      >
+        <button
+          className="p-4 lg:hidden"
+          type="button"
+           => setSidebarVisible(!sidebarVisible)}
+        >
+          {sidebarVisible ? (
+            <CaretDoubleLeft className="icon-md" />
+          ) : (
+            <List className="icon-md" />
+          )}
+        </button>
+        <div
+          className={`${
+            sidebarVisible ? 'hidden' : 'flex-1'
+          } p-2 lg:hidden mt-4 flex flex-col gap-4 justify-items-center`}
+        >
+          {navigationTargets.map((item) => (
+            <Link to={item.link ?? item.target} key={item.name}>
+              <div
+                className={`flex gap-4 p-2 rounded-lg ${
+                  isCurrentRoute(item.target) && 'bg-grey-200'
+                }`}
               >
-                {item.icon}
-              </span>
-              {item.name}
-            </div>
-          </Link>
-        ))}
+                <span
+                  className={`${
+                    isCurrentRoute(item.target) && 'text-blue-500'
+                  }`}
+                >
+                  {item.icon}
+                </span>
+              </div>
+            </Link>
+          ))}
+        </div>
       </div>
-      <div className="flex gap-2 p-3 rounded-lg mt-20">
-        <Lock className="icon-md" />
-        Lock
+
+      <div
+        className={`w-52 px-4 py-12 ${
+          sidebarVisible ? 'block' : 'hidden'
+        } lg:block lg:flex-shrink-0`}
+      >
+        <QuillHeading />
+        <div className="mt-8 flex flex-col gap-4 justify-items-center">
+          {navigationTargets.map((item) => (
+            <Link to={item.link ?? item.target} key={item.name}>
+              <div
+                className={`flex gap-4 p-3 rounded-lg ${
+                  isCurrentRoute(item.target) && 'bg-grey-200'
+                }`}
+              >
+                <span
+                  className={`${
+                    isCurrentRoute(item.target) && 'text-blue-500'
+                  }`}
+                >
+                  {item.icon}
+                </span>
+                {item.name}
+              </div>
+            </Link>
+          ))}
+        </div>
+        <div className="flex gap-2 p-3 rounded-lg mt-20">
+          <Lock className="icon-md" />
+          Lock
+        </div>
       </div>
-    </div>
+    </nav>
   );
 };
diff --git a/extension/source/Home/Wallet/Wallets/Balance.tsx b/extension/source/Home/Wallet/Wallets/Balance.tsx
@@ -35,7 +35,7 @@ const Balance: FunctionComponent<{ address: string }> = ({ address }) => {
     return <Loading />;
   }
 
-  return <>{ethers.utils.formatEther($balanceWeiHex)} ETH</>;
+  return <>{ethers.utils.formatEther($balanceWeiHex).slice(0, 12)} ETH</>;
 };
 
 export default Balance;
diff --git a/extension/source/Home/Wallet/Wallets/Recovery/RecoverWalletModal.tsx b/extension/source/Home/Wallet/Wallets/Recovery/RecoverWalletModal.tsx
@@ -31,7 +31,7 @@ const WorkflowNumbers: FunctionComponent<{
   );
 };
 
-const RecoverWalletModal = () => {
+const RecoverWalletModal = (props: { className?: string }) => {
   const [modalIsOpen, setIsOpen] = useState<boolean>(false);
   const [pageIndex, setPageIndex] = useState<number>(0);
   const [walletPrivateKey, setWalletPrivateKey] = useState<string>('');
@@ -44,7 +44,7 @@ const RecoverWalletModal = () => {
   };
 
   return (
-    <div>
+    <div className={`${props.className}`}>
       <Button  => setIsOpen(true)} className="btn-secondary">
         Import
       </Button>

diff --git a/extension/source/Home/Wallet/Wallets/SendDetail/AmountSelector.tsx b/extension/source/Home/Wallet/Wallets/SendDetail/AmountSelector.tsx
@@ -47,7 +47,7 @@ const AmountSelector: FunctionComponent<{
   return (
     <div className="flex flex-col gap-4">
       <div className="text-body">Select Amount</div>
-      <div className="flex justify-end gap-2">
+      <div className="flex justify-start gap-2">
         <TextBox
           value={amountValid}
           className="text-right"
@@ -58,12 +58,12 @@ const AmountSelector: FunctionComponent<{
           <Display cell={selectedAsset} />
         </div>
       </div>
-      <div className="flex justify-end gap-2">
+      <div className="flex justify-start gap-2">
         <div>
           <CurrencyDisplay chainValue={amountValidNumber} />
         </div>
       </div>
-      <div className="flex justify-end">
+      <div className="flex justify-start">
         <Button
           className="btn-primary"
            () =>

diff --git a/extension/source/Home/Wallet/Wallets/SendDetail/AssetSelector.tsx b/extension/source/Home/Wallet/Wallets/SendDetail/AssetSelector.tsx
@@ -17,11 +17,12 @@ const AssetSelector: FunctionComponent<{
   return (
     <div className="flex flex-col gap-4">
       <div className="text-body">Select Asset</div>
-      <div className="grid grid-cols-2 gap-4">
+      <div className="grid grid-cols-2 sm:grid-cols-1 2xl:grid-cols-2 gap-4">
         <div
           className={[
             'flex',
-            'flex-row',
+            'flex-col',
+            'sm:flex-row',
             'p-4',
             'gap-4',
             'rounded-lg',

diff --git a/extension/source/Home/Wallet/Wallets/SendDetail/RecipientSelector.tsx b/extension/source/Home/Wallet/Wallets/SendDetail/RecipientSelector.tsx
@@ -49,7 +49,7 @@ const RecipientSelector: FunctionComponent<{
         <TextBox value={searchText} placeholder="Search" />
       </div>
       {recipients.length === 0 && 'No recipients found'}
-      <div className="grid grid-cols-2 gap-4">
+      <div className="grid grid-cols-2 sm:grid-cols-1 2xl:grid-cols-2 gap-4">
         {recipients.map((r) => {
           if (r === undefined) {
             return <div />;
@@ -60,7 +60,9 @@ const RecipientSelector: FunctionComponent<{
               key={`${r.name}:${r.address}`}
               className={[
                 'flex',
-                'flex-row',
+                'flex-col',
+                'lg:flex-row',
+                'flex-wrap',
                 'p-4',
                 'gap-4',
                 'rounded-lg',

diff --git a/extension/source/Home/Wallet/Wallets/WalletSummary.tsx b/extension/source/Home/Wallet/Wallets/WalletSummary.tsx
@@ -34,24 +34,24 @@ export const WalletSummary: React.FunctionComponent<IWalletSummary> = ({
       ${expanded && 'bg-white border-2 border-blue-500 shadow-xl'}
     `}
     >
-      <div className="flex place-items-center gap-4 ">
-        <div className="w-5 h-5">
+      <div className="flex place-items-center gap-4 flex-wrap">
+        <div className="flex flex-row gap-2 items-center justify-center">
           <input
             type="radio"
             checked={expanded}
             readOnly
             className="h-5 w-5 cursor-pointer"
             {...onAction(onActionParam)}
           />
-        </div>
-
-        <div className="flex-grow flex place-items-center gap-2">
           <Blockies
             seed={wallet.address}
             className="rounded-md"
             size={5}
             scale={8}
           />
+        </div>
+
+        <div className="flex-grow flex place-items-center gap-2">
           <div>
             {wallet.name}
             <div
@@ -66,15 +66,15 @@ export const WalletSummary: React.FunctionComponent<IWalletSummary> = ({
           </div>
         </div>
 
-        <div className="text-body">
+        <div className="text-sm md:text-body">
           <Balance address={wallet.address} />
         </div>
       </div>
 
       {/* Details */}
       {expanded && (
         <div className="mt-6">
-          <div className="flex gap-2">
+          <div className="flex flex-col lg:flex-row gap-2">
             <Button
                => navigate('/wallets/send')}
               className="btn-primary"

diff --git a/extension/source/Home/Wallet/Wallets/WalletWrapper.tsx b/extension/source/Home/Wallet/Wallets/WalletWrapper.tsx
@@ -24,11 +24,32 @@ export const WalletsWrapper: FunctionComponent = () => {
 
   return (
     <div className="">
-      <div className="flex justify-between place-items-center">
+      <div
+        className={[
+          'flex',
+          'flex-col',
+          'lg:flex-row',
+          'justify-between',
+          'place-items-center',
+        ].join(' ')}
+      >
         <div className="text-body">Wallets</div>
-        <div className="flex gap-2">
-          <RecoverWalletModal />
-          <Button  className="btn-primary">
+        <div
+          className={[
+            'flex',
+            'gap-2',
+            'mt-4',
+            'lg:mt-0',
+            'lg:ml-2',
+            'w-full',
+            'lg:w-auto',
+          ].join(' ')}
+        >
+          <RecoverWalletModal className="w-1/2" />
+          <Button
+            >
+            className="btn-primary w-1/2 justify-center"
+          >
             Add
           </Button>
         </div>

diff --git a/extension/source/Home/Wallet/WalletsPage.tsx b/extension/source/Home/Wallet/WalletsPage.tsx
@@ -82,7 +82,8 @@ export const WalletsPage: React.FunctionComponent = () => (
           'bg-grey-100',
           'border-x',
           'border-grey-300',
-          'p-8',
+          'p-4',
+          'lg:p-8',
           'overflow-y-scroll',
         ].join(' ')}
       >
@@ -99,7 +100,7 @@ export const WalletsPage: React.FunctionComponent = () => (
       </div>
 
       {/* details pane */}
-      <div className="w-2/3 p-8 overflow-y-scroll">
+      <div className="w-2/3 p-4 lg:p-8 overflow-y-scroll">
         <Routes>
           {routes.map((item) => (
             <Route