replacing RemoveButton with Button borderless

moved sharing.scss to my-sites/sharing/style and updated imports

removing icon

assets/stylesheets/_components.scss

@@ -213,6 +213,7 @@
 @import 'my-sites/plugins/plugins-browser-list/style';
 @import 'my-sites/plugins/plugins-browser/style';
 @import 'my-sites/plugins/plugin-version/style';
+@import 'my-sites/sharing/style';
 @import 'my-sites/sharing/connections/account-dialog';
 @import 'my-sites/sharing/connections/account-dialog-account';
 @import 'my-sites/sharing/connections/services-group';

assets/stylesheets/style.scss

@@ -31,7 +31,6 @@
 @import 'sections/post-relative-time-status';  // post relative time styles
 @import 'sections/stats';                      // stats page styles
 @import 'sections/upgrades';                   // upgrades page styles
-@import 'sections/sharing';                    // sharing page styles
 @import 'sections/notifications';              // notifications styles
 @import 'sections/checkout';                   // Checkout styles
 @import 'sections/billing-history';            // Billing History styles

client/my-sites/sharing/connections/service-action.jsx

@@ -1,12 +1,15 @@
 /**
  * External dependencies
  */
-var React = require( 'react' );
+import React from "react";
 
 /**
  * Internal dependencies
  */
-var serviceConnections = require( './service-connections' );
+import serviceConnections from "./service-connections";
+import Gridicon from "components/gridicon";
+import Button from "components/button";
+import classNames from "classnames";
 
 module.exports = React.createClass( {
 	displayName: 'SharingServiceAction',
@@ -38,27 +41,32 @@ module.exports = React.createClass( {
 	},
 
 	render: function() {
-		var classes = [ 'sharing-service-action', 'button' ],
-			isPending, removableConnections, label;
+		var classes = [ 'sharing-service-action' ],
+			primary = false,
+			borderless = false,
+			warning = false,
+			isPending, removableConnections, label, icon;
 
 		isPending = 'unknown' === this.props.status || this.props.isDisconnecting ||
 			this.props.isRefreshing || this.props.isConnecting;
 
 		if ( 'connected' === this.props.status ) {
 			removableConnections = serviceConnections.getRemovableConnections( this.props.service.name );
+			borderless = true;
+			icon = "link-break";
 		}
 
 		if ( 'unknown' === this.props.status ) {
 			label = this.translate( 'Loading…', { context: 'Sharing: Publicize status pending button label' } );
 		} else if ( this.props.isDisconnecting ) {
 			label = this.translate( 'Disconnecting…', { context: 'Sharing: Publicize disconnect pending button label' } );
-			classes.push( 'button' );
+
 		} else if ( this.props.isRefreshing ) {
 			label = this.translate( 'Reconnecting…', { context: 'Sharing: Publicize reconnect pending button label' } );
-			classes.push( 'is-warning' );
+			warning = true;
 		} else if ( this.props.isConnecting ) {
 			label = this.translate( 'Connecting…', { context: 'Sharing: Publicize connect pending button label' } );
-			classes.push( 'is-primary' );
+			primary = true;
 		} else if ( 'connected' === this.props.status && removableConnections.length ) {
 			if ( removableConnections.length > 1 ) {
 				label = this.translate( 'Disconnect All', { context: 'Sharing: Publicize disconnect button label' } );
@@ -67,12 +75,22 @@ module.exports = React.createClass( {
 			}
 		} else if ( 'reconnect' === this.props.status ) {
 			label = this.translate( 'Reconnect', { context: 'Sharing: Publicize reconnect pending button label' } );
-			classes.push( 'is-warning' );
+			warning = true;
 		} else {
 			label = this.translate( 'Connect', { context: 'Sharing: Publicize connect pending button label' }  );
-			classes.push( 'is-primary' );
+			primary = true;
 		}
 
-		return <a onClick={ this.onActionClick } className={ classes.join( ' ' ) } disabled={ isPending }>{ label }</a>;
+		return (
+			<Button
+				primary={ primary }
+				borderless={ borderless }
+				scary={ warning }
+				onClick={ this.onActionClick }
+				className={ classes.join( ' ' ) }
+				disabled={ isPending }>
+				{ label }
+			</Button>
+		);
 	}
 } );