Re-styled Search form.

Author: johnpinto1

src/themes/datashare/app/shared/search-form/search-form.component.html

@@ -1,6 +1,6 @@
 <!-- // DATASHARE - start -->
 <div class="datashare-search-form-container px-3 py-3 my-3 bg-primary text-white">
-    <h3 class="border-bottom">Search Datashare</h3>
+    <h3>Search Datashare</h3>
     <form #form="ngForm" (ngSubmit)="onSubmit(form.value)" action="/search">
         <div>
             <div class="form-group input-group">
@@ -11,7 +11,7 @@ <h3 class="border-bottom">Search Datashare</h3>
                         {{dsoNameService.getName(selectedScope | async) || ('search.form.scope.all' | translate)}}
                     </button>
                 </div>
-                <input type="text" [(ngModel)]="query" name="query" class="form-control no-border"
+                <input type="text" [(ngModel)]="query" name="query" class="datashare-search-form-input form-control no-border"
                     [attr.aria-label]="searchPlaceholder" [attr.data-test]="'search-box' | dsBrowserOnly"
                     [placeholder]="searchPlaceholder">
 

src/themes/datashare/app/shared/search-form/search-form.component.scss

@@ -2,19 +2,35 @@
   border-radius: 0.5rem;
 }
 
+.datashare-search-form-input {
+  /* top-left | top-right | bottom-right | bottom-left */
+  border-radius: 0.25rem 0 0 0.25rem !important;
+}
+
 
 .scope-button {
   color: var(--datashare-blue-muted) !important;
   background-color: #fff !important;
-  margin-right: 1rem !important;
+  border-radius: 0.25rem !important;
+  margin-right: 1rem;
 }
 
 .search-button.btn {
   background-color: #fff !important;
-  padding: .1rem !important;
+  // padding: .2rem !important;
   border-left: none !important;
+  border-right: none !important;
+  
+}
+
+.search-button .search-icon {
+   margin-left: -1px; /* Example adjustment */
+   padding-right: 0px;
 }
 
+.btn {
+  line-height: 1rem !important;
+}
 
 .search-icon {
   background-image: url('/assets/datashare/images/search.svg');
@@ -24,8 +40,10 @@
   background-color: transparent; // Explicitly set to transparent
   width: 1.2rem;
   height: 1.5rem;
-  margin-right: 0.5rem;
+  /* top-left | top-right | bottom-right | bottom-left */
+  border-radius: 0 0.25rem 0.25rem 0 !important;
+  border: none !important;
   display: inline-block;
   vertical-align: middle;
   filter: brightness(0) saturate(100%) invert(30%);
-}
+}