Ui changes

src/app/shared/components/footer/footer.component.html

@@ -5,8 +5,16 @@
           <div class="row">
             <!-- <div class="col-md-4"> -->
                 <div class="col-sm-6">
-              <a routerLink="/" class="chart_heading"><span class="txt_primary">Epic </span><span
+              
-                  class="txt_secondary">Explorer</span></a>
+                <!-- <span class="txt_primary">Epic </span><span
+                  class="txt_secondary">Explorer</span> -->
+                  <div class="logo_img">
+                      <a routerLink="/" class="chart_heading d-inline-block">
+                    <img src="/assets/img/ftrlogo_light.png" height="50"  class="light_theme_display">
+                    <img src="/assets/img/ftrlogo_dark.png" height="50" class="dark_theme_display">
+                  </a>
+                  </div>
+                
             </div>
             <div class="col-md-5 col-lg-6 ftr_services d-none">
               <p><span class="gray_txt">Services:</span> <a href="#">Compare </a> | <a href="#">Charts New </a> | <a href="#">Feed </a> |

src/app/shared/components/header/header.component.html

@@ -112,9 +112,13 @@
             </ul>
       </h1> -->
   </div>
-  <h2 class="text-center my-3 logo_txt">
+  <!-- <h2 class="text-center my-3 logo_txt">
     <span class="txt_primary">Epic</span> Explorer
-  </h2>
+  </h2> -->
+  <div class="logo_img text-center mb-3">
+    <img src="/assets/img/logo_light.png" height="100"  class="light_theme_display mx-auto">
+    <img src="/assets/img/logo_dark.png" height="100" class="dark_theme_display mx-auto">
+  </div>
   <div class="container">
     <div class="search position-relative">
       <epic-explorer-search></epic-explorer-search>

src/app/shared/components/siteheader/siteheader.component.html

@@ -1,7 +1,14 @@
 <nav class="navbar navbar-expand-lg navbar-light view_page_header">
   <div class="container">
-    <a class="navbar-brand chart_heading d-sm-block d-none" routerLink="/"><span
+    <a class="navbar-brand chart_heading d-sm-block d-none" routerLink="/">
-        class="txt_primary">Epic </span><span>Explorer</span></a>
+      <!-- <span class="txt_primary">Epic </span><span>Explorer</span> -->
+      <div class="logo_img">
+          <a routerLink="/" class="chart_heading d-inline-block p-0">
+        <img src="/assets/img/ftrlogo_light.png" height="50"  class="light_theme_display">
+        <img src="/assets/img/ftrlogo_dark.png" height="50" class="dark_theme_display">
+      </a>
+      </div>
+      </a>
 
 
     <div class="ml-auto ">
@@ -31,7 +38,7 @@
           <!-- <span> Network </span> -->
       </div>
       <div class="position-relative d-none d-sm-inline-block">
-        <input type="text" [(ngModel)]="search" #ctrl="ngModel" class="form-control search_input"
+        <input type="text" [(ngModel)]="search" #ctrl="ngModel" class="form-control search_input bg_gray"
           (keyup.enter)="ctrl.value ? onSearch(ctrl.value) : ''" placeholder="Search by hash or height">
         <button class="btn search_btn" (click)="ctrl.value ? onSearch(ctrl.value) : ''">
           <!-- <a href="/blockdetail/{{ ctrl.value }}"  > -->
@@ -57,7 +64,7 @@
 
     <div class="position-relative d-block d-sm-none w-100 mt-3">
 
-      <input type="text" [(ngModel)]="search" #ctrl="ngModel" class="form-control search_input"
+      <input type="text" [(ngModel)]="search" #ctrl="ngModel" class="form-control search_input bg_gray"
         (keyup.enter)="ctrl.value ? onSearch(ctrl.value) : ''" placeholder="{{'home.SEARCH_TEXT' | translate}}">
       <button class="btn search_btn" (click)="ctrl.value ? onSearch(ctrl.value) : ''">
         <!-- <a href="/blockdetail/{{ ctrl.value }}"  > -->

src/assets/css/style.css

@@ -203,6 +203,7 @@ a:focus {
   border: none;
   background-color: #f3f4f2;
 }
+.bg_gray{background-color: #dadada ;}
 .search_btn {
   position: absolute;
   top: 4px;
@@ -414,6 +415,7 @@ a:focus {
 .view_content{background-color: #eeeeee;min-height: 800px;}
 .mble_view_hdr{display: inline-block;}
 .box_shadow_large{box-shadow: 0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.12),0 1px 5px 0 rgba(0,0,0,.2);}
+.box_shadow_large a{color: #BF9B30;}
 .view_txt{color: #acacac;font-size: 17px;}
 .block_rotate {
   animation: rotation 2s infinite linear;
@@ -672,8 +674,8 @@ body.dark_theme {
   color: #a6a6a6;
 }
 .dark_theme .footer_div{border-color: #a5a5a5}
-.dark_theme .view_page_header {background: #1c2437;}
+.dark_theme .view_page_header {background: #222223;}
-.dark_theme .view_content {background-color: #222223;}
+.dark_theme .view_content {background-color: #252525;}
 .js-plotly-plot .plotly .modebar,
 .zerolinelayer {
   display: none;