Merge branch 'import-snippets' of https://github.com/codesnippetspro/code-snippets into import-snippets

# Conflicts:
#	src/php/class-plugin.php

Author: louiswol94

src/js/components/Import/FromFileUpload/FileUploadForm.tsx

@@ -133,12 +133,12 @@ export const FileUploadForm: React.FC = () => {
 
 				{currentStep === 'select' && importWorkflow.availableSnippets.length > 0 && !importWorkflow.uploadResult?.success && (
 					<ImportCard ref={selectSectionRef}>
-						<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: '20px' }}>
+						<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBlockEnd: '20px' }}>
 							<Button onClick={handleBackToUpload} className="button-link">
 								{__('← Upload Different Files', 'code-snippets')}
 							</Button>
 						</div>
-						<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '10px' }}>
+						<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBlockEnd: '10px' }}>
 							<div>
 								<h3 style={{ margin: '0' }}>{__('Available Snippets', 'code-snippets')} ({importWorkflow.availableSnippets.length})</h3>
 								<p style={{ margin: '0.5em 0 1em 0', color: '#666' }}>

src/js/components/Import/FromOtherPlugins/ImportForm.tsx

@@ -106,7 +106,7 @@ export const ImportForm: React.FC = () => {
 				 snippetImport.importSuccess.length === 0 && (
 					<ImportCard>
 						<div style={{ textAlign: 'center', padding: '40px 20px', color: '#666' }}>
-							<div style={{ fontSize: '48px', marginBottom: '16px' }}>📭</div>
+							<div style={{ fontSize: '48px', marginBlockEnd: '16px' }}>📭</div>
 							<h3 style={{ margin: '0 0 8px 0', fontSize: '18px', color: '#333' }}>
 								{__('No snippets found', 'code-snippets')}
 							</h3>

src/js/components/Import/FromOtherPlugins/components/SimpleSnippetTable.tsx

@@ -25,7 +25,7 @@ export const SimpleSnippetTable: React.FC<SimpleSnippetTableProps> = ({
 
 	return (
 		<ImportCard className="snippets-table-container">
-			<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '10px' }}>
+			<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBlockEnd: '10px' }}>
 				<div>
 					<h2 style={{ margin: '0' }}>{__('Available Snippets', 'code-snippets')} ({snippets.length})</h2>
 					<p style={{ margin: '0.5em 0 1em 0' }}>{__('We found the following snippets.', 'code-snippets')}</p>

src/js/components/Import/FromOtherPlugins/components/StatusDisplay.tsx

@@ -18,7 +18,7 @@ export const StatusDisplay: React.FC<StatusDisplayProps> = ({
 	const isError = type === 'error'
 
 	return (
-		<ImportCard variant="controls" style={{ display: 'flex', alignItems: 'flex-start', gap: '12px', marginBottom: '20px' }}>
+		<ImportCard variant="controls" style={{ display: 'flex', alignItems: 'flex-start', gap: '12px', marginBlockEnd: '20px' }}>
 			<div style={{ 
 				backgroundColor: isError ? '#d63638' : '#00a32a', 
 				borderRadius: '50%', 

src/js/components/Import/ImportApp.tsx

@@ -27,7 +27,7 @@ export const ImportApp: React.FC = () => {
 
 	return (
 		<div className="narrow" style={{ maxWidth: '800px' }}>
-			<h2 className="nav-tab-wrapper" style={{ marginBottom: '20px' }}>
+			<h2 className="nav-tab-wrapper" style={{ marginBlockEnd: '20px' }}>
 				<a
 					className={`nav-tab${activeTab === 'upload' ? ' nav-tab-active' : ''}`}
 					href="#"

src/js/components/Import/shared/components/ImportCard.tsx

@@ -20,7 +20,7 @@ export const ImportCard = React.forwardRef<HTMLDivElement, ImportCardProps>(({
 		padding: '25px',
 		borderRadius: '5px',
 		border: '1px solid #e0e0e0',
-		marginBottom: '10px',
+		marginBlockEnd: '10px',
 		width: '100%',
 		...style
 	}

src/php/class-plugin.php

@@ -160,6 +160,7 @@ public function load_plugin() {
 		// Importers.
 		new Plugins_Import_Manager();
 		new Files_Import_Manager();
+
 		// Initialize promotions.
 		new Promotions\Elementor_Pro();
 	}