pl-fe: styles works

Signed-off-by: nicole mikołajczyk <git@mkljczk.pl>

packages/pl-fe/src/features/chats/components/chat-list-item.tsx

@@ -81,7 +81,7 @@ const ChatListItem: React.FC<IChatListItemInterface> = ({ chat, onClick }) => {
       key={chat.id}
       onClick={() => onClick(chat)}
       onKeyDown={handleKeyDown}
-      className='group flex w-full flex-col rounded-lg px-2 py-3 hover:bg-gray-100 focus:shadow-inset-ring dark:hover:bg-gray-800'
+      className='⁂-chat-list-item'
       data-testid='chat-list-item'
       tabIndex={0}
     >
@@ -138,13 +138,11 @@ const ChatListItem: React.FC<IChatListItemInterface> = ({ chat, onClick }) => {
 
         <HStack alignItems='center' space={2}>
           {features.chatsDelete && (
-            <div className='max-w-0 overflow-hidden text-gray-600 hover:text-gray-100 group-hover:max-w-full'>
+            <div className='⁂-chat-list-item__menu'>
               <DropdownMenu items={menu}>
                 <IconButton
                   src={require('@phosphor-icons/core/regular/dots-three.svg')}
                   title={intl.formatMessage(messages.settings)}
-                  className='text-gray-600 hover:text-gray-700 dark:text-gray-600 dark:hover:text-gray-500'
-                  iconClassName='h-4 w-4'
                 />
               </DropdownMenu>
             </div>

packages/pl-fe/src/features/chats/components/chat-list-shoutbox.tsx

@@ -37,7 +37,7 @@ const ChatListShoutbox: React.FC<IChatListShoutboxInterface> = ({ onClick }) =>
       key='shoutbox'
       onClick={() => onClick('shoutbox')}
       onKeyDown={handleKeyDown}
-      className='group flex w-full flex-col rounded-lg px-2 py-3 hover:bg-gray-100 focus:shadow-inset-ring dark:hover:bg-gray-800'
+      className='⁂-chat-list-item'
       data-testid='chat-list-item'
       tabIndex={0}
     >

packages/pl-fe/src/features/compose-event/tabs/edit-event.tsx

@@ -178,11 +178,11 @@ const EditEvent: React.FC<IEditEvent> = ({ statusId }) => {
         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.' />}
       >
-        <div className='dark:sm:shadow-inset relative flex h-24 items-center justify-center overflow-hidden rounded-lg bg-primary-100 text-primary-500 dark:bg-gray-800 dark:text-white sm:h-32 sm:shadow'>
+        <div className='⁂-edit-event__banner__container'>
           {banner ? (
             <>
-              <img className='size-full object-cover' src={banner.url} alt='' />
-              <IconButton className='absolute right-2 top-2' src={require('@phosphor-icons/core/regular/x.svg')} onClick={handleClearBanner} />
+              <img src={banner.url} alt='' />
+              <IconButton src={require('@phosphor-icons/core/regular/x.svg')} onClick={handleClearBanner} />
             </>
           ) : (
             <UploadButton disabled={isUploading} onSelectFile={handleFiles} />
@@ -206,8 +206,7 @@ const EditEvent: React.FC<IEditEvent> = ({ statusId }) => {
           <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='⁂-compose-form__editor__placeholder pt-2'
+            placeholderClassName='⁂-compose-form__editor__placeholder'
             composeId={composeId}
             placeholder={intl.formatMessage(messages.eventDescriptionPlaceholder)}
             handleSubmit={handleSubmit}

packages/pl-fe/src/styles/new/chats.scss

@@ -126,4 +126,24 @@
       @include mixins.button($theme: primary);
     }
   }
+}
+
+.⁂-chat-list-item {
+  @apply flex w-full flex-col rounded-lg px-2 py-3 hover:bg-gray-100 focus:shadow-inset-ring dark:hover:bg-gray-800;
+
+  &__menu {
+    @apply max-w-0 overflow-hidden text-gray-600 hover:text-gray-100;
+
+    .⁂-icon-button {
+      @apply text-gray-600 hover:text-gray-700 dark:text-gray-600 dark:hover:text-gray-500;
+
+      svg {
+        @apply h-4 w-4;
+      }
+    }
+  }
+
+  &:hover .⁂-chat-list-item__menu {
+    @apply max-w-full;
+  }
 }

packages/pl-fe/src/styles/new/events.scss

@@ -15,6 +15,26 @@
       height: 1rem;
     }
   }
+
+  &__banner__container {
+    @apply dark:sm:shadow-inset relative flex h-24 items-center justify-center overflow-hidden rounded-lg bg-primary-100 text-primary-500 dark:bg-gray-800 dark:text-white sm:h-32 sm:shadow;
+    
+    img {
+      @apply size-full object-cover;
+    }
+
+    .⁂-icon-button {
+      @apply absolute right-2 top-2;
+    }
+  }
+
+  .lexical {
+    @apply 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;
+  }
+
+  .⁂-compose-form__editor__placeholder {
+    @apply pt-2;
+  }
 }
 
 .⁂-event-map-modal {