pl-fe: styles migration, less nesting

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

packages/pl-fe/src/components/empty-message.tsx

@@ -1,8 +1,6 @@
 import React from 'react';
 
 import Icon from './ui/icon';
-import Stack from './ui/stack';
-import Text from './ui/text';
 
 interface IEmptyMessage {
   text: React.ReactNode;
@@ -10,15 +8,11 @@ interface IEmptyMessage {
 }
 
 const EmptyMessage: React.FC<IEmptyMessage> = ({ text, icon = require('@phosphor-icons/core/regular/empty.svg') }) => (
-  <Stack space={4} className='⁂-empty-message py-6' justifyContent='center' alignItems='center'>
-    <div className='rounded-full bg-gray-200 p-4 dark:bg-gray-800'>
-      <Icon src={icon} className='size-6 text-gray-600' />
-    </div>
+  <div className='⁂-empty-message'>
+    <Icon src={icon} aria-hidden />
 
-    <Text theme='muted' align='center'>
-      {text}
-    </Text>
-  </Stack>
+    <p>{text}</p>
+  </div>
 );
 
 export { EmptyMessage };

packages/pl-fe/src/features/admin/components/dashcounter.tsx

@@ -2,7 +2,6 @@ import { Link, type LinkOptions } from '@tanstack/react-router';
 import React from 'react';
 import { FormattedNumber } from 'react-intl';
 
-import Text from '@/components/ui/text';
 import { isNumber } from '@/utils/numbers';
 
 type IDashCounter = {
@@ -18,30 +17,28 @@ const DashCounter: React.FC<IDashCounter> = ({ count, label, percent = false, ..
     return null;
   }
 
-  const className = 'flex cursor-pointer flex-col items-center space-y-2 rounded bg-gray-200 p-4 transition-transform hover:-translate-y-1 dark:bg-gray-800';
-
   const body = (
     <>
-      <Text align='center' size='2xl' weight='medium'>
+      <p className='⁂-dashcounter__number'>
         <FormattedNumber
           value={count}
           style={percent ? 'unit' : undefined}
           unit={percent ? 'percent' : undefined}
           numberingSystem='latn'
         />
-      </Text>
-      <Text align='center'>
+      </p>
+      <p className='⁂-dashcounter__label'>
         {label}
-      </Text>
+      </p>
     </>
   );
 
   if (!('to' in rest)) {
-    return <span className={className}>{body}</span>;
+    return <span className='⁂-dashcounter'>{body}</span>;
   }
 
   return (
-    <Link className={className} {...rest}>
+    <Link className='⁂-dashcounter' {...rest}>
       {body}
     </Link>
   );
@@ -53,7 +50,7 @@ interface IDashCounters {
 
 /** Wrapper container for dash counters. */
 const DashCounters: React.FC<IDashCounters> = ({ children }) => (
-  <div className='grid grid-cols-1 gap-2 sm:grid-cols-2'>
+  <div className='⁂-dashboard__counters'>
     {children}
   </div>
 );

packages/pl-fe/src/pages/dashboard/dashboard.tsx

@@ -5,7 +5,6 @@ import List, { ListItem } from '@/components/list';
 import { CardTitle } from '@/components/ui/card';
 import Column from '@/components/ui/column';
 import Icon from '@/components/ui/icon';
-import Stack from '@/components/ui/stack';
 import { Counter } from '@/features/admin/components/counter';
 import { DashCounter, DashCounters } from '@/features/admin/components/dashcounter';
 import { Dimension } from '@/features/admin/components/dimension';
@@ -50,7 +49,7 @@ const Dashboard: React.FC = () => {
 
   return (
     <Column label={intl.formatMessage(messages.heading)}>
-      <Stack space={6} className='mt-4'>
+      <div className='⁂-dashboard'>
         <DashCounters>
           {features.mastodonAdminMetrics ? (
             <Counter
@@ -224,15 +223,12 @@ const Dashboard: React.FC = () => {
           <ListItem label={<FormattedMessage id='admin.software.frontend' defaultMessage='Frontend' />}>
             <a
               href={sourceCode.ref ? `${sourceCode.url}/tree/${sourceCode.ref}` : sourceCode.url}
-              className='flex items-center space-x-1 truncate'
+              className='⁂-dashboard__source-code'
               target='_blank'
             >
               <span>{sourceCode.displayName} {sourceCode.version}</span>
 
-              <Icon
-                className='size-4'
-                src={require('@phosphor-icons/core/regular/arrow-square-out.svg')}
-              />
+              <Icon src={require('@phosphor-icons/core/regular/arrow-square-out.svg')} />
             </a>
           </ListItem>
 
@@ -242,7 +238,7 @@ const Dashboard: React.FC = () => {
             </ListItem>
           )}
         </List>
-      </Stack>
+      </div>
     </Column>
   );
 };

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

@@ -0,0 +1,32 @@
+@use 'mixins';
+
+.⁂-dashboard {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+
+  &__counters {
+    @apply grid grid-cols-1 gap-2 sm:grid-cols-2;
+  }
+
+  &__source-code {
+    @apply flex items-center space-x-1 truncate;
+
+    svg {
+      height: 1rem;
+      width: 1rem;
+    }
+  }
+}
+
+.⁂-dashcounter {
+  @apply flex cursor-pointer flex-col items-center space-y-2 rounded bg-gray-200 p-4 transition-transform hover:-translate-y-1 dark:bg-gray-800;
+
+  &__number {
+    @include mixins.text($align: center, $size: 2xl, $weight: medium);
+  }
+
+  &__label {
+    @include mixins.text($align: center);
+  }
+}

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

@@ -408,4 +408,33 @@ div[data-viewport-type="window"]:has(.⁂-empty-message) {
       @include mixins.button($theme: secondary);
     }
   }
+}
+
+.⁂-empty-message {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 1rem;
+  padding: 1.5rem 0;
+
+  > div {
+    background: rgb(var(--color-gray-200));
+    padding: 1rem;
+    border-radius: 50%;
+
+    &:is(.dark *) {
+      background: rgb(var(--color-gray-800));
+    }
+
+    svg {
+      height: 1.5rem;
+      width: 1.5rem;
+      color: rgb(var(--color-gray-600))
+    }
+  }
+
+  p {
+    @include mixins.text($align: center, $theme: muted);
+  }
 }

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

@@ -5,6 +5,7 @@
 @use 'statuses';
 @use 'timelines';
 @use 'compose';
+@use 'admin';
 @use 'drive';
 @use 'chats';
 @use 'events';