Create mobile thanks using the mobile library

The thanks icon had styling issues as it didn't use the mobile
icon and button fundamental components.

The icon should also be inside the button, the element should not
be both a button and an icon.

Bug: T229440
Change-Id: I0136466fe1452f904961b89ae7677fc1a511adab

extension.json

@@ -65,7 +65,7 @@
 	"ResourceModules": {
 		"ext.thanks.images": {
 			"class": "ResourceLoaderImageModule",
-			"selector": ".mw-ui-icon-{name}:before",
+			"selector": ".mw-ui-icon-thanks-{name}:before",
 			"defaultColor": "#fff",
 			"images": {
 				"userTalk": {
@@ -127,6 +127,7 @@
 				"thanks-thanked-notice"
 			],
 			"dependencies": [
+				"mobile.startup",
 				"ext.thanks.images",
 				"mediawiki.api",
 				"mediawiki.jqueryMsg",

modules/ext.thanks.mobilediff.js

@@ -1,6 +1,9 @@
 ( function () {
 	// To allow users to cancel a thanks in the event of an accident, the action is delayed.
 	var THANKS_DELAY = 2000,
+		mobile = mw.mobileFrontend.require( 'mobile.startup' ),
+		Button = mobile.Button,
+		Icon = mobile.Icon,
 		msgOptions = {
 			// tag ensures that only one message in workflow is shown at any time
 			tag: 'thanks'
@@ -59,9 +62,19 @@
 	 */
 	function createThankLink( name, rev, gender ) {
 		var timeout,
-			$button = $( '<button>' ).addClass(
+			button = new Button( {
-				'mw-mf-action-button mw-ui-button mw-ui-progressive mw-ui-icon mw-ui-icon-before mw-ui-icon-userTalk'
+				progressive: true,
-			).text( mw.message( 'thanks-button-thank', mw.user, gender ).text() );
+				additionalClassNames: 'mw-mf-action-button'
+			} ),
+			$button = button.$el;
+
+		// append icon
+		new Icon( {
+			name: 'userTalk',
+			glyphPrefix: 'thanks',
+			hasText: true,
+			label: mw.message( 'thanks-button-thank', mw.user, gender ).text()
+		} ).$el.appendTo( $button );
 
 		// Don't make thank button for self
 		if ( name === mw.config.get( 'wgUserName' ) ) {