Consolidated toaster styles

apps/admin-x-design-system/src/global/Toast.stories.tsx

@@ -56,7 +56,10 @@ export const MinWidth: Story = {
 export const TitleWithIcon: Story = {
     args: {
         title: 'Hello notification in a toast',
-        type: 'info'
+        type: 'info',
+        options: {
+            duration: Infinity
+        }
     }
 };
 
@@ -90,6 +93,17 @@ export const Error: Story = {
     }
 };
 
+export const Infinite: Story = {
+    args: {
+        title: 'Toast title',
+        message: 'Hello error message in a toast',
+        type: 'error',
+        options: {
+            duration: Infinity
+        }
+    }
+};
+
 export const PageError: Story = {
     args: {
         title: 'Toast title',

apps/admin-x-design-system/src/global/Toast.tsx

@@ -50,23 +50,23 @@ const Toast: React.FC<ToastProps> = ({
     }
 
     const classNames = clsx(
-        'z-[90] flex min-w-[220px] items-start justify-between gap-3 rounded bg-white px-4 py-3 text-sm font-medium text-black',
+        'relative z-[90] mb-[14px] ml-[14px] flex min-w-[280px] items-start justify-between gap-3 rounded-lg bg-white p-4 text-sm text-black',
         props?.options?.position === 'top-center' ? 'max-w-[520px] shadow-md' : 'max-w-[360px] shadow-md-strong',
         t.visible ? (props?.options?.position === 'top-center' ? 'animate-toaster-top-in' : 'animate-toaster-in') : 'animate-toaster-out'
     );
 
     return (
         <div className={classNames} data-testid={`toast-${props?.type}`}>
-            <div className='flex items-start gap-3'>
+            <div className='mr-7 flex items-start gap-2'>
                 {props?.icon && (typeof props.icon === 'string' ?
-                    <div className='mt-0.5'><Icon className='grow' colorClass={iconColorClass} name={props.icon} size='sm' /></div> : props.icon)}
+                    <div className='mt-px'><Icon className='grow' colorClass={iconColorClass} name={props.icon} size='sm' /></div> : props.icon)}
                 {children}
             </div>
-            <button className='-mr-1.5 -mt-1.5 cursor-pointer p-2' type='button' onClick={() => {
+            <button className='absolute right-5 top-5 -mr-1.5 -mt-1.5 cursor-pointer p-2 text-grey-700 hover:text-black' type='button' onClick={() => {
                 toast.dismiss(t.id);
             }}>
-                <div className='mt-1'>
-                    <Icon colorClass='text-black stroke-2' name='close' size='2xs' />
+                <div>
+                    <Icon colorClass='stroke-2' name='close' size='2xs' />
                 </div>
             </button>
         </div>
@@ -102,8 +102,10 @@ export const showToast = ({
             options: options
         }} t={t}>
             <div>
-                {title && <div className='text-md font-semibold'>{title}</div>}
-                <div>{message}</div>
+                {title && <span className='mt-px block text-md font-semibold leading-tighter tracking-[0.1px]'>{title}</span>}
+                {message &&
+                    <div className={title ? 'mt-2' : ''}>{message}</div>
+                }
             </div>
         </Toast>
     ),

apps/admin-x-design-system/tailwind.config.cjs

@@ -259,7 +259,7 @@ module.exports = {
                 sm: '0.3rem',
                 DEFAULT: '0.4rem',
                 md: '0.6rem',
-                lg: '0.7rem',
+                lg: '0.8rem',
                 xl: '1.2rem',
                 '2xl': '1.6rem',
                 '3xl': '2.4rem',
@@ -269,7 +269,7 @@ module.exports = {
                 '2xs': '1.0rem',
                 base: '1.4rem',
                 xs: '1.2rem',
-                sm: '1.32rem',
+                sm: '1.3rem',
                 md: '1.40rem',
                 lg: '1.65rem',
                 xl: '2rem',

ghost/admin/app/components/gh-notification.hbs

@@ -16,16 +16,16 @@
                     {{/if}}
                 {{/if}}
             </div>
-            <span class="gh-notification-title">{{@message.message}}</span>
+            <div>
+                <span class="gh-notification-title">{{@message.message}}</span>
+                {{#if @message.description}}
+                    <p>{{@message.description}}</p>
+                {{/if}}
+                {{#if @message.actions}}
+                    <span class="gh-notification-actions">{{@message.actions}}</span>
+                {{/if}}
+            </div>
         </div>
-
-        {{#if @message.description}}
-            <p>{{@message.description}}</p>
-        {{/if}}
-
-        {{#if @message.actions}}
-            <span class="gh-notification-actions">{{@message.actions}}</span>
-        {{/if}}
     </div>
     <button class="gh-notification-close" data-test-button="close-notification" type="button" {{on "click" this.closeNotification}}>
         {{svg-jar "close"}}<span class="hidden">Close</span>

ghost/admin/app/controllers/lexical-editor.js

@@ -15,7 +15,6 @@ import moment from 'moment-timezone';
 import {GENERIC_ERROR_MESSAGE} from '../services/notifications';
 import {action, computed} from '@ember/object';
 import {alias, mapBy} from '@ember/object/computed';
-import {capitalize} from '@ember/string';
 import {captureMessage} from '@sentry/ember';
 import {dropTask, enqueueTask, restartableTask, task, taskGroup, timeout} from 'ember-concurrency';
 import {htmlSafe} from '@ember/template';
@@ -1262,7 +1261,7 @@ export default class LexicalEditorController extends Controller {
         let actions, type, path;
 
         if (status === 'published' || status === 'scheduled') {
-            type = capitalize(this.get('post.displayName'));
+            type = this.get('post.displayName');
             path = this.get('post.url');
             actions = `<a href="${path}" target="_blank">View ${type}</a>`;
         }

ghost/admin/app/styles/components/notifications.css

@@ -16,7 +16,8 @@
     position: relative;
     display: flex;
     margin-top: 8px;
-    width: 320px;
+    max-width: 320px;
+    min-width: 280px;
     background: var(--white);
     border-radius: 8px;
     box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.28), 0px 100px 80px rgba(0, 0, 0, 0.0112458), 0px 41.7776px 33.4221px rgba(0, 0, 0, 0.0161557), 0px 22.3363px 17.869px rgba(0, 0, 0, 0.02), 0px 12.5216px 10.0172px rgba(0, 0, 0, 0.0238443), 0px 6.6501px 5.32008px rgba(0, 0, 0, 0.0287542), 0px 2.76726px 2.21381px rgba(0, 0, 0, 0.04);
@@ -48,6 +49,7 @@
     flex-direction: column;
     padding: 16px;
     border-radius: 3px;
+    margin-right: 28px;
 }
 
 .gh-notification-content p span {
@@ -56,8 +58,7 @@
 
 .gh-notification-header {
     display: flex;
-    gap: 6px;
-    max-width: 260px;
+    gap: 8px;
 }
 
 .gh-notification-title {
@@ -85,20 +86,25 @@
 }
 
 .gh-notification-actions {
-    margin-top: 16px;
+    margin-top: 10px;
     margin-bottom: 2px;
     display: flex;
 }
 
 .gh-notification-actions a {
     display: inline-block;
     margin-right: 10px;
+    color: var(--darkgrey);
+}
+
+.gh-notification-actions a:hover {
+    color: var(--black);
 }
 
 .gh-notification-close {
     position: absolute;
-    top: 13px;
-    right: 13px;
+    top: 14px;
+    right: 14px;
     padding: 8px;
     background: none;
     border-radius: 999px;
@@ -139,19 +145,16 @@
 
 @keyframes notification-fade-in-spring {
     0.00% {
-        opacity: 0;
-        transform: translateX(-232.05px);
+        transform: translateY(100%);
     }
     26.52% {
-        opacity: 0.8;
-        transform: translateX(5.90px);
+        transform: translateY(-3.90px);
     }
     63.26% {
-        transform: translateX(-1.77px);
-        opacity: 1;
+        transform: translateY(1.2px);
     }
     100.00% {
-        transform: translateX(0px);
+        transform: translateY(0px);
     }
 }