Improved post preview design #22113
Improved post preview design #22113
Conversation
Ref https://linear.app/ghost/issue/PLG-343/improve-the-preview-modal-design - Added view options for anonymous visitors, free members, and paid members on web. - Updated preview toggles to accommodate for web and mobile previews in email. - Removed social preview as these are duplicating the functionality in the PSM. They are also not strictly previews, but rather settings. - Moved all preview actions (send test email, copy preview URL, open in new tab) to the top bar of the preview to make them more explicit and discoverable.
|
Warning There were issues while running some tools. Please review the errors and either fix the tool’s configuration or disable the tool if it’s a critical failure. 🔧 ESLint
ghost/admin/app/styles/components/publishmenu.cssOops! Something went wrong! :( ESLint: 8.44.0 Error: Failed to load parser '@babel/eslint-parser' declared in 'ghost/admin/.eslintrc.js': Cannot find module '@babel/eslint-parser'
ghost/admin/app/styles/layouts/post-preview.cssOops! Something went wrong! :( ESLint: 8.44.0 Error: Failed to load parser '@babel/eslint-parser' declared in 'ghost/admin/.eslintrc.js': Cannot find module '@babel/eslint-parser'
WalkthroughThe pull request introduces several user interface and styling adjustments across the admin components. The terminology “Logged out visitors” has been replaced with “Anonymous visitors” in configurations and UI labels. In the preview modal components, structural changes have been made, including header modifications, new dropdowns, and the removal of certain interactive elements, along with new actions for focusing inputs and copying preview URLs. Multiple CSS files have been updated to adjust dimensions, margins, paddings, borders, and background colors, while there are no changes to the underlying business logic. Changes
Sequence Diagram(s)sequenceDiagram
participant U as User
participant E as EditorPostPreviewModal
participant C as ClipboardUtil
U ->> E: Click "Copy Preview URL" button
E ->> C: copyTextToClipboard(previewUrl)
C -->> E: Copy confirmed
E -->> U: Provide copy feedback
sequenceDiagram
participant U as User
participant E as EditorPostPreviewModal
U ->> E: Trigger email input focus
E ->> E: Execute setTimeout(100ms)
E -->> U: Email input gains focus
Suggested labels
Tip 🌐 Web search-backed reviews and chat
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (3)
ghost/admin/app/components/editor/modals/preview.js (1)
38-43: Consider using ember-concurrency for the focusInput action.Using setTimeout directly can be unreliable and harder to test. Consider converting this to an ember-concurrency task for better control and testability.
-@action -focusInput() { - setTimeout(() => { - document.querySelector('[data-post-preview-email-input]')?.focus(); - }, 100); -} +@task +*focusInput() { + yield timeout(100); + document.querySelector('[data-post-preview-email-input]')?.focus(); +}ghost/admin/app/styles/layouts/post-preview.css (2)
11-13: Refine Post Preview Header LayoutThe header section has undergone several updates:
- The header now has no external margin and uses
padding: 12px 24px;with a new background color (var(--grey-50)) (lines 11–13).- The left section now explicitly positions its content with
left: 20px;and uses flex alignment (lines 17–21).- The right section similarly uses
right: 20px;, along withalign-items: center;and agap: 8px;for better spacing (lines 28–34).- The
.gh-btn-editorbutton now uses a neutral background which changes tovar(--whitegrey)on hover (lines 36–42).These adjustments enhance the visual hierarchy and ensure the header remains balanced across various screen sizes.
Also applies to: 17-21, 28-34, 36-42
448-468: Evaluate Social Preview StylesThe CSS for the social preview section (e.g.
.gh-post-preview-social-containerand its child elements) is still present. Since the PR objectives mention that the social preview feature was removed due to functional duplication, please consider whether these styles can also be removed to simplify the codebase.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (6)
ghost/admin/public/assets/icons/arrow-top-right.svgis excluded by!**/*.svgghost/admin/public/assets/icons/external.svgis excluded by!**/*.svgghost/admin/public/assets/icons/laptop.svgis excluded by!**/*.svgghost/admin/public/assets/icons/link.svgis excluded by!**/*.svgghost/admin/public/assets/icons/mobile-phone.svgis excluded by!**/*.svgghost/admin/public/assets/icons/send-email.svgis excluded by!**/*.svg
📒 Files selected for processing (16)
apps/admin-x-settings/src/components/settings/site/AnnouncementBarModal.tsx(1 hunks)ghost/admin/app/components/editor/modals/preview.hbs(2 hunks)ghost/admin/app/components/editor/modals/preview.js(4 hunks)ghost/admin/app/components/editor/modals/preview/browser.hbs(0 hunks)ghost/admin/app/components/editor/modals/preview/email.hbs(0 hunks)ghost/admin/app/styles/components/browser-preview.css(1 hunks)ghost/admin/app/styles/components/publishmenu.css(1 hunks)ghost/admin/app/styles/components/settings-menu.css(2 hunks)ghost/admin/app/styles/layouts/content.css(1 hunks)ghost/admin/app/styles/layouts/editor.css(2 hunks)ghost/admin/app/styles/layouts/post-preview.css(10 hunks)ghost/admin/app/styles/layouts/preview-email.css(2 hunks)ghost/admin/app/styles/patterns/buttons.css(1 hunks)ghost/admin/app/styles/patterns/forms.css(1 hunks)ghost/admin/app/utils/stats.js(1 hunks)ghost/announcement-bar-settings/lib/AnnouncementVisibilityValues.js(1 hunks)
💤 Files with no reviewable changes (2)
- ghost/admin/app/components/editor/modals/preview/email.hbs
- ghost/admin/app/components/editor/modals/preview/browser.hbs
✅ Files skipped from review due to trivial changes (2)
- ghost/announcement-bar-settings/lib/AnnouncementVisibilityValues.js
- apps/admin-x-settings/src/components/settings/site/AnnouncementBarModal.tsx
🔇 Additional comments (27)
ghost/admin/app/components/editor/modals/preview.js (3)
2-2: LGTM!The new imports are correctly added and will be used by the new functionality.
Also applies to: 5-5
20-20: LGTM!Good initialization of previewEmailAddress with the user's email from the session.
58-62: LGTM!The copyPreviewUrl task is well implemented with proper timeout handling based on the testing environment.
ghost/admin/app/utils/stats.js (1)
31-31: LGTM!The terminology change from "Logged out visitors" to "Anonymous visitors" is consistent with the PR objectives.
ghost/admin/app/components/editor/modals/preview.hbs (3)
21-39: LGTM!The member type selection dropdown is well implemented with:
- Clear separation between email and web preview options
- Proper value paths and labels
- Accessible structure
43-88: LGTM!The email preview functionality is well implemented with:
- Proper form structure
- Good error handling
- Appropriate accessibility attributes
- Clear user feedback states
90-102: LGTM!The URL actions are well implemented with:
- Clear copy feedback
- Proper external link handling
- Good use of icons for visual clarity
ghost/admin/app/styles/components/browser-preview.css (1)
22-22: LGTM!The border-radius addition provides a consistent rounded appearance to the preview container.
ghost/admin/app/styles/layouts/preview-email.css (2)
212-213: Update Background Color for Mobile ContainerThe background for the
.fullscreen-modal-total-overlay .gh-pe-mobile-containeris now set tovar(--whitegrey-l2). This update should help distinguish the mobile preview container from other UI elements. Please verify that the contrast and overall appearance meet the new design guidelines.
220-225: Update Background Color for Mobile BezelThe
.gh-pe-mobile-bezelnow usesbackground: var(--white);instead of the previous value. This creates a cleaner separation between the bezel and its container. Confirm that this change integrates well with the new color scheme and maintains consistency across mobile previews.ghost/admin/app/styles/components/settings-menu.css (2)
9-12: Refine Settings Menu Toggle ButtonThe
.settings-menu-togglenow hastop: 24px;and an explicitheight: 34px;. This adjustment improves vertical alignment and ensures a consistent touch area across devices. Please check that these dimensions work well across the different screen sizes defined in the media queries.
117-124: Adjust Header Dimensions for Better LayoutThe header styling in
.settings-menu-headerhas been updated with a fixed height of82pxand reduced padding (padding: 24px;). These changes aim to streamline the header’s appearance. Verify that the new dimensions blend harmoniously with the rest of the interface and remain responsive on smaller screens.ghost/admin/app/styles/patterns/buttons.css (1)
441-442: Update Button Group Text ColorWithin the
.gh-btn-group .gh-btnrule, the text color has been changed tovar(--midgrey-l1). This update should subtly improve the contrast and visual hierarchy of grouped buttons. Please ensure that this color adjustment aligns with the overall theme across different UI components.ghost/admin/app/styles/layouts/post-preview.css (7)
56-83: Enhance Post Preview Button Group and Segment StylingThe control group for post preview actions has been reworked:
- The container (.gh-post-preview-btn-group) now uses flex layout with a defined
gap: 8px;(lines 56–61).- Nested button groups have adjusted spacing via
gap: .2rem;and a slight margin (lines 64–67).- The inner button spans now have updated padding (
0 10px;), fixed height (34px) with a matching line-height, and a hover state that applies a background ofvar(--whitegrey)(lines 69–79).- Additionally, any extraneous margins are reset (lines 81–83).
This creates a more uniform, responsive button arrangement.
85-105: Update Web Preview Segment Select StylingThe
.gh-web-preview-segmentelement and its contained<select>control have been restyled:
- The segment is now fixed at a height of 34px with defined horizontal margins (lines 85–89).
- The select input now has customized padding (
0 28px 0 14px), no border, and rounded corners (lines 91–101).- On hover, the background changes to
var(--whitegrey)to indicate interactivity (lines 103–105).These changes are expected to yield a clearer and more user-friendly selection interface.
107-115: Adjust Preview Select Icon AppearanceThe SVG icon inside the
.gh-select.gh-web-preview-segmenthas been resized and restyled:
- The icon's height is set to 5px with a slight negative top margin (lines 107–110).
- The path stroke is now 4px wide and colored
var(--black)for improved visibility (lines 112–115).These updates help ensure that the icon is crisp and noticeable within the control.
117-124: Refine New Tab Preview Button StylingUpdates to the new tab preview functionality include:
.gh-post-preview-mode svgis now uniformly sized at 18px (lines 117–124).- The
.gh-publish-preview-newtabbutton has been defined with a fixed height (34px), transparent background, and a right margin; its hover state now appliesvar(--whitegrey)(lines 126–134).- The span inside the button receives
0 10pxpadding, and any contained SVG is adjusted to 18px (lines 136–142).These changes ensure that the new tab preview button is both visually consistent and responsive.
Also applies to: 126-134, 136-142
163-171: Improve Post Preview Browser Container LayoutThe browser container for the post preview now features:
- A higher
z-index(9999) for proper layering,- A margin of
0 .8remfor spacing,- Rounded top corners (
border-radius: 8px 8px 0 0),- And a subtle box-shadow as defined by
var(--shadow-1)(lines 163–171).This revamped design should make the browser preview stand out appropriately.
185-212: Streamline Preview URL and Email Trigger ControlsThe controls for copying the preview URL and triggering an email preview have been updated:
- Both use a consistent flex layout with a fixed height (34px) and no border (lines 185–192).
- Their internal text spans have uniform horizontal padding (lines 198–201).
- A hover effect sets the background to
var(--whitegrey)(lines 203–206).- Associated SVG icons are sized at 18px (lines 208–212).
These refinements offer a cleaner and more intuitive user interface for preview actions.
268-274: Refine Email Preview Section StylingSeveral elements within the email preview area have been updated:
- The
.gh-post-preview-email-headernow has a padding of16px 20pxand a white background for clarity (lines 268–272).- The email test button group now employs a defined gap (
gap: .8rem;, lines 385–387).- The dropdown for test emails has been repositioned (using
top: calc(100% + 6px);, etc.), with added padding, border-radius, and box-shadow for visual prominence (lines 406–412).- The email input field is now set to a width of 220px (lines 425–427).
- Additionally, the test email button has updated dimensions and a border-radius of 8px for a more modern touch (lines 392–397).
These changes collectively aim to streamline and enhance the interactivity of the email preview workflow.
Also applies to: 385-412, 425-427, 392-397
ghost/admin/app/styles/patterns/forms.css (1)
182-184: Update SVG Icon Rendering in Input FieldThe rule for
.gh-input-icon.gh-icon-link svghas been updated to enforcefill: none;(removing any fill that might be inherited by its<path>elements). This change should ensure that the link icon appears as intended per the design. Please confirm that no unintended visual side effects occur across browsers.ghost/admin/app/styles/components/publishmenu.css (2)
4-8: Standardized Button Height for Publish Triggers
Setting the height for both the.gh-publish-triggerand.gh-unpublish-triggerto34pxensures consistency across button elements. This adjustment should help maintain uniformity in the UI regardless of content.
247-259: Consistent Height for the Publish Back Button
The.gh-publish-back-buttonnow explicitly uses aheightof34px, aligning it with the trigger buttons. This consistency will improve visual harmony in the publish menu.ghost/admin/app/styles/layouts/editor.css (3)
314-318: Adjusted Header Margin for the Editor
Changing the margin in.gh-editor-headerto24px(previously larger) helps to better utilize the available space and aligns with the revised spacing strategy for the preview area.
1013-1021: New Editor Preview Trigger Style Added
The new definition for.gh-editor-preview-triggersettingheight: 34pxalong with other clear, accessible button styling (background, font settings, and a smooth transition) creates a consistent design with the publish menu buttons.
1023-1025: Introducing Preview Header-Specific Trigger Adjustment
Adding a specific rule for.gh-post-preview-header .gh-editor-preview-triggerwith amargin-left: 4pxensures appropriate separation from preceding elements in the preview header. This localized spacing tweak complements the overall design improvements.ghost/admin/app/styles/layouts/content.css (1)
167-172: New Content Filter Divider Component
The added.gh-contentfilter-dividerclass introduces a simple vertical divider (1px width, 16px height) with a lightgrey background. This new element can improve the visual separation in content filter components. It might be useful to test its responsiveness and appearance across different devices.
Ref https://linear.app/ghost/issue/PLG-343/improve-the-preview-modal-design - Made the newsletter dropdown and the subject edit field more explicit/discoverable
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (2)
ghost/admin/app/components/editor/modals/preview/email.hbs (1)
30-31: Consider semantic separator.Instead of using an
<hr>tag, consider using CSS borders or a more semantic way to separate sections.-<hr> +<div class="gh-email-preview-section-separator" role="separator"></div>Add to your CSS:
.gh-email-preview-section-separator { border-top: 1px solid var(--whitegrey); margin: 1.2rem 0; }ghost/admin/app/styles/layouts/post-preview.css (1)
448-497: Review of Social Preview Styles
Although the PR objectives indicate the removal of the social preview feature, this section (covering.gh-post-preview-social-containerand related classes up to the beginning of the social Twitter and OG containers) remains in the CSS. If these styles are no longer in use, consider removing them to reduce code clutter and improve maintainability.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (5)
ghost/admin/app/components/editor/modals/preview/email.hbs(2 hunks)ghost/admin/app/components/editor/modals/preview/email/email-subject.hbs(1 hunks)ghost/admin/app/styles/layouts/post-preview.css(11 hunks)ghost/admin/app/styles/layouts/preview-email.css(4 hunks)ghost/admin/app/styles/patterns/forms.css(3 hunks)
🚧 Files skipped from review as they are similar to previous changes (2)
- ghost/admin/app/styles/layouts/preview-email.css
- ghost/admin/app/styles/patterns/forms.css
⏰ Context from checks skipped due to timeout of 90000ms (11)
- GitHub Check: Regression tests (Node 20.11.1, sqlite3)
- GitHub Check: Ghost-CLI tests
- GitHub Check: Regression tests (Node 20.11.1, mysql8)
- GitHub Check: Admin-X Settings tests
- GitHub Check: Unit tests (Node 20.11.1)
- GitHub Check: Database tests (Node 20.11.1, sqlite3)
- GitHub Check: Unit tests (Node 18.12.1)
- GitHub Check: Database tests (Node 20.11.1, mysql8)
- GitHub Check: Database tests (Node 18.12.1, mysql8)
- GitHub Check: Admin tests - Chrome
- GitHub Check: Lint
🔇 Additional comments (42)
ghost/admin/app/components/editor/modals/preview/email/email-subject.hbs (1)
2-10: LGTM! Good accessibility improvements.The changes simplify the UI while improving accessibility through the explicit aria-label. The use of consistent styling classes and maintaining core functionality (blur and Enter key handlers) is good.
ghost/admin/app/components/editor/modals/preview/email.hbs (2)
6-7: Good use of semantic HTML and accessibility improvements.Converting divs to form elements and adding explicit labels improves accessibility. However, ensure these forms don't trigger unintended submissions.
Add
@submit={{this.preventDefault}}or equivalent to prevent default form submission:-<form class="gh-email-preview-newsletter-select" data-test-email-preview-newsletter-select-section> +<form class="gh-email-preview-newsletter-select" data-test-email-preview-newsletter-select-section {{on "submit" this.preventDefault}}>Also applies to: 32-33
14-15: Verify dropdown accessibility with new styling classes.The updated dropdown classes (
gh-dropdown-x,gh-publish-newsletter-dropdown) should maintain proper accessibility, including sufficient color contrast and focus states.ghost/admin/app/styles/layouts/post-preview.css (39)
11-13: Header Container Update: Revised Margin, Padding, and Background
The update removes the previous margin and introduces a new padding and background (var(--grey-50)) for the header. This aligns with the refreshed post preview design.
18-20: Left Section Alignment Enhancement
The.gh-post-preview-header .leftblock now uses aleft: 20pxoffset and flex layout with aligned items, ensuring proper positioning of the header’s left-aligned elements.
23-25: Header Title Styling Adjustment
The header title (h2) now has its margin reset and font-size set to2rem, which supports a cleaner and more modern appearance.
30-34: Right Section Position and Spacing Update
Updating the.gh-post-preview-header .rightblock to useright: 20px, flex-based alignment, and agap: 8pxensures the right-aligned elements are spaced consistently and visually balanced with the left side.
36-38: Button Editor Base Style Refinement
The removal of the background (usingbackground: none !important;) in the.gh-post-preview-header .gh-btn-editorclass helps maintain a minimalist style for editor buttons.
40-41: Enhanced Hover State for Editor Button
The hover effect now applies avar(--whitegrey)background, providing users with clear interactive feedback when hovering over the editor button.
56-60: Introduction of Post Preview Button Group Layout
The new.gh-post-preview-btn-grouprule establishes a flex layout with spaced content, which is essential for a tidy arrangement of multiple preview action buttons.
64-65: Button Group Spacing Adjustments
Applying a smallgapand margin to the.gh-post-preview-btn-group .gh-btn-groupimproves the consistency and appearance of button clusters.
69-75: Consistent Button Span Sizing and Padding
The span elements within the button groups now have a fixed height of34px, a horizontal padding of10px, and no background or shadow, ensuring uniform appearance across buttons.
77-79: Button Hover Feedback in Group
Defining a hover state (with background change tovar(--whitegrey)) for the span elements improves user experience by clearly indicating interactivity.
81-83: Removal of Unwanted Margins on Buttons
The update explicitly resets the margin on.gh-post-preview-btn-group .gh-btnto ensure proper alignment with other elements.
85-89: Web Preview Segment Introduction
A new.gh-web-preview-segmentclass is added with defined height, margin, and a transparent background. This creates a clear, consistent layout for the web preview section.
91-101: Selective Styling for Dropdown in Web Preview
The styling for.gh-web-preview-segment selectnow sets height, padding, transparent background, no border, and clear typography with a rounded border. These changes ensure that the dropdown integrates seamlessly with the overall design.
103-105: Dropdown Hover State for Web Preview
The hover state for the select element changes the background tovar(--whitegrey), enhancing usability by providing visible feedback on user interaction.
107-110: SVG Icon Adjustment in Web Preview Dropdown
SVG icons within.gh-select.gh-web-preview-segmentnow have a fixed height and a slight upward margin tweak (margin-top: -.1em) to ensure proper vertical alignment.
112-114: SVG Path Stroke Enhancement
Setting astroke-widthof4pxand the stroke color asvar(--black)on SVG paths improves the clarity and consistency of icons within the web preview controls.
118-122: Preview Mode Icon Sizing Update
Adjusting the icon size within.gh-post-preview-modeto18pxby18pxensures a balanced and modern visual alignment in preview mode.
125-130: Publish New Tab Button Style Overhaul
The.gh-publish-preview-newtabbutton now has an explicit height, transparent background, no border, and amargin-rightadjustment, which aligns it with the overall updated design language.
132-133: Refined Hover for Publish New Tab Button
A hover state has been added that applies avar(--whitegrey)background, enhancing user awareness of interactivity of the new tab action.
136-138: Consistent Padding for New Tab Button Text
Ensuring that the<span>within the publish preview button has consistent horizontal padding guarantees an adequate clickable area and balanced visual appearance.
140-142: SVG Sizing for New Tab Action
The SVG icon within the publish preview button is now consistently sized to 18px, ensuring visual harmony within the header.
167-170: Browser Container Visual Enhancements
The browser container now includes an increasedz-index, margin adjustments, rounded top corners (border-radius: 8px 8px 0 0), and a subtle box-shadow. These changes help the preview pane stand out while remaining well integrated in the layout.
185-192: URL & Email Trigger Element Styling
The newly styled.gh-post-preview-urland.gh-post-preview-email-triggerclasses now adopt a flex layout with a set height and clear typography. This ensures that interactive elements are consistently sized and positioned within the post preview header.
198-201: Padding for URL and Email Trigger Text Elements
The span elements inside URL and email triggers now receive standard horizontal padding (0 10px), ensuring textual content remains comfortably spaced.
203-206: Interactive Hover States for URL & Email Triggers
Defining a hover effect that changes the background tovar(--whitegrey)provides clear user feedback on these interactive elements.
208-212: Uniform SVG Icon Dimensions for URL and Email Trigger
Ensuring that SVGs within these triggers are sized uniformly (18px by 18px) maintains consistency and clarity in the interface.
269-276: Email Header Section Redesign
The updated.gh-post-preview-email-headernow uses a column flex layout with a defined gap, a bottom border, ample padding, and a white background to better segment and highlight the email preview header.
277-279: Consistent Label Sizing in Email Header
Specifying a minimum width for labels ensures that form elements in the email header maintain uniformity, enhancing overall readability.
281-284: Smooth Transitions for Email Input Fields
Applying a transparent background along with a transition (all .15s ease) to.gh-input-xprovides a subtle animation on hover, enhancing the user experience without being distracting.
286-288: Interactive Hover State for Email Inputs
The hover effect on inputs (excluding focus) now changes their background tovar(--whitegrey), offering users immediate feedback while preserving form clarity.
290-293: Consistent Horizontal Rule Styling in Email Header
Resetting margins and applying a uniform border color for<hr>elements in the email header maintains visual consistency with the rest of the interface.
301-305: Newsletter Preview Selection Layout
The new.gh-email-preview-newsletter-selectrules use flex layout with defined gaps and alignment, ensuring that newsletter selection elements are spaced predictably and neatly.
307-309: Uniform Label Width in Newsletter Selector
The labels in the newsletter selection are explicitly set to a width of56px, promoting consistency across the form elements.
311-314: Icon Spacing for Newsletter Trigger
Adjusting the margin-left for the newsletter trigger SVG ensures that icons are spaced correctly relative to adjacent text, supporting a cleaner UI layout.
405-412: Email Test Dropdown Positioning and Styling
The styling for.gh-post-preview-email-test-dropdownnow features precise positioning (usingtop: calc(100% + 6px),right: 0,left: auto), padding, rounded corners, and a box-shadow to differentiate the dropdown from the background.
426-428: Email Input Width Adjustment
Setting the.gh-post-preview-email-inputwidth to220pximproves readability and provides a consistent input experience within the email preview form.
384-387: Optimized Spacing in the Test Email Section
The updated.gh-post-preview-email-testnow uses a defined gap (.8rem) between elements, ensuring that controls are neither too cramped nor excessively spaced.
393-398: Responsive Styling for Test Email Buttons
The test email buttons have been updated with full width, a minimum width, adjusted margins, and rounded corners, enhancing usability and consistency with the new design.
371-371: Email Mockup Styling Enhancements
Within the.gh-post-preview-email-mockupblock, adjustments to margin, border-radius, and box-shadow create a visually appealing and clearly delineated email preview area that fits the refreshed design aesthetic.Also applies to: 374-375
Ref https://linear.app/ghost/issue/PLG-343/improve-the-preview-modal-design - Aligned the publish and update modals header style with the preview modal header style
There was a problem hiding this comment.
Actionable comments posted: 1
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (4)
ghost/admin/app/components/editor/modals/publish-flow.hbs(2 hunks)ghost/admin/app/components/editor/modals/update-flow.hbs(1 hunks)ghost/admin/app/styles/components/publishmenu.css(3 hunks)ghost/admin/app/styles/layouts/post-preview.css(11 hunks)
🚧 Files skipped from review as they are similar to previous changes (2)
- ghost/admin/app/styles/components/publishmenu.css
- ghost/admin/app/styles/layouts/post-preview.css
🔇 Additional comments (4)
ghost/admin/app/components/editor/modals/publish-flow.hbs (3)
3-3: LGTM! Header title change improves modal consistency.The addition of the h2 element aligns with the design improvements across modal components.
6-6: LGTM! Button group class change improves semantics.The new
gh-btn-group-rightclass provides better semantic meaning compared to utility classes.
17-22: LGTM! Button changes improve clarity and consistency.The simplified button class and updated text better reflect the button's purpose.
ghost/admin/app/components/editor/modals/update-flow.hbs (1)
7-8: LGTM! Button changes improve clarity and consistency.The simplified button attributes and updated text better reflect the button's purpose.
| <button class="gh-btn-editor gh-publish-back-button" title="Close" type="button" {{on "click" @close}}> | ||
| <span>{{svg-jar "arrow-left"}} Editor</span> | ||
| </button> | ||
| <h2>{{if post.isScheduled "Unschedule" "Unpublish"}}</h2>> |
There was a problem hiding this comment.
Fix syntax error in header title.
Remove the extra ">" character at the end of the line.
- <h2>{{if post.isScheduled "Unschedule" "Unpublish"}}</h2>>
+ <h2>{{if post.isScheduled "Unschedule" "Unpublish"}}</h2>📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| <h2>{{if post.isScheduled "Unschedule" "Unpublish"}}</h2>> | |
| <h2>{{if post.isScheduled "Unschedule" "Unpublish"}}</h2> |
Ref https://linear.app/ghost/issue/PLG-343/improve-the-preview-modal-design