Merge pull request #1464 from Automattic/revert-1277-fix/dns-editor-f…

…lexbox Revert "Domain Search: DNS editor cleanup, fixes #604"
Automattic · Dec 10, 2015 · ba8a28b · ba8a28b
2 parents 7ad41a9 + 4d12a89
commit ba8a28b
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 32 deletions.
diff --git a/client/my-sites/upgrades/domain-management/dns/dns-record.jsx b/client/my-sites/upgrades/domain-management/dns/dns-record.jsx
@@ -3,11 +3,6 @@
  */
 var React = require( 'react' );
 
-/**
- * Internal dependencies
- */
-import RemoveButton from "components/remove-button";
-
 var DnsRecord = React.createClass( {
 	propTypes: {
 		deleteDns: React.PropTypes.func.isRequired,
@@ -92,17 +87,11 @@ var DnsRecord = React.createClass( {
 	render: function() {
 		return (
 			<li>
-				<div className="dns__list-type">
-					<label>{ this.props.dnsRecord.type }</label>
-				</div>
-				<div className="dns__list-info">
-					<strong>{ this.getName() }</strong>
-					<em>{ this.handledBy() }</em>
-				</div>
-				<div className="dns__list-remove">
-					{ ! this.props.dnsRecord.protected_field || 'MX' === this.props.dnsRecord.type ?
-						<RemoveButton icon="trash" onClick={ this.deleteDns } /> : null }
-				</div>
+				<label>{ this.props.dnsRecord.type }</label>
+				{ ! this.props.dnsRecord.protected_field || 'MX' === this.props.dnsRecord.type ?
+					<button className="remove" onClick={ this.deleteDns }>{ this.translate( 'Delete' ) }</button> : null }
+				<strong>{ this.getName() }</strong>
+				<em>{ this.handledBy() }</em>
 			</li>
 		);
 	}

diff --git a/client/my-sites/upgrades/domain-management/style.scss b/client/my-sites/upgrades/domain-management/style.scss
@@ -901,8 +901,6 @@ ul.dns__list {
 
 	li {
 		border-top: 1px solid $gray-light;
-		display: flex;
-		justify-content: space-between;
 		overflow: auto;
 		padding: 10px 0;
 		position: relative;
@@ -917,31 +915,29 @@ ul.dns__list {
 			background: #87a6bc;
 			border-radius: 2px;
 			color: $white;
-			display: block;
+			float: left;
 			font-size: 12px;
 			margin: 0 10px 0 0;
 			padding: 10px 5px;
 			text-align: center;
+			width: 60px;
 		}
 
 		strong {
 			color: #58819e;
 			font-weight: normal;
 		}
 	}
-
-	.dns__list-type {
-		min-width: 60px;
-	}
-
-	.dns__list-info {
-		width: 100%;
-		word-break: break-all;
-	}
-
-	.dns__list-remove {
-		text-align: right;
-		width: 100px;
+	.remove {
+		background-color: #87a6bc;
+		border-radius: 2px;
+		color: #FFF;
+		cursor: pointer;
+		display: inline-block;
+		float: right;
+		font-size: 9px;
+		padding: 3px 8px;
+		text-transform: uppercase;
 	}
 }