From b2ab33d1c952591a6a9558c103625cfc94d593e5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?nicole=20miko=C5=82ajczyk?= <git@mkljczk.pl>
Date: Mon, 27 Oct 2025 17:11:57 +0100
Subject: [PATCH] pl-fe: style migrations
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: nicole mikołajczyk <git@mkljczk.pl>
---
 packages/pl-fe/src/components/ui/avatar.tsx   |  3 +-
 .../compose/components/compose-form.tsx       | 15 ++---
 packages/pl-fe/src/styles/new/accounts.scss   | 66 +++++++++++++++++++
 packages/pl-fe/src/styles/new/compose.scss    | 17 ++++-
 packages/pl-fe/src/styles/new/index.scss      |  1 +
 packages/pl-fe/src/styles/ui.scss             | 57 ----------------
 6 files changed, 88 insertions(+), 71 deletions(-)
 create mode 100644 packages/pl-fe/src/styles/new/accounts.scss

diff --git a/packages/pl-fe/src/components/ui/avatar.tsx b/packages/pl-fe/src/components/ui/avatar.tsx
index 72eb5e8b4..6f597a511 100644
--- a/packages/pl-fe/src/components/ui/avatar.tsx
+++ b/packages/pl-fe/src/components/ui/avatar.tsx
@@ -120,8 +120,7 @@ const Avatar = (props: IAvatar) => {
 
   return (
     <StillImage
-      className={clsx('rounded-lg leading-[0]', isCat && 'avatar__cat bg-gray-200 dark:bg-gray-900', className)}
-      innerClassName='rounded-[inherit] text-sm'
+      className={clsx('⁂-avatar', isCat && '⁂-avatar--cat', className)}
       style={style}
       src={src || require('pl-fe/assets/images/avatar-missing.png')}
       alt={altText}
diff --git a/packages/pl-fe/src/features/compose/components/compose-form.tsx b/packages/pl-fe/src/features/compose/components/compose-form.tsx
index 9294483cc..c23075449 100644
--- a/packages/pl-fe/src/features/compose/components/compose-form.tsx
+++ b/packages/pl-fe/src/features/compose/components/compose-form.tsx
@@ -19,9 +19,7 @@ import {
 } from 'pl-fe/actions/compose';
 import DropdownMenu from 'pl-fe/components/dropdown-menu';
 import List, { ListItem } from 'pl-fe/components/list';
-import HStack from 'pl-fe/components/ui/hstack';
 import Icon from 'pl-fe/components/ui/icon';
-import Stack from 'pl-fe/components/ui/stack';
 import SvgIcon from 'pl-fe/components/ui/svg-icon';
 import Toggle from 'pl-fe/components/ui/toggle';
 import EmojiPickerDropdown from 'pl-fe/features/emoji/containers/emoji-picker-dropdown-container';
@@ -296,11 +294,11 @@ const ComposeForm = <ID extends string>({ id, shouldCondense, autoFocus, clickab
   const showModifiers = !condensed && (compose.media_attachments.length || compose.is_uploading || compose.poll?.options.length || compose.schedule);
 
   const composeModifiers = showModifiers && (
-    <Stack space={4} className='font-[inherit] text-sm text-gray-900'>
+    <div className='⁂-compose-form__modifiers'>
       <UploadForm composeId={id} onSubmit={handleSubmit} />
       <PollForm composeId={id} />
       <ScheduleForm composeId={id} />
-    </Stack>
+    </div>
   );
 
   let publishText: string | JSX.Element = '';
@@ -347,6 +345,7 @@ const ComposeForm = <ID extends string>({ id, shouldCondense, autoFocus, clickab
   return (
     <form
       className={clsx('⁂-compose-form', {
+        '⁂-compose-form--transparent': transparent,
         '⁂-compose-form--with-avatar': withAvatar,
       })}
       ref={formRef}
@@ -370,9 +369,9 @@ const ComposeForm = <ID extends string>({ id, shouldCondense, autoFocus, clickab
       {!shouldCondense && !event && !group && <ReplyMentions composeId={id} />}
 
       {selectButtons.length > 0 && (
-        <HStack space={2} wrap className={clsx(transparent && '-mb-2')}>
+        <div className='⁂-compose-form__select-buttons'>
           {selectButtons}
-        </HStack>
+        </div>
       )}
 
       {features.spoilers && (
@@ -390,9 +389,7 @@ const ComposeForm = <ID extends string>({ id, shouldCondense, autoFocus, clickab
           <ComposeEditor
             key={modifiedLanguage}
             ref={editorRef}
-            className={clsx('⁂-compose-form__editor', {
-              '⁂-compose-form__editor--transparent': transparent,
-            })}
+            className='⁂-compose-form__editor'
             placeholderClassName='⁂-compose-form__editor__placeholder'
             composeId={id}
             condensed={condensed}
diff --git a/packages/pl-fe/src/styles/new/accounts.scss b/packages/pl-fe/src/styles/new/accounts.scss
new file mode 100644
index 000000000..55ffbc49d
--- /dev/null
+++ b/packages/pl-fe/src/styles/new/accounts.scss
@@ -0,0 +1,66 @@
+.⁂-avatar {
+  @apply rounded-lg leading-[0];
+
+  img, canvas {
+    @apply rounded-[inherit] text-sm;
+  }
+
+  // Adapted from Iceshrimp which I guess took it from Misskey
+  // https://iceshrimp.dev/iceshrimp/iceshrimp/src/branch/dev/packages/client/src/components/global/MkAvatar.vue
+  &--cat {
+    @apply bg-gray-200 dark:bg-gray-900;
+
+    img {
+      position: absolute;
+      inset: 0;
+      z-index: 1;
+    }
+
+    &::before,
+    &::after {
+      background: #ebbcba;
+      border: solid 0.05em currentcolor;
+      box-sizing: border-box;
+      content: "";
+      display: inline-block;
+      height: 50%;
+      width: 50%;
+    }
+
+    &::before {
+      border-radius: 0 75% 75%;
+      transform: rotate(37.5deg) skew(30deg);
+    }
+
+    &::after {
+      border-radius: 75% 0 75% 75%;
+      transform: rotate(-37.5deg) skew(-30deg);
+    }
+
+    &:hover {
+      &::before {
+        animation: earwiggleleft 1s infinite;
+      }
+
+      &::after {
+        animation: earwiggleright 1s infinite;
+      }
+    }
+  }
+}
+
+@keyframes earwiggleleft {
+	0% { transform: rotate(37.6deg) skew(30deg); }
+	25% { transform: rotate(10deg) skew(30deg); }
+	50% { transform: rotate(20deg) skew(30deg); }
+	75% { transform: rotate(0deg) skew(30deg); }
+	100% { transform: rotate(37.6deg) skew(30deg); }
+}
+
+@keyframes earwiggleright {
+	0% { transform: rotate(-37.6deg) skew(-30deg); }
+	30% { transform: rotate(-10deg) skew(-30deg); }
+	55% { transform: rotate(-20deg) skew(-30deg); }
+	75% { transform: rotate(0deg) skew(-30deg); }
+	100% { transform: rotate(-37.6deg) skew(-30deg); }
+}
\ No newline at end of file
diff --git a/packages/pl-fe/src/styles/new/compose.scss b/packages/pl-fe/src/styles/new/compose.scss
index 6f83dd7ca..5c139dcfc 100644
--- a/packages/pl-fe/src/styles/new/compose.scss
+++ b/packages/pl-fe/src/styles/new/compose.scss
@@ -1,17 +1,28 @@
 .⁂-compose-form {
   @apply flex flex-col gap-y-4 w-full;
 
+  &__select-buttons {
+    @apply flex gap-2 flex-wrap;
+  }
+
+  &--transparent &__select-buttons {
+    @apply -mb-2;
+  }
+
   &__spoiler-input {
     @apply rounded-md !bg-transparent dark:!bg-transparent;
   }
 
-  &__editor:not(&__editor--transparent) {
+  &:not(&--transparent) &__editor {
     @apply rounded-md border-gray-400 px-3 py-2 ring-2 focus-within:border-primary-500 focus-within:ring-primary-500 dark:border-gray-800 dark:ring-gray-800 dark:focus-within:border-primary-500 dark:focus-within:ring-primary-500;
 
+    &__placeholder {
+      @apply pt-2;
+    }
   }
 
-  &__editor:not(&__editor--transparent) &__editor__placeholder {
-    @apply pt-2;
+  &__modifiers {
+    @apply flex flex-col gap-4 font-[inherit] text-sm text-gray-900;
   }
 
   &__footer {
diff --git a/packages/pl-fe/src/styles/new/index.scss b/packages/pl-fe/src/styles/new/index.scss
index 7cbf765b9..dfee73307 100644
--- a/packages/pl-fe/src/styles/new/index.scss
+++ b/packages/pl-fe/src/styles/new/index.scss
@@ -1,3 +1,4 @@
 @use 'components';
 @use 'layout';
+@use 'accounts';
 @use 'statuses';
diff --git a/packages/pl-fe/src/styles/ui.scss b/packages/pl-fe/src/styles/ui.scss
index 9b5242a6f..622f0d5c9 100644
--- a/packages/pl-fe/src/styles/ui.scss
+++ b/packages/pl-fe/src/styles/ui.scss
@@ -43,60 +43,3 @@
 .underline-line-through {
   text-decoration: underline line-through;
 }
-
-// Adapted from Iceshrimp which I guess took it from Misskey
-// https://iceshrimp.dev/iceshrimp/iceshrimp/src/branch/dev/packages/client/src/components/global/MkAvatar.vue
-.avatar__cat {
-  img {
-    position: absolute;
-    inset: 0;
-    z-index: 1;
-  }
-
-  &::before,
-	&::after {
-		background: #ebbcba;
-		border: solid 0.05em currentcolor;
-		box-sizing: border-box;
-		content: "";
-		display: inline-block;
-		height: 50%;
-		width: 50%;
-	}
-
-	&::before {
-		border-radius: 0 75% 75%;
-		transform: rotate(37.5deg) skew(30deg);
-	}
-
-	&::after {
-		border-radius: 75% 0 75% 75%;
-		transform: rotate(-37.5deg) skew(-30deg);
-	}
-
-	&:hover {
-		&::before {
-			animation: earwiggleleft 1s infinite;
-		}
-
-		&::after {
-			animation: earwiggleright 1s infinite;
-		}
-	}
-}
-
-@keyframes earwiggleleft {
-	0% { transform: rotate(37.6deg) skew(30deg); }
-	25% { transform: rotate(10deg) skew(30deg); }
-	50% { transform: rotate(20deg) skew(30deg); }
-	75% { transform: rotate(0deg) skew(30deg); }
-	100% { transform: rotate(37.6deg) skew(30deg); }
-}
-
-@keyframes earwiggleright {
-	0% { transform: rotate(-37.6deg) skew(-30deg); }
-	30% { transform: rotate(-10deg) skew(-30deg); }
-	55% { transform: rotate(-20deg) skew(-30deg); }
-	75% { transform: rotate(0deg) skew(-30deg); }
-	100% { transform: rotate(-37.6deg) skew(-30deg); }
-}