From 1bfabb24d970ea3c8fa365951e56457ab83f9cd8 Mon Sep 17 00:00:00 2001
From: saml33 <slam.uke@gmail.com>
Date: Tue, 26 Sep 2023 14:41:37 +1000
Subject: [PATCH] buy token button on mobile

---
 components/Layout.tsx               |  4 ++--
 components/Stake.tsx                | 32 +++++++++++++++++++++--------
 components/TopBar.tsx               | 18 ++++++++++------
 components/wallet/ConnectedMenu.tsx | 13 +++++++-----
 styles/globals.css                  |  4 ++--
 5 files changed, 48 insertions(+), 23 deletions(-)

diff --git a/components/Layout.tsx b/components/Layout.tsx
index 6bbf216..2a84e92 100644
--- a/components/Layout.tsx
+++ b/components/Layout.tsx
@@ -27,10 +27,10 @@ const Layout = ({ children }: { children: ReactNode }) => {
     >
       <SunburstBackground className="text-th-primary-1" />
       <div className={`relative min-h-screen`}>
-        <div className="absolute bottom-0 h-44 w-full border-b-[20px] border-th-primary-4 bg-gradient-to-b from-th-primary-3 to-th-primary-2" />
+        <div className="border-th-primary-4 from-th-primary-3 to-th-primary-2 absolute bottom-0 h-44 w-full border-b-[20px] bg-gradient-to-b" />
         <div className="relative z-10">
           <TopBar />
-          <div className="mx-auto max-w-3xl px-6 pb-12 md:pb-20 lg:px-12">
+          <div className="mx-auto max-w-3xl px-6 pb-20 lg:px-12">
             {children}
           </div>
           <DeployRefreshManager />
diff --git a/components/Stake.tsx b/components/Stake.tsx
index d89dad0..cc957d6 100644
--- a/components/Stake.tsx
+++ b/components/Stake.tsx
@@ -6,12 +6,15 @@ import UnstakeForm from '@components/UnstakeForm'
 import mangoStore from '@store/mangoStore'
 import { STAKEABLE_TOKENS } from 'utils/constants'
 import { formatTokenSymbol } from 'utils/tokens'
+import { useViewport } from 'hooks/useViewport'
+import { ArrowTopRightOnSquareIcon } from '@heroicons/react/20/solid'
 
 const set = mangoStore.getState().set
 
 const Stake = () => {
   const [activeFormTab, setActiveFormTab] = useState('Add')
   const selectedToken = mangoStore((s) => s.selectedToken)
+  const { isDesktop } = useViewport()
 
   const handleTokenSelect = useCallback((token: string) => {
     set((state) => {
@@ -53,15 +56,28 @@ const Stake = () => {
         </div>
       </div>
       {activeFormTab === 'Add' ? (
-        <div className="fixed bottom-8 left-8">
-          <button className="raised-button text-shadow flex h-20 w-20 items-center justify-center rounded-full border border-th-button-hover p-3 text-center text-base font-extrabold">
-            <div>
-              <p className="text-th-bkg-1">Buy</p>
-              <p className="-mt-1.5 text-th-bkg-1">
-                {formatTokenSymbol(selectedToken)}
-              </p>
+        <div className="fixed bottom-0 left-0 w-full md:bottom-8 md:left-8 md:w-auto">
+          {isDesktop ? (
+            <a className="raised-button text-shadow flex h-20 w-20 cursor-pointer items-center justify-center rounded-full border border-th-button-hover p-3 text-center text-base font-extrabold">
+              <div>
+                <p className="text-th-bkg-1">Buy</p>
+                <p className="-mt-1.5 text-th-bkg-1">
+                  {formatTokenSymbol(selectedToken)}
+                </p>
+              </div>
+            </a>
+          ) : (
+            <div className="flex justify-end border-t-2 border-th-fgd-1 bg-th-bkg-1 px-4 py-3">
+              <a>
+                <div className="flex items-center">
+                  <span className="mr-1.5 font-bold">{`Buy ${formatTokenSymbol(
+                    selectedToken,
+                  )}`}</span>
+                  <ArrowTopRightOnSquareIcon className="-mt-0.5 h-5 w-5" />
+                </div>
+              </a>
             </div>
-          </button>
+          )}
         </div>
       ) : null}
     </>
diff --git a/components/TopBar.tsx b/components/TopBar.tsx
index 9f12509..4611b3a 100644
--- a/components/TopBar.tsx
+++ b/components/TopBar.tsx
@@ -24,8 +24,8 @@ const TopBar = () => {
   return (
     <div className="mb-8 flex h-20 items-center justify-between px-6">
       <Link href="/" shallow={true}>
-        <div className="flex items-center">
-          <BoostLogo className="h-auto w-10 shrink-0 cursor-pointer" />
+        <div className="group flex items-center">
+          <BoostLogo className="h-auto w-10 shrink-0 cursor-pointer group-hover:animate-shake" />
           <span className="text-shadow ml-2 text-[27px] font-black text-th-bkg-1">
             Boost!
           </span>
@@ -39,7 +39,7 @@ const TopBar = () => {
         {connected ? <ConnectedMenu /> : <ConnectWalletButton />}
       </div>
       {!isOnline ? (
-        <div className="bg-th-down absolute left-1/2 top-3 z-10 flex h-10 w-max -translate-x-1/2 items-center rounded-full px-4 py-2 md:top-8">
+        <div className="absolute left-1/2 top-3 z-10 flex h-10 w-max -translate-x-1/2 items-center rounded-full bg-th-down px-4 py-2 md:top-8">
           <ExclamationTriangleIcon className="h-5 w-5 shrink-0 text-th-fgd-1" />
           <p className="ml-2 text-th-fgd-1">
             Your connection appears to be offline
@@ -52,9 +52,15 @@ const TopBar = () => {
 
 export default TopBar
 
-const NavLink = (
-  { active, path, text }: { active: boolean; path: string; text: string },
-) => {
+const NavLink = ({
+  active,
+  path,
+  text,
+}: {
+  active: boolean
+  path: string
+  text: string
+}) => {
   return (
     <Link href={path} shallow={true}>
       <span
diff --git a/components/wallet/ConnectedMenu.tsx b/components/wallet/ConnectedMenu.tsx
index 038be8a..1c9f56f 100644
--- a/components/wallet/ConnectedMenu.tsx
+++ b/components/wallet/ConnectedMenu.tsx
@@ -53,16 +53,19 @@ const ConnectedMenu = () => {
               isDesktop ? 'w-44' : 'w-12'
             } focus:outline-none`}
           >
-            <div className="ml-1.5 flex items-center" id="account-step-one">
+            <div
+              className="flex items-center justify-center md:ml-1.5 md:justify-start"
+              id="account-step-one"
+            >
               {!mangoAccountLoading ? (
                 <ProfileImage
-                  imageSize="40"
-                  placeholderSize="24"
+                  imageSize={!isDesktop ? '32' : '40'}
+                  placeholderSize={!isDesktop ? '20' : '24'}
                   isOwnerProfile
                 />
               ) : (
-                <div className="flex h-10 w-10 items-center justify-center rounded-full bg-th-bkg-2">
-                  <Loading className="h-6 w-6" />
+                <div className="flex h-8 w-8 items-center justify-center rounded-full bg-th-bkg-2 md:h-10 md:w-10">
+                  <Loading className="h-5 w-5 md:h-6 md:w-6" />
                 </div>
               )}
               {!loadProfileDetails && isDesktop ? (
diff --git a/styles/globals.css b/styles/globals.css
index 38cc21f..c26197a 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -295,7 +295,7 @@ table p {
 }
 
 #range-slider-gradient .range-slider__thumb[data-upper] {
-  @apply h-7 w-4 rounded-full border border-th-primary-3 bg-th-primary-1 shadow-[inset_0_-3px_0px_rgba(0,0,0,0.15)];
+  @apply border-th-primary-3 bg-th-primary-1 h-7 w-4 rounded-full border shadow-[inset_0_-3px_0px_rgba(0,0,0,0.15)];
 }
 
 #range-slider-gradient .range-slider__range {
@@ -372,7 +372,7 @@ table p {
 }
 
 .raised-button-primary {
-  @apply relative bg-th-primary-1 transition-none;
+  @apply bg-th-primary-1 relative transition-none;
   box-shadow: 0 4px var(--primary-3);
 }