chore/tweaks (#474)

* chore: tweak UI * fix: sidebar arrow UX
consolelabs · Dec 21, 2023 · 2c88758 · 2c88758
1 parent 3641b29
commit 2c88758
Show file tree

Hide file tree

Showing 14 changed files with 270 additions and 382 deletions.
diff --git a/.changeset/thirty-days-switch.md b/.changeset/thirty-days-switch.md
@@ -0,0 +1,6 @@
+---
+'@mochi-ui/sidebar': patch
+'@mochi-ui/theme': patch
+---
+
+Fix sidebar arrow UX
diff --git a/apps/mochi-web/components/Dashboard/Sidebar.tsx b/apps/mochi-web/components/Dashboard/Sidebar.tsx
diff --git a/apps/mochi-web/components/DashboardLayout.tsx b/apps/mochi-web/components/DashboardLayout.tsx
@@ -80,7 +80,12 @@ export default function DashboardLayout({
         { title: 'Invite Friends', Icon: AddUserSolid },
       ],
       footerItems: [
-        { title: 'Support', Icon: LifeBuoySolid },
+        {
+          title: 'Support',
+          type: 'link',
+          href: DISCORD_LINK,
+          Icon: LifeBuoySolid,
+        },
         {
           title: 'Follow Us',
           Icon: X,

diff --git a/apps/mochi-web/components/Header/Header.tsx b/apps/mochi-web/components/Header/Header.tsx
@@ -155,7 +155,7 @@ export const Header = ({
 }: {
   layoutType?: 'dashboard' | 'landing'
 }) => {
-  const { pathname } = useRouter()
+  const { pathname, push } = useRouter()
   const { profile, isLoggedIn } = useLoginWidget()
 
   const mobileNavItems = [
@@ -272,7 +272,11 @@ export const Header = ({
             <div className="hidden py-1.5 ml-2 w-px lg:block">
               <div className="w-full h-full bg-[#eeedec]" />
             </div>
-            <Button size="md" className="hidden lg:flex">
+            <Button
+              onClick={() => push(ROUTES.MY_PROFILE)}
+              size="md"
+              className="hidden lg:flex"
+            >
               <TipSolid />
               Tip
             </Button>

diff --git a/apps/mochi-web/components/MochiWidget/Tip/index.tsx b/apps/mochi-web/components/MochiWidget/Tip/index.tsx
@@ -84,7 +84,7 @@ export default function Tip() {
             'border-green-200 bg-green-50 text-green-700': !error,
             'border-red-200 bg-red-50 text-red-700': error,
             'scale-1 translate-y-0 shadow-xl': isOpen,
-            'shadow scale-[0.9] translate-y-[calc(-100%-16px)]': !isOpen,
+            'shadow scale-[0.9] translate-y-[calc(-100%-57px)]': !isOpen,
           },
         )}
       >

diff --git a/apps/mochi-web/components/MochiWidget/index.tsx b/apps/mochi-web/components/MochiWidget/index.tsx
@@ -1,17 +1,22 @@
 import BottomSheetProvider from '~cpn/BottomSheet'
 import React, { useState } from 'react'
-import { PaperplaneCircleSolid } from '@mochi-ui/icons'
+import {
+  DollarBubbleCircleSolid,
+  /* GiftSolid, */
+  LinkCircledSolid,
+  PaperplaneCircleSolid,
+} from '@mochi-ui/icons'
 import * as ScrollArea from '@radix-ui/react-scroll-area'
 import clsx from 'clsx'
 import Tip from './Tip'
 
-/* function ComingSoon() { */
-/*   return ( */
-/*     <span className="flex items-center justify-center flex-1 m-4 text-neutral-500"> */
-/*       Coming soon... */
-/*     </span> */
-/*   ) */
-/* } */
+function ComingSoon() {
+  return (
+    <span className="flex flex-1 justify-center items-center m-4 text-neutral-500">
+      Coming soon...
+    </span>
+  )
+}
 
 const tabs = [
   {
@@ -20,22 +25,22 @@ const tabs = [
     Icon: PaperplaneCircleSolid,
     render: () => <Tip />,
   },
-  /* { */
-  /*   id: 'payme', */
-  /*   title: 'Pay Me', */
-  /*   Icon: IconDollarBubbleCircled, */
-  /*   render: ComingSoon, */
-  /* }, */
-  /* { */
-  /*   id: 'paylink', */
-  /*   title: 'Pay Link', */
-  /*   Icon: IconLinkCircled, */
-  /*   render: ComingSoon, */
-  /* }, */
+  {
+    id: 'payme',
+    title: 'Pay Me',
+    Icon: DollarBubbleCircleSolid,
+    render: ComingSoon,
+  },
+  {
+    id: 'paylink',
+    title: 'Pay Link',
+    Icon: LinkCircledSolid,
+    render: ComingSoon,
+  },
   /* { */
   /*   id: 'gift', */
   /*   title: 'Gift', */
-  /*   Icon: IconGift, */
+  /*   Icon: GiftSolid, */
   /*   render: ComingSoon, */
   /* }, */
 ]
@@ -46,7 +51,7 @@ interface Props {
 }
 
 export default function MochiWidget({ wrapperClassName, className }: Props) {
-  const [activeTab] = useState(tabs[0])
+  const [activeTab, setActiveTab] = useState(tabs[0])
 
   return (
     <BottomSheetProvider
@@ -61,6 +66,31 @@ export default function MochiWidget({ wrapperClassName, className }: Props) {
           className,
         )}
       >
+        <div className="flex items-center border-b border-[#e5e4e3] p-3">
+          {tabs.map((t, i) => {
+            return (
+              <React.Fragment key={t.title}>
+                {i !== 0 && (
+                  <div className="flex-shrink-0 w-px h-4 bg-[#d4d3d0] mx-2" />
+                )}
+                <button
+                  type="button"
+                  onClick={() => setActiveTab(t)}
+                  className={clsx(
+                    'whitespace-nowrap text-sm flex-1 flex justify-center items-center gap-x-1',
+                    {
+                      'text-[#343433]': t.id === activeTab.id,
+                      'text-[#848281]': t.id !== activeTab.id,
+                    },
+                  )}
+                >
+                  <t.Icon className="w-4 h-4 fill-current" />
+                  <span className="font-medium text-current">{t.title}</span>
+                </button>
+              </React.Fragment>
+            )
+          })}
+        </div>
         <ScrollArea.Root
           style={{
             /* height: 570, */
@@ -69,35 +99,9 @@ export default function MochiWidget({ wrapperClassName, className }: Props) {
             maxWidth: 480,
             minWidth: 340,
           }}
-          className="relative z-10 flex flex-col p-3 overflow-hidden"
+          className="flex overflow-hidden relative z-10 flex-col p-3"
         >
-          {/* <div className="flex items-center border-b border-[#e5e4e3] pb-2"> */}
-          {/*   {tabs.map((t, i) => { */}
-          {/*     return ( */}
-          {/*       <React.Fragment key={t.title}> */}
-          {/*         {i !== 0 && ( */}
-          {/*           <div className="flex-shrink-0 w-px h-4 bg-[#d4d3d0] mx-2" /> */}
-          {/*         )} */}
-          {/*         <button */}
-          {/*           type="button" */}
-          {/*           onClick={() => setActiveTab(t)} */}
-          {/*           className={clsx( */}
-          {/*             'whitespace-nowrap text-sm flex-1 flex justify-center items-center gap-x-1', */}
-          {/*             { */}
-          {/*               'text-[#343433]': t.id === activeTab.id, */}
-          {/*               'text-[#848281]': t.id !== activeTab.id, */}
-          {/*             }, */}
-          {/*           )} */}
-          {/*         > */}
-          {/*           <t.Icon className="w-4 h-4 fill-current" /> */}
-          {/*           <span className="font-medium text-current">{t.title}</span> */}
-          {/*         </button> */}
-          {/*       </React.Fragment> */}
-          {/*     ) */}
-          {/*   })} */}
-          {/* </div> */}
-
-          <div className="flex flex-col flex-1 min-h-0 gap-y-2">
+          <div className="flex flex-col flex-1 gap-y-2 min-h-0">
             {activeTab.render()}
             <span className="text-xs text-[#adacaa] mx-auto">
               Powered by Console Labs