Merge pull request #1844 from Codeinwp/fix/hover-and-link-styles-mino…

…r-issues Fix/hover and link styles minor issues
Codeinwp · Sep 25, 2023 · ac14b74 · ac14b74
2 parents c9472fc + 108a699
commit ac14b74
Showing 1 changed file with 55 additions and 4 deletions.
diff --git a/src/dashboard/style.scss b/src/dashboard/style.scss
@@ -27,12 +27,18 @@
 }
 
 #otter {
+	--main-link-color: #2271b1;
+
 	.components-button {
 		&.is-primary {
 			--wp-admin-theme-color: #ed6f57;
 			--wp-admin-theme-color-darker-20: #d5654f;
 			--wp-admin-theme-color-darker-10: #dd6851;
 		}
+
+		&.is-link {
+			color: var(--main-link-color);
+		}
 	}
 
 	.otter-header {
@@ -89,9 +95,17 @@
 					margin: 0;
 					border: 0;
 					cursor: pointer;
+					margin-right: 8px;
+
+					&:hover {
+						span {
+							color: #282828;
+						}
+						border-bottom: 3px solid #e5e5e5;
+					}
 
 					&.is-active {
-						border-bottom: 4px solid #1E7DB2;
+						border-bottom: 3px solid #1E7DB2;
 
 						span {
 							color: #282828;
@@ -100,7 +114,7 @@
 
 						@media ( max-width: 960px ) {
 							border-bottom: 0;
-							border-left: 4px solid #1E7DB2;
+							border-left: 3px solid #1E7DB2;
 						}
 					}
 
@@ -161,10 +175,17 @@
 
 					&:hover {
 						border-bottom: 1px solid #d6e2ed !important;
+						background: #E8E8E8;
 					}
 				}
 			}
 
+			.components-panel__body-toggle {
+				&:hover {
+					background: #E8E8E8;
+				}
+			}
+
 			&.is-pro {
 				.components-panel__body-title {
 					.components-button {
@@ -247,8 +268,8 @@
 				}
 
 				&:focus {
-					border-color: #00a0d2;
-					box-shadow: 0 0 0 1px #00a0d2;
+					border-color: var(--main-link-color);
+					box-shadow: 0 0 0 1px var(--main-link-color);
 					outline: 2px solid transparent;
 					outline-offset: -2px;
 				}
@@ -290,6 +311,12 @@
 									padding: 2px 20px;
 									font-size: 14px;
 									margin-right: 10px;
+									color: var(--main-link-color);
+									box-shadow: inset 0 0 0 1px var(--main-link-color);
+
+									&:focus {
+										box-shadow: inset 0 0 0 1.5px var(--main-link-color);
+									}
 								}
 
 								.components-external-link {
@@ -342,10 +369,16 @@
 					.is-secondary {
 						padding: 2px 20px;
 						font-size: 14px;
+						color: var(--main-link-color);
+						box-shadow: inset 0 0 0 1px var(--main-link-color);
 
 						&:not(:last-child) {
 							margin-right: 15px;
 						}
+
+						&:focus {
+							box-shadow: inset 0 0 0 1.5px var(--main-link-color);
+						}
 					}
 				}
 			}
@@ -484,6 +517,24 @@
 			justify-content: center;
 		}
 	}
+
+	.components-form-toggle.is-checked .components-form-toggle__track {
+		background-color: var(--main-link-color);
+	}
+
+	#o-feedback {
+		box-shadow: inset 0 0 0 1px var(--main-link-color);
+    	color: var(--main-link-color);
+
+		&:focus {
+			box-shadow: inset 0 0 0 1.5px var(--main-link-color);
+		}
+	}
+
+	:is(.components-textarea-control__input, .components-text-control__input):focus {
+		border-color: var(--main-link-color);
+		box-shadow: 0 0 0 1px var(--main-link-color);
+	}
 }
 
 .otter-button-control {