From d79b4b814f7dfee07889d5a8fb948a3c9df20020 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?nicole=20miko=C5=82ajczyk?= <git@mkljczk.pl>
Date: Wed, 29 Oct 2025 14:40:46 +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 <git@mkljczk.pl>
---
 packages/pl-fe/src/components/account.tsx     | 35 +++++------
 .../src/components/polls/poll-footer.tsx      |  8 +--
 .../src/components/status-language-picker.tsx |  2 +-
 packages/pl-fe/src/components/status.tsx      |  2 +-
 .../status/components/detailed-status.tsx     | 62 ++++++++++---------
 .../status/components/status-type-icon.tsx    |  2 +-
 packages/pl-fe/src/styles/new/accounts.scss   | 14 +++++
 packages/pl-fe/src/styles/new/layout.scss     |  6 ++
 8 files changed, 73 insertions(+), 58 deletions(-)

diff --git a/packages/pl-fe/src/components/account.tsx b/packages/pl-fe/src/components/account.tsx
index 4e4942d4f..767f6e749 100644
--- 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>
   );
 };
diff --git a/packages/pl-fe/src/components/polls/poll-footer.tsx b/packages/pl-fe/src/components/polls/poll-footer.tsx
index 797b4351c..93db9dc7e 100644
--- 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>
           </>
         )}
diff --git a/packages/pl-fe/src/components/status-language-picker.tsx b/packages/pl-fe/src/components/status-language-picker.tsx
index 806a74213..b6bbcde48 100644
--- 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) => ({
diff --git a/packages/pl-fe/src/components/status.tsx b/packages/pl-fe/src/components/status.tsx
index b548d89a8..727096bb9 100644
--- 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')} />
                   </>
diff --git a/packages/pl-fe/src/features/status/components/detailed-status.tsx b/packages/pl-fe/src/features/status/components/detailed-status.tsx
index 4125581da..d86f180fe 100644
--- 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>
 
diff --git a/packages/pl-fe/src/features/status/components/status-type-icon.tsx b/packages/pl-fe/src/features/status/components/status-type-icon.tsx
index 68865df47..a74689d32 100644
--- 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} />
     </>
diff --git a/packages/pl-fe/src/styles/new/accounts.scss b/packages/pl-fe/src/styles/new/accounts.scss
index 55ffbc49d..74ff97dfe 100644
--- 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];
 
diff --git a/packages/pl-fe/src/styles/new/layout.scss b/packages/pl-fe/src/styles/new/layout.scss
index 4c47f964a..9d5bc43f4 100644
--- 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;
 }
\ No newline at end of file