From bb66c28c3e8f2539b6a57980ce9e2dd264657a5a Mon Sep 17 00:00:00 2001
From: Prema <premlatha.blaze@gmail.com>
Date: Tue, 10 Sep 2019 17:02:14 +0530
Subject: [PATCH] design changes

---
 .../siteheader/siteheader.component.html      |  3 +-
 .../block-detail/block-detail.component.html  | 44 ++++++++++++-------
 src/assets/css/responsive.css                 |  6 +--
 src/assets/css/style.css                      |  7 +--
 4 files changed, 37 insertions(+), 23 deletions(-)

diff --git a/src/app/shared/components/siteheader/siteheader.component.html b/src/app/shared/components/siteheader/siteheader.component.html
index e654cb2..43bd87f 100644
--- a/src/app/shared/components/siteheader/siteheader.component.html
+++ b/src/app/shared/components/siteheader/siteheader.component.html
@@ -12,7 +12,8 @@
 
 
     <div class="ml-auto ">
-      <a class="chart_heading d-sm-none" routerLink="/"><span class="txt_primary">Epic</span><span>Explorer</span></a>
+      <a class="chart_heading d-sm-none" routerLink="/"> <img src="/assets/img/ftrlogo_light.png" height="30"  class="light_theme_display">
+        <img src="/assets/img/ftrlogo_dark.png" height="30" class="dark_theme_display"></a>
       <div class=" d-none d-sm-inline-block mr-3 position-relative">
           <span>You are viewing </span>
           <select (change)="onChangeNetwork($event.target.value)" class="langbut py-2 pr-3 pl-1">
diff --git a/src/app/view/block-view/block-detail/block-detail.component.html b/src/app/view/block-view/block-detail/block-detail.component.html
index d7a3284..d94a635 100644
--- a/src/app/view/block-view/block-detail/block-detail.component.html
+++ b/src/app/view/block-view/block-detail/block-detail.component.html
@@ -293,35 +293,49 @@
           <div class="container">
                   <h3>&nbsp; Output Commit <span style="font-size:15px"></span></h3>
       
-                  <table class="table table-horizontal-bordered table-hover">
+                  <table class="table table-horizontal-bordered table-hover hashdata_table">
                           <tbody>
                             <tr>
-                              <td>Created at block </td>
-                              <td>{{ hashdata.BlockchainBlockFetchQuery.Height }}</td>
+                              <td class="d-none d-md-table-cell">Created at block </td>
+                              <td>
+                                  <p class="d-md-none">Created at block</p>
+                                {{ hashdata.BlockchainBlockFetchQuery.Height }}</td>
                             </tr>
                            <tr>
-                            <td>Created At </td>
-                            <td>{{ hashdata.BlockchainBlockFetchQuery.Timestamp }}</td>
+                            <td class="d-none d-md-table-cell">Created At </td>
+                            <td>
+                                <p class="d-md-none">Created At</p>
+                              {{ hashdata.BlockchainBlockFetchQuery.Timestamp }}</td>
                           </tr>
                           <tr>
-                            <td>Output Type</td>
-                            <td>{{ hashdata.BlockchainBlockOutputFetchQuery[0].OutputType }}</td>
+                            <td class="d-none d-md-table-cell">Output Type</td>
+                            <td>
+                                <p class="d-md-none">Output Type</p>
+                              {{ hashdata.BlockchainBlockOutputFetchQuery[0].OutputType }}</td>
                           </tr>
                           <tr>
-                            <td>Proof</td>
-                            <td>{{ hashdata.BlockchainBlockOutputFetchQuery[0].Proof }}</td>
+                            <td class="d-none d-md-table-cell">Proof</td>
+                            <td>
+                                <p class="d-md-none">Proof</p>
+                              {{ hashdata.BlockchainBlockOutputFetchQuery[0].Proof }}</td>
                           </tr>
                           <tr>
