From d6386275ca595f59bfcac41e805bfd4b06d671c9 Mon Sep 17 00:00:00 2001
From: unclebill <billbill290@gmail.com>
Date: Mon, 28 Mar 2022 18:07:00 +0800
Subject: [PATCH 1/2] fix(tip): styling tip button in post

---
 .../NextID/components/Tip/TipButton.tsx       | 39 ++++++++++++++++---
 1 file changed, 34 insertions(+), 5 deletions(-)

diff --git a/packages/mask/src/plugins/NextID/components/Tip/TipButton.tsx b/packages/mask/src/plugins/NextID/components/Tip/TipButton.tsx
index 0bd51f2f1167..0e1cf79e63fe 100644
--- a/packages/mask/src/plugins/NextID/components/Tip/TipButton.tsx
+++ b/packages/mask/src/plugins/NextID/components/Tip/TipButton.tsx
@@ -3,6 +3,7 @@ import { usePostInfoDetails } from '@masknet/plugin-infra'
 import { EMPTY_LIST, NextIDPlatform, ProfileIdentifier } from '@masknet/shared-base'
 import { makeStyles, ShadowRootTooltip } from '@masknet/theme'
 import { queryExistedBindingByPersona, queryIsBound } from '@masknet/web3-providers'
+import type { TooltipProps } from '@mui/material'
 import classnames from 'classnames'
 import { uniq } from 'lodash-unified'
 import { FC, HTMLProps, MouseEventHandler, useCallback, useMemo } from 'react'
@@ -15,6 +16,7 @@ import { PluginNextIdMessages } from '../../messages'
 interface Props extends HTMLProps<HTMLDivElement> {
     addresses?: string[]
     receiver?: ProfileIdentifier
+    tooltipProps?: Partial<TooltipProps>
 }
 
 const useStyles = makeStyles()({
@@ -25,20 +27,36 @@ const useStyles = makeStyles()({
         alignItems: 'center',
         fontFamily: '-apple-system, system-ui, sans-serif',
     },
-    postTipButton: {
-        display: 'flex',
+    buttonWrapper: {
         // temporarily hard code
         height: 46,
+        display: 'flex',
         alignItems: 'center',
         color: '#8899a6',
     },
+    postTipButton: {
+        cursor: 'pointer',
+        width: 34,
+        height: 34,
+        borderRadius: '100%',
+        '&:hover': {
+            backgroundColor: 'rgba(20,155,240,0.1)',
+        },
+    },
     disabled: {
         opacity: 0.4,
         cursor: 'default',
     },
 })
 
-export const TipButton: FC<Props> = ({ className, receiver, addresses = EMPTY_LIST, children, ...rest }) => {
+export const TipButton: FC<Props> = ({
+    className,
+    receiver,
+    addresses = EMPTY_LIST,
+    children,
+    tooltipProps,
+    ...rest
+}) => {
     const { classes } = useStyles()
     const t = useI18N()
 
@@ -103,15 +121,26 @@ export const TipButton: FC<Props> = ({ className, receiver, addresses = EMPTY_LI
 
     if (disabled)
         return (
-            <ShadowRootTooltip title={t.tip_wallets_missed()} placement="top" arrow>
+            <ShadowRootTooltip title={t.tip_wallets_missed()} placement="top" arrow {...tooltipProps}>
                 {dom}
             </ShadowRootTooltip>
         )
     return dom
 }
 
+const postTipButtonTooltip = { placement: 'bottom', arrow: false } as const
+
 export const PostTipButton: FC<Props> = (props) => {
     const identifier = usePostInfoDetails.author()
     const { classes } = useStyles()
-    return <TipButton {...props} className={classnames(classes.postTipButton, props.className)} receiver={identifier} />
+    return (
+        <div className={classes.buttonWrapper}>
+            <TipButton
+                {...props}
+                className={classnames(classes.postTipButton, props.className)}
+                tooltipProps={postTipButtonTooltip}
+                receiver={identifier}
+            />
+        </div>
+    )
 }

From bb8cf47530865baf1991567df340eaf396b053f7 Mon Sep 17 00:00:00 2001
From: unclebill <billbill290@gmail.com>
Date: Tue, 29 Mar 2022 11:28:58 +0800
Subject: [PATCH 2/2] fixup! fix(tip): styling tip button in post

---
 .../NextID/components/Tip/TipButton.tsx       | 23 +++++++++++--------
 1 file changed, 13 insertions(+), 10 deletions(-)

diff --git a/packages/mask/src/plugins/NextID/components/Tip/TipButton.tsx b/packages/mask/src/plugins/NextID/components/Tip/TipButton.tsx
index 0e1cf79e63fe..bc846bd17696 100644
--- a/packages/mask/src/plugins/NextID/components/Tip/TipButton.tsx
+++ b/packages/mask/src/plugins/NextID/components/Tip/TipButton.tsx
@@ -43,6 +43,11 @@ const useStyles = makeStyles()({
             backgroundColor: 'rgba(20,155,240,0.1)',
         },
     },
+    tooltip: {
+        backgroundColor: 'rgb(102,102,102)',
+        color: 'white',
+        marginTop: '0 !important',
+    },
     disabled: {
         opacity: 0.4,
         cursor: 'default',
@@ -121,26 +126,24 @@ export const TipButton: FC<Props> = ({
 
     if (disabled)
         return (
-            <ShadowRootTooltip title={t.tip_wallets_missed()} placement="top" arrow {...tooltipProps}>
+            <ShadowRootTooltip
+                classes={{ tooltip: classes.tooltip }}
+                title={t.tip_wallets_missed()}
+                placement="bottom"
+                arrow={false}
+                {...tooltipProps}>
                 {dom}
             </ShadowRootTooltip>
         )
     return dom
 }
 
-const postTipButtonTooltip = { placement: 'bottom', arrow: false } as const
-
-export const PostTipButton: FC<Props> = (props) => {
+export const PostTipButton: FC<Props> = ({ className, ...rest }) => {
     const identifier = usePostInfoDetails.author()
     const { classes } = useStyles()
     return (
         <div className={classes.buttonWrapper}>
-            <TipButton
-                {...props}
-                className={classnames(classes.postTipButton, props.className)}
-                tooltipProps={postTipButtonTooltip}
-                receiver={identifier}
-            />
+            <TipButton className={classnames(classes.postTipButton, className)} {...rest} receiver={identifier} />
         </div>
     )
 }