Revert "Removing mw.ui.checkbox dependency"

This reverts commit 85d9a7b0ed.

Reason for revert: Unexpected visual change flagged by Pixel.
We're now loading BOTH codex search and Codex
styles on page load (the latter via JavaScript). This results in
a visual regression in the sidebar as the message box for
languages switches from MediaWiki UI to Codex. I am not 100% sure
what the right approach is here, but we should pause to assess
given this new learning.

Possible options
1) Add checkbox styles to codex-search bundle
2) Load codex-styles on page load instead of codex-search
3) Delay the loading of the codex-styles until the overlay is
rendering
4) Wait until Codex has code splitting.

Change-Id: I633364fea54b048492c6bde10b4c4cc8ab99b9ae

extension.json

@@ -198,10 +198,11 @@
 				"mediawiki.jqueryMsg",
 				"mediawiki.storage",
 				"mediawiki.Title",
+				"mediawiki.ui.checkbox",
 				"mediawiki.Uri",
 				"mediawiki.user",
 				"mediawiki.util",
-				"codex-styles"
+				"codex-search-styles"
 			]
 		}
 	},

src/ui/templates/settingsDialog/settingsDialog.js

@@ -72,15 +72,13 @@ export function renderSettingsDialog( model ) {
 			<main id='mwe-popups-settings-form'>
 				<form>
 					${choices.map( ( { id, name, description, isChecked } ) => `
-					<p class="cdx-checkbox">
+					<p class="mw-ui-checkbox">
 						<input
 							${isChecked ? 'checked' : ''}
 							value='${id}'
 							type='checkbox'
-							id='mwe-popups-settings-${id}'
-							class='cdx-checkbox__input'>
-						<span class="cdx-checkbox__icon">&nbsp;</span>
-						<label class="cdx-checkbox__label" for='mwe-popups-settings-${id}'>
+							id='mwe-popups-settings-${id}'>
+						<label for='mwe-popups-settings-${id}'>
 							<span>${name}</span>
 							${description}
 						</label>

src/ui/templates/settingsDialog/settingsDialog.less

@@ -59,12 +59,14 @@
 				margin-right: 60px;
 			}
 
+			input {
+				margin-right: 10px;
+			}
+
 			label {
 				font-size: 13px;
 				line-height: 16px;
 				width: 300px;
-				margin-left: 10px;
-				flex-direction: column;
 
 				> span {
 					color: @color-emphasized;