pl-fe: style migrations

Signed-off-by: nicole mikołajczyk <git@mkljczk.pl>
2025-10-29 14:40:46 +01:00
parent 623f4114f6
commit d79b4b814f
8 changed files with 73 additions and 58 deletions
--- a/packages/pl-fe/src/components/account.tsx
+++ b/packages/pl-fe/src/components/account.tsx
@ -1,3 +1,4 @@
+import clsx from 'clsx';
 import React, { useLayoutEffect, useRef, useState } from 'react';
 import { defineMessages, useIntl, FormattedMessage } from 'react-intl';
 import { Link, useHistory } from 'react-router-dom';
@ -222,8 +223,8 @@ const Account = ({
  } : {};

  if (disabled) return (
-    <div data-testid='account' className='group block w-full shrink-0' ref={overflowRef}>
-      <HStack alignItems={actionAlignment} space={3} justifyContent='between'>
+    <div data-testid='account' className={clsx('⁂-account-card', { '⁂-account-card--action-top': actionAlignment === 'top' })} ref={overflowRef}>
+      <div>
        <HStack alignItems='center' space={3} className='max-w-full'>
          {disableUserProvidedMedia ? (
            <Avatar src={account.avatar} alt={account.avatar_description} username={account.username} />
@ -242,11 +243,7 @@ const Account = ({

          <div className='grow overflow-hidden'>
            <HStack space={1} alignItems='center' grow>
-              <Text
-                size='sm'
-                weight='semibold'
-                truncate
-              >
+              <Text size='sm' weight='semibold' truncate>
                <Emojify text={account.display_name} emojis={account.emojis} />
              </Text>

@ -268,7 +265,7 @@ const Account = ({
                    />

                    {account.favicon && !disableUserProvidedMedia && (
-                      <Text tag='span' theme='muted' size='sm'>&middot;</Text>
+                      <span className='⁂-separator' />
                    )}
                  </>
                )}
@ -286,13 +283,13 @@ const Account = ({
        <div ref={actionRef}>
          {renderAction()}
        </div>
-      </HStack>
+      </div>
    </div>
  );

  return (
-    <div data-testid='account' className='group block w-full shrink-0' ref={overflowRef}>
-      <HStack alignItems={actionAlignment} space={3} justifyContent='between'>
+    <div data-testid='account' className={clsx('⁂-account-card', { '⁂-account-card--action-top': actionAlignment === 'top' })} ref={overflowRef}>
+      <div>
        <HStack alignItems={withAccountNote || note ? 'top' : 'center'} space={3} className='max-w-full'>
          {withAvatar && (disableUserProvidedMedia ? (
            <Avatar src={account.avatar} alt={account.avatar_description} username={account.username} />
@ -321,11 +318,7 @@ const Account = ({
            >
              <LinkEl {...linkProps}>
                <HStack space={1} alignItems='center' grow>
-                  <Text
-                    size='sm'
-                    weight='semibold'
-                    truncate
-                  >
+                  <Text size='sm' weight='semibold' truncate>
                    <Emojify text={account.display_name} emojis={account.emojis} />
                  </Text>

@ -348,7 +341,7 @@ const Account = ({
                      className='size-4 text-gray-600'
                    />
                    {account.favicon && !disableUserProvidedMedia && (
-                      <Text tag='span' theme='muted' size='sm'>&middot;</Text>
+                      <span className='⁂-separator' />
                    )}
                  </>
                )}
@ -359,7 +352,7 @@ const Account = ({

                {(timestamp) ? (
                  <>
-                    <Text tag='span' theme='muted' size='sm'>&middot;</Text>
+                    <span className='⁂-separator' />

                    {timestampUrl ? (
                      <Link to={timestampUrl} className='hover:underline' onClick={(event) => event.stopPropagation()}>
@ -373,7 +366,7 @@ const Account = ({

                {approvalStatus && ['pending', 'rejected'].includes(approvalStatus) && (
                  <>
-                    <Text tag='span' theme='muted' size='sm'>&middot;</Text>
+                    <span className='⁂-separator' />

                    <Text tag='span' theme='muted' size='sm'>
                      {approvalStatus === 'pending'
@ -385,7 +378,7 @@ const Account = ({

                {actionType === 'muting' && muteExpiresAt ? (
                  <>
-                    <Text tag='span' theme='muted' size='sm'>&middot;</Text>
+                    <span className='⁂-separator' />

                    <Text theme='muted' size='sm'><RelativeTimestamp timestamp={muteExpiresAt} futureDate /></Text>
                  </>
@ -417,7 +410,7 @@ const Account = ({
        <div ref={actionRef}>
          {renderAction()}
        </div>
-      </HStack>
+      </div>
    </div>
  );
 };
--- a/packages/pl-fe/src/components/polls/poll-footer.tsx
+++ b/packages/pl-fe/src/components/polls/poll-footer.tsx
@ -73,7 +73,7 @@ const PollFooter: React.FC<IPollFooter> = ({ poll, showResults, selected, status
              </Text>
            </Tooltip>

-            <Text theme='muted'>&middot;</Text>
+            <span className='⁂-separator' />
          </>
        )}

@ -85,7 +85,7 @@ const PollFooter: React.FC<IPollFooter> = ({ poll, showResults, selected, status
              </Text>
            </button>

-            <Text theme='muted'>&middot;</Text>
+            <span className='⁂-separator' />
          </>
        )}

@ -101,7 +101,7 @@ const PollFooter: React.FC<IPollFooter> = ({ poll, showResults, selected, status
              </Text>
            </button>

-            <Text theme='muted'>&middot;</Text>
+            <span className='⁂-separator' />
          </>
        )}

@ -111,7 +111,7 @@ const PollFooter: React.FC<IPollFooter> = ({ poll, showResults, selected, status

        {poll.expires_at !== null && (
          <>
-            <Text theme='muted'>&middot;</Text>
+            <span className='⁂-separator' />
            <Text weight='medium' theme='muted' data-testid='poll-expiration'>{timeRemaining}</Text>
          </>
        )}
--- a/packages/pl-fe/src/components/status-language-picker.tsx
+++ b/packages/pl-fe/src/components/status-language-picker.tsx
@ -32,7 +32,7 @@ const StatusLanguagePicker: React.FC<IStatusLanguagePicker> = React.memo(({ stat

  return (
    <>
-      <Text tag='span' theme='muted' size='sm'>&middot;</Text>
+      <span className='⁂-separator' />

      <DropdownMenu
        items={Object.keys(status.content_map).map((language) => ({
--- a/packages/pl-fe/src/components/status.tsx
+++ b/packages/pl-fe/src/components/status.tsx
@ -396,7 +396,7 @@ const Status: React.FC<IStatus> = (props) => {
                <StatusLanguagePicker status={actualStatus} />
                {!!actualStatus.edited_at && (
                  <>
-                    <Text tag='span' theme='muted' size='sm'>&middot;</Text>
+                    <span className='⁂-separator' />

                    <Icon className='size-4 text-gray-700 dark:text-gray-600' src={require('@phosphor-icons/core/regular/pencil-simple.svg')} />
                  </>
--- a/packages/pl-fe/src/features/status/components/detailed-status.tsx
+++ b/packages/pl-fe/src/features/status/components/detailed-status.tsx
@ -119,38 +119,40 @@ const DetailedStatus: React.FC<IDetailedStatus> = ({
          <HStack space={1} alignItems='center'>
            <span>
              <Text tag='span' theme='muted' size='sm'>
-                <a href={actualStatus.url} target='_blank' rel='noopener' className='hover:underline'>
-                  <FormattedDate value={new Date(actualStatus.created_at)} hour12 year='numeric' month='short' day='2-digit' hour='numeric' minute='2-digit' />
-                </a>
+                <HStack space={1} alignItems='center' wrap>
+                  <a href={actualStatus.url} target='_blank' rel='noopener' className='hover:underline'>
+                    <FormattedDate value={new Date(actualStatus.created_at)} hour12 year='numeric' month='short' day='2-digit' hour='numeric' minute='2-digit' />
+                  </a>

-                {actualStatus.application && (
-                  <>
-                    {' · '}
-                    <a
-                      href={(actualStatus.application.website) ? actualStatus.application.website : '#'}
-                      target='_blank'
-                      rel='noopener'
-                      className='hover:underline'
-                      title={intl.formatMessage(messages.applicationName, { name: actualStatus.application.name })}
-                    >
-                      {actualStatus.application.name}
-                    </a>
-                  </>
-                )}
+                  {actualStatus.application && (
+                    <>
+                      <span className='⁂-separator' />
+                      <a
+                        href={(actualStatus.application.website) ? actualStatus.application.website : '#'}
+                        target='_blank'
+                        rel='noopener'
+                        className='hover:underline'
+                        title={intl.formatMessage(messages.applicationName, { name: actualStatus.application.name })}
+                      >
+                        {actualStatus.application.name}
+                      </a>
+                    </>
+                  )}

-                {actualStatus.edited_at && (
-                  <>
-                    {' · '}
-                    <div
-                      className='inline hover:underline'
-                      onClick={handleOpenCompareHistoryModal}
-                      role='button'
-                      tabIndex={0}
-                    >
-                      <FormattedMessage id='status.edited' defaultMessage='Edited {date}' values={{ date: intl.formatDate(new Date(actualStatus.edited_at), { hour12: true, month: 'short', day: '2-digit', hour: 'numeric', minute: '2-digit' }) }} />
-                    </div>
-                  </>
-                )}
+                  {actualStatus.edited_at && (
+                    <>
+                      <span className='⁂-separator' />
+                      <div
+                        className='inline hover:underline'
+                        onClick={handleOpenCompareHistoryModal}
+                        role='button'
+                        tabIndex={0}
+                      >
+                        <FormattedMessage id='status.edited' defaultMessage='Edited {date}' values={{ date: intl.formatDate(new Date(actualStatus.edited_at), { hour12: true, month: 'short', day: '2-digit', hour: 'numeric', minute: '2-digit' }) }} />
+                      </div>
+                    </>
+                  )}
+                </HStack>
              </Text>
            </span>

--- a/packages/pl-fe/src/features/status/components/status-type-icon.tsx
+++ b/packages/pl-fe/src/features/status/components/status-type-icon.tsx
@ -39,7 +39,7 @@ const StatusTypeIcon: React.FC<IStatusTypeIcon> = React.memo(({ visibility }) =>

  return (
    <>
-      <Text tag='span' theme='muted' size='sm'>&middot;</Text>
+      <span className='⁂-separator' />

      <Icon title={message ? intl.formatMessage(message) : undefined} className='size-4 text-gray-700 dark:text-gray-600' src={icon} />
    </>
--- a/packages/pl-fe/src/styles/new/accounts.scss
+++ b/packages/pl-fe/src/styles/new/accounts.scss
@ -1,3 +1,17 @@
+.⁂-account-card {
+  @apply block w-full shrink-0;
+
+  > div {
+    @apply flex gap-3 justify-between items-center;
+  }
+
+  &--action-top {
+    > div {
+      @apply items-start;
+    }
+  }
+}
+
 .⁂-avatar {
  @apply rounded-lg leading-[0];

--- a/packages/pl-fe/src/styles/new/layout.scss
+++ b/packages/pl-fe/src/styles/new/layout.scss
@ -394,4 +394,10 @@ div:has(.⁂-background-shapes), .dark {
    @include mixins.text($size: inherit, $theme: subtle);
    text-decoration-line: underline;
  }
+}
+
+.⁂-separator::before {
+  @include mixins.text($size: sm, $theme: muted);
+  content: '·';
+  user-select: none;
 }