From ba1f53fcbf5f00af8e47e45e57f0995bd036d566 Mon Sep 17 00:00:00 2001
From: Alexandre Caron <alexandre.caron12@msp.gouv.qc.ca>
Date: Wed, 2 Aug 2023 13:02:45 -0400
Subject: [PATCH] style adjustment

---
 src/app/pages/footer/footer.component.scss    | 16 +++------
 .../bottompanel/bottompanel.component.html    |  2 +-
 src/app/pages/portal/portal.component.scss    |  2 --
 src/style/reset.scss                          | 23 -------------
 src/styles.scss                               | 10 +++++-
 src/theme/igo-override.scss                   | 33 ++++---------------
 src/theme/igo-theme-override.scss             | 30 +++++++++++++++++
 src/theme/layout.scss                         |  4 +--
 src/theme/material-override/button.scss       |  8 +++--
 src/theme/material-override/input.scss        |  5 ++-
 src/theme/theme.scss                          |  3 +-
 11 files changed, 65 insertions(+), 71 deletions(-)
 delete mode 100644 src/style/reset.scss
 create mode 100644 src/theme/igo-theme-override.scss

diff --git a/src/app/pages/footer/footer.component.scss b/src/app/pages/footer/footer.component.scss
index 1368c809..0cfbeae5 100644
--- a/src/app/pages/footer/footer.component.scss
+++ b/src/app/pages/footer/footer.component.scss
@@ -45,16 +45,10 @@
     order: 1;
   }
 
-  ::ng-deep div.ol-scale-line {
-    position: fixed !important;
-    display: flex;
-    flex-direction: row;
-    top: unset !important;
-    left: 10px !important;
-    bottom: 3px !important;
-    background: unset !important;
-    color: black;
-    z-index: 5 !important;
-    transform: unset !important;
+  ::ng-deep .ol-scale-line {
+    position: relative;
+    left: 0;
+    bottom: 0;
+    margin-left: 12px;
   }
 }
diff --git a/src/app/pages/portal/panels/bottompanel/bottompanel.component.html b/src/app/pages/portal/panels/bottompanel/bottompanel.component.html
index 54cdd6d7..e1bda23d 100644
--- a/src/app/pages/portal/panels/bottompanel/bottompanel.component.html
+++ b/src/app/pages/portal/panels/bottompanel/bottompanel.component.html
@@ -9,7 +9,7 @@
     (keydown.Enter)= "$event.stopPropagation()"
     (click)= "$event.stopPropagation()"
     >
-    <mat-expansion-panel-header>
+    <mat-expansion-panel-header collapsedHeight="56px">
       <igo-search-bar *ngIf= "showSearchBar"
         #searchbar
         (click)= "onSearchBarClick($event)"
diff --git a/src/app/pages/portal/portal.component.scss b/src/app/pages/portal/portal.component.scss
index b8be37fc..4353eb5b 100644
--- a/src/app/pages/portal/portal.component.scss
+++ b/src/app/pages/portal/portal.component.scss
@@ -235,8 +235,6 @@
     margin-left: auto;
     align-self: flex-end;
     margin-top: auto;