-                            <td>Proof hash</td>
-                            <td>{{ hashdata.BlockchainBlockOutputFetchQuery[0].ProofHash }}</td>
+                            <td class="d-none d-md-table-cell">Proof hash</td>
+                            <td>
+                                <p class="d-md-none">Proof hash</p>
+                              {{ hashdata.BlockchainBlockOutputFetchQuery[0].ProofHash }}</td>
                           </tr>
                           <tr>
-                            <td>Merkle Proof</td>
-                            <td>{{ hashdata.BlockchainBlockOutputFetchQuery[0].MerkleProof }}</td>
+                            <td class="d-none d-md-table-cell">Merkle Proof</td>
+                            <td class="text_break">
+                                <p class="d-md-none">Merkle Proof</p>
+                              {{ hashdata.BlockchainBlockOutputFetchQuery[0].MerkleProof }}</td>
                           </tr>
                           <tr>
-                            <td>MMR Index</td>
-                            <td>{{ hashdata.BlockchainBlockOutputFetchQuery[0].MmrIndex }}</td>
+                            <td class="d-none d-md-table-cell">MMR Index</td>
+                            <td>
+                              <p class="d-md-none">MMR Index</p>
+                              {{ hashdata.BlockchainBlockOutputFetchQuery[0].MmrIndex }}</td>
                           </tr>
                       </tbody>
                   </table>
diff --git a/src/assets/css/responsive.css b/src/assets/css/responsive.css
index 92aae3f..0f5e00b 100644
--- a/src/assets/css/responsive.css
+++ b/src/assets/css/responsive.css
@@ -71,6 +71,7 @@
     .ngx-pagination li{display: none;}
     .ngx-pagination li.pagination-previous{display: inline-block;}
     .ngx-pagination li.pagination-next{display: inline-block;}
+    .hashdata_table td{border: 1px solid #a6a6a6;}
 
 }
 @media(max-width: 575px){
@@ -91,12 +92,9 @@
     /* .view_page_header{text-align: center;} */
     .view_page_header .navbar-brand{display: block; margin: 0 auto;}
     .view_page_header .ml-auto{margin: 0 !important; display: inherit;}
-
 }
 @media(max-width: 470px){
-    .navbar-expand .navbar-collapse.home_mble_hdr{display: block !important;}
-    
-
+    .navbar-expand .navbar-collapse.home_mble_hdr{display: block !important;} 
 }
 @media(max-width: 365px){
     .mobile_table .col-6 {flex: 0 0 100%;max-width: 100%;}
diff --git a/src/assets/css/style.css b/src/assets/css/style.css
index 93a7330..242af2a 100644
--- a/src/assets/css/style.css
+++ b/src/assets/css/style.css
@@ -391,6 +391,7 @@ a:focus {
 .zerolinelayer path {
   stroke: #a6a6a6 !important;
 }
+.text_break{white-space: normal; word-break: break-all;}
 /************************************************Footer*****************************************/
 .footer_div {
   border-top: 1px solid rgba(0, 0, 0, 0.15);
@@ -598,7 +599,7 @@ body.dark_theme {
   color: #a6a6a6;
 }
 .dark_theme .table td {
-  color: #c0d2ff;
+  color: #f3f4f2;
 }
 .dark_theme .day_filter a.active {
   /* background-color: #BF9B30; */
@@ -634,7 +635,7 @@ body.dark_theme {
 .dark_theme .block_div h5{color: #BF9B30;}
 .dark_theme .ftr_services a,
 .dark_theme .ftr_services {
-  color: #c0d2ff;
+  color: #f3f4f2;
 }
 .dark_theme .ftr_services .gray_txt {
   color: #3b4e7c;
@@ -659,7 +660,7 @@ body.dark_theme {
   color: #f3f4f2 !important;
 }
 .dark_theme td a.txt_secondary {
-  color: #c0d2ff;
+  color: #f3f4f2;
 }
 .dark_theme .main-svg:first-child {
   /* background: rgb(39, 49, 75) !important; */