diff --git a/apps/admin-x-design-system/src/global/form/Form.tsx b/apps/admin-x-design-system/src/global/form/Form.tsx index 9cffe9b912..08b0fd167c 100644 --- a/apps/admin-x-design-system/src/global/form/Form.tsx +++ b/apps/admin-x-design-system/src/global/form/Form.tsx @@ -41,6 +41,7 @@ const Form: React.FC = ({ if (marginBottom) { classes = clsx( classes, + (margins === 'xs' && 'mb-4'), (margins === 'sm' && 'mb-7'), (margins === 'md' && 'mb-10'), (margins === 'lg' && 'mb-12') @@ -50,6 +51,7 @@ const Form: React.FC = ({ if (marginTop) { classes = clsx( classes, + (margins === 'xs' && 'mt-4'), (margins === 'sm' && 'mt-7'), (margins === 'md' && 'mt-10'), (margins === 'lg' && 'mt-12') diff --git a/apps/admin-x-design-system/src/global/modal/Modal.tsx b/apps/admin-x-design-system/src/global/modal/Modal.tsx index e1cf6b4a59..f98bada492 100644 --- a/apps/admin-x-design-system/src/global/modal/Modal.tsx +++ b/apps/admin-x-design-system/src/global/modal/Modal.tsx @@ -156,7 +156,7 @@ const Modal: React.FC = ({ const buttons: ButtonProps[] = []; - let contentClasses; + let contentClasses = '[&_p]:text-pretty'; const removeModal = () => { confirmIfDirty(dirty, () => { @@ -196,7 +196,7 @@ const Modal: React.FC = ({ align === 'center' && 'mx-auto', align === 'left' && 'mr-auto', align === 'right' && 'ml-auto', - size !== 'bleed' && 'rounded', + size !== 'bleed' && 'rounded-xl', formSheet ? 'shadow-md' : 'shadow-xl', (animate && !formSheet && !animationFinished && align === 'center') && 'animate-modal-in', (animate && !formSheet && !animationFinished && align === 'right') && 'animate-modal-in-from-right', @@ -342,6 +342,7 @@ const Modal: React.FC = ({ ); contentClasses = clsx( + contentClasses, paddingClasses, 'py-0' ); diff --git a/apps/admin-x-settings/src/components/settings/email/newsletters/AddNewsletterModal.tsx b/apps/admin-x-settings/src/components/settings/email/newsletters/AddNewsletterModal.tsx index efc2853fde..0d98f59cee 100644 --- a/apps/admin-x-settings/src/components/settings/email/newsletters/AddNewsletterModal.tsx +++ b/apps/admin-x-settings/src/components/settings/email/newsletters/AddNewsletterModal.tsx @@ -83,7 +83,9 @@ const AddNewsletterModal: React.FC = () => { }} >
{ id='role' options={allowedRoleOptions} selectedOption={role} - separator={true} title="Role" onSelect={(value) => { setRole(value as RoleType); diff --git a/apps/admin-x-settings/src/components/settings/growth/recommendations/AddRecommendationModal.tsx b/apps/admin-x-settings/src/components/settings/growth/recommendations/AddRecommendationModal.tsx index ca06d45d76..9aa29c1ab7 100644 --- a/apps/admin-x-settings/src/components/settings/growth/recommendations/AddRecommendationModal.tsx +++ b/apps/admin-x-settings/src/components/settings/growth/recommendations/AddRecommendationModal.tsx @@ -194,6 +194,7 @@ const AddRecommendationModal: React.FCYou can recommend any site your audience will find valuable, not just those published on Ghost.

{{#if (eq this.state 'INIT')}} {{/if}} diff --git a/ghost/admin/app/components/modal-member-tier.hbs b/ghost/admin/app/components/modal-member-tier.hbs index 4486cb2c43..e031b36f25 100644 --- a/ghost/admin/app/components/modal-member-tier.hbs +++ b/ghost/admin/app/components/modal-member-tier.hbs @@ -53,7 +53,7 @@ @disabled={{false}} @update={{this.updateExpiry}} /> - {{svg-jar "arrow-down-small"}} + {{#if (eq this.expiryAt "custom")}}

Hey there! It looks like you didn't save the changes you made. +
+ Save before you go!

- -

Save before you go!

diff --git a/ghost/admin/app/styles/components/modals-new.css b/ghost/admin/app/styles/components/modals-new.css index 35f3f734e8..9c3d644612 100644 --- a/ghost/admin/app/styles/components/modals-new.css +++ b/ghost/admin/app/styles/components/modals-new.css @@ -17,7 +17,7 @@ --epm-animation-modal-out: var(--epm-animation-modal-out-duration) ease-out var(--epm-animation-modal-out-delay) forwards epm-modal-out; --epm-backdrop-opacity: 0.6; - --epm-backdrop-background: #15171A; + --epm-backdrop-background: #626d7933; } @media (prefers-reduced-motion: reduce) { @@ -67,8 +67,9 @@ align-items: unset; } +.epm-modal-container, .epm-modal-container.background-blur { - backdrop-filter: blur(4px); + backdrop-filter: blur(3px); } .epm-animating .epm-modal-container { @@ -169,7 +170,7 @@ padding: 32px; background-color: #fff; background-clip: padding-box; - border-radius: 8px; + border-radius: 12px; box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.02), 0 6.7px 5.3px rgba(0, 0, 0, 0.028), @@ -186,8 +187,8 @@ .modal-content .close { position: absolute; - top: 16px; - right: 16px; + top: 24px; + right: 24px; z-index: 9999; margin: 0; padding: 0; @@ -208,12 +209,12 @@ .modal-header { position: relative; - margin-bottom: 22px; + margin-bottom: 16px; } .modal-header h1 { display: inline-block; - margin: -5px 25px 0 0; + margin: -5px 32px 0 0; font-size: 2.4rem; line-height: 1.25em; font-weight: 700; @@ -254,6 +255,11 @@ font-size: 1.4rem; line-height: 1.5em; color: var(--black); + text-wrap: pretty; +} + +.modal-body label { + font-weight: 500; } .modal-body .gh-input { @@ -266,11 +272,64 @@ border-radius: 8px; } +.modal-body .gh-input, +.modal-body select, +.modal-body .gh-date-time-picker-date, +.modal-body .gh-date-time-picker-time, +.modal-body .ember-power-select-multiple-trigger { + min-height: 38px; + padding: 4px 12px; + font-size: 1.4rem; + color: var(--black); + background-color: var(--grey-150); + border: 1px solid transparent; + border-radius: 8px; + transition-property: color, background-color,border-color, text-decoration-color, fill, stroke; + transition-timing-function: cubic-bezier(.4,0,.2,1); + transition-duration: .15s; +} + +.modal-body .gh-input:hover, +.modal-body select:hover, +.modal-body .gh-date-time-picker-date:hover, +.modal-body .gh-date-time-picker-time:hover, +.modal-body .ember-power-select-multiple-trigger:hover { + background-color: var(--grey-100); +} + +.modal-body .gh-input:focus, +.modal-body .gh-input:focus-visible, +.modal-body .ember-basic-dropdown-trigger[aria-expanded=true] .gh-date-time-picker-date, +.modal-body .gh-date-time-picker-time:focus-within { + background-color: var(--white); + border: 1px solid var(--green); + box-shadow: 0 0 0 2px rgba(48,207,67,.25); + outline: none; +} + +.modal-body .gh-select .ember-power-select-status-icon { + top: 50%; + right: 16px; + margin-top: -5px; + width: 8px; + height: 8px; + border-color: var(--black); +} + +.modal-body .for-checkbox .input-toggle-component { + background-color: transparent; +} + .modal-body .gh-input-group .gh-input { border-top-right-radius: 0; border-bottom-right-radius: 0; } +.modal-body .gh-input-group .gh-btn { + border-top-right-radius: 8px; + border-bottom-right-radius: 8px; +} + .modal-footer { display: flex; justify-content: flex-end; @@ -282,12 +341,25 @@ } .modal-footer .gh-btn { - min-width: 100px; + min-width: auto; text-align: center; + font-weight: 700; + transition: all .15s cubic-bezier(.4,0,.2,1); + -webkit-font-smoothing: antialiased; +} + +.modal-footer .gh-btn:not(^="gh-btn-") { + border-color: var(--grey-300); + color: var(--black); } .modal-footer .gh-btn:not(:first-child) { - margin-left: 12px; + margin-left: 8px; +} + +.modal-footer .gh-btn:hover { + border-color: var(--black); + background-color: transparent; } .modal-footer-hint { diff --git a/ghost/admin/app/styles/components/modals.css b/ghost/admin/app/styles/components/modals.css index b5403fcdb1..08ef91f758 100644 --- a/ghost/admin/app/styles/components/modals.css +++ b/ghost/admin/app/styles/components/modals.css @@ -28,8 +28,8 @@ left: 0; z-index: 50; height: 100vh; - background: #15171A; - opacity: 0.6; + background: #626d7933; + backdrop-filter: blur(3px); } .fullscreen-modal { @@ -147,7 +147,7 @@ padding: 32px; background-color: #fff; background-clip: padding-box; - border-radius: 4px; + border-radius: 12px; box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.02), 0 6.7px 5.3px rgba(0, 0, 0, 0.028), diff --git a/ghost/admin/app/styles/patterns/buttons.css b/ghost/admin/app/styles/patterns/buttons.css index 70516c32cd..3e2a102fde 100644 --- a/ghost/admin/app/styles/patterns/buttons.css +++ b/ghost/admin/app/styles/patterns/buttons.css @@ -116,17 +116,20 @@ fieldset[disabled] .gh-btn { color: #fff; fill: #fff; background: var(--green); + border-color: var(--green); } .gh-btn-green:hover { color: #fff !important; background: color-mod(var(--green) l(-4%)) !important; + border-color: color-mod(var(--green) l(-4%)) !important; } /* When clicked or focused with keyboard */ .gh-btn-green:active, .gh-btn-green:focus { background: color-mod(var(--green) l(-7%)) !important; + border-color: color-mod(var(--green) l(-7%)) !important; } @@ -713,4 +716,4 @@ Usage: CTA buttons grouped together horizontally. margin: 0 !important; border-radius: 999px !important; border: 1px solid var(--main-bg-color); -} \ No newline at end of file +}