ui updates

Author: xelaint

apps/daffio/src/app/docs/search/components/search-button/search-button.component.ts

@@ -64,7 +64,12 @@ export class DaffioDocsSearchButtonComponent implements OnInit {
   showModal() {
     this.modal = this.modalService.open(
       DaffioDocsSearchModalComponent,
-      { ariaLabelledBy: 'Search docs' },
+      {
+        ariaLabelledBy: 'Search docs',
+        position: {
+          vertical: 'top',
+        },
+      },
     );
     this.modal.closedAnimationCompleted$.pipe(
       takeUntilDestroyed(this.destroyRef),

apps/daffio/src/app/docs/search/components/search-field/search-field.component.scss

@@ -18,7 +18,7 @@
 
 		&::-webkit-search-cancel-button {
 			-webkit-appearance: none;
- 			appearance: none;
+			appearance: none;
 		}
 	}
 }

apps/daffio/src/app/docs/search/components/search-footer/search-footer.component.html

@@ -17,6 +17,6 @@
 <div class="daffio-docs-search-footer__algolia">
   <span>Search by</span>
   <a href="https://www.algolia.com/developers/?utm_source=graycore&utm_medium=referral" target="_blank">
-    <daff-image src="/assets/algolia-logo.svg" width="62" height="14" alt="Algolia Logo"></daff-image>
+    <daff-image class="daffio-docs-search-footer__algolia-image" src="/assets/algolia-logo.svg" width="62" height="14" alt="Algolia Logo"></daff-image>
   </a>
 </div>

apps/daffio/src/app/docs/search/components/search-footer/search-footer.component.scss

@@ -47,4 +47,8 @@
 		font-size: 0.75rem;
 		line-height: 1rem;
 	}
+
+	&__algolia-image {
+		width: 62px;
+	}
 }

apps/daffio/src/app/docs/search/components/search-modal/search-modal.component.html

@@ -28,7 +28,7 @@
 		<li daffioDocsSearchResultItem class="daffio-docs-search-results__item">
 			<a [routerLink]="result.id">
 				<div class="daffio-docs-search-results__icon-and-result">
-					<fa-icon [icon]="faGear" [fixedWidth]="true"></fa-icon> <!-- icon changes depending on what type it is. e.g. api, guides, etc. -->
+					<fa-icon [icon]="faFileLines" [fixedWidth]="true"></fa-icon>
 					<span class="daffio-docs-search-results__result">{{result.title || result.name}}</span>
 				</div>
 				<span class="daffio-docs-search-results__category">{{result.kind}}</span>

apps/daffio/src/app/docs/search/components/search-modal/search-modal.component.ts

@@ -12,10 +12,7 @@ import {
 import { RouterLink } from '@angular/router';
 import { FaIconComponent } from '@fortawesome/angular-fontawesome';
 import { faFileLines } from '@fortawesome/free-regular-svg-icons';
-import {
-  faClockRotateLeft,
-  faGear,
-} from '@fortawesome/free-solid-svg-icons';
+import { faClockRotateLeft } from '@fortawesome/free-solid-svg-icons';
 import {
   map,
   Observable,
@@ -53,7 +50,6 @@ import { DaffioDocsSearchFooterComponent } from '../search-footer/search-footer.
 
 export class DaffioDocsSearchModalComponent implements AfterViewInit, OnInit {
   faFileLines = faFileLines;
-  faGear = faGear;
   faClockRotateLeft = faClockRotateLeft;
 
   @HostBinding('class.daffio-docs-search-modal') class = true;