Update Styling on Search Page

apps/page/customer/src/lib/customer-search/search-main/search-main.component.html

@@ -16,7 +16,7 @@
       [formControl]="search.queryControl"
       type="text"
       uiSearchboxInput
-      placeholder="Name, E-Mail, Kundennummer, ..."
+      placeholder="Name, E-Mail, Kundenkartennummer, ..."
       (inputChange)="search.inputChange$.next($event)"
       (keydown.enter)="search.search(); autocomplete.close()"
     />

apps/page/customer/src/lib/customer-search/search-main/search-main.component.scss

@@ -3,11 +3,11 @@
 }
 
 .title {
-  @apply text-3xl font-bold;
+  @apply text-page-heading font-bold;
 }
 
 .info {
-  @apply text-2xl mt-1;
+  @apply text-2xl mt-1 mb-px-50;
 }
 
 .card-create-customer,
@@ -28,8 +28,16 @@
 ui-searchbox {
   @apply max-w-lg mx-auto;
 
+  input {
+    caret-color: #f70400;
+  }
+
   [uiSearchboxSearchButton] {
-    @apply bg-brand text-white;
+    @apply bg-white text-brand;
+
+    .spin {
+      @apply bg-white text-ucla-blue;
+    }
   }
 
   [uiSearchboxClearButton] {

apps/ui/searchbox/src/lib/ui-searchbox-autocomplete.component.scss

@@ -3,8 +3,7 @@
 }
 
 ::ng-deep [uiSearchboxAutocompleteOption] {
-  @apply px-4 py-5 border-0 bg-transparent text-left;
-  font-size: 21px;
+  @apply px-4 py-5 border-0 bg-transparent text-left text-regular;
 }
 
 ::ng-deep [uiSearchboxAutocompleteOption]:first-child {

tailwind.config.js

@@ -20,6 +20,7 @@ module.exports = {
       fontSize: {
         regular: '16px',
         'card-heading': '22px',
+        'page-heading': '26px',
       },
       maxWidth: {
         content: '916px',
@@ -29,6 +30,7 @@ module.exports = {
         'px-10': '10px',
         'px-15': '15px',
         'px-20': '20px',
+        'px-50': '50px',
         'px-100': '100px',
         'px-150': '150px',
       },