diff --git a/packages/pl-fe/src/components/ui/button/index.tsx b/packages/pl-fe/src/components/ui/button/index.tsx index 501b3a4f9..4f21c837d 100644 --- a/packages/pl-fe/src/components/ui/button/index.tsx +++ b/packages/pl-fe/src/components/ui/button/index.tsx @@ -55,7 +55,6 @@ const Button = React.forwardRef(({ const themeClass = useButtonStyles({ theme, block, - disabled, size, }); @@ -68,7 +67,7 @@ const Button = React.forwardRef(({ const renderButton = () => ( + return ( +
+ + + + +
); - - if (actionsMenu) { - return ( -
- {button} - - - -
- ); - } - - return button; }; interface IComposeForm { @@ -175,7 +155,7 @@ const ComposeForm = ({ id, shouldCondense, autoFocus, clickab const [composeFocused, setComposeFocused] = useState(false); - const formRef = useRef(null); + const formRef = useRef(null); const editorRef = useRef(null); const { isDraggedOver } = useDraggedFiles(formRef); @@ -302,14 +282,14 @@ const ComposeForm = ({ id, shouldCondense, autoFocus, clickab }, []); const renderButtons = useCallback(() => ( - +
{features.polls && } {features.scheduledStatuses && } {anyMedia && features.spoilers && } {features.interactionRequests && } - +
), [features, id, anyMedia]); const showModifiers = !condensed && (compose.media_attachments.length || compose.is_uploading || compose.poll?.options.length || compose.schedule); @@ -347,7 +327,7 @@ const ComposeForm = ({ id, shouldCondense, autoFocus, clickab if (features.richText) selectButtons.push(); if (features.postLanguages) selectButtons.push(); - const actionsMenu: Menu | undefined = []; + const actionsMenu: Menu = []; if (features.createStatusPreview) { actionsMenu.push({ @@ -364,7 +344,14 @@ const ComposeForm = ({ id, shouldCondense, autoFocus, clickab }); return ( - +
{!!compose.in_reply_to && compose.approvalRequired && ( ({ id, shouldCondense, autoFocus, clickab ({ id, shouldCondense, autoFocus, clickab
{renderButtons()} - +
{maxTootChars && ( - +
- +
)} - +
{compose.redacting && ( @@ -462,7 +448,7 @@ const ComposeForm = ({ id, shouldCondense, autoFocus, clickab )}
- + ); }; diff --git a/packages/pl-fe/src/features/compose/components/spoiler-input.tsx b/packages/pl-fe/src/features/compose/components/spoiler-input.tsx index 628e4326e..4f7bdb5ec 100644 --- a/packages/pl-fe/src/features/compose/components/spoiler-input.tsx +++ b/packages/pl-fe/src/features/compose/components/spoiler-input.tsx @@ -44,7 +44,7 @@ const SpoilerInput: React.FC = ({ theme={theme} searchTokens={[':']} id='cw-spoiler-input' - className='rounded-md !bg-transparent dark:!bg-transparent' + className='⁂-compose-form__spoiler-input' lang={modified_language || undefined} /> ); diff --git a/packages/pl-fe/src/features/ui/components/compose-button.tsx b/packages/pl-fe/src/features/ui/components/compose-button.tsx index a8ecf826d..e99e10289 100644 --- a/packages/pl-fe/src/features/ui/components/compose-button.tsx +++ b/packages/pl-fe/src/features/ui/components/compose-button.tsx @@ -5,8 +5,8 @@ import { useLocation, useRouteMatch } from 'react-router-dom'; import { groupComposeModal } from 'pl-fe/actions/compose'; import { useGroup } from 'pl-fe/api/hooks/groups/use-group'; import Avatar from 'pl-fe/components/ui/avatar'; -import Button from 'pl-fe/components/ui/button'; import HStack from 'pl-fe/components/ui/hstack'; +import Icon from 'pl-fe/components/ui/icon'; import { useAppDispatch } from 'pl-fe/hooks/use-app-dispatch'; import { useModalsStore } from 'pl-fe/stores/modals'; @@ -34,17 +34,14 @@ const HomeComposeButton: React.FC = ({ shrink }) => { const onOpenCompose = () => openModal('COMPOSE'); return ( - + {shrink + ? + : } + ); }; @@ -60,22 +57,19 @@ const GroupComposeButton: React.FC = ({ shrink }) => { }; return ( - +
} + ); }; diff --git a/packages/pl-fe/src/layouts/home-layout.tsx b/packages/pl-fe/src/layouts/home-layout.tsx index 5f634d90b..189a96c61 100644 --- a/packages/pl-fe/src/layouts/home-layout.tsx +++ b/packages/pl-fe/src/layouts/home-layout.tsx @@ -3,10 +3,9 @@ import React, { useRef } from 'react'; import { useIntl } from 'react-intl'; import { Link } from 'react-router-dom'; +import 'pl-fe/styles/new/timelines.scss'; import { uploadCompose } from 'pl-fe/actions/compose'; import Avatar from 'pl-fe/components/ui/avatar'; -import Card, { CardBody } from 'pl-fe/components/ui/card'; -import HStack from 'pl-fe/components/ui/hstack'; import Layout from 'pl-fe/components/ui/layout'; import LinkFooter from 'pl-fe/features/ui/components/link-footer'; import { @@ -56,41 +55,38 @@ const HomeLayout: React.FC = ({ children }) => { return ( <> - + {me && ( - - - - {!disableUserProvidedMedia && ( - - - - )} +
+ {!disableUserProvidedMedia && ( + + + + )} -
- -
- - - +
+ +
+
+ )} {children} - + {!me && ( diff --git a/packages/pl-fe/src/styles/new/compose.scss b/packages/pl-fe/src/styles/new/compose.scss new file mode 100644 index 000000000..6f83dd7ca --- /dev/null +++ b/packages/pl-fe/src/styles/new/compose.scss @@ -0,0 +1,56 @@ +.⁂-compose-form { + @apply flex flex-col gap-y-4 w-full; + + &__spoiler-input { + @apply rounded-md !bg-transparent dark:!bg-transparent; + } + + &__editor:not(&__editor--transparent) { + @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; + + } + + &__editor:not(&__editor--transparent) &__editor__placeholder { + @apply pt-2; + } + + &__footer { + @apply flex flex-wrap items-center justify-between; + + &--condensed { + @apply hidden; + } + } + + &--with-avatar &__footer { + @apply ml-[-56px] sm:ml-0; + } + + &__buttons { + @apply flex items-center gap-2; + } + + &__actions { + @apply flex items-center gap-4 ml-auto rtl:ml-0 rtl:mr-auto; + } + + &__counter { + @apply flex items-center gap-1; + } + + &__button { + @apply place-content-center items-center gap-x-2 px-4 py-2 rtl:space-x-reverse inline-flex select-none appearance-none border border-transparent bg-primary-500 transition-all hover:bg-primary-400 focus:bg-primary-500 focus:outline-none focus:ring-2 focus:ring-primary-300 focus:ring-offset-2 disabled:cursor-default disabled:opacity-75 dark:hover:bg-primary-600 rounded-l-full pr-2; + + &__container { + @apply flex items-center gap-px text-sm font-medium text-gray-100; + + svg { + @apply size-4; + } + } + + &__actions { + @apply h-full cursor-pointer py-2.5 pl-1 pr-3 last:rounded-r-full inline-flex select-none appearance-none border border-transparent bg-primary-500 transition-all hover:bg-primary-400 focus:bg-primary-500 focus:outline-none focus:ring-2 focus:ring-primary-300 focus:ring-offset-2 disabled:cursor-default disabled:opacity-75 dark:hover:bg-primary-600; + } + } +} \ No newline at end of file diff --git a/packages/pl-fe/src/styles/new/layout.scss b/packages/pl-fe/src/styles/new/layout.scss index 337407b36..79953defa 100644 --- a/packages/pl-fe/src/styles/new/layout.scss +++ b/packages/pl-fe/src/styles/new/layout.scss @@ -2,6 +2,9 @@ html { height: 100%; + + --font-sans: pl-fe i18n, 'Inter', ui-sans-serif, system-ui, -apple-system, 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Helvetica Neue', 'Arial', 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; + --font-mono: 'Roboto Mono', ui-monospace, monospace; } body { @@ -162,6 +165,14 @@ body { &__links { @apply flex flex-col gap-y-1.5; } + + &__compose-button { + @include mixins.button($theme: accent, $size: lg, $block: true); + + svg { + @apply size-4; + } + } } .⁂-sidebar-navigation-link { @@ -308,7 +319,7 @@ body { &__main { @apply md:col-span-12 lg:col-span-9 xl:col-span-6 pb-14 lg:pb-0 xl:pb-16 black:border-gray-800 lg:black:border-l xl:black:border-r; - &--chats-page { + &--chats { @apply xl:pb-16; } } diff --git a/packages/pl-fe/src/styles/new/mixins.scss b/packages/pl-fe/src/styles/new/mixins.scss index 2124e6433..ea74199b7 100644 --- a/packages/pl-fe/src/styles/new/mixins.scss +++ b/packages/pl-fe/src/styles/new/mixins.scss @@ -1,8 +1,8 @@ @mixin text($family: sans, $size: md, $theme: default, $tracking: normal, $transform: normal, $truncate: false, $weight: normal) { @if $family == sans { - @apply font-sans; + font-family: var(--font-sans); } @else if $family == mono { - font-family: 'Roboto Mono', ui-monospace, monospace; + font-family: var(--font-mono); } @else { @warn "Unknown font family `#{$family}`."; } @@ -109,10 +109,51 @@ @warn "Unknown card size `#{$size}`."; } } @else if $variant == slim { - @apply py-4; + padding-top: 1rem; + padding-bottom: 1rem; } @if $size != xl { - @apply .black:rounded-none; + @apply black:rounded-none; + } +} + +@mixin button($theme: secondary, $block: false, $size: md) { + @apply rtl:space-x-reverse inline-flex items-center place-content-center border font-medium rounded-full focus:outline-none focus:ring-2 focus:ring-offset-2 appearance-none transition-all disabled:select-none disabled:opacity-75 disabled:cursor-default; + + @if $theme == primary { + @apply bg-primary-500 hover:bg-primary-400 dark:hover:bg-primary-600 border-transparent focus:bg-primary-500 text-gray-100 focus:ring-primary-300; + } @else if $theme == secondary { + @apply border-transparent bg-primary-100 dark:bg-primary-800 hover:bg-primary-50 dark:hover:bg-primary-700 focus:bg-primary-100 dark:focus:bg-primary-800 text-primary-500 dark:text-primary-200; + } @else if $theme == tertiary { + @apply bg-white dark:bg-primary-900 border-gray-400 dark:border-gray-800 hover:border-primary-300 dark:hover:border-primary-700 focus:border-primary-500 text-gray-900 dark:text-gray-100 focus:ring-primary-500; + } @else if $theme == accent { + @apply border-transparent bg-secondary-500 hover:bg-secondary-400 focus:bg-secondary-500 text-gray-100 focus:ring-secondary-300; + } @else if $theme == danger { + @apply border-transparent bg-danger-100 dark:bg-danger-900 text-danger-600 dark:text-danger-200 hover:bg-danger-600 hover:text-gray-100 dark:hover:text-gray-100 dark:hover:bg-danger-500 focus:ring-danger-500; + } @else if $theme == transparent { + @apply border-transparent bg-transparent text-primary-600 dark:text-accent-blue dark:bg-transparent hover:bg-gray-200 dark:hover:bg-gray-800/50; + } @else if $theme == outline { + @apply border-gray-100 border-2 bg-transparent text-gray-100 hover:bg-white/10; + } @else if $theme == muted { + @apply border border-solid bg-transparent border-gray-400 dark:border-gray-800 hover:border-primary-300 dark:hover:border-primary-700 focus:border-primary-500 text-gray-800 dark:text-gray-100 focus:ring-primary-500; + } @else { + @warn "Unknown button theme `#{$theme}`."; + } + + @if $size == xs { + @apply gap-x-1.5 px-2 py-1 text-xs; + } @else if $size == sm { + @apply gap-x-2 px-3 py-1.5 text-xs leading-4; + } @else if $size == md { + @apply gap-x-2 px-4 py-2 text-sm; + } @else if $size == lg { + @apply gap-x-2 px-6 py-3 text-base; + } @else { + @warn "Unknown button size `#{$size}`."; + } + + @if $block { + @apply flex w-full justify-center; } } \ No newline at end of file diff --git a/packages/pl-fe/src/styles/new/timelines.scss b/packages/pl-fe/src/styles/new/timelines.scss new file mode 100644 index 000000000..c8f68d462 --- /dev/null +++ b/packages/pl-fe/src/styles/new/timelines.scss @@ -0,0 +1,26 @@ +@use 'mixins'; + +.⁂-layout__main--home { + @apply black:space-y-0 dark:divide-gray-800 sm:space-y-3; +} + +.⁂-compose-block { + @include mixins.card($variant: rounded); + @apply relative z-[1] border-gray-200 transition black:border-b black:border-gray-800 dark:border-gray-800 max-sm:border-b max-sm:shadow-none; + + &--dragging { + @apply border-2 border-primary-600 border-dashed z-[99]; + } + + &--dragged-over { + @apply ring-2 ring-offset-2 ring-primary-600; + } + + &__body { + @apply flex items-start gap-2; + } + + &__form { + @apply w-full translate-y-0.5; + } +} \ No newline at end of file