pl-fe: style migrations

Signed-off-by: nicole mikołajczyk <git@mkljczk.pl>
2025-11-11 12:53:54 +01:00
parent 517e88d422
commit a0e967cb54
8 changed files with 93 additions and 55 deletions
--- 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<ISidebarNavigation> = React.memo(({ shrink })
      <SiteLogo />

      {account && (
-        <Stack space={4}>
-          <div className='relative flex items-center'>
+        <div className='⁂-sidebar-navigation__header'>
+          <div className='⁂-sidebar-navigation__header__account'>
            <ProfileDropdown account={account}>
              {shrink ? (
                <Avatar
@ -214,11 +214,10 @@ const SidebarNavigation: React.FC<ISidebarNavigation> = React.memo(({ shrink })
                  username={account.username}
                  size={40}
                />
-              // className='size-10 bg-gray-50 ring-2 ring-white'
              ) : (
                <Account
                  account={account}
-                  action={<Icon src={require('@phosphor-icons/core/regular/caret-down.svg')} className='text-gray-600 hover:text-gray-700 dark:text-gray-600 dark:hover:text-gray-500' />}
+                  action={<Icon src={require('@phosphor-icons/core/regular/caret-down.svg')} className='⁂-sidebar-navigation__header__account__expand' />}
                  disabled
                  withLinkToProfile={false}
                />
@ -226,11 +225,9 @@ const SidebarNavigation: React.FC<ISidebarNavigation> = React.memo(({ shrink })
            </ProfileDropdown>
          </div>
          {!shrink && (
-            <div className='block w-full max-w-xs'>
-              <SearchInput />
-            </div>
+            <SearchInput />
          )}
-        </Stack>
+        </div>
      )}

      <div className='⁂-sidebar-navigation__links'>
--- 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<IWidget> = ({
  actionIcon = require('@phosphor-icons/core/regular/arrow-right.svg'),
  actionTitle,
  action,
+  className,
 }): JSX.Element => (
-  <div className='⁂-widget'>
+  <div className={clsx('⁂-widget', className)}>
    {(title || action || onActionClick) && (
      <div className='⁂-widget__header'>
        {title && <h1>{title}</h1>}
--- 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<IGroupMediaPanel> = ({ group }) => {

    if (nineAttachments.length) {
      return (
-        <div className='grid grid-cols-3 gap-0.5 overflow-hidden rounded-md'>
+        <div className='⁂-media-panel__attachments'>
          {nineAttachments.map((attachment, index) => (
            <MediaItem
              key={`${attachment.status_id}+${attachment.id}`}
@ -41,23 +40,19 @@ const GroupMediaPanel: React.FC<IGroupMediaPanel> = ({ group }) => {
      );
    } else {
      return (
-        <Text size='sm' theme='muted'>
+        <p className='⁂-media-panel__empty'>
          <FormattedMessage id='media_panel.empty_message' defaultMessage='No media found.' />
-        </Text>
+        </p>
      );
    }
  };

  return (
-    <Widget title={<FormattedMessage id='media_panel.title' defaultMessage='Media' />}>
-      {group && (
-        <div className='w-full'>
-          {isLoading ? (
-            <Spinner />
-          ) : (
-            renderAttachments()
-          )}
-        </div>
+    <Widget className='⁂-media-panel' title={<FormattedMessage id='media_panel.title' defaultMessage='Media' />}>
+      {isLoading ? (
+        <Spinner />
+      ) : (
+        renderAttachments()
      )}
    </Widget>
  );
--- 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<IProfileFieldsPanel> = ({ account }) => (
-  <Widget>
-    <Stack space={4}>
-      {account.fields.map((field, i) => (
-        <ProfileField field={field} key={i} emojis={account.emojis} accountId={account.id} />
-      ))}
-    </Stack>
+  <Widget className='⁂-profile-fields-panel'>
+    {account.fields.map((field, i) => (
+      <ProfileField field={field} key={i} emojis={account.emojis} accountId={account.id} />
+    ))}
  </Widget>
 );

--- 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<IProfileMediaPanel> = ({ account }) => {

    if (nineAttachments.length) {
      return (
-        <div className='grid grid-cols-3 gap-0.5 overflow-hidden rounded-md'>
+        <div className='⁂-media-panel__attachments'>
          {nineAttachments.map((attachment, index) => (
            <MediaItem
              key={`${attachment.status_id}+${attachment.id}`}
@ -42,22 +41,20 @@ const ProfileMediaPanel: React.FC<IProfileMediaPanel> = ({ account }) => {
      );
    } else {
      return (
-        <Text size='sm' theme='muted'>
+        <p className='⁂-media-panel__empty'>
          <FormattedMessage id='media_panel.empty_message' defaultMessage='No media found.' />
-        </Text>
+        </p>
      );
    }
  };

  return (
-    <Widget title={<FormattedMessage id='media_panel.title' defaultMessage='Media' />}>
-      <div className='w-full'>
-        {isLoading || !account ? (
-          <Spinner />
-        ) : (
-          renderAttachments()
-        )}
-      </div>
+    <Widget className='⁂-media-panel' title={<FormattedMessage id='media_panel.title' defaultMessage='Media' />}>
+      {isLoading || !account ? (
+        <Spinner />
+      ) : (
+        renderAttachments()
+      )}
    </Widget>
  );
 };
--- 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<IProfileField> = ({ accountId, field, emojis }) =>
  }

  return (
-    <dl>
+    <dl className={clsx('⁂-profile-field', { '⁂-profile-field--verified': field.verified_at })}>
      <dt title={field.name}>
-        <Markup weight='bold' tag='span'>
+        <span data-markup>
          <Emojify text={field.name} emojis={emojis} />
-        </Markup>
+        </span>
      </dt>

-      <dd
-        className={clsx({ 'text-success-500': field.verified_at })}
-        title={unescapeHTML(field.value)}
-      >
-        <HStack space={2} alignItems='center'>
+      <dd title={unescapeHTML(field.value)}>
+        <div className='⁂-profile-field__content'>
          {field.verified_at && (
            <span className='flex-none' title={intl.formatMessage(messages.linkVerifiedOn, { date: intl.formatDate(field.verified_at, dateFormatOptions) })}>
              <Icon src={require('@phosphor-icons/core/regular/check.svg')} />
            </span>
          )}

-          <Markup className='overflow-hidden break-words' tag='span'>
+          <span data-markup>
            <ParsedContent html={field.value} emojis={emojis} />
-          </Markup>
-        </HStack>
+          </span>
+        </div>
+
        {isTimezoneLabel(field.name) && (
          <AccountLocalTime accountId={accountId} field={field} />
        )}
--- 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); }
-}
+}
+
+.⁂-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;
+  }
+}
--- 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;