-    box-shadow: 0px 3px 1px -2px rgb(0 0 0 / 20%),
-      0px 2px 2px 0px rgb(0 0 0 / 14%), 0px 1px 5px 0px rgb(0 0 0 / 12%);
   }
 
   igo-zoom-button {
diff --git a/src/style/reset.scss b/src/style/reset.scss
deleted file mode 100644
index 36a9a604..00000000
--- a/src/style/reset.scss
+++ /dev/null
@@ -1,23 +0,0 @@
-/*** Reset ***/
-
-html,
-body,
-div {
-  border: 0;
-  margin: 0;
-  padding: 0;
-}
-
-html, body {
-  width: 100%;
-  height: 100%;
-}
-
-* {
-  box-sizing: border-box;
-}
-
-body {
-  margin: 0;
-  overflow: hidden;
-}
diff --git a/src/styles.scss b/src/styles.scss
index 3df519c4..bc5a034c 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -1,11 +1,19 @@
 @use '@igo2/core/all-style';
 @use '@igo2/core/layout';
 
-@use 'style/reset.scss';
 @use 'theme/theme.scss';
 @use 'variables';
 @use './app/pages/portal/portal.variables' as portal;
 
+body {
+  margin: 0;
+  overflow: hidden;
+}
+
+* {
+  box-sizing: border-box;
+}
+
 .page {
   overflow-y: auto !important;
   overflow-x: clip;
diff --git a/src/theme/igo-override.scss b/src/theme/igo-override.scss
index 0e2a4a33..12e200f8 100644
--- a/src/theme/igo-override.scss
+++ b/src/theme/igo-override.scss
@@ -3,31 +3,6 @@
 @use 'variables';
 @use './palette';
 
-@mixin themes($theme) {
-  @include search-bar-density($theme);
-}
-
-@mixin search-bar-density($theme) {
-  $density: mat.get-density-config($theme);
-
-  $theme4: map.merge(
-    $theme,
-    (
-      density: $density - 4
-    )
-  );
-
-  $theme2: map.merge(
-    $theme,
-    (
-      density: $density - 2
-    )
-  );
-  igo-search-bar {
-    @include mat.form-field-density($theme4);
-    @include mat.icon-button-density($theme2);
-  }
-}
 
 $color-500: map.get(palette.$palette, 500);
 $color-500-contrast: map.get(palette.$palette, contrast, 500);
@@ -57,7 +32,7 @@ igo-search-results-item {
     white-space: normal;
     overflow: hidden;
     text-overflow: ellipsis;
-    max-height: 36px;
+    max-height: unset !important;
     line-height: 18px !important;
   }
 }
@@ -86,7 +61,11 @@ igo-panel-header button {
   color: $color-500-contrast !important;
 }
 
+igo-rotation-button,
+igo-zoom-button,
+igo-offline-button,
+igo-home-extent-button,
 igo-baselayers-switcher,
 igo-geolocate-button {
-  box-shadow: 0 1px 4px rgb(34 54 84 / 24%);
+  @include mat.elevation(2);
 }
diff --git a/src/theme/igo-theme-override.scss b/src/theme/igo-theme-override.scss
new file mode 100644
index 00000000..a7ab5af4
--- /dev/null
+++ b/src/theme/igo-theme-override.scss
@@ -0,0 +1,30 @@
+@use 'sass:map';
+@use '@angular/material' as mat;
+@use 'variables';
+@use './palette';
+
+@mixin themes($theme) {
+  @include search-bar-density($theme);
+}
+
+@mixin search-bar-density($theme) {
+  $density: mat.get-density-config($theme);
+
+  $theme4: map.merge(
+    $theme,
+    (
+      density: $density - 4
+    )
+  );
+
+  $theme2: map.merge(
+    $theme,
+    (
+      density: $density - 2
+    )
+  );
+  igo-search-bar {
+    @include mat.form-field-density($theme4);
+    @include mat.icon-button-density($theme2);
+  }
+}
diff --git a/src/theme/layout.scss b/src/theme/layout.scss
index b300c0d4..d6e3130e 100644
--- a/src/theme/layout.scss
+++ b/src/theme/layout.scss
@@ -8,8 +8,8 @@
   display: flex;
   flex-wrap: wrap;
   align-content: flex-start;
-  height: 100%;
-  width: 98%;
+  width: 100%;
+  padding: 0 16px;
   margin: auto;
 }
 
diff --git a/src/theme/material-override/button.scss b/src/theme/material-override/button.scss
index a56c8318..629ef15b 100644
--- a/src/theme/material-override/button.scss
+++ b/src/theme/material-override/button.scss
@@ -1,5 +1,9 @@
+@use 'sass:map';
 @use '@angular/material' as mat;
 @use '../typography';
+@use '../palette';
+
+$color-500: map.get(palette.$palette, 500);
 
 .mdc-button {
   font-size: mat.font-size(typography.$typography, body-1) !important;
@@ -16,6 +20,6 @@
 }
 
 .mat-mdc-raised-button {
-  color: #095797 !important;
-  border-color: #095797 !important;
+  color: $color-500 !important;
+  border-color: $color-500 !important;
 }
\ No newline at end of file
diff --git a/src/theme/material-override/input.scss b/src/theme/material-override/input.scss
index 215fa036..9c6db8d0 100644
--- a/src/theme/material-override/input.scss
+++ b/src/theme/material-override/input.scss
@@ -1,3 +1,6 @@
+@use 'sass:map';
+@use '../palette';
+
 .mat-mdc-input-element {
-  color: #647287;
+  color: map.get(palette.$color, grey, medium) !important;
 }
diff --git a/src/theme/theme.scss b/src/theme/theme.scss
index f7c454f9..902867ef 100644
--- a/src/theme/theme.scss
+++ b/src/theme/theme.scss
@@ -5,6 +5,7 @@
 @use './typography';
 @use './layout';
 @use './igo-override';
+@use './igo-theme-override';
 @use './material-override/index';
 @use '../app/app.theming' as app;
 
@@ -42,7 +43,7 @@ $theme: map.merge(
 @include mat.all-component-themes($theme);
 
 @include igo.all-component-themes($theme);
-@include igo-override.themes($theme);
+@include igo-theme-override.themes($theme);
 
 @include app.themes($theme);