diff --git a/src/components/Tooltip/const.ts b/src/components/Tooltip/const.ts index 8f51a3e067..cad7e0106c 100644 --- a/src/components/Tooltip/const.ts +++ b/src/components/Tooltip/const.ts @@ -1,6 +1,6 @@ import {atoms as a} from '#/alf' +export const BUBBLE_MAX_WIDTH = 240 export const ARROW_SIZE = 12 export const ARROW_HALF_SIZE = ARROW_SIZE / 2 -export const ARROW_VISUAL_OFFSET = ARROW_SIZE / 3 export const MIN_EDGE_SPACE = a.px_lg.paddingLeft diff --git a/src/components/Tooltip/index.tsx b/src/components/Tooltip/index.tsx index 6e434242bb..446cf18fc6 100644 --- a/src/components/Tooltip/index.tsx +++ b/src/components/Tooltip/index.tsx @@ -17,11 +17,17 @@ import {Portal} from '#/components/Portal' import { ARROW_HALF_SIZE, ARROW_SIZE, - ARROW_VISUAL_OFFSET, + BUBBLE_MAX_WIDTH, MIN_EDGE_SPACE, } from '#/components/Tooltip/const' import {Text} from '#/components/Typography' +/** + * These are native specific values, not shared with web + */ +const ARROW_VISUAL_OFFSET = ARROW_SIZE / 1.25 // vibes-based, slightly off the target +const BUBBLE_SHADOW_OFFSET = ARROW_SIZE / 3 // vibes-based, provide more shadow beneath tip + type TooltipContextType = { position: 'top' | 'bottom' ready: boolean @@ -313,7 +319,7 @@ function Bubble({ a.absolute, a.align_start, { - width: 200, + width: BUBBLE_MAX_WIDTH, opacity: bubbleMeasurements ? 1 : 0, top: coords.top, left: coords.left, @@ -359,9 +365,8 @@ function Bubble({ shadowOpacity: 0.2, shadowOffset: { width: 0, - // provide more shadow beneath tip height: - ARROW_VISUAL_OFFSET * + BUBBLE_SHADOW_OFFSET * (coords.computedPosition === 'bottom' ? -1 : 1), }, }, diff --git a/src/components/Tooltip/index.web.tsx b/src/components/Tooltip/index.web.tsx index 97330aa485..739a714cd4 100644 --- a/src/components/Tooltip/index.web.tsx +++ b/src/components/Tooltip/index.web.tsx @@ -6,7 +6,7 @@ import {atoms as a, flatten, select, useTheme} from '#/alf' import {transparentifyColor} from '#/alf/util/colorGeneration' import { ARROW_SIZE, - ARROW_VISUAL_OFFSET, + BUBBLE_MAX_WIDTH, MIN_EDGE_SPACE, } from '#/components/Tooltip/const' import {Text} from '#/components/Typography' @@ -61,7 +61,7 @@ export function Content({ className="radix-popover-content" aria-label={label} side={position} - sideOffset={(ARROW_SIZE / 3) * -1} + sideOffset={4} collisionPadding={MIN_EDGE_SPACE} style={flatten([ a.rounded_sm, @@ -73,18 +73,9 @@ export function Content({ { minWidth: 'max-content', boxShadow: select(t.name, { - light: `0 ${ARROW_VISUAL_OFFSET}px 16px ${transparentifyColor( - t.palette.black, - 0.2, - )}`, - dark: `0 ${ARROW_VISUAL_OFFSET}px 16px ${transparentifyColor( - t.palette.black, - 0.2, - )}`, - dim: `0 ${ARROW_VISUAL_OFFSET}px 16px ${transparentifyColor( - t.palette.black, - 0.2, - )}`, + light: `0 0 24px ${transparentifyColor(t.palette.black, 0.2)}`, + dark: `0 0 24px ${transparentifyColor(t.palette.black, 0.2)}`, + dim: `0 0 24px ${transparentifyColor(t.palette.black, 0.2)}`, }), }, ])}> @@ -97,7 +88,9 @@ export function Content({ dim: t.atoms.bg_contrast_100.backgroundColor, })} /> - {children} + + {children} + ) diff --git a/src/screens/Profile/Header/ProfileHeaderStandard.tsx b/src/screens/Profile/Header/ProfileHeaderStandard.tsx index 734a7365e7..fbacaa7423 100644 --- a/src/screens/Profile/Header/ProfileHeaderStandard.tsx +++ b/src/screens/Profile/Header/ProfileHeaderStandard.tsx @@ -213,16 +213,13 @@ let ProfileHeaderStandard = ({ {hasSession && ( <> - + - Boop + Get notified about new posts