From f02eb373ae6ee5ee0e40d8b106db5607b9bbea7e Mon Sep 17 00:00:00 2001
From: Yunlong Li <yunlong.li@csiro.au>
Date: Tue, 18 Jun 2024 16:06:21 +0800
Subject: [PATCH 1/2] AUS-4167 Minor inconsistent styling issues

---
 .../activelayerspanel.component.html          | 11 +++---
 .../activelayerspanel.component.scss          | 36 +++++++++++++++++++
 .../custompanel/layergroup.component.html     | 14 ++++----
 src/app/menupanel/menupanel.scss              | 30 ++++++++++++++++
 4 files changed, 80 insertions(+), 11 deletions(-)

diff --git a/src/app/menupanel/activelayers/activelayerspanel.component.html b/src/app/menupanel/activelayers/activelayerspanel.component.html
index f3f15a64..d943a2e4 100644
--- a/src/app/menupanel/activelayers/activelayerspanel.component.html
+++ b/src/app/menupanel/activelayers/activelayerspanel.component.html
@@ -53,9 +53,9 @@
                         <div class="card-header">
                             <ul id="card-tab" class="nav nav-tabs">
                                 <!-- Layer Styling tab -->
-                                <li (click)="selectTabPanel(layer.id,'filterpanel')" [ngClass]="{'active': getUILayerModel(layer.id)?.tabpanel.filterpanel.expanded}">
+                                <li (click)="selectTabPanel(layer.id,'filterpanel')" class="tab-item">
                                     <a data-toggle="tab">
-                                        <span class="d-none d-sm-inline">Layer Styling</span>
+                                        <span class="d-none tab-link d-sm-inline mr-2">Layer Styling</span>
                                     </a>
                                 </li>
                                 <!-- Layer Download tab -->
@@ -70,9 +70,12 @@
                             <!-- Add bookmark button -->
                             <button *ngIf="isUserLoggedIn() && !isLayerBookmarked(layer.id)" (click)="addLayerBookmark(layer.id)" type="button" class="btn btn-sm btn-info top-layer-btn" title="Bookmark Layer"><i class="fa fa-sm fa-bookmark-o"></i></button>
                             <!-- Remove bookmark button -->
-                            <button *ngIf="isUserLoggedIn() && isLayerBookmarked(layer.id)" (click)="removeLayerBookmark(layer.id)" type="button" class="btn btn-sm btn-info top-layer-btn" title="Remove Layer Bookmark"><i class="fa fa-sm fa-bookmark"></i></button>
+                            <button *ngIf="isUserLoggedIn() && isLayerBookmarked(layer.id)" (click)="removeLayerBookmark(layer.id)" class="btn-info" title="Remove Layer Bookmark"><i class="fa fa-sm fa-bookmark"></i></button>
                             <!-- Info button  -->
-                            <button (click)="displayRecordInformation(layer)" type="button" class="btn btn-sm btn-info top-layer-btn" title="Information" [ngClass]="{'active': getUILayerModel(layer.id)?.tabpanel.infopanel.expanded}">Info</button>
+                            <!-- <button (click)="displayRecordInformation(layer)" type="button" class="btn-info" title="Information" [ngClass]="{'active': getUILayerModel(layer.id)?.tabpanel.filterpanel.expanded}">Info</button> -->
+                            <div class="rh_info">	
+                                <button (click)="displayRecordInformation(layer)" class="btn-info" title="Information" [ngClass]="{'active': getUILayerModel(layer.id) && getUILayerModel(layer.id).tabpanel.infopanel.expanded}">Info</button>
+                            </div>
                         </div>
                     </div>
                     <div id="card-tab-content" class="tab-content">
diff --git a/src/app/menupanel/activelayers/activelayerspanel.component.scss b/src/app/menupanel/activelayers/activelayerspanel.component.scss
index 4a0345b2..760d70bf 100644
--- a/src/app/menupanel/activelayers/activelayerspanel.component.scss
+++ b/src/app/menupanel/activelayers/activelayerspanel.component.scss
@@ -192,3 +192,39 @@
 u {
   text-decoration: none;
 }
