Minor UI updates. Resolves #609.

DataBiosphere · Apr 16, 2020 · 52dc3c8 · 52dc3c8
1 parent b7bfc10
commit 52dc3c8
Showing 1 changed file with 10 additions and 4 deletions.
diff --git a/src/components/toggleButton/toggleButton.module.css b/src/components/toggleButton/toggleButton.module.css
@@ -8,30 +8,36 @@
 
 /* Button */
 .toggle {
-	background-color: var(--primary);
+	background-color: var(--blue-light);
 	border: none;
 	border-radius: 3px;
 	box-sizing: border-box;
-	color: var(--white);
+	color: var(--primary);
 	display: inline-flex;
 	flex-shrink: 0;
 	font-family: "Montserrat", sans-serif;
 	font-size: 12px;
 	font-weight: 500;
-	height: 28px;
+	height: 32px;
 	justify-content: center;
 	letter-spacing: .21px;
 	min-width: 84px;
 	padding: 0 12px;
+	transition: background-color .25s ease 0s;
 	white-space: nowrap;
 }
 
+.toggle:hover {
+	background-color: rgba(218, 240, 246, 0.54); /* Light blue RGB */
+}
+
 .toggle:focus {
 	outline: none;
 }
 
 /* Button - metadata */
 .toggle.metadata {
+	cursor: pointer;
 	margin: 0 0 12px 16px;
 	min-width: 200px;
 }
@@ -42,6 +48,6 @@
 @media screen and (min-width: 768px) {
 
 	.toggle.metadata {
-		margin: 0 0 12px 0;
+		margin: 0 0 16px 0;
 	}
 }