Catalog alignment

Issue-ID: SDC-2724
Signed-off-by: ys9693 <ys9693@att.com>
Change-Id: I52b4aacb58cbd432ca0e1ff7ff1f7dd52099c6fe

2 files changed, 10 insertions, 24 deletions

diff --git a/catalog-ui/src/app/ng2/components/ui/search-bar/search-bar.component.html b/catalog-ui/src/app/ng2/components/ui/search-bar/search-bar.component.html
index 8682473d14..1f952c46f5 100644
--- a/catalog-ui/src/app/ng2/components/ui/search-bar/search-bar.component.html
+++ b/catalog-ui/src/app/ng2/components/ui/search-bar/search-bar.component.html
@@ -1,21 +1,5 @@
-<!--
-  ~ Copyright (C) 2018 AT&T Intellectual Property. All rights reserved.
-  ~
-  ~ Licensed under the Apache License, Version 2.0 (the "License");
-  ~ you may not use this file except in compliance with the License.
-  ~ You may obtain a copy of the License at
-  ~
-  ~      http://www.apache.org/licenses/LICENSE-2.0
-  ~
-  ~ Unless required by applicable law or agreed to in writing, software
-  ~ distributed under the License is distributed on an "AS IS" BASIS,
-  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-  ~ See the License for the specific language governing permissions and
-  ~ limitations under the License.
-  -->
- 
-<div class="search-bar-container {{class}}">
-    <input class="search-bar-input" type="text" [placeholder]="placeholder" [(ngModel)]="searchQuery" (ngModelChange)="searchQueryChange($event)"/>
-    <span class="clear-search-x" *ngIf="searchQuery" (click)="clearSearchQuery()">x</span>
-    <button class="search-bar-button" (click)="searchButtonClick()"></button>
+<div class="sdc-search-bar-container {{class}}">
+    <input class="sdc-search-bar-input" type="text" [placeholder]="placeholder" [(ngModel)]="searchQuery" (ngModelChange)="searchQueryChange($event)"/>
+    <span class="sdc-clear-search-x" *ngIf="searchQuery" (click)="clearSearchQuery()">x</span>
+    <button class="sdc-search-bar-button" (click)="searchButtonClick()"></button>
 </div>
\ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/components/ui/search-bar/search-bar.component.less b/catalog-ui/src/app/ng2/components/ui/search-bar/search-bar.component.less
index 751fceec35..c09951a284 100644
--- a/catalog-ui/src/app/ng2/components/ui/search-bar/search-bar.component.less
+++ b/catalog-ui/src/app/ng2/components/ui/search-bar/search-bar.component.less
@@ -1,9 +1,9 @@
-.search-bar-container {
+.sdc-search-bar-container {
     display:flex;
     border-radius: 4px;
     box-shadow: 0px 2px 3.88px 0.12px rgba(0, 0, 0, 0.29);
 
-    .search-bar-input {
+    .sdc-search-bar-input {
         border: 1px solid #cdcdcd;
         border-radius: 4px;
         border-right:none;
@@ -14,9 +14,11 @@
         color:  #5a5a5a;
         font-size: 1em;
         font-style: italic;
+
+
     }
 
-    .clear-search-x {
+    .sdc-clear-search-x {
         position:absolute;
         right:40px;
         top:5px;
@@ -29,7 +31,7 @@
         }
     }
 
-    .search-bar-button {
+    .sdc-search-bar-button {
         background: url('../../../../../assets/styles/images/sprites/sprite-global.png') no-repeat -206px -1275px;
         background-color:  rgba(234, 234, 234, 0.88);
         width: 30px;