pl-fe: style updates

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

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

@@ -4,7 +4,6 @@ import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 
 import Button from './button';
 import { ButtonThemes } from './button/useButtonStyles';
-import HStack from './hstack';
 import IconButton from './icon-button';
 
 const messages = defineMessages({
@@ -119,27 +118,27 @@ const Modal = React.forwardRef<HTMLDivElement, IModal>(({
         </div>
 
         {confirmationAction && (
-          <HStack className='mt-5' justifyContent='between' data-testid='modal-actions'>
-            <div className='grow'>
+          <div className='⁂-modal__actions' data-testid='modal-actions'>
+            <div className='⁂-modal__actions__cancel'>
               {cancelAction && (
-                <Button
-                  theme='tertiary'
+                <button
+                  className='⁂-modal__action-cancel'
                   onClick={cancelAction}
                 >
                   {cancelText || <FormattedMessage id='common.cancel' defaultMessage='Cancel' />}
-                </Button>
+                </button>
               )}
             </div>
 
-            <HStack space={2}>
+            <div className='⁂-modal__actions__other'>
               {secondaryAction && (
-                <Button
-                  theme='secondary'
+                <button
+                  className='⁂-modal__action-secondary'
                   onClick={secondaryAction}
                   disabled={secondaryDisabled}
                 >
                   {secondaryText}
-                </Button>
+                </button>
               )}
 
               <Button
@@ -150,8 +149,8 @@ const Modal = React.forwardRef<HTMLDivElement, IModal>(({
               >
                 {confirmationText}
               </Button>
-            </HStack>
-          </HStack>
+            </div>
+          </div>
         )}
       </div>
     </div>

packages/pl-fe/src/features/chats/components/chat-composer.tsx

@@ -143,7 +143,6 @@ const ChatComposer = React.forwardRef<HTMLTextAreaElement | null, IChatComposer>
       heading: intl.formatMessage(messages.unblockHeading, { acct: chat?.account.acct }),
       message: intl.formatMessage(messages.unblockMessage),
       confirm: intl.formatMessage(messages.unblockConfirm),
-      confirmationTheme: 'primary',
       onConfirm: () => unblockAccount(),
     });
   };

packages/pl-fe/src/features/chats/components/chat-list-item.tsx

@@ -55,7 +55,6 @@ const ChatListItem: React.FC<IChatListItemInterface> = ({ chat, onClick }) => {
         heading: intl.formatMessage(messages.leaveHeading),
         message: intl.formatMessage(messages.leaveMessage),
         confirm: intl.formatMessage(messages.leaveConfirm),
-        confirmationTheme: 'primary',
         onConfirm: () => {
           deleteChat.mutate(undefined, {
             onSuccess() {

packages/pl-fe/src/features/chats/components/chat-page/components/chat-page-main.tsx

@@ -61,7 +61,6 @@ const ChatPageMain = () => {
       heading: intl.formatMessage(messages.blockHeading, { acct: chat?.account.acct }),
       message: intl.formatMessage(messages.blockMessage),
       confirm: intl.formatMessage(messages.blockConfirm),
-      confirmationTheme: 'primary',
       onConfirm: () => blockAccount(),
     });
   };
@@ -71,7 +70,6 @@ const ChatPageMain = () => {
       heading: intl.formatMessage(messages.unblockHeading, { acct: chat?.account.acct }),
       message: intl.formatMessage(messages.unblockMessage),
       confirm: intl.formatMessage(messages.unblockConfirm),
-      confirmationTheme: 'primary',
       onConfirm: () => unblockAccount(),
     });
   };
@@ -81,7 +79,6 @@ const ChatPageMain = () => {
       heading: intl.formatMessage(messages.leaveHeading),
       message: intl.formatMessage(messages.leaveMessage),
       confirm: intl.formatMessage(messages.leaveConfirm),
-      confirmationTheme: 'primary',
       onConfirm: () => {
         deleteChat.mutate(undefined, {
           onSuccess() {

packages/pl-fe/src/features/chats/components/chat-widget/chat-settings.tsx

@@ -57,7 +57,6 @@ const ChatSettings = () => {
       heading: intl.formatMessage(messages.blockHeading, { acct: chat?.account.acct }),
       message: intl.formatMessage(messages.blockMessage),
       confirm: intl.formatMessage(messages.blockConfirm),
-      confirmationTheme: 'primary',
       onConfirm: () => blockAccount(),
     });
   };
@@ -67,7 +66,6 @@ const ChatSettings = () => {
       heading: intl.formatMessage(messages.unblockHeading, { acct: chat?.account.acct }),
       message: intl.formatMessage(messages.unblockMessage),
       confirm: intl.formatMessage(messages.unblockConfirm),
-      confirmationTheme: 'primary',
       onConfirm: () => unblockAccount(),
     });
   };
@@ -77,7 +75,6 @@ const ChatSettings = () => {
       heading: intl.formatMessage(messages.leaveHeading),
       message: intl.formatMessage(messages.leaveMessage),
       confirm: intl.formatMessage(messages.leaveConfirm),
-      confirmationTheme: 'primary',
       onConfirm: () => deleteChat.mutate(),
     });
   };

packages/pl-fe/src/features/group/components/group-member-list-item.tsx

@@ -100,7 +100,6 @@ const GroupMemberListItem = ({ member, group }: IGroupMemberListItem) => {
       heading: intl.formatMessage(messages.promoteConfirm),
       message: intl.formatMessage(messages.promoteConfirmMessage, { name: account?.username }),
       confirm: intl.formatMessage(messages.promoteConfirm),
-      confirmationTheme: 'primary',
       onConfirm: () => {
         promoteGroupMember({ role: GroupRoles.ADMIN, account_ids: [member.account_id] }, {
           onSuccess() {

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

@@ -395,5 +395,21 @@ div[data-viewport-type="window"]:has(.⁂-empty-message) {
 
   &__actions {
     @apply flex justify-between mt-5;
+
+    &__cancel {
+      @apply grow;
+    }
+
+    &__other {
+      @apply flex gap-2;
+    }
+
+    button.⁂-modal__action-cancel {
+      @include mixins.button($theme: tertiary);
+    }
+
+    button.⁂-modal__action-secondary {
+      @include mixins.button($theme: secondary);
+    }
   }
 }

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

@@ -217,5 +217,9 @@
 .⁂-media-modal {
   .⁂-status-action-bar__button {
     @apply text-white/80 hover:text-white bg-transparent dark:bg-transparent;
+
+    &--active.⁂-status-action-bar__button--reblog {
+      @apply text-success-600 dark:text-success-400 hover:text-success-600 dark:hover:text-success-400;
+    }
   }
 }