nicolium: more migrations

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

packages/pl-fe/src/components/ui/column.tsx

@@ -33,7 +33,7 @@ const ColumnHeader: React.FC<IColumnHeader> = ({ label, backHref, backParams, cl
       <CardTitle title={label} />
 
       {action && (
-        <div className='flex grow justify-end'>
+        <div className='⁂-column__header__action'>
           {action}
         </div>
       )}
@@ -83,7 +83,7 @@ const Column: React.FC<IColumn> = (props): JSX.Element => {
   }, []);
 
   return (
-    <Card role='region' aria-label={label} column-type={transparent ? 'transparent' : 'filled'} size={size} variant={transparent ? undefined : 'rounded'} className={clsx('relative', className)}>
+    <Card role='region' aria-label={label} column-type={transparent ? 'transparent' : 'filled'} size={size} variant={transparent ? undefined : 'rounded'} className={clsx('⁂-column', className)}>
       <Helmet>
         <title>{label}</title>
 
@@ -100,12 +100,8 @@ const Column: React.FC<IColumn> = (props): JSX.Element => {
         <ColumnHeader
           label={label}
           backHref={backHref}
-          className={clsx({
-            'rounded-t-3xl': !isScrolled && !transparent,
-            'sticky top-0 z-10 bg-white/90 dark:bg-primary-900/90 black:bg-black/75 backdrop-blur backdrop-saturate-200': !transparent,
-            'p-4 sm:p-0 sm:pb-4 black:p-4': transparent,
-            '-mt-4 -mx-4 p-4': size !== 'lg' && !transparent,
-            '-mt-4 -mx-4 p-4 sm:-mt-6 sm:-mx-6 sm:p-6': size === 'lg' && !transparent,
+          className={clsx('⁂-column__header', {
+            '⁂-column__header--scrolled': isScrolled,
           })}
           action={action}
         />

packages/pl-fe/src/components/ui/form.tsx

@@ -20,7 +20,7 @@ const Form: React.FC<IForm> = ({ onSubmit, children, ...filteredProps }) => {
   }, [onSubmit]);
 
   return (
-    <form data-testid='form' onSubmit={handleSubmit} className='space-y-4' {...filteredProps}>
+    <form data-testid='form' onSubmit={handleSubmit} className='⁂-form' {...filteredProps}>
       {children}
     </form>
   );

packages/pl-fe/src/features/external-login/components/external-login-form.tsx

@@ -2,9 +2,7 @@ import React, { useState, useEffect } from 'react';
 import { useIntl, FormattedMessage, defineMessages } from 'react-intl';
 
 import { externalLogin, loginWithCode } from '@/actions/external-auth';
-import Button from '@/components/ui/button';
 import Form from '@/components/ui/form';
-import FormActions from '@/components/ui/form-actions';
 import FormGroup from '@/components/ui/form-group';
 import Input from '@/components/ui/input';
 import Spinner from '@/components/ui/spinner';
@@ -76,7 +74,7 @@ const ExternalLoginForm: React.FC = () => {
   }
 
   return (
-    <Form onSubmit={handleSubmit} data-testid='external-login'>
+    <Form className='⁂-external-login' onSubmit={handleSubmit} data-testid='external-login'>
       <FormGroup labelText={intl.formatMessage(messages.instanceLabel)}>
         <Input
           aria-label={intl.formatMessage(messages.instancePlaceholder)}
@@ -90,11 +88,11 @@ const ExternalLoginForm: React.FC = () => {
         />
       </FormGroup>
 
-      <FormActions>
-        <Button theme='primary' type='submit' disabled={isLoading}>
+      <div className='⁂-form__actions'>
+        <button type='submit' disabled={isLoading}>
           <FormattedMessage id='login.log_in' defaultMessage='Log in' />
-        </Button>
-      </FormActions>
+        </button>
+      </div>
     </Form>
   );
 };

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

@@ -0,0 +1,7 @@
+@use 'mixins';
+
+.⁂-external-login {
+  button {
+    @include mixins.button($theme: primary);
+  }
+}

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

@@ -524,43 +524,42 @@ div[data-viewport-type="window"]:has(.⁂-empty-message) {
   }
 }
 
+.⁂-column {
+  position: relative;
+
+  &__header {
+    &__action {
+      display: flex;
+      flex-grow: 1;
+      justify-content: end;
+    }
+  }
+
+  &[column-type='transparent'] {
+    .⁂-column__header {
+      @apply p-4 sm:p-0 sm:pb-4 black:p-4;
+    }
+  }
+
+  &[column-type='filled'] {
+    .⁂-column__header {
+      @apply rounded-t-3xl sticky top-0 z-10 bg-white/90 dark:bg-primary-900/90 black:bg-black/75 backdrop-blur backdrop-saturate-200 -mt-4 -mx-4 p-4;
+    
+      &--scrolled {
+        @apply rounded-t-none;
+      }
+    }
+
+    &.⁂-card-lg {
+      .⁂-column__header {
+        @apply sm:-mt-6 sm:-mx-6 sm:p-6;
+      }
+    }
+    
+  }
+}
+
 .⁂-emoji {
   @apply transition-transform hover:scale-125;
 }
 
-.⁂-textarea {
-  @apply block w-full rounded-md text-gray-900 placeholder:text-gray-600 dark:text-gray-100 dark:placeholder:text-gray-600 sm:text-sm resize-none;
-
-  &--transparent {
-    @apply bg-transparent border-0 p-0 focus:ring-0;
-  }
-
-  &:not(&--transparent) {
-    @apply bg-white border border-gray-300 p-2 focus:border-primary-500 focus:ring-1 focus:ring-primary-500 disabled:opacity-50 black:bg-black dark:border-gray-800 dark:bg-gray-900 dark:text-gray-100 dark:ring-1 dark:ring-gray-800 dark:focus:border-primary-500 dark:focus:ring-primary-500;
-  }
-
-  &--mono {
-    @apply font-mono;
-  }
-
-  &--has-error {
-    @apply text-red-600 border-red-600;
-  }
-
-  &--resizable {
-    @apply resize;
-  }
-
-  &__container {
-    @apply flex flex-col gap-1.5;
-  }
-
-  &__max-length {
-    @include mixins.text($size: xs, $theme: muted);
-    @apply text-right rtl:text-left;
-
-    &--exceeded {
-      @apply text-danger-700 dark:text-danger-500;
-    }
-  }
-}

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

@@ -0,0 +1,50 @@
+@use 'mixins';
+
+.⁂-form {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+
+  &__actions {
+    display: flex;
+    justify-content: flex-end;
+    gap: 0.5rem;
+  }
+}
+
+.⁂-textarea {
+  @apply block w-full rounded-md text-gray-900 placeholder:text-gray-600 dark:text-gray-100 dark:placeholder:text-gray-600 sm:text-sm resize-none;
+
+  &--transparent {
+    @apply bg-transparent border-0 p-0 focus:ring-0;
+  }
+
+  &:not(&--transparent) {
+    @apply bg-white border border-gray-300 p-2 focus:border-primary-500 focus:ring-1 focus:ring-primary-500 disabled:opacity-50 black:bg-black dark:border-gray-800 dark:bg-gray-900 dark:text-gray-100 dark:ring-1 dark:ring-gray-800 dark:focus:border-primary-500 dark:focus:ring-primary-500;
+  }
+
+  &--mono {
+    @apply font-mono;
+  }
+
+  &--has-error {
+    @apply text-red-600 border-red-600;
+  }
+
+  &--resizable {
+    @apply resize;
+  }
+
+  &__container {
+    @apply flex flex-col gap-1.5;
+  }
+
+  &__max-length {
+    @include mixins.text($size: xs, $theme: muted);
+    @apply text-right rtl:text-left;
+
+    &--exceeded {
+      @apply text-danger-700 dark:text-danger-500;
+    }
+  }
+}

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

@@ -1,10 +1,12 @@
 @use 'components';
+@use 'forms';
 @use 'layout';
 @use 'modals';
 @use 'accounts';
 @use 'statuses';
 @use 'timelines';
 @use 'compose';
+@use 'authentication';
 @use 'admin';
 @use 'drive';
 @use 'chats';

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

@@ -525,4 +525,4 @@ div:has(.⁂-background-shapes), .dark {
 
 .⁂-layout__content .⁂-site-error {
   height: fit-content;
-}
+}