From 8b16123e03d8560772abb4390805dbae6dff54bc Mon Sep 17 00:00:00 2001
From: abaicus <baicusandrei@me.com>
Date: Wed, 27 Nov 2024 17:08:21 +0200
Subject: [PATCH] chore: change Otter Patterns button order & Premium Designs
 appearance [closes #2456]

---
 .../plugins/patterns-library/library.js       | 24 ++++++++++---------
 1 file changed, 13 insertions(+), 11 deletions(-)

diff --git a/src/blocks/plugins/patterns-library/library.js b/src/blocks/plugins/patterns-library/library.js
index 0fe9c7272..966043fd1 100644
--- a/src/blocks/plugins/patterns-library/library.js
+++ b/src/blocks/plugins/patterns-library/library.js
@@ -28,7 +28,7 @@ import {
 	useState
 } from '@wordpress/element';
 
-import { grid } from '@wordpress/icons';
+import { external, grid, Icon } from '@wordpress/icons';
 
 /**
  * Internal dependencies.
@@ -213,13 +213,24 @@ const Library = ({
 							{ __( 'My Favorites', 'otter-blocks' ) }
 						</Button>
 
-						{ ( ! Boolean( window.themeisleGutenberg.hasPro ) ) && (
+						{tcCategories.length < 1 && (
 							<Button
 								icon="lock"
+								isPressed={ 'cloud-empty' === selectedCategory }
+								onClick={ () => setSelectedCategory( CLOUD_EMPTY_CATEGORY ) }
+							>
+								{ __( 'Cloud Libraries', 'otter-blocks' ) }
+							</Button>
+						) }
+
+						{ ( ! Boolean( window.themeisleGutenberg.hasPro ) ) && (
+							<Button
+								icon="open-folder"
 								href="https://themeisle.com/plugins/otter-blocks/patterns/"
 								target="_blank"
 							>
 								{ __( 'Premium Designs', 'otter-blocks' ) }
+								<Icon icon={external} size={15} />
 							</Button>
 						) }
 
@@ -244,15 +255,6 @@ const Library = ({
 								</ul>
 							</>
 						)}
-						{tcCategories.length < 1 && (
-							<Button
-								icon="lock"
-								isPressed={ 'cloud-empty' === selectedCategory }
-								onClick={ () => setSelectedCategory( CLOUD_EMPTY_CATEGORY ) }
-							>
-								{ __( 'Cloud Libraries', 'otter-blocks' ) }
-							</Button>
-						) }
 
 						<p className="o-library__modal__sidebar__heading">
 							{ __( 'Categories', 'otter-blocks' ) }