From 53a0c1481968bbc4c88988d5e71e14ed6ae990fe Mon Sep 17 00:00:00 2001 From: ramon Date: Tue, 7 Nov 2023 15:06:49 +1100 Subject: [PATCH 1/8] First commit: - add basic function to return translated labels of top-level changes - showing humantime diff for changes < 1 day - rearranging elements --- .../screen-revisions/get-revision-changes.js | 40 ++++++++++++++++ .../screen-revisions/revisions-buttons.js | 47 ++++++++++++++----- 2 files changed, 75 insertions(+), 12 deletions(-) create mode 100644 packages/edit-site/src/components/global-styles/screen-revisions/get-revision-changes.js diff --git a/packages/edit-site/src/components/global-styles/screen-revisions/get-revision-changes.js b/packages/edit-site/src/components/global-styles/screen-revisions/get-revision-changes.js new file mode 100644 index 00000000000000..2a3d68af5e584d --- /dev/null +++ b/packages/edit-site/src/components/global-styles/screen-revisions/get-revision-changes.js @@ -0,0 +1,40 @@ +/** + * WordPress dependencies + */ +import { __ } from '@wordpress/i18n'; + +const translationMap = { + blocks: __( 'Block styles' ), + border: __( 'Border' ), + colors: __( 'Colors' ), + elements: __( 'Elements' ), + link: __( 'Links' ), + layout: __( 'Layout' ), + spacing: __( 'Spacing' ), + typography: __( 'Typography' ), +}; + +/** + * Returns an array of translated strings describing high level global styles and settings. + * + * @param {Object} revision + * @param {Object} revision.settings Global styles settings. + * @param {Object} revision.styles Global styles. + * @return {string[] | []} An array of translated labels. + */ +export default function getGlobalStylesChanges( { + settings = {}, + styles = {}, +} ) { + const changes = []; + if ( Object.keys( settings ).length > 0 ) { + changes.push( __( 'Global settings' ) ); + } + Object.entries( styles ).forEach( ( [ key, value ] ) => { + if ( translationMap[ key ] && !! value ) { + changes.push( translationMap[ key ] ); + } + } ); + + return changes; +} diff --git a/packages/edit-site/src/components/global-styles/screen-revisions/revisions-buttons.js b/packages/edit-site/src/components/global-styles/screen-revisions/revisions-buttons.js index feec0f25ac8823..775b5e329963f2 100644 --- a/packages/edit-site/src/components/global-styles/screen-revisions/revisions-buttons.js +++ b/packages/edit-site/src/components/global-styles/screen-revisions/revisions-buttons.js @@ -12,6 +12,13 @@ import { dateI18n, getDate, humanTimeDiff, getSettings } from '@wordpress/date'; import { store as coreStore } from '@wordpress/core-data'; import { useSelect } from '@wordpress/data'; +/** + * Internal dependencies + */ +import getGlobalStylesChanges from './get-revision-changes'; + +const DAY_IN_MILLISECONDS = 60 * 60 * 1000 * 24; + /** * Returns a button label for the revision. * @@ -65,10 +72,14 @@ function getRevisionLabel( revision ) { * @return {JSX.Element} The modal component. */ function RevisionsButtons( { userRevisions, selectedRevisionId, onChange } ) { - const currentTheme = useSelect( - ( select ) => select( coreStore ).getCurrentTheme(), - [] - ); + const { currentTheme, currentUser } = useSelect( ( select ) => { + const { getCurrentTheme, getCurrentUser } = select( coreStore ); + return { + currentTheme: getCurrentTheme(), + currentUser: getCurrentUser(), + }; + }, [] ); + return (
    { userRevisions.map( ( revision, index ) => { const { id, author, modified } = revision; - const authorDisplayName = author?.name || __( 'User' ); - const authorAvatar = author?.avatar_urls?.[ '48' ]; const isUnsaved = 'unsaved' === revision?.id; + // Unsaved changes are created by the current user. + const revisionAuthor = isUnsaved ? currentUser : author; + const authorDisplayName = revisionAuthor?.name || __( 'User' ); + const authorAvatar = revisionAuthor?.avatar_urls?.[ '48' ]; const isSelected = selectedRevisionId ? selectedRevisionId === revision?.id : index === 0; const isReset = 'parent' === revision?.id; + const displayDate = + modified && + getDate().getTime() - getDate( modified ).getTime() > + DAY_IN_MILLISECONDS + ? dateI18n( 'M j Y', getDate( modified ) ) + : humanTimeDiff( modified ); return (
  1. + + { getGlobalStylesChanges( + revision + ).join( ', ' ) } + + { { isUnsaved ? sprintf( /* translators: %s author display name */ @@ -131,11 +159,6 @@ function RevisionsButtons( { userRevisions, selectedRevisionId, onChange } ) { __( 'Changes saved by %s' ), authorDisplayName ) } - - { ) } From 1137710b03d28498a85f308d481daa2f3e45f12b Mon Sep 17 00:00:00 2001 From: ramon Date: Wed, 8 Nov 2023 14:21:29 +1100 Subject: [PATCH 2/8] - timeline redesign - minor optimization refactoring --- .../screen-revisions/get-revision-changes.js | 4 +- .../screen-revisions/revisions-buttons.js | 74 ++++++++-------- .../global-styles/screen-revisions/style.scss | 84 ++++++++++++------- 3 files changed, 93 insertions(+), 69 deletions(-) diff --git a/packages/edit-site/src/components/global-styles/screen-revisions/get-revision-changes.js b/packages/edit-site/src/components/global-styles/screen-revisions/get-revision-changes.js index 2a3d68af5e584d..6461743bab5003 100644 --- a/packages/edit-site/src/components/global-styles/screen-revisions/get-revision-changes.js +++ b/packages/edit-site/src/components/global-styles/screen-revisions/get-revision-changes.js @@ -30,8 +30,8 @@ export default function getGlobalStylesChanges( { if ( Object.keys( settings ).length > 0 ) { changes.push( __( 'Global settings' ) ); } - Object.entries( styles ).forEach( ( [ key, value ] ) => { - if ( translationMap[ key ] && !! value ) { + Object.keys( styles ).forEach( ( key ) => { + if ( translationMap[ key ] ) { changes.push( translationMap[ key ] ); } } ); diff --git a/packages/edit-site/src/components/global-styles/screen-revisions/revisions-buttons.js b/packages/edit-site/src/components/global-styles/screen-revisions/revisions-buttons.js index 775b5e329963f2..a9b53805256f81 100644 --- a/packages/edit-site/src/components/global-styles/screen-revisions/revisions-buttons.js +++ b/packages/edit-site/src/components/global-styles/screen-revisions/revisions-buttons.js @@ -18,21 +18,24 @@ import { useSelect } from '@wordpress/data'; import getGlobalStylesChanges from './get-revision-changes'; const DAY_IN_MILLISECONDS = 60 * 60 * 1000 * 24; +const dateFormat = getSettings().formats.date; +const datetimeAbbreviatedFormat = getSettings().formats.datetimeAbbreviated; /** * Returns a button label for the revision. * - * @param {Object} revision A revision object. + * @param {string|number} id A revision object. + * @param {boolean} isLatest Whether the revision is the most current. + * @param {string} authorDisplayName Author name. + * @param {Date} modifiedDate Revision modified date object. * @return {string} Translated label. */ -function getRevisionLabel( revision ) { - const authorDisplayName = revision?.author?.name || __( 'User' ); - - if ( 'parent' === revision?.id ) { +function getRevisionLabel( id, isLatest, authorDisplayName, modifiedDate ) { + if ( 'parent' === id ) { return __( 'Reset the styles to the theme defaults' ); } - if ( 'unsaved' === revision?.id ) { + if ( 'unsaved' === id ) { return sprintf( /* translators: %s author display name */ __( 'Unsaved changes by %s' ), @@ -40,12 +43,9 @@ function getRevisionLabel( revision ) { ); } - const formattedDate = dateI18n( - getSettings().formats.datetimeAbbreviated, - getDate( revision?.modified ) - ); + const formattedDate = dateI18n( datetimeAbbreviatedFormat, modifiedDate ); - return revision?.isLatest + return isLatest ? sprintf( /* translators: %1$s author display name, %2$s: revision creation date */ __( 'Changes saved by %1$s on %2$s (current)' ), @@ -72,13 +72,16 @@ function getRevisionLabel( revision ) { * @return {JSX.Element} The modal component. */ function RevisionsButtons( { userRevisions, selectedRevisionId, onChange } ) { - const { currentTheme, currentUser } = useSelect( ( select ) => { + const { currentThemeName, currentUser } = useSelect( ( select ) => { const { getCurrentTheme, getCurrentUser } = select( coreStore ); + const currentTheme = getCurrentTheme(); return { - currentTheme: getCurrentTheme(), + currentThemeName: + currentTheme?.name?.rendered || currentTheme?.stylesheet, currentUser: getCurrentUser(), }; }, [] ); + const dateNowInMs = getDate().getTime(); return (
      { userRevisions.map( ( revision, index ) => { - const { id, author, modified } = revision; - const isUnsaved = 'unsaved' === revision?.id; + const { id, isLatest, author, modified } = revision; + const isUnsaved = 'unsaved' === id; // Unsaved changes are created by the current user. const revisionAuthor = isUnsaved ? currentUser : author; const authorDisplayName = revisionAuthor?.name || __( 'User' ); const authorAvatar = revisionAuthor?.avatar_urls?.[ '48' ]; const isSelected = selectedRevisionId - ? selectedRevisionId === revision?.id + ? selectedRevisionId === id : index === 0; - const isReset = 'parent' === revision?.id; + const isReset = 'parent' === id; + const modifiedDate = getDate( modified ); const displayDate = modified && - getDate().getTime() - getDate( modified ).getTime() > - DAY_IN_MILLISECONDS - ? dateI18n( 'M j Y', getDate( modified ) ) + dateNowInMs - modifiedDate.getTime() > DAY_IN_MILLISECONDS + ? dateI18n( dateFormat, modifiedDate ) : humanTimeDiff( modified ); return ( @@ -121,20 +124,27 @@ function RevisionsButtons( { userRevisions, selectedRevisionId, onChange } ) { onClick={ () => { onChange( revision ); } } - label={ getRevisionLabel( revision ) } + label={ getRevisionLabel( + id, + isLatest, + authorDisplayName, + modifiedDate + ) } > { isReset ? ( { __( 'Default styles' ) } - { currentTheme?.name?.rendered || - currentTheme?.stylesheet } + { currentThemeName } ) : ( - ) } diff --git a/packages/edit-site/src/components/global-styles/screen-revisions/style.scss b/packages/edit-site/src/components/global-styles/screen-revisions/style.scss index 238f3f7d116e19..b5249621673888 100644 --- a/packages/edit-site/src/components/global-styles/screen-revisions/style.scss +++ b/packages/edit-site/src/components/global-styles/screen-revisions/style.scss @@ -8,62 +8,80 @@ margin: 0; li { margin-bottom: 0; - border-left: 1px solid $gray-300; } } .edit-site-global-styles-screen-revisions__revision-item { position: relative; - padding: $grid-unit-10 0 $grid-unit-10 $grid-unit-15; + padding-left: $grid-unit-20; + overflow: hidden; + cursor: pointer; - &:first-child { - padding-top: 0; + &:hover { + background: rgba(var(--wp-admin-theme-color--rgb), 0.04); + .edit-site-global-styles-screen-revisions__date { + color: var(--wp-admin-theme-color); + } } - &:last-child { - padding-bottom: 0; + &::before, + &::after { + position: absolute; + content: "\a"; + display: block; } &::before { background: $gray-300; border-radius: 50%; - content: "\a"; - display: inline-block; height: $grid-unit-10; width: $grid-unit-10; - position: absolute; - top: 50%; - left: 0; + top: $grid-unit-20 + 2; + left: $grid-unit-20 + 1; // So the circle is centered on the line. transform: translate(-50%, -50%); + z-index: 1; } &.is-selected::before { background: var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba)); } -} -.edit-site-global-styles-screen-revisions__revision-button { - width: 100%; - height: auto; - display: block; - padding: $grid-unit-10 $grid-unit-15; + &::after { + height: 100%; + left: $grid-unit-20; + top: 0; + width: 0; + border: 0.5px solid #ddd; + } - &:hover { - background: rgba(var(--wp-admin-theme-color--rgb), 0.04); + &:first-child::after { + top: $grid-unit-20 + 2; + } - .edit-site-global-styles-screen-revisions__date { - color: var(--wp-admin-theme-color); + &:last-child::after { + height: $grid-unit-20 + 2; + } + + // Nested to override specificity of .components-button. + .edit-site-global-styles-screen-revisions__revision-button { + width: 100%; + height: auto; + display: block; + padding: $grid-unit-15 $grid-unit-15 $grid-unit-15 $grid-unit-30; + &:focus, + &:active { + outline: 0; + box-shadow: none; } } } .is-selected { + color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba)); + background: rgba(var(--wp-admin-theme-color--rgb), 0.04); .edit-site-global-styles-screen-revisions__revision-button { - color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba)); opacity: 1; - background: rgba(var(--wp-admin-theme-color--rgb), 0.04); } - - .edit-site-global-styles-screen-revisions__meta { + .edit-site-global-styles-screen-revisions__date { color: var(--wp-admin-theme-color); } } @@ -78,23 +96,31 @@ flex-direction: column; align-items: flex-start; gap: $grid-unit-10; + .edit-site-global-styles-screen-revisions__date { + text-transform: uppercase; + font-weight: 600; + } } .edit-site-global-styles-screen-revisions__meta { - color: $gray-700; + color: $gray-600; display: flex; - justify-content: space-between; + justify-content: start; width: 100%; - align-items: center; - text-align: left; img { width: $grid-unit-20; height: $grid-unit-20; border-radius: 100%; + margin-right: $grid-unit-10; } } +.edit-site-global-styles-screen-revisions__changes { + text-align: left; + color: $gray-900; +} + .edit-site-global-styles-screen-revisions__loading { margin: $grid-unit-30 auto !important; } From a5bd0ed0c5215af0bfde8a13b9c0e068d49b7b27 Mon Sep 17 00:00:00 2001 From: ramon Date: Mon, 13 Nov 2023 14:53:10 +1100 Subject: [PATCH 3/8] There is no "colors" property --- .../global-styles/screen-revisions/get-revision-changes.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/edit-site/src/components/global-styles/screen-revisions/get-revision-changes.js b/packages/edit-site/src/components/global-styles/screen-revisions/get-revision-changes.js index 6461743bab5003..3a3b835668f81e 100644 --- a/packages/edit-site/src/components/global-styles/screen-revisions/get-revision-changes.js +++ b/packages/edit-site/src/components/global-styles/screen-revisions/get-revision-changes.js @@ -6,7 +6,7 @@ import { __ } from '@wordpress/i18n'; const translationMap = { blocks: __( 'Block styles' ), border: __( 'Border' ), - colors: __( 'Colors' ), + color: __( 'Colors' ), elements: __( 'Elements' ), link: __( 'Links' ), layout: __( 'Layout' ), From 064c6dc69a4e6080c5185a03bd7620257461bfd3 Mon Sep 17 00:00:00 2001 From: ramon Date: Wed, 15 Nov 2023 15:48:08 +1100 Subject: [PATCH 4/8] Some style tweaks --- .../src/components/global-styles/screen-revisions/style.scss | 3 +++ 1 file changed, 3 insertions(+) diff --git a/packages/edit-site/src/components/global-styles/screen-revisions/style.scss b/packages/edit-site/src/components/global-styles/screen-revisions/style.scss index b5249621673888..94ed868cf3a89d 100644 --- a/packages/edit-site/src/components/global-styles/screen-revisions/style.scss +++ b/packages/edit-site/src/components/global-styles/screen-revisions/style.scss @@ -99,6 +99,7 @@ .edit-site-global-styles-screen-revisions__date { text-transform: uppercase; font-weight: 600; + font-size: 12px; } } @@ -107,6 +108,8 @@ display: flex; justify-content: start; width: 100%; + align-items: center; + font-size: 11px; img { width: $grid-unit-20; From 857ee07ab7f52337b9b880bfaf7fd84f92a5e23b Mon Sep 17 00:00:00 2001 From: ramon Date: Wed, 15 Nov 2023 15:54:47 +1100 Subject: [PATCH 5/8] Tweak font sizes --- .../src/components/global-styles/screen-revisions/style.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/edit-site/src/components/global-styles/screen-revisions/style.scss b/packages/edit-site/src/components/global-styles/screen-revisions/style.scss index 94ed868cf3a89d..954c9854bceae8 100644 --- a/packages/edit-site/src/components/global-styles/screen-revisions/style.scss +++ b/packages/edit-site/src/components/global-styles/screen-revisions/style.scss @@ -109,7 +109,7 @@ justify-content: start; width: 100%; align-items: center; - font-size: 11px; + font-size: 12px; img { width: $grid-unit-20; From 77ccfcf2ac2d175cc53499ae5838bd47ed38592a Mon Sep 17 00:00:00 2001 From: ramon Date: Thu, 16 Nov 2023 10:53:09 +1100 Subject: [PATCH 6/8] Display Unsaved for unsaved changes --- .../screen-revisions/revisions-buttons.js | 18 ++++++++++++------ 1 file changed, 12 insertions(+), 6 deletions(-) diff --git a/packages/edit-site/src/components/global-styles/screen-revisions/revisions-buttons.js b/packages/edit-site/src/components/global-styles/screen-revisions/revisions-buttons.js index a9b53805256f81..adf9f2abd27198 100644 --- a/packages/edit-site/src/components/global-styles/screen-revisions/revisions-buttons.js +++ b/packages/edit-site/src/components/global-styles/screen-revisions/revisions-buttons.js @@ -140,12 +140,18 @@ function RevisionsButtons( { userRevisions, selectedRevisionId, onChange } ) { ) : ( - + { isUnsaved ? ( + + { __( '(Unsaved)' ) } + + ) : ( + + ) } { getGlobalStylesChanges( revision From e21cc6b350ede6dea81b4b4ac1a3dcc8c17cc4ec Mon Sep 17 00:00:00 2001 From: ramon Date: Fri, 17 Nov 2023 12:21:31 +1100 Subject: [PATCH 7/8] Remove revision changes labels. To be done in a follow up --- .../screen-revisions/get-revision-changes.js | 40 ------------------- .../screen-revisions/revisions-buttons.js | 10 ----- .../global-styles/screen-revisions/style.scss | 5 --- 3 files changed, 55 deletions(-) delete mode 100644 packages/edit-site/src/components/global-styles/screen-revisions/get-revision-changes.js diff --git a/packages/edit-site/src/components/global-styles/screen-revisions/get-revision-changes.js b/packages/edit-site/src/components/global-styles/screen-revisions/get-revision-changes.js deleted file mode 100644 index 3a3b835668f81e..00000000000000 --- a/packages/edit-site/src/components/global-styles/screen-revisions/get-revision-changes.js +++ /dev/null @@ -1,40 +0,0 @@ -/** - * WordPress dependencies - */ -import { __ } from '@wordpress/i18n'; - -const translationMap = { - blocks: __( 'Block styles' ), - border: __( 'Border' ), - color: __( 'Colors' ), - elements: __( 'Elements' ), - link: __( 'Links' ), - layout: __( 'Layout' ), - spacing: __( 'Spacing' ), - typography: __( 'Typography' ), -}; - -/** - * Returns an array of translated strings describing high level global styles and settings. - * - * @param {Object} revision - * @param {Object} revision.settings Global styles settings. - * @param {Object} revision.styles Global styles. - * @return {string[] | []} An array of translated labels. - */ -export default function getGlobalStylesChanges( { - settings = {}, - styles = {}, -} ) { - const changes = []; - if ( Object.keys( settings ).length > 0 ) { - changes.push( __( 'Global settings' ) ); - } - Object.keys( styles ).forEach( ( key ) => { - if ( translationMap[ key ] ) { - changes.push( translationMap[ key ] ); - } - } ); - - return changes; -} diff --git a/packages/edit-site/src/components/global-styles/screen-revisions/revisions-buttons.js b/packages/edit-site/src/components/global-styles/screen-revisions/revisions-buttons.js index adf9f2abd27198..e5cbda37aa61eb 100644 --- a/packages/edit-site/src/components/global-styles/screen-revisions/revisions-buttons.js +++ b/packages/edit-site/src/components/global-styles/screen-revisions/revisions-buttons.js @@ -12,11 +12,6 @@ import { dateI18n, getDate, humanTimeDiff, getSettings } from '@wordpress/date'; import { store as coreStore } from '@wordpress/core-data'; import { useSelect } from '@wordpress/data'; -/** - * Internal dependencies - */ -import getGlobalStylesChanges from './get-revision-changes'; - const DAY_IN_MILLISECONDS = 60 * 60 * 1000 * 24; const dateFormat = getSettings().formats.date; const datetimeAbbreviatedFormat = getSettings().formats.datetimeAbbreviated; @@ -152,11 +147,6 @@ function RevisionsButtons( { userRevisions, selectedRevisionId, onChange } ) { { displayDate } ) } - - { getGlobalStylesChanges( - revision - ).join( ', ' ) } - { Date: Fri, 17 Nov 2023 16:37:12 +1100 Subject: [PATCH 8/8] Moving date format setting call into the comoponent rejigging getLabel function adding css var --- .../screen-revisions/revisions-buttons.js | 37 ++++++++++--------- .../global-styles/screen-revisions/style.scss | 2 +- 2 files changed, 21 insertions(+), 18 deletions(-) diff --git a/packages/edit-site/src/components/global-styles/screen-revisions/revisions-buttons.js b/packages/edit-site/src/components/global-styles/screen-revisions/revisions-buttons.js index e5cbda37aa61eb..2786bf6d791212 100644 --- a/packages/edit-site/src/components/global-styles/screen-revisions/revisions-buttons.js +++ b/packages/edit-site/src/components/global-styles/screen-revisions/revisions-buttons.js @@ -13,19 +13,22 @@ import { store as coreStore } from '@wordpress/core-data'; import { useSelect } from '@wordpress/data'; const DAY_IN_MILLISECONDS = 60 * 60 * 1000 * 24; -const dateFormat = getSettings().formats.date; -const datetimeAbbreviatedFormat = getSettings().formats.datetimeAbbreviated; /** * Returns a button label for the revision. * - * @param {string|number} id A revision object. - * @param {boolean} isLatest Whether the revision is the most current. - * @param {string} authorDisplayName Author name. - * @param {Date} modifiedDate Revision modified date object. + * @param {string|number} id A revision object. + * @param {boolean} isLatest Whether the revision is the most current. + * @param {string} authorDisplayName Author name. + * @param {string} formattedModifiedDate Revision modified date formatted. * @return {string} Translated label. */ -function getRevisionLabel( id, isLatest, authorDisplayName, modifiedDate ) { +function getRevisionLabel( + id, + isLatest, + authorDisplayName, + formattedModifiedDate +) { if ( 'parent' === id ) { return __( 'Reset the styles to the theme defaults' ); } @@ -38,20 +41,18 @@ function getRevisionLabel( id, isLatest, authorDisplayName, modifiedDate ) { ); } - const formattedDate = dateI18n( datetimeAbbreviatedFormat, modifiedDate ); - return isLatest ? sprintf( /* translators: %1$s author display name, %2$s: revision creation date */ __( 'Changes saved by %1$s on %2$s (current)' ), authorDisplayName, - formattedDate + formattedModifiedDate ) : sprintf( /* translators: %1$s author display name, %2$s: revision creation date */ __( 'Changes saved by %1$s on %2$s' ), authorDisplayName, - formattedDate + formattedModifiedDate ); } @@ -77,6 +78,7 @@ function RevisionsButtons( { userRevisions, selectedRevisionId, onChange } ) { }; }, [] ); const dateNowInMs = getDate().getTime(); + const { date: dateFormat, datetimeAbbreviated } = getSettings().formats; return (
        DAY_IN_MILLISECONDS ? dateI18n( dateFormat, modifiedDate ) : humanTimeDiff( modified ); + const revisionLabel = getRevisionLabel( + id, + isLatest, + authorDisplayName, + dateI18n( datetimeAbbreviated, modifiedDate ) + ); return (
      1. { onChange( revision ); } } - label={ getRevisionLabel( - id, - isLatest, - authorDisplayName, - modifiedDate - ) } + label={ revisionLabel } > { isReset ? ( diff --git a/packages/edit-site/src/components/global-styles/screen-revisions/style.scss b/packages/edit-site/src/components/global-styles/screen-revisions/style.scss index ce6569a4c54f3d..6598fcb5ce1c74 100644 --- a/packages/edit-site/src/components/global-styles/screen-revisions/style.scss +++ b/packages/edit-site/src/components/global-styles/screen-revisions/style.scss @@ -50,7 +50,7 @@ left: $grid-unit-20; top: 0; width: 0; - border: 0.5px solid #ddd; + border: 0.5px solid $gray-300; } &:first-child::after {