diff --git a/packages/pl-fe/src/components/ui/modal.tsx b/packages/pl-fe/src/components/ui/modal.tsx index d220a1d78..afed690f9 100644 --- a/packages/pl-fe/src/components/ui/modal.tsx +++ b/packages/pl-fe/src/components/ui/modal.tsx @@ -13,17 +13,6 @@ const messages = defineMessages({ confirm: { id: 'confirmations.delete.confirm', defaultMessage: 'Delete' }, }); -const widths = { - xs: 'max-w-xs', - sm: 'max-w-sm', - md: 'max-w-base', - lg: 'max-w-lg', - xl: 'max-w-xl', - '2xl': 'max-w-2xl', - '3xl': 'max-w-3xl', - '4xl': 'max-w-4xl', -}; - interface IModal { /** Callback when the modal is cancelled. */ cancelAction?: () => void; @@ -41,8 +30,6 @@ interface IModal { confirmationText?: React.ReactNode; /** Confirmation button theme. */ confirmationTheme?: ButtonThemes; - /** Whether to use full width style for confirmation button. */ - confirmationFullWidth?: boolean; /** Callback when the modal is closed. */ onClose?: () => void; /** Callback when the secondary action is chosen. */ @@ -54,7 +41,6 @@ interface IModal { skipFocus?: boolean; /** Title text for the modal. */ title?: React.ReactNode; - width?: keyof typeof widths; children?: React.ReactNode; className?: string; onBack?: () => void; @@ -71,14 +57,12 @@ const Modal = React.forwardRef(({ confirmationDisabled, confirmationText, confirmationTheme, - confirmationFullWidth, onClose, secondaryAction, secondaryDisabled = false, secondaryText, skipFocus = false, title, - width = 'xl', className, onBack, }, ref) => { @@ -100,50 +84,43 @@ const Modal = React.forwardRef(({
{title && ( -
-
+
+
{onBack && ( )} -

- {title} -

+

{title}

{onClose && ( )}
)} -
-
+ +
+
{children}
{confirmationAction && ( -
+
{cancelAction && (
- + {secondaryAction && ( diff --git a/packages/pl-fe/src/modals/crypto-donate-modal.tsx b/packages/pl-fe/src/modals/crypto-donate-modal.tsx index 463d28518..21a8f6682 100644 --- a/packages/pl-fe/src/modals/crypto-donate-modal.tsx +++ b/packages/pl-fe/src/modals/crypto-donate-modal.tsx @@ -9,7 +9,7 @@ import type { BaseModalProps } from 'pl-fe/features/ui/components/modal-root'; const CryptoDonateModal: React.FC = ({ onClose, ...props }) => { return ( - + ); diff --git a/packages/pl-fe/src/modals/event-map-modal.tsx b/packages/pl-fe/src/modals/event-map-modal.tsx index 6760e29be..39417de07 100644 --- a/packages/pl-fe/src/modals/event-map-modal.tsx +++ b/packages/pl-fe/src/modals/event-map-modal.tsx @@ -62,7 +62,7 @@ const EventMapModal: React.FC = ({ onClose, } onClose={onClickClose} - width='2xl' + className='⁂-event-map-modal' >
diff --git a/packages/pl-fe/src/modals/hotkeys-modal.tsx b/packages/pl-fe/src/modals/hotkeys-modal.tsx index 07a3b2387..303342166 100644 --- a/packages/pl-fe/src/modals/hotkeys-modal.tsx +++ b/packages/pl-fe/src/modals/hotkeys-modal.tsx @@ -158,7 +158,7 @@ const HotkeysModal: React.FC = ({ onClose }) => { } onClose={() => onClose('HOTKEYS')} - width='4xl' + className='⁂-hotkey-modal' >
{columns.map((column, i) => ( diff --git a/packages/pl-fe/src/modals/manage-group-modal/index.tsx b/packages/pl-fe/src/modals/manage-group-modal/index.tsx index fc788c50e..bbc9e9c57 100644 --- a/packages/pl-fe/src/modals/manage-group-modal/index.tsx +++ b/packages/pl-fe/src/modals/manage-group-modal/index.tsx @@ -88,7 +88,6 @@ const CreateGroupModal: React.FC = ({ onClose }) => { confirmationAction={handleNextStep} confirmationText={confirmationText} confirmationDisabled={isSubmitting} - confirmationFullWidth onClose={handleClose} > diff --git a/packages/pl-fe/src/styles/new/components.scss b/packages/pl-fe/src/styles/new/components.scss index aca8f22d2..49b19a9b4 100644 --- a/packages/pl-fe/src/styles/new/components.scss +++ b/packages/pl-fe/src/styles/new/components.scss @@ -1,4 +1,5 @@ @use 'mixins'; +@use 'variables'; .⁂-accordion { border-radius: 0.5rem; @@ -11,7 +12,7 @@ justify-content: space-between; padding: 0.75rem 1rem; font-weight: 600; - + &__actions { display: flex; align-items: center; @@ -243,7 +244,7 @@ a.⁂-list-item, padding: 0.5rem 1rem; color: white; @apply bg-primary-600/80 backdrop-blur-md backdrop-saturate-200 transition-transform hover:scale-105 hover:bg-primary-700/80 active:scale-100; - + .⁂-icon svg { width: 1rem; height: 1rem; @@ -296,3 +297,57 @@ a.⁂-list-item, div[data-viewport-type="window"]:has(.⁂-empty-message) { position: initial!important; } + +.⁂-modal { + @apply pointer-events-auto relative mx-auto flex w-full flex-col overflow-auto rounded-2xl bg-white text-start align-middle text-gray-900 shadow-xl transition-all ease-in-out black:bg-black dark:bg-primary-900 dark:text-gray-100; + max-height: calc(min(90vh, 100dvh)); + max-width: 36rem; + + @media (min-width: variables.$breakpoint-md) { + max-height: calc(min(80vh, 100dvh)); + } + + &--first-render { + @apply no-reduce-motion:-bottom-32; + } + + &:not(&--first-render) { + @apply bottom-0; + } + + &__title { + @apply sticky top-0 z-10 bg-white/75 p-6 pb-2 backdrop-blur backdrop-saturate-200 black:bg-black/75 dark:bg-primary-900/75; + + > div { + @apply flex w-full items-center gap-2; + } + + h3 { + @apply grow text-lg font-bold leading-6 text-gray-900 dark:text-white; + } + + .⁂-icon-button { + @apply text-gray-500 hover:text-gray-700 dark:text-gray-300 dark:hover:text-gray-200 rtl:rotate-180; + } + } + + &--close-position-left &__title > div { + @apply flex-row-reverse; + } + + &__body { + @apply p-6; + } + + :has(.⁂-modal__title) &__body { + @apply pt-0; + } + + &__children { + @apply w-full; + } + + &__actions { + @apply flex justify-between mt-5; + } +} \ 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 05da98dfe..e428e647c 100644 --- a/packages/pl-fe/src/styles/new/compose.scss +++ b/packages/pl-fe/src/styles/new/compose.scss @@ -162,7 +162,7 @@ button { @apply absolute inset-y-0 right-0 flex cursor-pointer items-center px-2 rtl:left-0 rtl:right-auto; - + svg { @apply size-5 text-gray-600; } diff --git a/packages/pl-fe/src/styles/new/events.scss b/packages/pl-fe/src/styles/new/events.scss index 771a9211d..6008154e6 100644 --- a/packages/pl-fe/src/styles/new/events.scss +++ b/packages/pl-fe/src/styles/new/events.scss @@ -11,4 +11,8 @@ width: 1rem; height: 1rem; } +} + +.⁂-event-map-modal { + max-width: 42rem; } \ 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 6e569971c..80461ed4a 100644 --- a/packages/pl-fe/src/styles/new/index.scss +++ b/packages/pl-fe/src/styles/new/index.scss @@ -1,5 +1,6 @@ @use 'components'; @use 'layout'; +@use 'modals'; @use 'accounts'; @use 'statuses'; @use 'timelines'; diff --git a/packages/pl-fe/src/styles/new/layout.scss b/packages/pl-fe/src/styles/new/layout.scss index 6c5b7dec5..61b1c1a03 100644 --- a/packages/pl-fe/src/styles/new/layout.scss +++ b/packages/pl-fe/src/styles/new/layout.scss @@ -31,7 +31,7 @@ body { .⁂-dropdown-navigation { @apply fixed bottom-[60px] left-2 z-[1000] flex max-h-[calc(100dvh-68px)] w-full max-w-xs flex-1 origin-bottom-left flex-col overflow-hidden rounded-xl bg-white/90 shadow-lg backdrop-blur-md backdrop-saturate-200 ease-in-out black:bg-black/80 no-reduce-motion:transition-transform dark:border dark:border-gray-800 dark:bg-primary-900/90 dark:shadow-none rtl:right-2 rtl:origin-bottom-right no-reduce-motion:scale-0; - + &__overlay { @apply fixed inset-0 cursor-default bg-gray-500 black:bg-gray-900 no-reduce-motion:transition-opacity dark:bg-gray-700; } @@ -246,6 +246,8 @@ body { &--visible { @apply fixed left-0 top-0 z-[100] size-full overflow-y-auto overflow-x-hidden transition-opacity ease-in-out; + width: 100%; + height: 100dvh; } &--revealed { @@ -257,7 +259,8 @@ body { } &__modal { - @apply my-2 mx-auto relative pointer-events-none flex items-center min-h-[calc(100%-3.5rem)]; + @apply mx-auto relative pointer-events-none flex items-center; + min-height: calc(min(100vh - 3.5rem, 100dvh)); } &[data-modal-type='DROPDOWN_MENU'] &__overlay { @@ -272,7 +275,9 @@ body { } &:not([data-modal-type='MEDIA']) &__modal { - padding: 1rem; + display: flex; + height: 100%; + padding: 0 1rem; @apply md:p-0; } } @@ -306,7 +311,7 @@ body { @apply md:grid md:max-w-7xl md:grid-cols-12 xl:max-w-[1440px]; } } - + &__container { display: flex; min-height: 100vh; diff --git a/packages/pl-fe/src/styles/new/mixins.scss b/packages/pl-fe/src/styles/new/mixins.scss index 9df073ab3..5b8534b44 100644 --- a/packages/pl-fe/src/styles/new/mixins.scss +++ b/packages/pl-fe/src/styles/new/mixins.scss @@ -1,3 +1,5 @@ +@use 'variables'; + @mixin text($family: sans, $size: md, $theme: default, $tracking: normal, $transform: normal, $truncate: false, $weight: normal, $align: none) { @if $family == sans { font-family: var(--font-sans); @@ -104,18 +106,18 @@ @if $size == md { padding: 1rem; - @media (width >= 581px) { + @media (min-width: variables.$breakpoint-sm) { border-radius: 0.75rem; } } @else if $size == lg { padding: 1rem; - @media (width >= 581px) { + @media (min-width: variables.$breakpoint-sm) { padding: 1.5rem; border-radius: 0.75rem; } } @else if $size == xl { padding: 1rem; - @media (width >= 581px) { + @media (min-width: variables.$breakpoint-sm) { padding: 2.5rem; border-radius: 1.5rem; } diff --git a/packages/pl-fe/src/styles/new/modals.scss b/packages/pl-fe/src/styles/new/modals.scss new file mode 100644 index 000000000..82260321c --- /dev/null +++ b/packages/pl-fe/src/styles/new/modals.scss @@ -0,0 +1,7 @@ +.⁂-crypto-donate-modal { + @apply max-w-sm; +} + +.⁂-hotkey-modal { + @apply max-w-4xl; +} \ No newline at end of file diff --git a/packages/pl-fe/src/styles/new/statuses.scss b/packages/pl-fe/src/styles/new/statuses.scss index f4605e7c4..699d77268 100644 --- a/packages/pl-fe/src/styles/new/statuses.scss +++ b/packages/pl-fe/src/styles/new/statuses.scss @@ -24,7 +24,7 @@ &--active { @apply bg-primary-100 dark:border-primary-500 dark:bg-primary-500 dark:ring-2 dark:ring-primary-300 black:border-primary-600 black:bg-primary-600; - + &:not(:disabled) { @apply hover:bg-primary-200 hover:dark:border-primary-300 hover:dark:bg-primary-300 hover:black:bg-primary-500; } @@ -65,7 +65,7 @@ &__button { @apply -m-1 flex items-center rounded-full p-2 rtl:space-x-reverse transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 dark:ring-offset-0 text-gray-600 hover:text-gray-800 dark:hover:text-white bg-transparent hover:bg-primary-100 dark:hover:bg-primary-800 black:hover:bg-gray-800; - + &:not(:disabled) { @apply hover:text-gray-600 dark:hover:text-white; } diff --git a/packages/pl-fe/src/styles/new/variables.scss b/packages/pl-fe/src/styles/new/variables.scss new file mode 100644 index 000000000..536e4825f --- /dev/null +++ b/packages/pl-fe/src/styles/new/variables.scss @@ -0,0 +1,4 @@ +$breakpoint-sm: 581px; +$breakpoint-md: 768px; +$breakpoint-lg: 976px; +$breakpoint-xl: 1280px;