mobile fixes (#259)

pyth-network · Nov 14, 2023 · 70da022 · 70da022 · vercel · Nov 14, 2023
1 parent 0049e77
commit 70da022
Show file tree

Hide file tree

Showing 16 changed files with 119 additions and 133 deletions.
diff --git a/frontend/components/buttons/BackButton.tsx b/frontend/components/buttons/BackButton.tsx
@@ -4,12 +4,13 @@ import { Button } from './Button'
 export type BackButtonProps = {
   onBack: () => void
   disabled?: boolean
+  hideText?: boolean
 }
-export function BackButton({ onBack, disabled }: BackButtonProps) {
+export function BackButton({ onBack, disabled, hideText }: BackButtonProps) {
   return (
     <Button onClick={onBack} type={'secondary'} disabled={disabled}>
       <Arrow className="origin-center rotate-180" />
-      back
+      {hideText ? '' : 'back'}
     </Button>
   )
 }
diff --git a/frontend/components/buttons/Button.tsx b/frontend/components/buttons/Button.tsx
@@ -18,7 +18,7 @@ export function Button({ onClick, type, disabled, children }: ButtonProps) {
 
   return (
     <button
-      className={`${className} disabled:cursor-not-allowed disabled:opacity-40`}
+      className={`${className} flex items-center justify-center disabled:cursor-not-allowed disabled:opacity-40`}
       onClick={onClick}
       disabled={disabled}
     >

diff --git a/frontend/components/buttons/ProceedButton.tsx b/frontend/components/buttons/ProceedButton.tsx
@@ -7,16 +7,18 @@ export type ProceedButtonProps = {
   disabled?: boolean
   tooltipContent?: string
   placement?: string
+  hideText?: boolean
 }
 export function ProceedButton({
   onProceed,
   disabled,
   tooltipContent,
+  hideText,
 }: ProceedButtonProps) {
   return (
     <Tooltip content={tooltipContent} placement={'bottom'}>
       <Button onClick={onProceed} type={'primary'} disabled={disabled}>
-        proceed <Arrow />
+        {hideText ? '' : 'proceed'} <Arrow />
       </Button>
     </Tooltip>
   )

diff --git a/frontend/components/buttons/RowLabelButton.tsx b/frontend/components/buttons/RowLabelButton.tsx
@@ -1,5 +1,4 @@
 import Tooltip from '@images/tooltip-purple.inline.svg'
-import { Button } from './Button'
 
 type RowLabelButtonProps = {
   onClick: () => void
@@ -10,12 +9,13 @@ export function RowLabelButton({ onClick, label }: RowLabelButtonProps) {
   const windowWidth = window.innerWidth
   const mobile = windowWidth < 600
   return (
-    <Button onClick={onClick} type={'tertiary'}>
-      <span className="flex items-center gap-2 pr-2 font-header text-base font-semibold leading-none sm:text-base18 sm:font-semibold">
-        {label}
-        {/* We don't have much space on the mobile screen real estate so we have to choose not to show certain contents */}
-        {!mobile ? <Tooltip /> : null}
-      </span>
-    </Button>
+    <span
+      className="flex items-center gap-2 pr-2 font-header text-base font-semibold leading-none hover:cursor-pointer sm:text-base18"
+      onClick={onClick}
+    >
+      {label}
+      {/* We don't have much space on the mobile screen real estate so we have to choose not to show certain contents */}
+      {!mobile ? <Tooltip /> : null}
+    </span>
   )
 }
diff --git a/frontend/components/modal/BreakdownModal.tsx b/frontend/components/modal/BreakdownModal.tsx
@@ -25,22 +25,22 @@ export function BreakdownModal({
     <ModalWrapper>
       <div className="relative max-h-[80vh] w-full max-w-[588px] bg-darkGray1">
         <ModalCloseButton onClick={() => openModal(false)} />
-        <h3 className=" border-x border-t border-light-35 p-10 font-header text-[36px] font-light">
+        <h3 className=" border-x border-t border-light-35 p-4 font-header text-[24px] font-light sm:p-10 sm:text-[36px]">
           {title}
         </h3>
         <table className="w-full border-collapse bg-[#1B1A2C] font-header text-base18 font-light">
           <tbody className="scrollbar block max-h-[70vh]">
             {info.map(({ label, icon, amount }) => {
               return (
                 <tr key={label}>
-                  <td className="w-full max-w-[440px] border-collapse border border-light-35 py-4 px-10">
+                  <td className="w-full max-w-[440px] border-collapse border border-light-35 py-4 px-4 sm:px-10">
                     <span className="flex items-center justify-start gap-2">
                       {icon}
                       {label}
                     </span>
                   </td>
                   <td className="border-collapse border border-light-35 py-4">
-                    <span className="flex w-[148px] items-center justify-end gap-1 px-10">
+                    <span className="flex items-center justify-end gap-1 px-10">
                       {toStringWithDecimals(amount)} <Pyth />
                     </span>
                   </td>
@@ -49,11 +49,11 @@ export function BreakdownModal({
             })}
 
             <tr className="bg-darkGray1">
-              <td className="w-full max-w-[440px] border-collapse border border-light-35 py-4 px-10">
+              <td className="w-full max-w-[440px] border-collapse border border-light-35 py-4 px-4 sm:px-10">
                 {'Total'}
               </td>
               <td className="border-collapse border border-light-35 py-4">
-                <span className="flex w-[148px] items-center justify-end gap-1 px-10">
+                <span className="flex items-center justify-end gap-1 px-10">
                   {toStringWithDecimals(
                     info.reduce(
                       (prevValue, { amount }) => prevValue.add(amount),

diff --git a/frontend/components/table/SignAndClaimRowLayout.tsx b/frontend/components/table/SignAndClaimRowLayout.tsx
@@ -3,10 +3,10 @@ import { EcosystemConnectButton } from '@components/EcosystemConnectButton'
 import { useCoins } from 'hooks/useCoins'
 import { useSignAndClaimRowState } from 'hooks/useSignAndClaimRowState'
 import { classNames } from 'utils/classNames'
-import { getEcosystemTableLabel } from 'utils/getEcosystemTableLabel'
 import { CoinCell } from './CoinCell'
 import { Ecosystem } from '@components/Ecosystem'
 import { ReactNode } from 'react'
+import { EcosystemRowLabel } from './EcosystemRowLabel'
 
 type SignAndClaimRowLayoutProps = {
   ecosystem: Ecosystem
@@ -25,11 +25,13 @@ export function SignAndClaimRowLayout({
   const { disabled: rowDisabled, tooltipContent: rowTooltipContent } =
     useSignAndClaimRowState(ecosystem)
 
+  const isMobile = window.innerWidth < 480
+
   return (
     <tr className={classNames('border-b border-light-35 ')}>
       <td
         className={classNames(
-          'w-full py-2 pl-10 pr-4',
+          'w-full py-2 pl-4 pr-4 sm:pl-10',
           rowDisabled ? 'opacity-25' : ''
         )}
       >
@@ -39,18 +41,19 @@ export function SignAndClaimRowLayout({
             rowDisabled ? 'pointer-events-none' : ''
           )}
         >
-          <span className="min-w-[150px] font-header text-base18 font-thin">
-            {getEcosystemTableLabel(ecosystem)}
+          <span className="flex min-h-[36px] items-center sm:min-w-[170px]">
+            <EcosystemRowLabel ecosystem={ecosystem} />
           </span>
-
-          <span className="flex flex-1  items-center justify-around gap-5">
-            <span className="mx-2 mr-auto">
-              <EcosystemConnectButton
-                ecosystem={ecosystem}
-                disableOnConnect={true}
-              />
-            </span>
-            <span className="mr-auto">{children}</span>
+          <span className="flex items-center justify-around gap-2 sm:flex-1 sm:gap-5">
+            {!isMobile && (
+              <span className="mr-auto">
+                <EcosystemConnectButton
+                  ecosystem={ecosystem}
+                  disableOnConnect={true}
+                />
+              </span>
+            )}
+            <span className="">{children}</span>
           </span>
         </div>
       </td>

diff --git a/frontend/components/table/TotalAllocationRow.tsx b/frontend/components/table/TotalAllocationRow.tsx
@@ -8,8 +8,8 @@ export function TotalAllocationRow({
 }: TotalAllocationRowProps) {
   return (
     <tr className="border-b border-light-35 ">
-      <td className="w-full bg-darkGray5 py-2 pl-10 pr-4">
-        <div className="flex items-center justify-between">
+      <td className="w-full bg-darkGray5 py-2 pl-4 pr-4 sm:pl-10">
+        <div className="flex justify-between">
           <span className="font-header text-[14px] font-semibold sm:text-base18">
             Eligible Token Allocation
           </span>

diff --git a/frontend/components/wallets/WalletButton.tsx b/frontend/components/wallets/WalletButton.tsx
@@ -111,7 +111,7 @@ export type WalletModalProps = {
 export function WalletModal({ openModal, wallets }: WalletModalProps) {
   return (
     <Modal openModal={openModal}>
-      <h3 className="mb-16  font-header text-[36px] font-light">
+      <h3 className="mb-8 font-header  text-[24px] font-light sm:mb-16 sm:text-[36px]">
         Connect Your Wallet
       </h3>
       <div className="mx-auto flex max-w-[200px] flex-col justify-around gap-y-4">
@@ -136,7 +136,7 @@ export type SingleWalletViewProps = {
 export function SingleWalletView({ wallet, onSelect }: SingleWalletViewProps) {
   return (
     <button
-      className="btn before:btn-bg btn--dark min-w-[117px] before:bg-dark hover:text-dark hover:before:bg-light sm:min-w-[207px]"
+      className="before:btn-bg btn--dark relative flex h-[44px] min-w-[117px] items-center justify-center px-4 font-body text-base transition-all before:bg-dark hover:text-dark hover:before:bg-light sm:min-w-[207px] md:px-8 "
       onClick={() => {
         wallet.onSelect()
         onSelect()

diff --git a/frontend/sections/ClaimStatus.tsx b/frontend/sections/ClaimStatus.tsx
@@ -12,6 +12,7 @@ import { ProceedButton } from '@components/buttons'
 import { SignAndClaimRowLayout } from '@components/table/SignAndClaimRowLayout'
 import { Box } from '@components/Box'
 import Tooltip from '@components/Tooltip'
+import { TotalAllocationRow } from '@components/table/TotalAllocationRow'
 
 export const ClaimStatus = ({
   onProceed,
@@ -46,48 +47,33 @@ export const ClaimStatus = ({
 
   return (
     <Box>
-      <div className="min-w-[650px]">
-        <div className="flex items-center justify-between border-b border-light-35 bg-[#242339] py-8 px-10">
-          <h4 className="   font-header text-[28px] font-light leading-[1.2]">
-            Sign Your Wallets and Claim
-          </h4>
-          <div className="flex gap-4">
-            <ProceedButton
-              onProceed={onProceed}
-              disabled={isProceedDisabled}
-              tooltipContent={proceedTooltipContent}
-            />
-          </div>
+      <div className="flex items-center justify-between border-b border-light-35 bg-[#242339] py-4 px-4 sm:py-8 sm:px-10">
+        <h4 className="font-header text-[20px] font-light leading-[1.2] sm:text-[28px]">
+          Sign Your Wallets and Claim
+        </h4>
+        <div className="flex gap-4">
+          <ProceedButton
+            onProceed={onProceed}
+            disabled={isProceedDisabled}
+            tooltipContent={proceedTooltipContent}
+          />
         </div>
-
-        <table className="">
-          <tbody>
-            {Object.values(Ecosystem).map((ecosystem) => (
-              <SignAndClaimRowLayout ecosystem={ecosystem} key={ecosystem}>
-                {ecosystemsClaimState?.[ecosystem] !== undefined && (
-                  <ClaimState
-                    ecosystemClaimState={ecosystemsClaimState?.[ecosystem]!}
-                  />
-                )}
-              </SignAndClaimRowLayout>
-            ))}
-            <tr className="border-b border-light-35 ">
-              <td className="w-full bg-darkGray5 py-2 pl-10 pr-4">
-                <div className="flex items-center justify-between">
-                  <span className="font-header text-base18 font-semibold">
-                    Eligible Token Allocation
-                  </span>
-                </div>
-              </td>
-              <td className="min-w-[130px] border-l border-light-35 bg-dark-25">
-                <span className=" flex min-h-[60px]  items-center justify-center gap-1 text-[20px] font-semibold">
-                  {totalGrantedCoins} <Coin />{' '}
-                </span>
-              </td>
-            </tr>
-          </tbody>
-        </table>
       </div>
+
+      <table className="">
+        <tbody>
+          {Object.values(Ecosystem).map((ecosystem) => (
+            <SignAndClaimRowLayout ecosystem={ecosystem} key={ecosystem}>
+              {ecosystemsClaimState?.[ecosystem] !== undefined && (
+                <ClaimState
+                  ecosystemClaimState={ecosystemsClaimState?.[ecosystem]!}
+                />
+              )}
+            </SignAndClaimRowLayout>
+          ))}
+          <TotalAllocationRow totalGrantedCoins={totalGrantedCoins} />
+        </tbody>
+      </table>
     </Box>
   )
 }

diff --git a/frontend/sections/LogInWithSolana.tsx b/frontend/sections/LogInWithSolana.tsx
@@ -35,7 +35,7 @@ export const LogInWithSolana = ({ onBack, onProceed }: StepProps) => {
 
   return (
     <Box>
-      <div className="flex items-center justify-between border-b border-light-35  bg-[#242339] py-8 px-10">
+      <div className="flex items-center justify-between border-b border-light-35  bg-[#242339] py-8 px-4 sm:px-10">
         <h4 className="font-header text-[28px] font-light leading-[1.2]">
           Log in with Solana
         </h4>
@@ -55,19 +55,11 @@ export const LogInWithSolana = ({ onBack, onProceed }: StepProps) => {
           <SelectWallets />
         ) : (
           <div className="mt-6 flex flex-wrap items-center justify-between gap-2">
-            <div>
-              <WalletConnectedButton
-                onClick={disconnect}
-                address={buttonText!}
-                icon={wallet?.adapter.icon}
-              />
-              <span
-                className="mt-4 block text-center font-body font-normal underline hover:cursor-pointer"
-                onClick={disconnect}
-              >
-                Change wallet
-              </span>
-            </div>
+            <WalletConnectedButton
+              onClick={disconnect}
+              address={buttonText!}
+              icon={wallet?.adapter.icon}
+            />
             <ProceedButton onProceed={onProceed} />
           </div>
         )}

diff --git a/frontend/sections/LoggedInSolana.tsx b/frontend/sections/LoggedInSolana.tsx
@@ -13,7 +13,7 @@ export const LoggedInSolana = ({ onBack, onProceed }: StepProps) => {
 
   return (
     <Box>
-      <div className="flex items-center justify-between border-b border-light-35  bg-[#242339] py-8 px-10">
+      <div className="flex items-center justify-between border-b border-light-35  bg-[#242339] py-8 px-4 sm:px-10">
         <h4 className="font-header text-[28px] font-light leading-[1.2]">
           Log in with Solana
         </h4>

diff --git a/frontend/sections/SignAndClaim.tsx b/frontend/sections/SignAndClaim.tsx
@@ -195,7 +195,7 @@ export const SignAndClaim = ({ onBack, onProceed }: SignAndClaimProps) => {
     <>
       {screen == 1 ? (
         <Box>
-          <div className="flex items-center justify-between border-b border-light-35  bg-[#242339] py-8 px-10">
+          <div className="flex items-center justify-between border-b border-light-35  bg-[#242339] py-8 px-4 sm:px-10">
             <h4 className="font-header text-[28px] font-light leading-[1.2]">
               Sign Your Wallets and Claim
             </h4>
@@ -213,11 +213,9 @@ export const SignAndClaim = ({ onBack, onProceed }: SignAndClaimProps) => {
               action is required for your Discord account.
             </p>
             <p>Your claimed PYTH tokens will go to this Solana wallet: </p>
-            <div className="mt-4 flex justify-between gap-4">
+            <div className="mt-8 flex items-center justify-between gap-4">
               <SolanaWalletCopyButton />
-              <div className="mt-8">
-                <ProceedButton onProceed={() => setScreen(2)} />
-              </div>
+              <ProceedButton onProceed={() => setScreen(2)} />
             </div>
           </div>
         </Box>
@@ -254,7 +252,7 @@ function ClaimAirdropModal({
 }: StepProps & { openModal: () => void }) {
   return (
     <Modal openModal={openModal}>
-      <h3 className="mb-8  font-header text-[36px] font-light">
+      <h3 className="mb-8  font-header text-[30px] font-light sm:text-[36px]">
         Claim Airdrop
       </h3>
       <p className="mx-auto max-w-[454px] font-body text-base16">