Update ULS settings UI style to mediawiki.ui style

The ext.uls.buttons style can be removed but Translate extension use that.
Once it is separated we can remove it from ULS.

Testplan:
Use ULS settings and notice the style difference of buttons, checkboxes
and radio buttons. No functionality should be affected and UI should not
be broken in any ways.

This was once attempted in Id186ece6513f154e0388bc4170c21bdabb59038a
but we had to revert because of incompleteness

Bug: T52599
Bug: T127020
Change-Id: Ibbb2068b5036537f298fad6c49169a5b986304d5

resources/js/ext.uls.inputsettings.js

@@ -49,9 +49,9 @@
 
 		// Disable IME system button
 		+ '<div class="row">'
-		+ '<div class="eleven columns button uls-input-settings-disable-info"></div>'
-		+ '<div class="six columns button uls-input-settings-toggle">'
-		+ '<button class="active green button uls-input-toggle-button"></button>'
+		+ '<div class="eleven columns uls-input-settings-disable-info"></div>'
+		+ '<div class="ten columns uls-input-settings-toggle">'
+		+ '<button class="active mw-ui-constructive mw-ui-button uls-input-toggle-button"></button>'
 		+ '</div>'
 		+ '</div>';
 
@@ -120,7 +120,7 @@
 			$imeListTitle = this.$template.find( '.ext-uls-input-settings-imes-title' );
 			$imeListContainer = this.$template.find( '.uls-input-settings-inputmethods-list' );
 
-			$imeListContainer.find( 'label' ).remove();
+			$imeListContainer.empty();
 
 			if ( !imes ) {
 				$imeListContainer.append( $( '<label>' )
@@ -168,10 +168,7 @@
 				return $();
 			}
 
-			$imeLabel = $( '<label>' ).attr( {
-				'for': imeId,
-				'class': 'imelabel'
-			} );
+			$imeLabel = $( '<label>' ).attr( 'for', imeId );
 
 			$inputMethodItem = $( '<input type="radio">' ).attr( {
 				name: 'ime',
@@ -180,8 +177,6 @@
 			} )
 			.prop( 'checked', selected );
 
-			$imeLabel.append( $inputMethodItem );
-
 			if ( imeId === 'system' ) {
 				name = $.i18n( 'ext-uls-disable-input-method' );
 				description = '';
@@ -210,7 +205,9 @@
 				$helplink
 			);
 
-			return $imeLabel;
+			return $( '<div>' )
+				.addClass( 'mw-ui-radio twelve columns' )
+				.append( $inputMethodItem, $imeLabel );
 		},
 
 		/**
@@ -275,8 +272,8 @@
 						$.ime.preferences.setLanguage( language );
 					}
 					// Mark the button selected
-					$( '.uls-ui-languages .button' ).removeClass( 'down' );
-					button.addClass( 'down' );
+					$( '.uls-ui-languages .mw-ui-button' ).removeClass( 'mw-ui-pressed' );
+					button.addClass( 'mw-ui-pressed' );
 					inputSettings.prepareInputmethods( language );
 				};
 			}
@@ -287,7 +284,7 @@
 			for ( i = 0; i < SUGGESTED_LANGUAGES_NUMBER; i++ ) {
 				language = languagesForButtons[ i ];
 				$button = $( '<button>' )
-					.addClass( 'button uls-language-button autonym' )
+					.addClass( 'mw-ui-button uls-language-button autonym' )
 					.text( $.uls.data.getAutonym( language ) )
 					.prop( {
 						lang: language,
@@ -319,7 +316,7 @@
 			$languages = this.$template.find( '.uls-ui-languages' );
 			$moreLanguagesButton = $( '<button>' )
 				.prop( 'class', 'uls-more-languages' )
-				.addClass( 'button' ).text( '...' );
+				.addClass( 'mw-ui-button' ).text( '...' );
 
 			$languages.append( $moreLanguagesButton );
 			// Show the long language list to select a language for ime settings