From 6de92275e08c80d059c6413d2bc0a2a82669e650 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?nicole=20miko=C5=82ajczyk?= Date: Thu, 23 Oct 2025 04:17:55 +0200 Subject: [PATCH] pl-fe: styles MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: nicole mikołajczyk --- .../src/components/status-action-bar.tsx | 68 +++--------- .../src/components/status-action-button.tsx | 26 +---- .../src/components/status-reactions-bar.tsx | 27 ++--- packages/pl-fe/src/modals/media-modal.tsx | 3 +- packages/pl-fe/src/styles/new/mixins.scss | 10 +- .../pl-fe/src/styles/new/notifications.scss | 2 +- packages/pl-fe/src/styles/new/statuses.scss | 100 ++++++++++++++++++ 7 files changed, 138 insertions(+), 98 deletions(-) diff --git a/packages/pl-fe/src/components/status-action-bar.tsx b/packages/pl-fe/src/components/status-action-bar.tsx index c53028eb4..ce32eee89 100644 --- a/packages/pl-fe/src/components/status-action-bar.tsx +++ b/packages/pl-fe/src/components/status-action-bar.tsx @@ -15,7 +15,6 @@ import { useGroup } from 'pl-fe/api/hooks/groups/use-group'; import { useGroupRelationship } from 'pl-fe/api/hooks/groups/use-group-relationship'; import DropdownMenu from 'pl-fe/components/dropdown-menu'; import StatusActionButton from 'pl-fe/components/status-action-button'; -import HStack from 'pl-fe/components/ui/hstack'; import EmojiPickerDropdown from 'pl-fe/features/emoji/containers/emoji-picker-dropdown-container'; import { languages } from 'pl-fe/features/preferences'; import { useAppDispatch } from 'pl-fe/hooks/use-app-dispatch'; @@ -38,8 +37,6 @@ import copy from 'pl-fe/utils/copy'; import GroupPopover from './groups/popover/group-popover'; import Popover from './ui/popover'; -import Stack from './ui/stack'; -import Text from './ui/text'; import type { Menu } from 'pl-fe/components/dropdown-menu'; import type { Emoji as EmojiType } from 'pl-fe/features/emoji'; @@ -183,18 +180,18 @@ const InteractionPopover: React.FC = ({ type, allowed }) => const allowedType = allowed?.includes('followers') ? 'followers' : allowed?.includes('following') ? 'following' : allowed?.includes('mutuals') ? 'mutuals' : 'mentioned'; return ( - - +
+

{intl.formatMessage(INTERACTION_POLICY_HEADERS[type])} - - +

+

{intl.formatMessage(INTERACTION_POLICY_DESCRIPTIONS[type][allowedType])} - - +

+
); }; -interface IActionButton extends Pick { +interface IActionButton extends Pick { me: Me; onOpenUnauthorizedModal: (action?: UnauthorizedModalAction) => void; } @@ -205,7 +202,6 @@ interface IReplyButton extends IActionButton { const ReplyButton: React.FC = ({ status, - statusActionButtonTheme, withLabels, me, onOpenUnauthorizedModal, @@ -247,7 +243,6 @@ const ReplyButton: React.FC = ({ count={status.replies_count} text={withLabels ? intl.formatMessage(messages.reply) : undefined} disabled={replyDisabled} - theme={statusActionButtonTheme} /> ); @@ -276,7 +271,6 @@ interface IReblogButton extends IActionButton { const ReblogButton: React.FC = ({ status, - statusActionButtonTheme, withLabels, me, onOpenUnauthorizedModal, @@ -330,8 +324,8 @@ const ReblogButton: React.FC = ({ const reblogButton = ( = ({ onLongPress={handleReblogLongPress} count={status.reblogs_count + status.quotes_count} text={withLabels ? intl.formatMessage(messages.reblog) : undefined} - theme={statusActionButtonTheme} /> ); @@ -385,7 +378,6 @@ const ReblogButton: React.FC = ({ const FavouriteButton: React.FC = ({ status, - statusActionButtonTheme, me, withLabels, onOpenUnauthorizedModal, @@ -424,13 +416,11 @@ const FavouriteButton: React.FC = ({ title={intl.formatMessage(messages.favourite)} icon={features.statusDislikes ? require('@phosphor-icons/core/regular/thumbs-up.svg') : require('@phosphor-icons/core/regular/star.svg')} filledIcon={features.statusDislikes ? require('@phosphor-icons/core/fill/thumbs-up-fill.svg') : require('@phosphor-icons/core/fill/star-fill.svg')} - color='accent' onClick={handleFavouriteClick} onLongPress={handleFavouriteLongPress} active={status.favourited} count={status.favourites_count} text={withLabels ? intl.formatMessage(messages.favourite) : undefined} - theme={statusActionButtonTheme} /> ); @@ -447,7 +437,6 @@ const FavouriteButton: React.FC = ({ const DislikeButton: React.FC = ({ status, - statusActionButtonTheme, withLabels, me, onOpenUnauthorizedModal, @@ -483,13 +472,11 @@ const DislikeButton: React.FC = ({ title={intl.formatMessage(messages.disfavourite)} icon={require('@phosphor-icons/core/regular/thumbs-down.svg')} filledIcon={require('@phosphor-icons/core/fill/thumbs-down-fill.svg')} - color='accent' onClick={handleDislikeClick} onLongPress={handleDislikeLongPress} active={status.disliked} count={status.dislikes_count} text={withLabels ? intl.formatMessage(messages.disfavourite) : undefined} - theme={statusActionButtonTheme} /> ); }; @@ -498,7 +485,6 @@ const getLongerWrench = (emojis: Array) => emojis.find(({ shortcode const WrenchButton: React.FC = ({ status, - statusActionButtonTheme, withLabels, me, }) => { @@ -536,19 +522,16 @@ const WrenchButton: React.FC = ({ title={intl.formatMessage(messages.wrench)} icon={require('@phosphor-icons/core/regular/wrench.svg')} filledIcon={require('@phosphor-icons/core/fill/wrench-fill.svg')} - color='accent' onClick={handleWrenchClick} onLongPress={handleWrenchLongPress} active={wrenches?.me} count={wrenches?.count || undefined} - theme={statusActionButtonTheme} /> ); }; const EmojiPickerButton: React.FC> = ({ status, - statusActionButtonTheme, withLabels, me, }) => { @@ -562,10 +545,7 @@ const EmojiPickerButton: React.FC }; return me && !withLabels && features.emojiReacts && ( - + ); }; @@ -577,7 +557,6 @@ interface IMenuButton extends IActionButton { const MenuButton: React.FC = ({ status, - statusActionButtonTheme, me, expandable, fromBookmarks, @@ -1111,10 +1090,9 @@ const MenuButton: React.FC = ({ - ), [menu, statusActionButtonTheme]); + ), [menu]); }; interface IStatusActionBar { @@ -1123,7 +1101,6 @@ interface IStatusActionBar { withLabels?: boolean; expandable?: boolean; space?: 'sm' | 'md' | 'lg'; - statusActionButtonTheme?: 'default' | 'inverse'; fromBookmarks?: boolean; } @@ -1132,7 +1109,6 @@ const StatusActionBar: React.FC = ({ withLabels = false, expandable, space = 'sm', - statusActionButtonTheme = 'default', fromBookmarks = false, rebloggedBy, }) => { @@ -1156,25 +1132,13 @@ const StatusActionBar: React.FC = ({ return null; } - const spacing: { - [key: string]: React.ComponentProps['space']; - } = { - 'sm': 2, - 'md': 8, - 'lg': 0, // using justifyContent instead on the HStack - }; - return ( - = ({ = ({ = ({ = ({ = ({ = ({ fromBookmarks={fromBookmarks} publicStatus={publicStatus} /> - + ); }; diff --git a/packages/pl-fe/src/components/status-action-button.tsx b/packages/pl-fe/src/components/status-action-button.tsx index bc1409f38..232c1e18d 100644 --- a/packages/pl-fe/src/components/status-action-button.tsx +++ b/packages/pl-fe/src/components/status-action-button.tsx @@ -8,13 +8,6 @@ import { useSettings } from 'pl-fe/stores/settings'; import AnimatedNumber from './animated-number'; -const COLORS = { - accent: 'accent', - success: 'success', -}; - -type Color = keyof typeof COLORS; - interface IStatusActionCounter { count: number; } @@ -36,14 +29,12 @@ interface IStatusActionButton extends React.ButtonHTMLAttributes void; } const StatusActionButton = React.forwardRef((props, ref): JSX.Element => { - const { icon, filledIcon, className, iconClassName, active, color, count = 0, text, theme = 'default', onLongPress, ...filteredProps } = props; + const { icon, filledIcon, className, iconClassName, active, count = 0, text, onLongPress, ...filteredProps } = props; const longPressBind = useLongPress((e) => { if (!onLongPress || e.type !== 'touchstart') return; @@ -66,9 +57,9 @@ const StatusActionButton = React.forwardRef { if (text) { return ( - + {text} - + ); } else if (count) { return ( @@ -82,16 +73,9 @@ const StatusActionButton = React.forwardRef = ({ reaction, statusId, obfusca return ( ); }; @@ -121,7 +115,7 @@ const StatusReactionsBar: React.FC = ({ status, collapsed } const sortedReactions = status.emoji_reactions.toSorted((a, b) => (b.count || 0) - (a.count || 0)); return ( - +
{sortedReactions.map((reaction) => reaction.count ? ( = ({ status, collapsed } {me && ( )} - +
); }; diff --git a/packages/pl-fe/src/modals/media-modal.tsx b/packages/pl-fe/src/modals/media-modal.tsx index 34eee6724..c6f336129 100644 --- a/packages/pl-fe/src/modals/media-modal.tsx +++ b/packages/pl-fe/src/modals/media-modal.tsx @@ -215,7 +215,7 @@ const MediaModal: React.FC = (props) => { }; return ( -
+
= (props) => { diff --git a/packages/pl-fe/src/styles/new/mixins.scss b/packages/pl-fe/src/styles/new/mixins.scss index 99b45e78d..9df073ab3 100644 --- a/packages/pl-fe/src/styles/new/mixins.scss +++ b/packages/pl-fe/src/styles/new/mixins.scss @@ -1,4 +1,4 @@ -@mixin text($family: sans, $size: md, $theme: default, $tracking: normal, $transform: normal, $truncate: false, $weight: normal) { +@mixin text($family: sans, $size: md, $theme: default, $tracking: normal, $transform: normal, $truncate: false, $weight: normal, $align: none) { @if $family == sans { font-family: var(--font-sans); } @else if $family == mono { @@ -88,6 +88,14 @@ } @else { @warn "Unknown font weight `#{$weight}`."; } + + @if $align == left { + text-align: left; + } @else if $align == center { + text-align: center; + } @else if $align == right { + text-align: right; + } } @mixin card($variant: default, $size: md) { diff --git a/packages/pl-fe/src/styles/new/notifications.scss b/packages/pl-fe/src/styles/new/notifications.scss index 5b0d938f0..e9a74f674 100644 --- a/packages/pl-fe/src/styles/new/notifications.scss +++ b/packages/pl-fe/src/styles/new/notifications.scss @@ -1,4 +1,4 @@ -@use 'mixins'; +@use 'mixins'; .⁂-notification { display: flex; diff --git a/packages/pl-fe/src/styles/new/statuses.scss b/packages/pl-fe/src/styles/new/statuses.scss index 48130e85b..df173c9f0 100644 --- a/packages/pl-fe/src/styles/new/statuses.scss +++ b/packages/pl-fe/src/styles/new/statuses.scss @@ -1,3 +1,5 @@ +@use 'mixins'; + .⁂-status { @apply cursor-pointer; @@ -6,6 +8,86 @@ } } +.⁂-status-reactions-bar { + @apply flex gap-2 flex-wrap pt-2; + + &__button { + @apply flex cursor-pointer items-center gap-2 overflow-hidden rounded-md border border-gray-400 px-1.5 py-1 transition-all bg-transparent dark:border-primary-700 dark:bg-primary-700 black:border-primary-800 black:bg-primary-800; + + &:not(:disabled) { + @apply hover:bg-primary-100 hover:dark:border-primary-600 hover:dark:bg-primary-600 hover:black:bg-primary-700 cursor-pointer; + } + + &--active { + @apply bg-primary-100 dark:border-primary-500 dark:bg-primary-500 dark:ring-2 dark:ring-primary-300 black:border-primary-600 black:bg-primary-600; + + &:not(:disabled) { + @apply hover:bg-primary-200 hover:dark:border-primary-300 hover:dark:bg-primary-300 hover:black:bg-primary-500; + } + } + + img, svg { + @apply h-5 max-w-48 transition-transform; + } + + &:hover img, &:hover svg { + @apply scale-125; + } + + p { + @include mixins.text($theme: inherit, $size: xs, $weight: semibold); + } + } + + &__picker-button { + @apply cursor-pointer rounded-md border border-gray-400 bg-transparent p-1.5 transition-colors hover:bg-gray-50 black:border-primary-800 black:bg-primary-800 hover:black:bg-primary-700 dark:border-primary-700 dark:bg-primary-700 hover:dark:border-primary-600 hover:dark:bg-primary-600; + + svg { + @apply size-4; + } + } +} + +.⁂-status-action-bar { + @apply flex items-center gap-2; + + &--md { + @apply gap-8; + } + + &--lg { + @apply justify-between grow; + } + + &__button { + @apply -m-1 flex items-center rounded-full p-2 rtl:space-x-reverse transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 dark:ring-offset-0 text-gray-600 hover:text-gray-800 dark:hover:text-white bg-transparent hover:bg-primary-100 dark:hover:bg-primary-800 black:hover:bg-gray-800; + + &:not(:disabled) { + @apply hover:text-gray-600 dark:hover:text-white; + } + + span { + @include mixins.text($theme: inherit, $size: sm); + } + + &:has(.⁂-status-action-bar__button__text) { + @apply gap-2; + } + + &:not(:has(.⁂-status-action-bar__button__text)) { + @apply gap-1; + } + + &--active { + @apply text-accent-300 hover:text-accent-300 dark:hover:text-accent-300; + + &.⁂-status-action-bar__button--reblog { + @apply text-success-600 dark:text-success-400 hover:text-success-600 dark:hover:text-success-400; + } + } + } +} + .thread__status { .⁂-status__wrapper { padding: 0; @@ -109,4 +191,22 @@ display: none; } } +} + +.⁂-interaction-popover { + @apply flex flex-col gap-1 max-w-96; + + &__header { + @include mixins.text($weight: semibold, $align: center); + } + + &__description { + @include mixins.text($theme: muted, $align: center); + } +} + +.⁂-media-modal { + .⁂-status-action-bar__button { + @apply text-white/80 hover:text-white bg-transparent dark:bg-transparent; + } } \ No newline at end of file