nicolium: style migrations

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

packages/nicolium/src/features/compose-event/tabs/edit-event.tsx

@@ -309,6 +309,7 @@ const EditEvent: React.FC<IEditEvent> = ({ statusId }) => {
           <ContentTypeButton composeId={composeId} />
           <ComposeEditor
             key={String(isDisabled)}
+            className='⁂-edit-event__editor'
             placeholderClassName='⁂-compose-form__editor__placeholder'
             composeId={composeId}
             placeholder={intl.formatMessage(messages.eventDescriptionPlaceholder)}

packages/nicolium/src/features/compose/components/compose-form-button.tsx

@@ -1,4 +1,3 @@
-import clsx from 'clsx';
 import React from 'react';
 
 import IconButton from '@/components/ui/icon-button';
@@ -20,11 +19,7 @@ const ComposeFormButton: React.FC<IComposeFormButton> = ({
 }) => (
   <div>
     <IconButton
-      className={clsx({
-        'text-gray-600 hover:text-gray-700 dark:hover:text-gray-500': !active,
-        'text-primary-500 hover:text-primary-600 dark:text-primary-500 dark:hover:text-primary-400':
-          active,
-      })}
+      className='⁂-compose-form__button'
       src={icon}
       title={title}
       aria-label={title}

packages/nicolium/src/features/compose/components/compose-form.tsx

@@ -109,14 +109,14 @@ const ComposeButton: React.FC<IComposeButton> = ({
   const intl = useIntl();
 
   return (
-    <div className='⁂-compose-form__button__container'>
-      <button {...props} disabled={disabled} className='⁂-compose-form__button'>
+    <div className='⁂-compose-form__send-button__container'>
+      <button {...props} disabled={disabled} className='⁂-compose-form__send-button'>
         {icon ? <Icon src={icon} /> : null}
         <span>{text}</span>
       </button>
       <DropdownMenu items={actionsMenu} placement='bottom' disabled={disabled}>
         <button
-          className='⁂-compose-form__button__actions'
+          className='⁂-compose-form__send-button__actions'
           title={intl.formatMessage(messages.more)}
         >
           <SvgIcon src={iconCaretDown} aria-hidden />

packages/nicolium/src/features/compose/editor/index.tsx

@@ -193,20 +193,15 @@ const ComposeEditor = React.forwardRef<LexicalEditor, IComposeEditor>(
 
     return (
       <LexicalComposer key={isWysiwyg ? 'wysiwyg' : 'no-wysiwyg'} initialConfig={initialConfig}>
-        <div className={clsx('lexical relative', className)} data-markup>
+        <div className={className} data-markup>
           <RichTextPlugin
             contentEditable={
               <div onFocus={onFocus} onPaste={handlePaste} ref={onRef}>
                 <ContentEditable
                   tabIndex={0}
-                  className={clsx(
-                    'relative z-10 text-[1rem] outline-none transition-[min-height] motion-reduce:transition-none',
-                    editableClassName,
-                    {
-                      'min-h-[39px]': condensed,
-                      'min-h-[99px]': !condensed,
-                    },
-                  )}
+                  className={clsx('⁂-compose-form__editor__editable', editableClassName, {
+                    '⁂-compose-form__editor__editable--condensed': condensed,
+                  })}
                   lang={language ?? undefined}
                   data-compose-id={composeId}
                   aria-label={textareaPlaceholder}

packages/nicolium/src/styles/new/compose.scss

@@ -31,20 +31,43 @@
     background-color: transparent !important;
   }
 
-  &__editor__placeholder {
-    pointer-events: none;
-    user-select: none;
+  &__editor {
+    position: relative;
 
-    position: absolute;
-    top: 0;
+    &__placeholder {
+      pointer-events: none;
+      user-select: none;
 
-    font-size: 1rem;
-    color: rgb(var(--color-gray-600));
+      position: absolute;
+      top: 0;
 
-    visibility: visible !important;
-
-    .dark &::placeholder {
+      font-size: 1rem;
       color: rgb(var(--color-gray-600));
+
+      visibility: visible !important;
+
+      .dark &::placeholder {
+        color: rgb(var(--color-gray-600));
+      }
+    }
+
+    &__editable {
+      position: relative;
+      z-index: 10;
+      min-height: 99px;
+      font-size: 1rem;
+
+      &--condensed {
+        min-height: 39px;
+      }
+
+      .no-reduce-motion & {
+        transition: min-height 150ms var(--ease-default);
+      }
+
+      &:focus-visible {
+        outline: none;
+      }
     }
   }
 
@@ -114,6 +137,34 @@
     align-items: center;
   }
 
+  &__button {
+    color: rgb(var(--color-gray-600));
+
+    &:hover {
+      color: rgb(var(--color-gray-700));
+    }
+
+    .dark &:hover {
+      color: rgb(var(--color-gray-500));
+    }
+
+    &[aria-pressed='true'] {
+      color: rgb(var(--color-primary-500));
+
+      &:hover {
+        color: rgb(var(--color-primary-600));
+      }
+
+      .dark & {
+        color: rgb(var(--color-primary-500));
+
+        &:hover {
+          color: rgb(var(--color-primary-400));
+        }
+      }
+    }
+  }
+
   &__actions {
     display: flex;
     gap: 1rem;
@@ -132,7 +183,7 @@
     align-items: center;
   }
 
-  &__button {
+  &__send-button {
     user-select: none;
 
     display: inline-flex;

packages/nicolium/src/styles/new/events.scss

@@ -217,7 +217,9 @@
     }
   }
 
-  .lexical {
+  &__editor {
+    position: relative;
+
     display: block;
 
     width: 100%;