Make the hit-target for the modal close button larger

So it's more easily clickable.
atomiclabs · Aug 8, 2018 · ece080d · ece080d
1 parent d494ad4
commit ece080d
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 29 deletions.
diff --git a/app/renderer/components/Modal.js b/app/renderer/components/Modal.js
@@ -152,7 +152,9 @@ class Modal extends React.Component {
 					}}
 				>
 					<header>
-						<span className="Modal__close" onClick={this.closeHandler}/>
+						<div className="Modal__close" onClick={this.closeHandler}>
+							<div className="Modal__close__icon"/>
+						</div>
 						{icon &&
 							<img className="Modal__icon" src={icon}/>
 						}

diff --git a/app/renderer/components/Modal.scss b/app/renderer/components/Modal.scss
@@ -120,7 +120,7 @@
 			display: flex;
 			align-items: center;
 			position: relative;
-			padding: 22px 30px;
+			padding: 22px 32px;
 			border-bottom: 1px solid var(--section-border-color);
 
 			.Modal__icon {
@@ -132,7 +132,7 @@
 				width: 100%;
 				font-size: 17px;
 				margin: 0;
-				margin-right: 20px;
+				margin-right: 30px;
 				padding: 0;
 				line-height: 1;
 			}
@@ -156,37 +156,46 @@
 
 	&__close {
 		position: absolute;
-		right: 20px;
+		right: 18px;
 		top: 50%;
 		transform: translateY(-50%);
-		width: 16px;
-		height: 16px;
-	}
+		width: 38px;
+		height: 40px;
+		padding: 10px;
 
-	&__close::before,
-	&__close::after {
-		position: absolute;
-		content: '';
-		width: 100%;
-		height: 2px;
-		top: 50%;
-		left: 0;
-		margin-top: -1px;
-		background: var(--modal-close-button-color);
-		transition: background 0.2s;
-		border-radius: 50%;
-	}
+		&__icon {
+			position: relative;
+			top: 50%;
+			transform: translateY(-50%);
 
-	&__close::before {
-		transform: rotate(45deg);
-	}
+			&::before,
+			&::after {
+				position: absolute;
+				content: '';
+				width: 100%;
+				height: 2px;
+				top: 50%;
+				left: 0;
+				margin-top: -1px;
+				background: var(--modal-close-button-color);
+				transition: background 0.2s;
+				border-radius: 50%;
+			}
 
-	&__close::after {
-		transform: rotate(-45deg);
-	}
+			&::before {
+				transform: rotate(45deg);
+			}
+
+			&::after {
+				transform: rotate(-45deg);
+			}
+		}
 
-	&__close:hover::before,
-	&__close:hover::after {
-		background: var(--text-color-faded);
+		&:hover {
+			.Modal__close__icon::before,
+			.Modal__close__icon::after {
+				background: var(--text-color-faded);
+			}
+		}
 	}
 }
diff --git a/app/renderer/components/SwapDetails.scss b/app/renderer/components/SwapDetails.scss
@@ -11,6 +11,10 @@
 .SwapDetails .Modal__dialog {
 	position: relative;
 
+	h1 {
+		line-height: 1.3; // Give it slightly taller modal header than the default
+	}
+
 	.title {
 		display: flex;
 		justify-content: space-between;