pl-fe: styles migrations

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

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

@@ -1,28 +1,6 @@
 import React from 'react';
 
-import HStack from 'pl-fe/components/ui/hstack';
 import IconButton from 'pl-fe/components/ui/icon-button';
-import Stack from 'pl-fe/components/ui/stack';
-import Text from 'pl-fe/components/ui/text';
-
-interface IWidgetTitle {
-  /** Title text for the widget. */
-  title: React.ReactNode;
-}
-
-/** Title of a widget. */
-const WidgetTitle = ({ title }: IWidgetTitle): JSX.Element => (
-  <Text size='xl' weight='bold' tag='h1'>{title}</Text>
-);
-
-interface IWidgetBody {
-  children: React.ReactNode;
-}
-
-/** Body of a widget. */
-const WidgetBody: React.FC<IWidgetBody> = ({ children }): JSX.Element => (
-  <Stack space={3}>{children}</Stack>
-);
 
 interface IWidget {
   /** Widget title text. */
@@ -46,22 +24,22 @@ const Widget: React.FC<IWidget> = ({
   actionTitle,
   action,
 }): JSX.Element => (
-  <Stack space={4}>
+  <div className='⁂-widget'>
     {(title || action || onActionClick) && (
-      <HStack space={2} alignItems='center' justifyContent='between'>
-        {title && <WidgetTitle title={title} />}
+      <div className='⁂-widget__header'>
+        {title && <h1>{title}</h1>}
         {action || (onActionClick && (
           <IconButton
-            className='ml-2 size-6 text-black dark:text-white rtl:rotate-180'
+            className='⁂-widget__icon'
             src={actionIcon}
             onClick={onActionClick}
             title={actionTitle}
           />
         ))}
-      </HStack>
+      </div>
     )}
-    <WidgetBody>{children}</WidgetBody>
-  </Stack>
+    <div className='⁂-widget__body'>{children}</div>
+  </div>
 );
 
 export { Widget as default };

packages/pl-fe/src/features/ui/components/link-footer.tsx

@@ -17,27 +17,25 @@ const LinkFooter: React.FC = (): JSX.Element => {
 
   return (
     <>
-      <Text theme='muted' size='sm'>
+      <p className='⁂-footer-text'>
         {plFeConfig.linkFooterMessage ? (
-          <span className='inline-block align-middle'>
-            <Emojify text={plFeConfig.linkFooterMessage} />
-          </span>
+          <Emojify text={plFeConfig.linkFooterMessage} />
         ) : (
           <FormattedMessage
             id='getting_started.open_source_notice'
             defaultMessage='{code_name} is open source software. You can contribute or report issues at {code_link} (v{code_version}).'
             values={{
               code_name: sourceCode.displayName,
-              code_link: <Text theme='subtle' tag='span'><a className='underline' href={sourceCode.url} rel='noopener' target='_blank'>{sourceCode.repository}</a></Text>,
+              code_link: <a href={sourceCode.url} rel='noopener' target='_blank'>{sourceCode.repository}</a>,
               code_version: sourceCode.version,
             }}
           />
         )}
-      </Text>
+      </p>
       {WITH_LANDING_PAGE && (
-        <Text theme='muted' size='sm'>
+        <p className='⁂-footer-text'>
           <Emojify text={intl.formatMessage(messages.footerNotice, { emoji: '🇵🇱🏳️‍⚧️' })} />
-        </Text>
+        </p>
       )}
     </>
   );

packages/pl-fe/src/features/ui/util/async-components.ts

@@ -102,7 +102,7 @@ export const WrenchedTimeline = lazy(() => import('pl-fe/pages/timelines/wrenche
 // Panels
 export const AccountNotePanel = lazy(() => import('pl-fe/features/ui/components/panels/account-note-panel'));
 export const AnnouncementsPanel = lazy(() => import('pl-fe/components/announcements/announcements-panel'));
-export const BirthdayPanel = lazy(() => import('pl-fe/components/birthday-panel'));
+export const BirthdayPanel = lazy(() => import('pl-fe/features/ui/components/panels/birthday-panel'));
 export const CryptoDonatePanel = lazy(() => import('pl-fe/features/crypto-donate/components/crypto-donate-panel'));
 export const GroupMediaPanel = lazy(() => import('pl-fe/features/ui/components/panels/group-media-panel'));
 export const InstanceInfoPanel = lazy(() => import('pl-fe/features/ui/components/panels/instance-info-panel'));

packages/pl-fe/src/modals/birthdays-modal.tsx

@@ -1,11 +1,11 @@
 import React, { useState } from 'react';
 import { FormattedMessage } from 'react-intl';
 
-import { getCurrentDate } from 'pl-fe/components/birthday-panel';
 import ScrollableList from 'pl-fe/components/scrollable-list';
 import Modal from 'pl-fe/components/ui/modal';
 import Spinner from 'pl-fe/components/ui/spinner';
 import Account from 'pl-fe/features/birthdays/account';
+import { getCurrentDate } from 'pl-fe/features/ui/components/panels/birthday-panel';
 import { useBirthdayReminders } from 'pl-fe/queries/accounts/use-birthday-reminders';
 
 import type { BaseModalProps } from 'pl-fe/features/ui/components/modal-root';

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

@@ -337,10 +337,51 @@ body {
   @apply fixed pointer-events-none inset-x-0 top-0 flex justify-center overflow-hidden black:hidden;
 
   &--preview {
-    @apply absolute;
+    position: absolute;
   }
 
   > div {
-    @apply bg-gradient-sm lg:bg-gradient-light lg:dark:bg-gradient-dark h-screen w-screen;
+    height: 100vh;
+    width: 100vw;
+    @apply bg-gradient-sm lg:bg-gradient-light lg:dark:bg-gradient-dark;
+  }
+}
+
+.⁂-widget {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+
+  &__header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 0.5rem;
+
+    h1 {
+      @include mixins.text($size: xl, $weight: bold);
+    }
+  }
+
+  &__icon {
+    margin-left: 0.5rem;
+    width: 1.5rem;
+    height: 1.5rem;
+    @apply text-black dark:text-white rtl:rotate-180;
+  }
+
+  &__body {
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+  }
+}
+
+.⁂-footer-text {
+  @include mixins.text($size: sm, $theme: muted);
+
+  a {
+    @include mixins.text($size: inherit, $theme: subtle);
+    text-decoration-line: underline;
   }
 }

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

@@ -25,6 +25,9 @@
   } @else if $size == 3xl {
     font-size: 1.875rem;
     line-height: 2.25rem;
+  } @else if $size == inherit {
+    font-size: inherit;
+    line-height: inherit;
   } @else {
     @warn "Unknown font size `#{$size}`.";
   }