+
+.tab-item {
+    display: inline-block;
+    // margin-right: 10px;
+    cursor: pointer;
+    padding-bottom: 8px;
+}
+
+.tab-link {
+    display: inline-block;
+    padding: 10px 15px;
+    text-decoration: none;
+    color: #605E7B; /* Primary color */
+    background-color: #f8f9fa; /* Light background */
+    border: 1px solid #dee2e6; /* Border color */
+    border-radius: 4px;
+    transition: background-color 0.2s, color 0.2s;
+}
+
+.tab-link:hover,
+.tab-link:focus {
+    background-color: #e2e6ea; /* Light hover color */
+    color: #605E7B; /* Darker text color on hover */
+}
+
+.tab-link.active {
+    background-color: #605E7B; /* Active background color */
+    color: #ffffff; /* Active text color */
+    border-color: #605E7B;
+}
+
+.rh_info .btn-info {
+    margin-bottom: 24px; 
+    background-color: #117a8b; 
+    border-color:#10707f;
+}
\ No newline at end of file
diff --git a/src/app/menupanel/custompanel/layergroup.component.html b/src/app/menupanel/custompanel/layergroup.component.html
index b545f225..b0b171a2 100644
--- a/src/app/menupanel/custompanel/layergroup.component.html
+++ b/src/app/menupanel/custompanel/layergroup.component.html
@@ -37,15 +37,15 @@
 					<div class = "rh_info_wrap">
 						<div class="card-header">
 							<ul id="card-tab" class="nav nav-tabs float-right">
-								<li (click)="selectTabPanel(layer.id,'filterpanel')" [ngClass]="{'active': getUILayerModel(layer.id).tabpanel.filterpanel.expanded}">
-									<a data-toggle="tab">
-										<span class="d-none d-sm-inline">Map Layer</span>
-									</a>
-								</li>
-							</ul>
+                                <li class="tab-item" (click)="selectTabPanel(layer.id,'filterpanel')">
+                                    <a data-toggle="tab">
+                                        <span class="d-none d-sm-inline tab-link">Map Layer</span>
+                                    </a>
+                                </li>
+                            </ul>
 						</div>
 						<div class="rh_info">	
-							<button (click)="displayRecordInformation(layer)" class="btn-info" title="Information" [ngClass]="{'active': getUILayerModel(layer.id) && getUILayerModel(layer.id).tabpanel.filterpanel.expanded}">info</button>
+							<button (click)="displayRecordInformation(layer)" class="btn-info" title="Information" [ngClass]="{'active': getUILayerModel(layer.id) && getUILayerModel(layer.id).tabpanel.filterpanel.expanded}">Info</button>
 						</div>
 					</div>
 					<div id="card-tab-content" class="tab-content">
diff --git a/src/app/menupanel/menupanel.scss b/src/app/menupanel/menupanel.scss
index fdcf2010..31463fef 100644
--- a/src/app/menupanel/menupanel.scss
+++ b/src/app/menupanel/menupanel.scss
@@ -341,4 +341,34 @@ input[type=checkbox] + label {
 .preview-legend-title {
     font-weight: bold;
     margin-bottom: 8px;
+}
+
+.tab-item {
+    display: inline-block;
+    // margin-right: 10px;
+    cursor: pointer;
+    padding-bottom: 8px;
+}
+
+.tab-link {
+    display: inline-block;
+    padding: 10px 15px;
+    text-decoration: none;
+    color: #605E7B; /* Primary color */
+    background-color: #f8f9fa; /* Light background */
+    border: 1px solid #dee2e6; /* Border color */
+    border-radius: 4px;
+    transition: background-color 0.2s, color 0.2s;
+}
+
+.tab-link:hover,
+.tab-link:focus {
+    background-color: #e2e6ea; /* Light hover color */
+    color: #605E7B; /* Darker text color on hover */
+}
+
+.tab-link.active {
+    background-color: #605E7B; /* Active background color */
+    color: #ffffff; /* Active text color */
+    border-color: #605E7B;
 }
\ No newline at end of file

From 51de2a751f0d1cc74ea09f10200381a5c099f0d3 Mon Sep 17 00:00:00 2001
From: Yunlong Li <yunlong.li@csiro.au>
Date: Wed, 19 Jun 2024 09:34:20 +0800
Subject: [PATCH 2/2] AUS-4167 Minor inconsistent styling issues

---
 src/app/menupanel/activelayers/activelayerspanel.component.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/menupanel/activelayers/activelayerspanel.component.html b/src/app/menupanel/activelayers/activelayerspanel.component.html
index d943a2e4..c9ec6040 100644
--- a/src/app/menupanel/activelayers/activelayerspanel.component.html
+++ b/src/app/menupanel/activelayers/activelayerspanel.component.html
@@ -74,7 +74,7 @@
                             <!-- Info button  -->
                             <!-- <button (click)="displayRecordInformation(layer)" type="button" class="btn-info" title="Information" [ngClass]="{'active': getUILayerModel(layer.id)?.tabpanel.filterpanel.expanded}">Info</button> -->
                             <div class="rh_info">	
-                                <button (click)="displayRecordInformation(layer)" class="btn-info" title="Information" [ngClass]="{'active': getUILayerModel(layer.id) && getUILayerModel(layer.id).tabpanel.infopanel.expanded}">Info</button>
+                                <button (click)="displayRecordInformation(layer)" type="button" class="btn-info" title="Information" [ngClass]="{'active': getUILayerModel(layer.id)?.tabpanel.infopanel.expanded}">Info</button>
                             </div>
                         </div>
                     </div>