pl-fe: styles migrations

Signed-off-by: nicole mikołajczyk <git@mkljczk.pl>
2025-10-19 19:28:38 +02:00
parent fced7f93ff
commit e61d6e64e1
12 changed files with 219 additions and 113 deletions
--- a/packages/pl-fe/src/features/account/components/header.tsx
+++ b/packages/pl-fe/src/features/account/components/header.tsx
@@ -749,7 +749,7 @@ const Header: React.FC<IHeader> = ({ account }) => {
          </div>

          <div className='mt-6 flex w-full justify-end sm:pb-1'>
-            <HStack space={2} className='mt-10'>
+            <HStack space={2} className='mt-10' wrap>
              <SubscriptionButton account={account} />
              {renderMessageButton()}
              {renderShareButton()}
--- a/packages/pl-fe/src/features/compose/components/compose-form.tsx
+++ b/packages/pl-fe/src/features/compose/components/compose-form.tsx
@@ -5,6 +5,7 @@ import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 import { useHistory } from 'react-router-dom';
 import { length } from 'stringz';

+import 'pl-fe/styles/new/compose.scss';
 import {
  submitCompose,
  clearComposeSuggestions,
@@ -97,40 +98,19 @@ interface IComposeButton extends Pick<
 const ComposeButton: React.FC<IComposeButton> = ({ actionsMenu, disabled, icon, text, ...props }) => {
  const intl = useIntl();

-  const containerClassName = 'flex items-center gap-px text-sm font-medium text-gray-100';
-  const buttonClassName = 'inline-flex select-none appearance-none border border-transparent bg-primary-500 transition-all hover:bg-primary-400 focus:bg-primary-500 focus:outline-none focus:ring-2 focus:ring-primary-300 focus:ring-offset-2 disabled:cursor-default disabled:opacity-75 dark:hover:bg-primary-600';
-
-  const button = (
-    <button
-      {...props}
-      disabled={disabled}
-      className={clsx({
-        'place-content-center items-center gap-x-2 px-4 py-2 rtl:space-x-reverse': true,
-        [buttonClassName]: true,
-        'rounded-l-full pr-2': actionsMenu,
-        [containerClassName]: !actionsMenu,
-        'rounded-full': !actionsMenu,
-      })}
-    >
-      {icon ? <Icon src={icon} className='size-4' /> : null}
-      <span>{text}</span>
-    </button>
+  return (
+    <div className='⁂-compose-form__button__container'>
+      <button {...props} disabled={disabled} className='⁂-compose-form__button'>
+        {icon ? <Icon src={icon} /> : null}
+        <span>{text}</span>
+      </button>
+      <DropdownMenu items={actionsMenu} placement='bottom' disabled={disabled}>
+        <button className='⁂-compose-form__button__actions' title={intl.formatMessage(messages.more)}>
+          <SvgIcon src={require('@phosphor-icons/core/regular/caret-down.svg')} />
+        </button>
+      </DropdownMenu>
+    </div>
  );
-
-  if (actionsMenu) {
-    return (
-      <div className={containerClassName}>
-        {button}
-        <DropdownMenu items={actionsMenu} placement='bottom' disabled={disabled}>
-          <button className={clsx('h-full cursor-pointer py-2.5 pl-1 pr-3 last:rounded-r-full', buttonClassName)} title={intl.formatMessage(messages.more)}>
-            <SvgIcon src={require('@phosphor-icons/core/regular/caret-down.svg')} className='size-4' />
-          </button>
-        </DropdownMenu>
-      </div>
-    );
-  }
-
-  return button;
 };

 interface IComposeForm<ID extends string> {
@@ -175,7 +155,7 @@ const ComposeForm = <ID extends string>({ id, shouldCondense, autoFocus, clickab

  const [composeFocused, setComposeFocused] = useState(false);

-  const formRef = useRef<HTMLDivElement>(null);
+  const formRef = useRef<HTMLFormElement>(null);
  const editorRef = useRef<LexicalEditor>(null);

  const { isDraggedOver } = useDraggedFiles(formRef);
@@ -302,14 +282,14 @@ const ComposeForm = <ID extends string>({ id, shouldCondense, autoFocus, clickab
  }, []);

  const renderButtons = useCallback(() => (
-    <HStack alignItems='center' space={2}>
+    <div className='⁂-compose-form__buttons'>
      <UploadButtonContainer composeId={id} />
      <EmojiPickerDropdown onPickEmoji={handleEmojiPick} condensed={shouldCondense} />
      {features.polls && <PollButton composeId={id} />}
      {features.scheduledStatuses && <ScheduleButton composeId={id} />}
      {anyMedia && features.spoilers && <SensitiveMediaButton composeId={id} />}
      {features.interactionRequests && <InteractionPolicyButton composeId={id} />}
-    </HStack>
+    </div>
  ), [features, id, anyMedia]);

  const showModifiers = !condensed && (compose.media_attachments.length || compose.is_uploading || compose.poll?.options.length || compose.schedule);
@@ -347,7 +327,7 @@ const ComposeForm = <ID extends string>({ id, shouldCondense, autoFocus, clickab
  if (features.richText) selectButtons.push(<ContentTypeButton key='compose-type-button' composeId={id} />);
  if (features.postLanguages) selectButtons.push(<LanguageDropdown key='language-dropdown' composeId={id} />);

-  const actionsMenu: Menu | undefined = [];
+  const actionsMenu: Menu = [];

  if (features.createStatusPreview) {
    actionsMenu.push({
@@ -364,7 +344,14 @@ const ComposeForm = <ID extends string>({ id, shouldCondense, autoFocus, clickab
  });

  return (
-    <Stack className='w-full' space={4} ref={formRef} onClick={handleClick} element='form' onSubmit={handleSubmit}>
+    <form
+      className={clsx('⁂-compose-form', {
+        '⁂-compose-form--with-avatar': withAvatar,
+      })}
+      ref={formRef}
+      onClick={handleClick}
+      onSubmit={handleSubmit}
+    >
      {!!compose.in_reply_to && compose.approvalRequired && (
        <Warning
          message={(
@@ -402,10 +389,10 @@ const ComposeForm = <ID extends string>({ id, shouldCondense, autoFocus, clickab
          <ComposeEditor
            key={modifiedLanguage}
            ref={editorRef}
-            className={transparent
-              ? ''
-              : 'rounded-md border-gray-400 px-3 py-2 ring-2 focus-within:border-primary-500 focus-within:ring-primary-500 dark:border-gray-800 dark:ring-gray-800 dark:focus-within:border-primary-500 dark:focus-within:ring-primary-500'}
-            placeholderClassName={transparent ? '' : 'pt-2'}
+            className={clsx('⁂-compose-form__editor', {
+              '⁂-compose-form__editor--transparent': transparent,
+            })}
+            placeholderClassName='⁂-compose-form__editor__placeholder'
            composeId={id}
            condensed={condensed}
            eventDiscussion={!!event}
@@ -429,23 +416,22 @@ const ComposeForm = <ID extends string>({ id, shouldCondense, autoFocus, clickab
      <PreviewComposeContainer composeId={id} />

      <div
-        className={clsx('flex flex-wrap items-center justify-between', {
-          'hidden': condensed,
-          'ml-[-56px] sm:ml-0': withAvatar,
+        className={clsx('⁂-compose-form__footer', {
+          '⁂-compose-form__footer--condensed': condensed,
        })}
      >
        {renderButtons()}

-        <HStack space={4} alignItems='center' className='ml-auto rtl:ml-0 rtl:mr-auto'>
+        <div className='⁂-compose-form__actions'>
          {maxTootChars && (
-            <HStack space={1} alignItems='center'>
+            <div className='⁂-compose-form__counter'>
              <TextCharacterCounter max={maxTootChars} text={text} />
              <VisualCharacterCounter max={maxTootChars} text={text} />
-            </HStack>
+            </div>
          )}

          <ComposeButton type='submit' icon={publishIcon} text={publishText} disabled={!canSubmit} actionsMenu={actionsMenu} />
-        </HStack>
+        </div>

        {compose.redacting && (
          <List>
@@ -462,7 +448,7 @@ const ComposeForm = <ID extends string>({ id, shouldCondense, autoFocus, clickab
          </List>
        )}
      </div>
-    </Stack>
+    </form>
  );
 };

--- a/packages/pl-fe/src/features/compose/components/spoiler-input.tsx
+++ b/packages/pl-fe/src/features/compose/components/spoiler-input.tsx
@@ -44,7 +44,7 @@ const SpoilerInput: React.FC<ISpoilerInput> = ({
      theme={theme}
      searchTokens={[':']}
      id='cw-spoiler-input'
-      className='rounded-md !bg-transparent dark:!bg-transparent'
+      className='⁂-compose-form__spoiler-input'
      lang={modified_language || undefined}
    />
  );
--- a/packages/pl-fe/src/features/ui/components/compose-button.tsx
+++ b/packages/pl-fe/src/features/ui/components/compose-button.tsx
@@ -5,8 +5,8 @@ import { useLocation, useRouteMatch } from 'react-router-dom';
 import { groupComposeModal } from 'pl-fe/actions/compose';
 import { useGroup } from 'pl-fe/api/hooks/groups/use-group';
 import Avatar from 'pl-fe/components/ui/avatar';
-import Button from 'pl-fe/components/ui/button';
 import HStack from 'pl-fe/components/ui/hstack';
+import Icon from 'pl-fe/components/ui/icon';
 import { useAppDispatch } from 'pl-fe/hooks/use-app-dispatch';
 import { useModalsStore } from 'pl-fe/stores/modals';

@@ -34,17 +34,14 @@ const HomeComposeButton: React.FC<IComposeButton> = ({ shrink }) => {
  const onOpenCompose = () => openModal('COMPOSE');

  return (
-    <Button
-      theme='accent'
-      size='lg'
+    <button
+      className='⁂-sidebar-navigation__compose-button'
      onClick={onOpenCompose}
-      block
-      icon={shrink ? require('@phosphor-icons/core/regular/plus.svg') : undefined}
    >
-      {!shrink && (
-        <FormattedMessage id='navigation.compose' defaultMessage='Compose' />
-      )}
-    </Button>
+      {shrink
+        ? <Icon src={require('@phosphor-icons/core/regular/plus.svg')} />
+        : <FormattedMessage id='navigation.compose' defaultMessage='Compose' />}
+    </button>
  );
 };

@@ -60,22 +57,19 @@ const GroupComposeButton: React.FC<IComposeButton> = ({ shrink }) => {
  };

  return (
-    <Button
-      theme='accent'
-      size='lg'
+    <button
+      className='⁂-sidebar-navigation__compose-button'
      onClick={onOpenCompose}
-      block
-      icon={shrink ? require('@phosphor-icons/core/regular/plus.svg') : undefined}
    >
-      {!shrink && (
-        <HStack space={3} alignItems='center'>
+      {shrink
+        ? <Icon src={require('@phosphor-icons/core/regular/plus.svg')} />
+        : <HStack space={3} alignItems='center'>
          <Avatar className='-my-1 border-2 border-white' size={30} src={group.avatar} alt={group.avatar_description} />
          <span>
            <FormattedMessage id='navigation.compose_group' defaultMessage='Compose to group' />
          </span>
-        </HStack>
-      )}
-    </Button>
+        </HStack>}
+    </button>
  );
 };