From ddf88e406e4d5fbf0a2a36fef6af2a8c522a1c4d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?nicole=20miko=C5=82ajczyk?= Date: Tue, 27 Jan 2026 17:43:30 +0100 Subject: [PATCH] pl-fe: migrations from tailwind MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: nicole mikołajczyk --- .../chats/components/chat-pane/blankslate.tsx | 39 ++---- .../chats/components/chat-pane/chat-pane.tsx | 5 +- .../chat-widget/chat-pane-header.tsx | 34 ++---- .../headers/chat-search-header.tsx | 5 +- .../src/features/chats/components/ui/pane.tsx | 5 +- packages/pl-fe/src/features/ui/index.tsx | 4 +- packages/pl-fe/src/pages/chats/chats.tsx | 4 +- packages/pl-fe/src/styles/new/chats.scss | 115 ++++++++++++++++++ packages/pl-fe/src/styles/new/index.scss | 1 + 9 files changed, 151 insertions(+), 61 deletions(-) create mode 100644 packages/pl-fe/src/styles/new/chats.scss diff --git a/packages/pl-fe/src/features/chats/components/chat-pane/blankslate.tsx b/packages/pl-fe/src/features/chats/components/chat-pane/blankslate.tsx index 6e46ad099..0e7281994 100644 --- a/packages/pl-fe/src/features/chats/components/chat-pane/blankslate.tsx +++ b/packages/pl-fe/src/features/chats/components/chat-pane/blankslate.tsx @@ -1,10 +1,6 @@ import React from 'react'; import { defineMessages, useIntl } from 'react-intl'; -import Button from 'pl-fe/components/ui/button'; -import Stack from 'pl-fe/components/ui/stack'; -import Text from 'pl-fe/components/ui/text'; - const messages = defineMessages({ title: { id: 'chat_pane.blankslate.title', defaultMessage: 'No messages yet' }, body: { id: 'chat_pane.blankslate.body', defaultMessage: 'Search for someone to chat with.' }, @@ -19,30 +15,21 @@ const Blankslate = ({ onSearch }: IBlankslate) => { const intl = useIntl(); return ( - - - - - {intl.formatMessage(messages.title)} - +
+
+

+ {intl.formatMessage(messages.title)} +

- - {intl.formatMessage(messages.body)} - - +

+ {intl.formatMessage(messages.body)} +

+
-
- -
- - + +
); }; diff --git a/packages/pl-fe/src/features/chats/components/chat-pane/chat-pane.tsx b/packages/pl-fe/src/features/chats/components/chat-pane/chat-pane.tsx index b64692c09..12c9dfab5 100644 --- a/packages/pl-fe/src/features/chats/components/chat-pane/chat-pane.tsx +++ b/packages/pl-fe/src/features/chats/components/chat-pane/chat-pane.tsx @@ -1,7 +1,6 @@ import React from 'react'; import { FormattedMessage } from 'react-intl'; -import Stack from 'pl-fe/components/ui/stack'; import { ChatWidgetScreens, useChatContext } from 'pl-fe/contexts/chat-context'; import { useStatContext } from 'pl-fe/contexts/stat-context'; import { useChats } from 'pl-fe/queries/chats'; @@ -37,9 +36,9 @@ const ChatPane = () => { const renderBody = () => { if (Number(chats?.length) > 0 || showShoutbox || isLoading) { return ( - +
- +
); } else if (chats?.length === 0) { return ( diff --git a/packages/pl-fe/src/features/chats/components/chat-widget/chat-pane-header.tsx b/packages/pl-fe/src/features/chats/components/chat-widget/chat-pane-header.tsx index 74374327c..5a37dd7f8 100644 --- a/packages/pl-fe/src/features/chats/components/chat-widget/chat-pane-header.tsx +++ b/packages/pl-fe/src/features/chats/components/chat-widget/chat-pane-header.tsx @@ -1,9 +1,6 @@ -import clsx from 'clsx'; import React, { HTMLAttributes } from 'react'; -import HStack from 'pl-fe/components/ui/hstack'; import IconButton from 'pl-fe/components/ui/icon-button'; -import Text from 'pl-fe/components/ui/text'; import { useSettings } from 'pl-fe/stores/settings'; interface IChatPaneHeader { @@ -37,45 +34,40 @@ const ChatPaneHeader = (props: IChatPaneHeader) => { } return ( - +
- - {title} - +
{title}
- {(!demetricator && typeof unreadCount !== 'undefined' && unreadCount > 0) && ( - - + {(!demetricator && unreadCount !== undefined && unreadCount > 0) && ( +
+

({unreadCount}) - +

-
- +
+
)} - +
{secondaryAction ? ( ) : null} - - +
+
); }; diff --git a/packages/pl-fe/src/features/chats/components/chat-widget/headers/chat-search-header.tsx b/packages/pl-fe/src/features/chats/components/chat-widget/headers/chat-search-header.tsx index 28203a7c7..7951f1e67 100644 --- a/packages/pl-fe/src/features/chats/components/chat-widget/headers/chat-search-header.tsx +++ b/packages/pl-fe/src/features/chats/components/chat-widget/headers/chat-search-header.tsx @@ -1,7 +1,6 @@ import React from 'react'; import { defineMessages, useIntl } from 'react-intl'; -import HStack from 'pl-fe/components/ui/hstack'; import Icon from 'pl-fe/components/ui/icon'; import Text from 'pl-fe/components/ui/text'; import { ChatWidgetScreens, useChatContext } from 'pl-fe/contexts/chat-context'; @@ -21,7 +20,7 @@ const ChatSearchHeader = () => { +
} isOpen={isOpen} isToggleable={false} diff --git a/packages/pl-fe/src/features/chats/components/ui/pane.tsx b/packages/pl-fe/src/features/chats/components/ui/pane.tsx index 74f9ce4fb..e358a9192 100644 --- a/packages/pl-fe/src/features/chats/components/ui/pane.tsx +++ b/packages/pl-fe/src/features/chats/components/ui/pane.tsx @@ -11,10 +11,7 @@ interface IPane { /** Chat pane UI component for desktop. */ const Pane: React.FC = ({ isOpen = false, children }) => (
{children} diff --git a/packages/pl-fe/src/features/ui/index.tsx b/packages/pl-fe/src/features/ui/index.tsx index 8c8ca036b..bd2907f7b 100644 --- a/packages/pl-fe/src/features/ui/index.tsx +++ b/packages/pl-fe/src/features/ui/index.tsx @@ -176,8 +176,8 @@ const UI: React.FC = React.memo(() => { {me && features.chats && ( -
- }> +
+ }>
diff --git a/packages/pl-fe/src/pages/chats/chats.tsx b/packages/pl-fe/src/pages/chats/chats.tsx index 2ed12584a..8f3064635 100644 --- a/packages/pl-fe/src/pages/chats/chats.tsx +++ b/packages/pl-fe/src/pages/chats/chats.tsx @@ -1,11 +1,11 @@ import React from 'react'; import { ChatProvider } from 'pl-fe/contexts/chat-context'; -import ChatPage from 'pl-fe/features/chats/components/chats-page/chats-page'; +import ChatsPage from 'pl-fe/features/chats/components/chats-page/chats-page'; const ChatIndex: React.FC = () => ( - + ); diff --git a/packages/pl-fe/src/styles/new/chats.scss b/packages/pl-fe/src/styles/new/chats.scss new file mode 100644 index 000000000..52c61ddb4 --- /dev/null +++ b/packages/pl-fe/src/styles/new/chats.scss @@ -0,0 +1,115 @@ +@use 'mixins'; +@use 'variables'; + +.⁂-chat-widget { + @apply fixed bottom-0 z-[99] flex w-96 flex-col rounded-t-lg bg-white shadow-3xl black:border black:border-b-0 black:border-gray-800 black:bg-black dark:bg-gray-900 ltr:right-5 rtl:left-5 h-16; + + &--open { + height: 550px; + max-height: 100vh; + + .⁂-chat-widget__header__open-button svg { + transform: rotate(180deg); + } + } + + &--placeholder { + @apply fixed bottom-0 z-[99] flex h-16 w-96 animate-pulse flex-col rounded-t-lg bg-white shadow-3xl dark:bg-gray-900 ltr:right-5 rtl:left-5; + } + + &__container { + display: none; + + @media (min-width: variables.$breakpoint-xl) { + display: block; + } + } + + &__header { + display: flex; + align-items: center; + justify-content: space-between; + height: 4rem; + border-top-left-radius: 0.75rem; + border-top-right-radius: 0.75rem; + padding: 0.75rem 1rem; + gap: 0.5rem; + overflow: hidden; + + &__title { + display: flex; + height: 4rem; + flex-grow: 1; + flex-direction: row; + align-items: center; + gap: 0.25rem; + } + + &__title div:first-child, + &__count p { + @include mixins.text($weight: semibold); + overflow: hidden; + text-overflow: ellipsis; + } + + &__count { + display: flex; + align-items: center; + gap: 0.5rem; + + &__dot { + height: 0.625rem; + width: 0.625rem; + border-radius: 50%; + background: rgb(var(--color-accent-300)); + } + } + + &__actions { + display: flex; + align-items: center; + gap: 0.5rem; + + svg { + height: 1.25rem; + width: 1.25rem; + color: rgb(var(--color-gray-600)); + } + } + + &__open-button svg { + transform: rotate(0deg); + transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1); + } + } + + &__blankslate { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + height: 100%; + flex-grow: 1; + gap: 1rem; + + &__text { + display: flex; + flex-direction: column; + align-items: center; + gap: 0.25rem; + max-width: 80%; + + &__title { + @include mixins.text($size: lg, $weight: bold, $align: center); + } + + &__body { + @include mixins.text($theme: muted, $align: center); + } + } + + button { + @include mixins.button($theme: primary); + } + } +} \ No newline at end of file diff --git a/packages/pl-fe/src/styles/new/index.scss b/packages/pl-fe/src/styles/new/index.scss index 606ce6187..f99242e32 100644 --- a/packages/pl-fe/src/styles/new/index.scss +++ b/packages/pl-fe/src/styles/new/index.scss @@ -6,4 +6,5 @@ @use 'timelines'; @use 'compose'; @use 'drive'; +@use 'chats'; @use 'events';