Domain Management: Use flexbox for DNS records and update delete butt…

…on to use Gridicon, take 2.
Automattic · Dec 14, 2015 · 3af402c · 3af402c
1 parent 2e53747
commit 3af402c
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 17 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,6 +3,12 @@
  */
 var React = require( 'react' );
 
+/**
+ * Internal dependencies
+ */
+import Button from 'components/button';
+import Gridicon from 'components/gridicon';
+
 var DnsRecord = React.createClass( {
 	propTypes: {
 		deleteDns: React.PropTypes.func.isRequired,
@@ -87,11 +93,19 @@ var DnsRecord = React.createClass( {
 	render: function() {
 		return (
 			<li>
-				<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>
+				<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 ?
+						<Button borderless onClick={ this.deleteDns }>
+							<Gridicon icon="trash" />
+						</Button> : null }
+				</div>
 			</li>
 		);
 	}

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