some responsive styling

components/AccountStats.tsx

@@ -4,7 +4,7 @@ const AccountStats = ({ token }: { token: string }) => {
   return (
     <>
       <h2 className="mb-4 text-2xl">{`Boosted ${formatTokenSymbol(token)}`}</h2>
-      <div className="grid grid-cols-1 gap-6">
+      <div className="grid grid-cols-2 gap-6 md:grid-cols-1">
         <div>
           <p className="mb-1">Est. APR</p>
           <span className="text-2xl font-bold">14.89%</span>

components/Layout.tsx

@@ -1,7 +1,6 @@
 import { Fragment, ReactNode, useEffect, useMemo, useState } from 'react'
 import { ArrowPathIcon } from '@heroicons/react/20/solid'
 import mangoStore from '@store/mangoStore'
-import BottomBar from './mobile/BottomBar'
 import TopBar from './TopBar'
 import useLocalStorageState from '../hooks/useLocalStorageState'
 import { ACCEPT_TERMS_KEY, SECONDS } from '../utils/constants'
@@ -26,16 +25,8 @@ const Layout = ({ children }: { children: ReactNode }) => {
       className={`${themeData.fonts.body.variable} ${themeData.fonts.display.variable} ${themeData.fonts.mono.variable} font-sans`}
     >
       <div className={`min-h-screen grow text-th-fgd-2 transition-all`}>
-        <div className="fixed bottom-0 left-0 z-20 w-full md:hidden">
-          <BottomBar />
-        </div>
-        {/* note: overflow-x-hidden below prevents position sticky from working in activity feed  */}
-        <div
-          className={`w-full transition-all duration-${sideBarAnimationDuration} ease-in-out`}
-        >
-          <TopBar />
-          {children}
-        </div>
+        <TopBar />
+        {children}
         <DeployRefreshManager />
         <TermsOfUse />
       </div>

components/Positions.tsx

@@ -70,68 +70,70 @@ const Positions = ({
           Show Inactive
         </Switch>
       </div>
-      {positions.map((position, i) => {
-        const { balance, bank } = position
-        return bank ? (
-          <div
-            className="rounded-2xl border border-th-fgd-1 p-6"
-            key={i + balance}
-          >
-            <div className="mb-6 flex items-center justify-between border-b border-th-bkg-4 pb-6">
-              <div className="flex items-center space-x-3">
-                <TokenLogo bank={bank} size={40} />
+      <div className="grid grid-cols-1 gap-6 sm:grid-cols-2">
+        {positions.map((position, i) => {
+          const { balance, bank } = position
+          return bank ? (
+            <div
+              className="rounded-2xl border border-th-fgd-1 p-6"
+              key={i + balance}
+            >
+              <div className="mb-6 flex flex-col border-b border-th-bkg-4 pb-6 md:flex-row md:items-center md:justify-between">
+                <div className="mb-4 flex items-center space-x-3 md:mb-0">
+                  <TokenLogo bank={bank} size={40} />
+                  <div>
+                    <h3>{formatTokenSymbol(bank.name)}</h3>
+                    <span
+                      className={`text-sm ${
+                        balance ? 'text-th-fgd-1' : 'text-th-fgd-4'
+                      }`}
+                    >
+                      {balance ? 'Opened 2 weeks ago' : 'No Position'}
+                    </span>
+                  </div>
+                </div>
+                <Button
+                  onClick={() => handleAddOrManagePosition(bank.name)}
+                  secondary
+                >
+                  {balance ? 'Manage' : 'Add Position'}
+                </Button>
+              </div>
+              <div className="grid grid-cols-2 gap-4">
                 <div>
-                  <h3>{formatTokenSymbol(bank.name)}</h3>
-                  <span
-                    className={`text-sm ${
-                      balance ? 'text-th-fgd-1' : 'text-th-fgd-4'
-                    }`}
-                  >
-                    {balance ? 'Opened 2 weeks ago' : 'No Position'}
+                  <p className="mb-1">Position Size</p>
+                  <span className="text-xl font-bold">
+                    {balance} {formatTokenSymbol(bank.name)}
+                  </span>
+                </div>
+                <div>
+                  <p className="mb-1">Est. APR</p>
+                  <span className="text-xl font-bold">14.89%</span>
+                </div>
+                <div>
+                  <p className="mb-1">Leverage</p>
+                  <span className="text-xl font-bold">
+                    {balance ? '3x' : '0x'}
+                  </span>
+                </div>
+                <div>
+                  <p className="mb-1">Earned</p>
+                  <span className="text-xl font-bold">
+                    {balance ? '3.321 SOL' : '0 SOL'}
+                  </span>
+                </div>
+                <div>
+                  <p className="mb-1">Liquidation Price</p>
+                  <span className="whitespace-nowrap text-xl font-bold">
+                    {balance ? '1.234' : '0'}{' '}
+                    {`${formatTokenSymbol(bank.name)}/SOL`}
                   </span>
                 </div>
               </div>
-              <Button
-                onClick={() => handleAddOrManagePosition(bank.name)}
-                secondary
-              >
-                {balance ? 'Manage' : 'Add Position'}
-              </Button>
             </div>
-            <div className="grid grid-cols-5 gap-4">
-              <div>
-                <p className="mb-1">Position Size</p>
-                <span className="text-xl font-bold">
-                  {balance} {formatTokenSymbol(bank.name)}
-                </span>
-              </div>
-              <div>
-                <p className="mb-1">Est. APR</p>
-                <span className="text-xl font-bold">14.89%</span>
-              </div>
-              <div>
-                <p className="mb-1">Leverage</p>
-                <span className="text-xl font-bold">
-                  {balance ? '3x' : '0x'}
-                </span>
-              </div>
-              <div>
-                <p className="mb-1">Earned</p>
-                <span className="text-xl font-bold">
-                  {balance ? '3.321 SOL' : '0 SOL'}
-                </span>
-              </div>
-              <div>
-                <p className="mb-1">Liquidation Price</p>
-                <span className="text-xl font-bold">
-                  {balance ? '1.234' : '0'}{' '}
-                  {`${formatTokenSymbol(bank.name)}/SOL`}
-                </span>
-              </div>
-            </div>
-          </div>
-        ) : null
-      })}
+          ) : null
+        })}
+      </div>
     </div>
   ) : null
 }

components/Stake.tsx

@@ -37,7 +37,7 @@ const Stake = () => {
       </div>
       <div className="grid grid-cols-12">
         <div
-          className={`col-span-7 rounded-bl-2xl border border-th-fgd-1 bg-th-bkg-1 text-th-fgd-1`}
+          className={`order-2 col-span-12 rounded-b-2xl border border-th-fgd-1 bg-th-bkg-1 text-th-fgd-1 md:order-2 md:col-span-7 md:rounded-br-none`}
         >
           <div className={`p-8 pt-6`}>
             <div className="pb-2">
@@ -56,7 +56,7 @@ const Stake = () => {
           </div>
         </div>
         <div
-          className={`col-span-5 rounded-br-2xl border-y border-r border-th-fgd-1 bg-th-bkg-2 p-8 pt-6`}
+          className={`order-1 col-span-12 border-x border-t border-th-fgd-1 bg-th-bkg-2 p-8 pt-6 md:order-2 md:col-span-5 md:rounded-br-2xl md:border-b md:border-l-0`}
         >
           <AccountStats token={selectedToken} />
         </div>

components/TokenButton.tsx

@@ -1,6 +1,7 @@
 import useStakeApr from 'hooks/useStakeAprs'
 import Image from 'next/image'
 import { formatTokenSymbol } from 'utils/tokens'
+import SheenLoader from './shared/SheenLoader'
 
 const TokenButton = ({
   handleTokenSelect,
@@ -11,7 +12,13 @@ const TokenButton = ({
   selectedToken: string
   handleTokenSelect: (v: string) => void
 }) => {
-  const { data: stakeAprs } = useStakeApr()
+  const {
+    data: stakeAprs,
+    isLoading: loadingStakeAprs,
+    isFetching: fetchingStakeAprs,
+  } = useStakeApr()
+
+  const loadingAprs = loadingStakeAprs || fetchingStakeAprs
 
   return (
     <button
@@ -31,10 +38,13 @@ const TokenButton = ({
           {formatTokenSymbol(tokenName)}
         </span>
         <span>
-          {stakeAprs?.[tokenName.toLowerCase()]
-            ? (stakeAprs?.[tokenName.toLowerCase()] * 100).toFixed(2)
-            : null}
-          %
+          {loadingAprs ? (
+            <SheenLoader className="mt-0.5">
+              <div className="h-5 w-10 bg-th-bkg-3" />
+            </SheenLoader>
+          ) : stakeAprs?.[tokenName.toLowerCase()] ? (
+            `${(stakeAprs?.[tokenName.toLowerCase()] * 100).toFixed(2)}%`
+          ) : null}
         </span>
       </div>
     </button>

components/shared/SheenLoader.tsx

@@ -0,0 +1,23 @@
+import { ReactNode } from 'react'
+
+// Children should be a shape or set of shapes with a bg color to animate over
+
+const SheenLoader = ({
+  children,
+  className,
+}: {
+  children: ReactNode
+  className?: string
+}) => {
+  return (
+    <div className="flex items-center">
+      <div
+        className={`relative rounded-md ${className} overflow-hidden before:absolute before:inset-0 before:-translate-x-full before:animate-[shimmer_4s_infinite] before:bg-gradient-to-r before:from-transparent before:via-th-bkg-4 before:to-transparent before:opacity-50`}
+      >
+        {children}
+      </div>
+    </div>
+  )
+}
+
+export default SheenLoader

pages/index.tsx

@@ -34,7 +34,7 @@ const Index: NextPage = () => {
   }, [selectedToken])
 
   return (
-    <div className="mx-auto max-w-5xl flex-col pb-20">
+    <div className="mx-auto max-w-6xl px-6 pb-12 md:pb-20 lg:px-12">
       <div className="mb-6 grid grid-cols-3 rounded-xl border border-th-fgd-1">
         <button
           className={`col-span-1 mx-auto w-full rounded-l-xl border-r border-th-fgd-1 py-4 font-bold ${