release: new version

- [Feat] Reorganised main customizer panels for better UX - [Fix] hide Super Page Cache plugin from dashboard if its pro version is installed - Improved UI/UX for the Get Started section in the dashboard page - Improved style of customizer sections - Updated starter content to use theme defaults for H2 typography - Updated Google Fonts and dependencies
Codeinwp · Feb 3, 2025 · 37c03b9 · 37c03b9
2 parents eb07318 + 5abeed7
commit 37c03b9
Show file tree

Hide file tree

Showing 34 changed files with 364 additions and 242 deletions.
diff --git a/.github/workflows/playwright.yml b/.github/workflows/playwright.yml
@@ -164,7 +164,7 @@ jobs:
         run: yarn run test:playwright e2e-tests/specs/${{ matrix.specs }}
       - name: Upload trace file
         if: failure()
-        uses: actions/upload-artifact@v3
+        uses: actions/upload-artifact@v4
         with:
           path: ./test-results/**
           retention-days: 1
diff --git a/assets/apps/customizer-controls/src/scss/_documentation.scss b/assets/apps/customizer-controls/src/scss/_documentation.scss
@@ -1,25 +1,32 @@
 .control-section.neve-documentation {
-  display: block !important;
-  margin-bottom: 0;
-  margin-top: -1px;
-  .documentation-inner {
-	display: flex;
-  }
-  .neve-customizer-heading {
-	padding: 7px 10px 7px 14px;
-	display: flex;
-	flex-grow: 1;
-	margin: auto;
-	letter-spacing: initial;
-	font-size: 14px;
-	font-weight: 600;
+	display: block !important;
+	margin-bottom: 0;
+	margin-top: -1px;
 
-	&:hover, &:focus-within {
-	  cursor: default;
+	.documentation-inner {
+		display: flex;
+	}
+	.neve-customizer-heading {
+		padding: 5px 15px 5px 18px;
+		display: flex;
+		flex-grow: 1;
+		margin: auto;
+		align-items: center;
+		justify-content: space-between;
+		letter-spacing: initial;
+		font-size: 14px;
+		font-weight: 600;
+		gap: 10px;
+		height: unset;
+
+		&:hover,
+		&:focus-within {
+			cursor: default;
+		}
 	}
 
 	.components-button {
-	  margin-left: auto;
+		height: auto;
+		padding: 9px 15px;
 	}
-  }
 }
diff --git a/assets/apps/customizer-controls/src/scss/_upsell.scss b/assets/apps/customizer-controls/src/scss/_upsell.scss
@@ -1,36 +1,47 @@
-$upsell_blue: #0065A6 !default;
+$upsell_blue: #0065a6 !default;
 
 .control-section.neve-upsell {
-  	margin-bottom: 0;
-  	.upsell-inner {
-	  display: flex;
+	border-top: none !important;
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
+
+	&:hover {
+		border-left-color: $upsell_blue;
+	}
+
+	margin-bottom: 0;
+	.upsell-inner {
+		display: flex;
 	}
 	.neve-customizer-heading {
-	  color: $upsell_blue;
-	  padding: 7px 10px 7px 14px;
-	  display: flex;
-	  flex-grow: 1;
-	  margin: auto;
-	  letter-spacing: initial;
-	  font-size: 14px;
-	  font-weight: 600;
+		color: $upsell_blue;
+		padding: 5px 15px 5px 18px;
+		display: flex;
+		flex-grow: 1;
+		margin: auto;
+		letter-spacing: initial;
+		font-size: 14px;
+		align-items: center;
+		gap: 10px;
+		justify-content: space-between;
+		height: auto;
 
-	  &:hover, &:focus-within {
-		background-color: $upsell_blue;
-		color: #fff;
-		cursor: default;
+		&:hover,
+		&:focus-within {
+			background-color: $upsell_blue;
+			color: #fff;
+			cursor: default;
 
-		.components-button {
-		  background: #fff;
-		  color: $upsell_blue;
+			.components-button {
+				background: #fff;
+				color: $upsell_blue;
+			}
 		}
-	  }
 
-	  .components-button {
-		margin-left: auto;
-		font-weight: 600;
-		font-size: 14px;
-		background: $upsell_blue;
-	  }
+		.components-button {
+			background: $upsell_blue;
+			height: auto;
+			padding: 9px 15px;
+		}
 	}
 }
diff --git a/assets/apps/dashboard/src/Components/Common/Notification.js b/assets/apps/dashboard/src/Components/Common/Notification.js
@@ -174,8 +174,8 @@ const Notification = ({ data }) => {
 				sprintf(
 					// translators: %1$s: theme name (Neve), %2$s: plugin name (Neve Pro).
 					__('%1$s and %2$s', 'neve'),
-					__('Neve', 'neve'),
-					__('Neve Pro', 'neve')
+					'Neve',
+					'Neve Pro'
 				)
 			)}
 		>

diff --git a/assets/apps/dashboard/src/Components/Content/Changelog.js b/assets/apps/dashboard/src/Components/Content/Changelog.js
@@ -88,7 +88,7 @@ const ChangelogEntry = ({ data }) => {
 				<div className="flex items-center justify-between mb-4">
 					<div className="flex items-center space-x-3">
 						<h3 className="text-base font-semibold text-gray-900">
-							{__('Version', 'neve')} {version}
+							v{version}
 						</h3>
 						<Pill type="primary" className={'ml-auto'}>
 							{date}

diff --git a/assets/apps/dashboard/src/Components/Content/FreePro.js b/assets/apps/dashboard/src/Components/Content/FreePro.js
@@ -23,8 +23,8 @@ const FreeProCard = () => (
 				<div className="w-20 text-center text-sm font-medium">
 					{__('Free', 'neve')}
 				</div>
-				<div className="w-20 text-center text-sm font-medium">
-					{__('Pro', 'neve')}
+				<div className="w-20 text-center text-sm font-medium capitalize">
+					{__('PRO', 'neve').toLowerCase()}
 				</div>
 			</div>
 		</div>

diff --git a/assets/apps/dashboard/src/Components/Content/ModuleGrid.js b/assets/apps/dashboard/src/Components/Content/ModuleGrid.js
@@ -38,7 +38,7 @@ const ModuleToggle = ({ slug, moduleData }) => {
 				text={__('These features are available in Neve Pro.', 'neve')}
 			>
 				<Pill className="ml-2 !px-2 !py-1 text-xs bg-blue-100 text-blue-800 rounded">
-					{__('Pro', 'neve')}
+					{__('PRO', 'neve')}
 				</Pill>
 			</Tooltip>
 		);

diff --git a/assets/apps/dashboard/src/Components/Content/Welcome.js b/assets/apps/dashboard/src/Components/Content/Welcome.js
@@ -4,10 +4,11 @@ import { LucidePanelsTopLeft } from 'lucide-react';
 
 import Card from '../../Layout/Card';
 import { NEVE_HAS_PRO } from '../../utils/constants';
-import Link from '../Common/Link';
+
 import TransitionWrapper from '../Common/TransitionWrapper';
 import ModuleGrid from './ModuleGrid';
 import PluginsCard from './Sidebar/PluginsCard';
+import Button from '../Common/Button';
 
 export default () => (
 	<TransitionWrapper className="grid gap-6">
@@ -19,19 +20,35 @@ export default () => (
 
 const CustomizerShortcutsCard = () => (
 	<Card
-		title={__('Essential Settings', 'neve')}
+		title={__('Get Started', 'neve')}
 		icon={<LucidePanelsTopLeft size={18} />}
+		className="border border-blue-300"
+		afterTitle={
+			<Button isPrimary href={neveDash.customizerURL}>
+				{__('Go to Customizer', 'neve')}
+			</Button>
+		}
 	>
-		<div className="grid sm:grid-cols-2 gap-x-8 gap-y-4">
+		<div className="grid sm:grid-cols-2 lg:grid-cols-1 xl:grid-cols-2 gap-6">
 			{neveDash.customizerShortcuts.map(({ text, link, description }) => (
-				<div key={link} className="grid gap-1">
-					<Link text={text} url={link} />
+				<a
+					href={link}
+					key={link}
+					className="grid gap-1 p-4 bg-gray-50 rounded-lg hover:bg-gray-100 transition-colors group"
+				>
+					<span
+						className={
+							'text-base text-blue-600 group-hover:text-blue-700 group-hover:underline'
+						}
+					>
+						{text}
+					</span>
 					{description && (
 						<span className="text-gray-600 text-xs">
 							{description}
 						</span>
 					)}
-				</div>
+				</a>
 			))}
 		</div>
 	</Card>

diff --git a/assets/apps/dashboard/src/Components/Controls/ControlWrap.js b/assets/apps/dashboard/src/Components/Controls/ControlWrap.js
@@ -32,7 +32,7 @@ export default ({
 						<h3 className="text-base font-semibold">{label}</h3>
 						{locked && (
 							<Pill className="ml-2 !px-2 !py-1 text-xs bg-blue-100 text-blue-800 rounded">
-								{__('Pro', 'neve')}
+								{__('PRO', 'neve')}
 							</Pill>
 						)}
 					</div>

diff --git a/assets/apps/dashboard/src/Components/Header.js b/assets/apps/dashboard/src/Components/Header.js
@@ -57,7 +57,7 @@ const HeaderTopBar = ({ currentTab, setTab }) => {
 						</span>
 						<Pill type="secondary">
 							{isLicenseValid
-								? __('Pro', 'neve')
+								? __('PRO', 'neve')
 								: __('Free', 'neve')}
 						</Pill>
 						<span className="text-gray-500 font-medium">