From a0e967cb5485e843aced0d35ad9ed37b81c1140b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?nicole=20miko=C5=82ajczyk?= Date: Tue, 11 Nov 2025 12:53:54 +0100 Subject: [PATCH] pl-fe: style migrations MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: nicole mikołajczyk --- .../src/components/sidebar-navigation.tsx | 13 +++--- packages/pl-fe/src/components/ui/widget.tsx | 5 ++- .../components/panels/group-media-panel.tsx | 21 ++++----- .../panels/profile-fields-panel.tsx | 11 ++--- .../components/panels/profile-media-panel.tsx | 21 ++++----- .../features/ui/components/profile-field.tsx | 22 ++++------ packages/pl-fe/src/styles/new/accounts.scss | 43 ++++++++++++++++++- packages/pl-fe/src/styles/new/layout.scss | 12 ++++++ 8 files changed, 93 insertions(+), 55 deletions(-) diff --git a/packages/pl-fe/src/components/sidebar-navigation.tsx b/packages/pl-fe/src/components/sidebar-navigation.tsx index 171276a19..a4e4ac894 100644 --- a/packages/pl-fe/src/components/sidebar-navigation.tsx +++ b/packages/pl-fe/src/components/sidebar-navigation.tsx @@ -203,8 +203,8 @@ const SidebarNavigation: React.FC = React.memo(({ shrink }) {account && ( - -
+
+
{shrink ? ( = React.memo(({ shrink }) username={account.username} size={40} /> - // className='size-10 bg-gray-50 ring-2 ring-white' ) : ( } + action={} disabled withLinkToProfile={false} /> @@ -226,11 +225,9 @@ const SidebarNavigation: React.FC = React.memo(({ shrink })
{!shrink && ( -
- -
+ )} - +
)}
diff --git a/packages/pl-fe/src/components/ui/widget.tsx b/packages/pl-fe/src/components/ui/widget.tsx index e544e2e71..0f31739b2 100644 --- a/packages/pl-fe/src/components/ui/widget.tsx +++ b/packages/pl-fe/src/components/ui/widget.tsx @@ -1,3 +1,4 @@ +import clsx from 'clsx'; import React from 'react'; import IconButton from 'pl-fe/components/ui/icon-button'; @@ -13,6 +14,7 @@ interface IWidget { actionTitle?: string; action?: JSX.Element; children?: React.ReactNode; + className?: string; } /** Sidebar widget. */ @@ -23,8 +25,9 @@ const Widget: React.FC = ({ actionIcon = require('@phosphor-icons/core/regular/arrow-right.svg'), actionTitle, action, + className, }): JSX.Element => ( -
+
{(title || action || onActionClick) && (
{title &&

{title}

} diff --git a/packages/pl-fe/src/features/ui/components/panels/group-media-panel.tsx b/packages/pl-fe/src/features/ui/components/panels/group-media-panel.tsx index 1f01ca6ba..7c32d67ab 100644 --- a/packages/pl-fe/src/features/ui/components/panels/group-media-panel.tsx +++ b/packages/pl-fe/src/features/ui/components/panels/group-media-panel.tsx @@ -2,7 +2,6 @@ import React from 'react'; import { FormattedMessage } from 'react-intl'; import Spinner from 'pl-fe/components/ui/spinner'; -import Text from 'pl-fe/components/ui/text'; import Widget from 'pl-fe/components/ui/widget'; import { type AccountGalleryAttachment, useGroupGallery } from 'pl-fe/hooks/use-account-gallery'; import { MediaItem } from 'pl-fe/pages/accounts/account-gallery'; @@ -28,7 +27,7 @@ const GroupMediaPanel: React.FC = ({ group }) => { if (nineAttachments.length) { return ( -
+
{nineAttachments.map((attachment, index) => ( = ({ group }) => { ); } else { return ( - +

- +

); } }; return ( - }> - {group && ( -
- {isLoading ? ( - - ) : ( - renderAttachments() - )} -
+ }> + {isLoading ? ( + + ) : ( + renderAttachments() )} ); diff --git a/packages/pl-fe/src/features/ui/components/panels/profile-fields-panel.tsx b/packages/pl-fe/src/features/ui/components/panels/profile-fields-panel.tsx index fbdbff320..4f465938f 100644 --- a/packages/pl-fe/src/features/ui/components/panels/profile-fields-panel.tsx +++ b/packages/pl-fe/src/features/ui/components/panels/profile-fields-panel.tsx @@ -1,6 +1,5 @@ import React from 'react'; -import Stack from 'pl-fe/components/ui/stack'; import Widget from 'pl-fe/components/ui/widget'; import { ProfileField } from '../../util/async-components'; @@ -13,12 +12,10 @@ interface IProfileFieldsPanel { /** Custom profile fields for sidebar. */ const ProfileFieldsPanel: React.FC = ({ account }) => ( - - - {account.fields.map((field, i) => ( - - ))} - + + {account.fields.map((field, i) => ( + + ))} ); diff --git a/packages/pl-fe/src/features/ui/components/panels/profile-media-panel.tsx b/packages/pl-fe/src/features/ui/components/panels/profile-media-panel.tsx index 2badd1ca5..966835ee4 100644 --- a/packages/pl-fe/src/features/ui/components/panels/profile-media-panel.tsx +++ b/packages/pl-fe/src/features/ui/components/panels/profile-media-panel.tsx @@ -2,7 +2,6 @@ import React from 'react'; import { FormattedMessage } from 'react-intl'; import Spinner from 'pl-fe/components/ui/spinner'; -import Text from 'pl-fe/components/ui/text'; import Widget from 'pl-fe/components/ui/widget'; import { type AccountGalleryAttachment, useAccountGallery } from 'pl-fe/hooks/use-account-gallery'; import { MediaItem } from 'pl-fe/pages/accounts/account-gallery'; @@ -29,7 +28,7 @@ const ProfileMediaPanel: React.FC = ({ account }) => { if (nineAttachments.length) { return ( -
+
{nineAttachments.map((attachment, index) => ( = ({ account }) => { ); } else { return ( - +

- +

); } }; return ( - }> -
- {isLoading || !account ? ( - - ) : ( - renderAttachments() - )} -
+ }> + {isLoading || !account ? ( + + ) : ( + renderAttachments() + )} ); }; diff --git a/packages/pl-fe/src/features/ui/components/profile-field.tsx b/packages/pl-fe/src/features/ui/components/profile-field.tsx index b05a8ef62..30a099a94 100644 --- a/packages/pl-fe/src/features/ui/components/profile-field.tsx +++ b/packages/pl-fe/src/features/ui/components/profile-field.tsx @@ -3,9 +3,7 @@ import React from 'react'; import { defineMessages, useIntl, type FormatDateOptions } from 'react-intl'; import AccountLocalTime from 'pl-fe/components/account-local-time'; -import Markup from 'pl-fe/components/markup'; import { ParsedContent } from 'pl-fe/components/parsed-content'; -import HStack from 'pl-fe/components/ui/hstack'; import Icon from 'pl-fe/components/ui/icon'; import CryptoAddress from 'pl-fe/features/crypto-donate/components/crypto-address'; import LightningAddress from 'pl-fe/features/crypto-donate/components/lightning-address'; @@ -59,28 +57,26 @@ const ProfileField: React.FC = ({ accountId, field, emojis }) => } return ( -
+
- + - +
-
- +
+
{field.verified_at && ( )} - + - - + +
+ {isTimezoneLabel(field.name) && ( )} diff --git a/packages/pl-fe/src/styles/new/accounts.scss b/packages/pl-fe/src/styles/new/accounts.scss index 74ff97dfe..6fa61d17d 100644 --- a/packages/pl-fe/src/styles/new/accounts.scss +++ b/packages/pl-fe/src/styles/new/accounts.scss @@ -1,3 +1,5 @@ +@use 'mixins'; + .⁂-account-card { @apply block w-full shrink-0; @@ -77,4 +79,43 @@ 55% { transform: rotate(-20deg) skew(-30deg); } 75% { transform: rotate(0deg) skew(-30deg); } 100% { transform: rotate(-37.6deg) skew(-30deg); } -} \ No newline at end of file +} + +.⁂-media-panel { + .⁂-widget__body { + width: 100%; + } + + &__attachments { + @apply grid grid-cols-3 gap-0.5 overflow-hidden rounded-md; + } + + &__empty { + @include mixins.text($size: sm, $theme: muted); + } +} + +.⁂-profile-field { + dt span { + @include mixins.text($weight: bold); + } + + &--verified dd { + @apply text-success-500; + } + + &__content { + @apply flex items-center gap-2; + } +} + +.⁂-profile-fields-panel { + .⁂-widget__body { + @apply flex flex-col gap-4; + } + + span[data-markup] { + @include mixins.text(); + @apply overflow-hidden break-words; + } +} diff --git a/packages/pl-fe/src/styles/new/layout.scss b/packages/pl-fe/src/styles/new/layout.scss index fdda43ab1..6c5b7dec5 100644 --- a/packages/pl-fe/src/styles/new/layout.scss +++ b/packages/pl-fe/src/styles/new/layout.scss @@ -143,6 +143,18 @@ body { flex-direction: column; gap: 1rem; + &__header { + @apply flex flex-col gap-y-4; + + &__account { + @apply relative flex items-center; + + &__expand { + @apply text-gray-600 hover:text-gray-700 dark:text-gray-600 dark:hover:text-gray-500; + } + } + } + .⁂-site-logo { height: 3rem; width: auto;