diff --git a/packages/mask/src/components/InjectedComponents/PostDialogHint.tsx b/packages/mask/src/components/InjectedComponents/PostDialogHint.tsx index dadd0c8e08e0..42ddf8a67478 100644 --- a/packages/mask/src/components/InjectedComponents/PostDialogHint.tsx +++ b/packages/mask/src/components/InjectedComponents/PostDialogHint.tsx @@ -1,5 +1,5 @@ import { memo } from 'react' -import { IconButton } from '@mui/material' +import { IconButton, Tooltip } from '@mui/material' import { useStylesExtends, makeStyles } from '@masknet/theme' import { useI18N } from '../../utils' import type { BannerProps } from '../Welcomes/Banner' @@ -9,8 +9,16 @@ import { MaskSharpIcon } from '../../resources/MaskIcon' import { useMyIdentities } from '../DataSource/useActivatedUI' import { currentSetupGuideStatus } from '../../settings/settings' import { activatedSocialNetworkUI } from '../../social-network' +import classNames from 'classnames' -export interface PostDialogHintUIProps extends withClasses<'buttonTransform'> { +interface TooltipConfigProps { + placement?: 'bottom' | 'top' + disabled?: boolean +} + +export interface PostDialogHintUIProps extends withClasses<'buttonTransform' | 'iconButton' | 'tooltip'> { + size?: number + tooltip?: TooltipConfigProps onHintButtonClicked: () => void } @@ -34,34 +42,48 @@ const useStyles = makeStyles()((theme) => ({ })) const EntryIconButton = memo((props: PostDialogHintUIProps) => { + const { size, tooltip } = props const classes = useStylesExtends(useStyles(), props) return ( - - - + + + + + ) }) export const PostDialogHintUI = memo(function PostDialogHintUI(props: PostDialogHintUIProps) { - const { onHintButtonClicked } = props + const { onHintButtonClicked, size, ...others } = props const classes = useStylesExtends(useStyles(), props) const { t } = useI18N() return isMobileFacebook ? (
- undefined} /> + undefined} /> {t('post_modal_hint__button')}
) : (
- +
) }) export interface PostDialogHintProps extends Partial { NotSetupYetPromptProps?: Partial + size?: number } export function PostDialogHint(props: PostDialogHintProps) { const identities = useMyIdentities() diff --git a/packages/mask/src/resources/MaskIcon.tsx b/packages/mask/src/resources/MaskIcon.tsx index b9d9bededc13..be165814cd5d 100644 --- a/packages/mask/src/resources/MaskIcon.tsx +++ b/packages/mask/src/resources/MaskIcon.tsx @@ -13,7 +13,7 @@ const MaskSmileFaceSVG = ({ size = 24 }: { size?: number }) => ( ) -const MaskSmileFaceSharpSVG = ({ size = 20 }: { size?: number }) => ( +const MaskSmileFaceSharpSVG = ({ size = 19 }: { size?: number }) => ( {MaskSmileFaceOutlinedSVG} } -export function MaskSharpIcon(props: SvgIconProps) { +export function MaskSharpIcon(props: SvgIconPropsWithSize) { + const { size = 20, color } = props return ( - - + + ) } diff --git a/packages/mask/src/social-network-adaptor/facebook.com/injection/Composition.tsx b/packages/mask/src/social-network-adaptor/facebook.com/injection/Composition.tsx index ce8dab953b34..e3c84e8f8d0a 100644 --- a/packages/mask/src/social-network-adaptor/facebook.com/injection/Composition.tsx +++ b/packages/mask/src/social-network-adaptor/facebook.com/injection/Composition.tsx @@ -7,9 +7,22 @@ import { PostDialogHint } from '../../../components/InjectedComponents/PostDialo import { MaskMessages } from '../../../utils/messages' import { startWatch } from '../../../utils/watcher' import { taskOpenComposeBoxFacebook } from '../automation/openComposeBox' +import { makeStyles } from '@masknet/theme' let composeBox: LiveSelector +const useStyles = makeStyles()(() => ({ + tooltip: { + borderRadius: 8, + padding: 8, + marginBottom: '0 !important', + fontSize: 12, + background: 'rgba(0,0,0,.75)', + boxShadow: '0 4px 10px 0 rgba(0,0,0,.5)', + color: '#ddd', + }, +})) + function isGroup() { const matched = location.href.match(/\/groups/) if (!matched) return false @@ -51,13 +64,19 @@ export function injectCompositionFacebook(signal: AbortSignal) { ) } function UI() { + const { classes } = useStyles() const onHintButtonClicked = useCallback( () => MaskMessages.events.requestComposition.sendToLocal({ reason: 'popup', open: true }), [], ) return ( - + ) diff --git a/packages/mask/src/social-network-adaptor/minds.com/injection/PostDialogHint.tsx b/packages/mask/src/social-network-adaptor/minds.com/injection/PostDialogHint.tsx index 7c15d1e0591e..78bc4a0e4338 100644 --- a/packages/mask/src/social-network-adaptor/minds.com/injection/PostDialogHint.tsx +++ b/packages/mask/src/social-network-adaptor/minds.com/injection/PostDialogHint.tsx @@ -34,6 +34,11 @@ const useStyles = makeStyles()((theme, { reason }) => ({ buttonTransform: { ...(reason === 'timeline' ? { width: '40px', transform: 'translateX(160px) translateY(-70px)' } : {}), }, + iconButton: { + '&:hover': { + background: 'none', + }, + }, })) function PostDialogHintAtMinds({ reason }: { reason: 'timeline' | 'popup' }) { @@ -45,9 +50,12 @@ function PostDialogHintAtMinds({ reason }: { reason: 'timeline' | 'popup' }) { ) return ( ({ + iconButton: { + '&:hover': { + background: alpha(theme.palette.primary.main, 0.1), + }, + }, + tooltip: { + marginTop: '2px !important', + borderRadius: 2, + padding: 4, + background: MaskColorVar.twitterTooltipBg, + }, +})) export function injectPostDialogHintAtTwitter(signal: AbortSignal) { const emptyNode = document.createElement('div') @@ -27,9 +43,17 @@ function renderPostDialogHintTo(reason: 'timeline' | 'popup', ls: LiveSelecto } function PostDialogHintAtTwitter({ reason }: { reason: 'timeline' | 'popup' }) { + const { classes } = useStyles() const onHintButtonClicked = useCallback( () => MaskMessages.events.requestComposition.sendToLocal({ reason, open: true }), [reason], ) - return + return ( + + ) } diff --git a/packages/theme/src/constants.ts b/packages/theme/src/constants.ts index 1fe2daf4c6c5..afc869842d65 100644 --- a/packages/theme/src/constants.ts +++ b/packages/theme/src/constants.ts @@ -28,6 +28,7 @@ export const LightColor = { twitterInfoBackground: '#AFC3E1', twitterInfo: '#8CA3C7', twitterBg: '#F6F8F8', + twitterTooltipBg: 'rgba(0,0,0,.6)', twitterInput: '#EDF1F2', twitterLine: '#EBEEF0', redMain: '#ff5f5f', @@ -99,6 +100,7 @@ export const DarkColor: typeof LightColor = { twitterInfo: '#8CA3C7', twitterLine: '#2F3336', twitterBg: '#15171A', + twitterTooltipBg: 'rgba(91,112,131,.6)', redMain: '#ff5f5f', redLight: '#46304a', redContrastText: '#ffffff',