pl-fe: update some styles

Signed-off-by: nicole mikołajczyk <git@mkljczk.pl>
2025-11-12 11:41:41 +01:00
parent 44c9e9cd5a
commit b5f00f7728
10 changed files with 127 additions and 59 deletions
--- a/packages/pl-fe/src/components/dropdown-menu/dropdown-menu.tsx
+++ b/packages/pl-fe/src/components/dropdown-menu/dropdown-menu.tsx
@ -26,6 +26,7 @@ interface IDropdownMenuContent {
  component?: React.FC<{ handleClose: () => any }>;
  touchscreen?: boolean;
  width?: React.CSSProperties['width'];
+  className?: string;
 }

 interface IDropdownMenu {
@ -40,11 +41,12 @@ interface IDropdownMenu {
  src?: string;
  title?: string;
  width?: React.CSSProperties['width'];
+  className?: string;
 }

 const listenerOptions = supportsPassiveEvents ? { passive: true } : false;

-const DropdownMenuContent: React.FC<IDropdownMenuContent> = ({ handleClose, items, component: Component, touchscreen, width }) => {
+const DropdownMenuContent: React.FC<IDropdownMenuContent> = ({ handleClose, items, component: Component, touchscreen, width, className }) => {
  if (touchscreen) width = undefined;

  const intl = useIntl();
@ -151,7 +153,7 @@ const DropdownMenuContent: React.FC<IDropdownMenuContent> = ({ handleClose, item
  );

  return (
-    <div className='max-h-full overflow-auto' ref={ref}>
+    <div className={clsx('max-h-full overflow-auto', className)} ref={ref}>
      {items?.some(item => item?.items?.length) ? (
        <ReactSwipeableViews animateHeight index={tab === undefined ? 0 : 1} style={{ width }}>
          <div className={clsx('max-w-full', { 'w-full': touchscreen })} style={{ width }}>
@ -200,6 +202,7 @@ const DropdownMenu = (props: IDropdownMenu) => {
    src = require('@phosphor-icons/core/regular/dots-three.svg'),
    title = 'Menu',
    width,
+    className,
  } = props;

  const { openDropdownMenu, closeDropdownMenu } = useUiStoreActions();
@ -255,7 +258,7 @@ const DropdownMenu = (props: IDropdownMenu) => {
      };
      openModal('DROPDOWN_MENU', {
        element: refs.reference.current as HTMLButtonElement,
-        content: <DropdownMenuContent handleClose={handleClose} items={items} component={component} touchscreen />,
+        content: <DropdownMenuContent handleClose={handleClose} items={items} component={component} touchscreen className={className} />,
      });
    } else {
      openDropdownMenu();
--- a/packages/pl-fe/src/features/compose-event/tabs/edit-event.tsx
+++ b/packages/pl-fe/src/features/compose-event/tabs/edit-event.tsx
@ -33,6 +33,7 @@ import toast from 'pl-fe/toast';
 import UploadButton from '../components/upload-button';

 import type { Location } from 'pl-api';
+import ContentTypeButton from 'pl-fe/features/compose/components/content-type-button';

 const messages = defineMessages({
  eventNamePlaceholder: { id: 'compose_event.fields.name_placeholder', defaultMessage: 'Name' },
@ -172,7 +173,7 @@ const EditEvent: React.FC<IEditEvent> = ({ statusId }) => {
  );

  return (
-    <Form onSubmit={handleSubmit}>
+    <Form className='⁂-edit-event' onSubmit={handleSubmit}>
      <FormGroup
        labelText={<FormattedMessage id='compose_event.fields.banner_label' defaultMessage='Event banner' />}
        hintText={<FormattedMessage id='compose_event.fields.banner_hint' defaultMessage='PNG, GIF or JPG. Landscape format is preferred.' />}
@ -201,15 +202,18 @@ const EditEvent: React.FC<IEditEvent> = ({ statusId }) => {
      <FormGroup
        labelText={<FormattedMessage id='compose_event.fields.description_label' defaultMessage='Event description' />}
      >
-        <ComposeEditor
-          key={String(isDisabled)}
-          className='block w-full rounded-md border border-gray-400 bg-white px-3 py-2 text-base text-gray-900 ring-1 placeholder:text-gray-600 focus-within:border-primary-500 focus-within:ring-primary-500 black:bg-black dark:border-gray-800 dark:bg-gray-900 dark:text-gray-100 dark:ring-gray-800 dark:placeholder:text-gray-600 dark:focus-within:border-primary-500 dark:focus-within:ring-primary-500 sm:text-sm'
-          placeholderClassName='pt-2'
-          composeId={composeId}
-          placeholder={intl.formatMessage(messages.eventDescriptionPlaceholder)}
-          handleSubmit={handleSubmit}
-          onChange={setText}
-        />
+        <div className='relative'>
+          <ContentTypeButton composeId={composeId} />
+          <ComposeEditor
+            key={String(isDisabled)}
+            className='block w-full rounded-md border border-gray-400 bg-white px-3 py-2 text-base text-gray-900 ring-1 placeholder:text-gray-600 focus-within:border-primary-500 focus-within:ring-primary-500 black:bg-black dark:border-gray-800 dark:bg-gray-900 dark:text-gray-100 dark:ring-gray-800 dark:placeholder:text-gray-600 dark:focus-within:border-primary-500 dark:focus-within:ring-primary-500 sm:text-sm'
+            placeholderClassName='pt-2'
+            composeId={composeId}
+            placeholder={intl.formatMessage(messages.eventDescriptionPlaceholder)}
+            handleSubmit={handleSubmit}
+            onChange={setText}
+          />
+        </div>
      </FormGroup>
      <FormGroup
        labelText={<FormattedMessage id='compose_event.fields.location_label' defaultMessage='Event location' />}
--- a/packages/pl-fe/src/features/compose/components/compose-form.tsx
+++ b/packages/pl-fe/src/features/compose/components/compose-form.tsx
@ -5,7 +5,6 @@ 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,
--- a/packages/pl-fe/src/features/compose/components/content-type-button.tsx
+++ b/packages/pl-fe/src/features/compose/components/content-type-button.tsx
@ -3,7 +3,7 @@ import { defineMessages, useIntl } from 'react-intl';

 import { changeComposeContentType } from 'pl-fe/actions/compose';
 import DropdownMenu from 'pl-fe/components/dropdown-menu';
-import Button from 'pl-fe/components/ui/button';
+import Icon from 'pl-fe/components/ui/icon';
 import { useAppDispatch } from 'pl-fe/hooks/use-app-dispatch';
 import { useCompose } from 'pl-fe/hooks/use-compose';
 import { useInstance } from 'pl-fe/hooks/use-instance';
@ -86,14 +86,11 @@ const ContentTypeButton: React.FC<IContentTypeButton> = ({ composeId, compact })
        active: contentType === value,
      }))}
    >
-      <Button
-        theme='muted'
-        size='xs'
-        text={compact ? undefined : option?.text}
-        icon={option?.icon}
-        secondaryIcon={require('@phosphor-icons/core/regular/caret-down.svg')}
-        title={compact ? option?.text : intl.formatMessage(messages.change_content_type)}
-      />
+      <button className='⁂-content-type-button' title={compact ? option?.text : intl.formatMessage(messages.change_content_type)}>
+        {option?.icon && <Icon src={option.icon} />}
+        {compact ? undefined : option?.text}
+        <Icon src={require('@phosphor-icons/core/regular/caret-down.svg')} />
+      </button>
    </DropdownMenu>
  );
 };
--- a/packages/pl-fe/src/features/compose/components/language-dropdown.tsx
+++ b/packages/pl-fe/src/features/compose/components/language-dropdown.tsx
@ -5,7 +5,6 @@ import { defineMessages, useIntl } from 'react-intl';

 import { addComposeLanguage, changeComposeLanguage, changeComposeModifiedLanguage, deleteComposeLanguage } from 'pl-fe/actions/compose';
 import DropdownMenu from 'pl-fe/components/dropdown-menu';
-import Button from 'pl-fe/components/ui/button';
 import Icon from 'pl-fe/components/ui/icon';
 import Input from 'pl-fe/components/ui/input';
 import { type Language, languages as languagesObject } from 'pl-fe/features/preferences';
@ -148,8 +147,8 @@ const getLanguageDropdown = (composeId: string): React.FC<ILanguageDropdown> =>

  return (
    <>
-      <label className='relative m-2 mt-1 block grow'>
-        <span style={{ display: 'none' }}>{intl.formatMessage(messages.search)}</span>
+      <label className='⁂-language-dropdown__search'>
+        <span>{intl.formatMessage(messages.search)}</span>

        <Input
          className='w-64'
@ -161,17 +160,15 @@ const getLanguageDropdown = (composeId: string): React.FC<ILanguageDropdown> =>
        />
        <button
          tabIndex={0}
-          className='absolute inset-y-0 right-0 flex cursor-pointer items-center px-2 rtl:left-0 rtl:right-auto'
          onClick={handleClear}
          title={isSearching ? intl.formatMessage(messages.clear) : intl.formatMessage(messages.search)}
        >
          <Icon
-            className='size-5 text-gray-600'
            src={isSearching ? require('@phosphor-icons/core/regular/backspace.svg') : require('@phosphor-icons/core/regular/magnifying-glass.svg')}
          />
        </button>
      </label>
-      <div className='-mb-1 h-96 w-full overflow-auto' ref={node} tabIndex={-1}>
+      <div className='⁂-language-dropdown__options' ref={node} tabIndex={-1}>
        {results.map(([code, name]) => {
          const active = code === language;
          const modified = code === modifiedLanguage;
@ -184,32 +181,27 @@ const getLanguageDropdown = (composeId: string): React.FC<ILanguageDropdown> =>
              data-index={code}
              onClick={handleOptionClick}
              className={clsx(
-                'flex w-full gap-2 p-2.5 text-left text-sm text-gray-700 dark:text-gray-400',
+                '⁂-language-dropdown__option',
                {
-                  'bg-gray-100 dark:bg-gray-800 black:bg-gray-900 cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-700': modified,
-                  'cursor-pointer hover:bg-gray-100 black:hover:bg-gray-900 dark:hover:bg-gray-800': !hasMultipleLanguages || code in textMap,
-                  'cursor-pointer': active,
-                  'cursor-default': !active && !(!hasMultipleLanguages || code in textMap),
+                  '⁂-language-dropdown__option--modified': modified,
+                  '⁂-language-dropdown__option--available': !hasMultipleLanguages || code in textMap,
+                  '⁂-language-dropdown__option--active': active,
                },
              )}
              aria-selected={active}
              ref={active ? focusedItem : null}
            >
-              <div
-                className={clsx('flex-auto grow text-primary-600 dark:text-primary-400', {
-                  'text-black dark:text-white': modified,
-                })}
-              >
+              <div className='⁂-language-dropdown__option__name'>
                {name}
              </div>
              {features.multiLanguage && !!language && !active && (
                code in textMap ? (
                  <button title={intl.formatMessage(messages.deleteLanguage)} onClick={handleDeleteLanguageClick}>
-                    <Icon className='size-4' src={require('@phosphor-icons/core/regular/minus.svg')} />
+                    <Icon src={require('@phosphor-icons/core/regular/minus.svg')} />
                  </button>
                ) : (
                  <button title={intl.formatMessage(messages.addLanguage)} onClick={handleAddLanguageClick}>
-                    <Icon className='size-4' src={require('@phosphor-icons/core/regular/plus.svg')} />
+                    <Icon src={require('@phosphor-icons/core/regular/plus.svg')} />
                  </button>
                )
              )}
@ -254,15 +246,13 @@ const LanguageDropdownButton: React.FC<ILanguageDropdownButton> = ({ composeId,
  return (
    <DropdownMenu
      component={LanguageDropdown}
+      className='⁂-language-dropdown'
    >
-      <Button
-        theme='muted'
-        size='xs'
-        text={buttonLabel}
-        icon={require('@phosphor-icons/core/regular/translate.svg')}
-        secondaryIcon={require('@phosphor-icons/core/regular/caret-down.svg')}
-        title={intl.formatMessage(messages.languagePrompt)}
-      />
+      <button title={intl.formatMessage(messages.languagePrompt)}>
+        <Icon src={require('@phosphor-icons/core/regular/translate.svg')} />
+        {buttonLabel}
+        <Icon src={require('@phosphor-icons/core/regular/caret-down.svg')} />
+      </button>
    </DropdownMenu>
  );

--- a/packages/pl-fe/src/features/compose/components/privacy-dropdown.tsx
+++ b/packages/pl-fe/src/features/compose/components/privacy-dropdown.tsx
@ -3,7 +3,7 @@ import { useIntl, defineMessages, IntlShape } from 'react-intl';

 import { changeComposeFederated, changeComposeVisibility } from 'pl-fe/actions/compose';
 import DropdownMenu, { MenuItem } from 'pl-fe/components/dropdown-menu';
-import Button from 'pl-fe/components/ui/button';
+import Icon from 'pl-fe/components/ui/icon';
 import { useAppDispatch } from 'pl-fe/hooks/use-app-dispatch';
 import { useCompose } from 'pl-fe/hooks/use-compose';
 import { useFeatures } from 'pl-fe/hooks/use-features';
@ -181,14 +181,11 @@ const PrivacyDropdown: React.FC<IPrivacyDropdown> = ({

  return (
    <DropdownMenu items={items} width='16rem'>
-      <Button
-        theme='muted'
-        size='xs'
-        text={compact ? undefined : text}
-        icon={valueOption?.icon}
-        secondaryIcon={require('@phosphor-icons/core/regular/caret-down.svg')}
-        title={compact ? text : intl.formatMessage(messages.change_privacy)}
-      />
+      <button title={compact ? text : intl.formatMessage(messages.change_privacy)}>
+        {valueOption?.icon && <Icon src={valueOption.icon} />}
+        {compact ? undefined : text}
+        <Icon src={require('@phosphor-icons/core/regular/caret-down.svg')} />
+      </button>
    </DropdownMenu>
  );
 };
--- a/packages/pl-fe/src/styles/new/accounts.scss
+++ b/packages/pl-fe/src/styles/new/accounts.scss
@ -1,5 +1,9 @@
@use 'mixins';

+.⁂-account-layout {
+  @include mixins.card($size: lg);
+}
+
 .⁂-account-card {
  @apply block w-full shrink-0;

--- a/packages/pl-fe/src/styles/new/compose.scss
+++ b/packages/pl-fe/src/styles/new/compose.scss
@ -5,6 +5,14 @@

  &__select-buttons {
    @apply flex gap-2 flex-wrap;
+
+    button {
+      @include mixins.button($theme: muted, $size: xs);
+
+      .⁂-icon svg {
+        @apply size-4;
+      }
+    }
  }

  &--transparent &__select-buttons {
@ -98,4 +106,55 @@
      }
    }
  }
-}
+}
+
+.⁂-language-dropdown {
+  &__search {
+    @apply relative m-2 mt-1 block grow;
+
+    > span {
+      position: absolute;
+      visibility: hidden;
+    }
+
+    button {
+      @apply absolute inset-y-0 right-0 flex cursor-pointer items-center px-2 rtl:left-0 rtl:right-auto;
+    
+      svg {
+        @apply size-5 text-gray-600;
+      }
+    }
+  }
+
+  &__options {
+    @apply -mb-1 h-96 w-full overflow-auto;
+  }
+
+  &__option {
+    @apply flex w-full gap-2 p-2.5 text-left text-sm text-gray-700 dark:text-gray-400 cursor-default;
+
+    &--modified {
+      @apply bg-gray-100 dark:bg-gray-800 black:bg-gray-900 cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-700;
+
+      .⁂-language-dropdown__option__name {
+        @apply text-black dark:text-white;
+      }
+    }
+
+    &--available {
+      @apply cursor-pointer hover:bg-gray-100 black:hover:bg-gray-900 dark:hover:bg-gray-800;
+    }
+
+    &--active {
+      @apply cursor-pointer;
+    }
+
+    &__name {
+      @apply flex-auto grow text-primary-600 dark:text-primary-400;
+    }
+
+    svg {
+      @apply size-4;
+    }
+  }
+}
--- a/packages/pl-fe/src/styles/new/events.scss
+++ b/packages/pl-fe/src/styles/new/events.scss
@ -0,0 +1,13 @@
+@use 'mixins';
+
+.⁂-edit-event .⁂-content-type-button {
+  position: absolute;
+  top: 0.5rem;
+  right: 0.5rem;
+  z-index: 11!important;
+  @include mixins.button($theme: muted, $size: xs);
+
+  .⁂-icon svg {
+    @apply size-4;
+  }
+}
--- a/packages/pl-fe/src/styles/new/index.scss
+++ b/packages/pl-fe/src/styles/new/index.scss
@ -3,3 +3,5 @@
@use 'accounts';
@use 'statuses';
@use 'timelines';
+@use 'compose';
+@use 'events';