nicolium: style migrations, reduce html nesting

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

packages/pl-fe/src/components/big-card.tsx

@@ -1,8 +1,6 @@
 import React from 'react';
 
 import Card, { CardBody } from '@/components/ui/card';
-import Stack from '@/components/ui/stack';
-import Text from '@/components/ui/text';
 
 interface IBigCard {
   title: React.ReactNode;
@@ -13,18 +11,14 @@ interface IBigCard {
 const BigCard: React.FC<IBigCard> = ({ title, subtitle, children }) => (
   <Card variant='rounded' size='xl'>
     <CardBody>
-      <div className='-mx-4 mb-4 border-b border-solid border-gray-200 pb-4 dark:border-gray-800 sm:-mx-10 sm:pb-10'>
-        <Stack space={2}>
-          <Text size='2xl' align='center' weight='bold'>{title}</Text>
-          {subtitle && <Text theme='muted' align='center'>{subtitle}</Text>}
-        </Stack>
+      <div className='⁂-big-card__header'>
+        <h1>{title}</h1>
+        {subtitle && <p>{subtitle}</p>}
       </div>
 
-      <Stack space={5}>
-        <div className='mx-auto sm:w-2/3 sm:pt-10'>
-          {children}
-        </div>
-      </Stack>
+      <div className='⁂-big-card__body'>
+        {children}
+      </div>
     </CardBody>
   </Card>
 );

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

@@ -5,17 +5,11 @@ import { defineMessages, useIntl } from 'react-intl';
 
 import SvgIcon from '@/components/ui/svg-icon';
 
-const sizes = {
-  md: 'p-4 sm:rounded-xl',
-  lg: 'p-4 sm:p-6 sm:rounded-xl',
-  xl: 'p-4 sm:p-10 sm:rounded-3xl',
-};
-
 const messages = defineMessages({
   back: { id: 'card.back.label', defaultMessage: 'Back' },
 });
 
-type CardSizes = keyof typeof sizes
+type CardSizes = 'md' | 'lg' | 'xl';
 
 interface ICard extends Pick<React.HTMLAttributes<HTMLDivElement>, 'role' | 'aria-label'> {
   /** The type of card. */
@@ -35,10 +29,8 @@ const Card = React.forwardRef<HTMLDivElement, ICard>(({ children, variant = 'def
     ref={ref}
     {...filteredProps}
     className={clsx({
-      'bg-white dark:bg-primary-900 black:bg-black text-gray-900 dark:text-gray-100 shadow-lg dark:shadow-none': variant === 'rounded',
-      [sizes[size]]: variant === 'rounded',
-      'py-4': variant === 'slim',
-      'black:rounded-none': size !== 'xl',
+      [`⁂-card--rounded ⁂-card--${size}`]: variant === 'rounded',
+      '⁂-card--slim': variant === 'slim',
     }, className)}
   >
     {children}

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

@@ -475,3 +475,51 @@ div[data-viewport-type="window"]:has(.⁂-empty-message) {
     }
   }
 }
+
+.⁂-card {
+  &--rounded {
+    @apply bg-white dark:bg-primary-900 black:bg-black text-gray-900 dark:text-gray-100 shadow-lg dark:shadow-none;
+
+    &.⁂-card {
+      &--md {
+        @apply p-4 sm:rounded-xl;
+      }
+
+      &--lg {
+        @apply p-4 sm:p-6 sm:rounded-xl;
+      }
+
+      &--xl {
+        @apply p-4 sm:p-10 sm:rounded-3xl;
+      }
+
+      &--md,
+      &--lg,
+      &--xl {
+        @apply black:rounded-none;
+      }
+    }
+  }
+
+  &--slim {
+    @apply py-4;
+  }
+}
+
+.⁂-big-card {
+  &__header {
+    @apply flex flex-col gap-2 -mx-4 mb-4 border-b border-solid border-gray-200 pb-4 dark:border-gray-800 sm:-mx-10 sm:pb-10;
+
+    h1 {
+      @include mixins.text($size: 2xl, $align: center, $weight: bold);
+    }
+
+    p {
+      @include mixins.text($theme: muted, $align: center);
+    }
+  }
+
+  &__body {
+    @apply mx-auto sm:w-2/3 sm:pt-10;
+  }
+}