css tweaks

fix dropdown list item color, outline button color, add margin to button
ORCID · Feb 7, 2024 · 87506c4 · 87506c4
1 parent f22f759
commit 87506c4
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 11 deletions.
diff --git a/ui/src/app/user/user-update.component.html b/ui/src/app/user/user-update.component.html
@@ -108,7 +108,7 @@ <h1 id="jhi-ms-user-heading" class="mt-5" i18n="@@gatewayApp.msUserServiceMSUser
         </div>
       </div>
       <div class="form-group">
-        <button type="button" id="cancel-save" class="btn btn-outline-primary" (click)="navigateToUsersList()">
+        <button type="button" id="cancel-save" class="btn btn-outline-primary mr-2" (click)="navigateToUsersList()">
           <fa-icon [icon]="faBan"></fa-icon>&nbsp;<span i18n="@@entity.action.cancel.string">Cancel</span>
         </button>
 

diff --git a/ui/src/content/scss/_bootstrap-variables.scss b/ui/src/content/scss/_bootstrap-variables.scss
@@ -91,11 +91,23 @@ body {
   border-color: #2e7f9f;
 }
 
-.dropdown-item.active,
-.dropdown-item:active {
+.btn-outline-primary {
+  color: #2e7f9f;
+  border-color: #2e7f9f;
+}
+.btn-outline-primary:hover {
   color: #fff;
-  text-decoration: none;
   background-color: #2e7f9f;
+  border-color: #2e7f9f;
+}
+.btn-outline-primary.focus,
+.btn-outline-primary:focus {
+  box-shadow: 0 0 0 0.2rem rgba(46, 127, 159, 0.5);
+}
+.btn-outline-primary.disabled,
+.btn-outline-primary:disabled {
+  color: #2e7f9f;
+  background-color: transparent;
 }
 
 .page-item.active .page-link {
@@ -123,23 +135,38 @@ body {
   background-color: #e9ecef;
   border-color: #dee2e6;
 }
-
-a:hover {
-  text-decoration: underline;
-}
 a,
 a:hover {
   color: #2e7f9f;
 }
-a {
-  cursor: pointer;
-}
 a,
 h2,
 h3,
 h4 {
   font-weight: 700;
 }
+a:hover {
+  text-decoration: underline;
+}
+a {
+  cursor: pointer;
+}
+.dropdown-item {
+  font-weight: 400;
+  color: #212529;
+  text-align: inherit;
+  white-space: nowrap;
+}
+.dropdown-item.active,
+.dropdown-item:active {
+  color: #fff;
+  text-decoration: none;
+  background-color: #2e7f9f;
+}
+.dropdown-item:hover {
+  color: #16181b;
+  text-decoration: none;
+}
 a {
   text-decoration: none;
   background-color: transparent;