Improve UX of activation switch.

Author: sheabunge

src/css/common/_switch.scss

@@ -1,14 +1,16 @@
 @use 'theme';
 
+$off-color: #789;
+
 .snippet-execution-button,
 .snippet-activation-switch,
-input[type="checkbox"].switch {
+input[type='checkbox'].switch {
 	display: block;
 	position: relative;
 }
 
 .snippet-activation-switch,
-input[type="checkbox"].switch {
+input[type='checkbox'].switch {
 	appearance: none;
 	outline: 0;
 	cursor: pointer;
@@ -17,23 +19,23 @@ input[type="checkbox"].switch {
 	block-size: 19px;
 	border-radius: 34px;
 	text-align: start;
-	border: 1px solid theme.$accent;
+	border: 1px solid $off-color;
 	box-sizing: border-box;
 
 	&::before {
-		transition: all .4s;
+		transition: all .1s;
 		content: '';
 		block-size: 13px;
 		inline-size: 13px;
 		display: inline-block;
-		background-color: theme.$accent;
+		background-color: $off-color;
 		border-radius: 50%;
 		margin: 2px;
 	}
 }
 
 .active-snippet .snippet-activation-switch,
-input[type="checkbox"].switch:checked {
+input[type='checkbox'].switch:checked {
 	background-color: #0073aa;
 
 	&::before {

src/css/edit/_sidebar.scss

@@ -102,6 +102,13 @@ p.submit {
 	padding-block-start: 0;
 }
 
+.activation-switch-container label {
+	display: flex;
+	flex-flow: row;
+	gap: 5px;
+	justify-content: center;
+}
+
 .shortcode-tag-wrapper {
 	background: #fff;
 	min-block-size: 54px;

src/js/components/EditorSidebar/actions/ShortcodeInfo.tsx

@@ -131,7 +131,7 @@ export const ShortcodeInfo: React.FC = () => {
 		? <div className="inline-form-field">
 			<h4>{__('Shortcode', 'code-snippets')}</h4>
 			<Button onClick={() => setIsModalOpen(true)} disabled={isReadOnly}>
-				{__('See Options', 'code-snippets')}
+				{__('See options', 'code-snippets')}
 			</Button>
 
 			{isModalOpen

src/js/components/EditorSidebar/controls/ActivationSwitch.tsx

@@ -9,32 +9,29 @@ export const ActivationSwitch = () => {
 	const { submitSnippet } = useSubmitSnippet()
 
 	return (
-		<div className="inline-form-field">
-			<h4>
-				<label htmlFor="activation-switch">
-					{snippet.active
-						? __('Deactivate snippet', 'code-snippets')
-						: __('Activate snippet', 'code-snippets')}
-				</label>
-			</h4>
+		<div className="inline-form-field activation-switch-container">
+			<h4>{__('Status')}</h4>
 
-			<input
-				id="activation-switch"
-				type="checkbox"
-				checked={snippet.active}
-				disabled={isWorking || !!snippet.shared_network}
-				className="switch"
-				title={snippet.active
-					? __('Deactivate', 'code-snippets')
-					: __('Activate', 'code-snippets')}
-				onChange={() => {
-					submitSnippet(snippet.active
-						? SubmitSnippetAction.SAVE_AND_DEACTIVATE
-						: SubmitSnippetAction.SAVE_AND_ACTIVATE)
-						.then(() => undefined)
-						.catch(handleUnknownError)
-				}}
-			/>
+			<label>
+				{snippet.active
+					? __('Active', 'code-snippets')
+					: __('Inactive', 'code-snippets')}
+
+				<input
+					id="activation-switch"
+					type="checkbox"
+					checked={snippet.active}
+					disabled={isWorking || !!snippet.shared_network}
+					className="switch"
+					onChange={() => {
+						submitSnippet(snippet.active
+							? SubmitSnippetAction.SAVE_AND_DEACTIVATE
+							: SubmitSnippetAction.SAVE_AND_ACTIVATE)
+							.then(() => undefined)
+							.catch(handleUnknownError)
+					}}
+				/>
+			</label>
 		</div>
 	)
 }