From 413771b8f97bcd48e662fe3193edc539bd59be9b Mon Sep 17 00:00:00 2001
From: Olli Mannevaara <olli.mannevaara@identio.fi>
Date: Wed, 17 Jan 2024 11:32:15 +0200
Subject: [PATCH] Adjust the presentation of side panel filters

---
 .../filter-option/filter-option.component.html  | 17 +++++++++++------
 .../filter-option/filter-option.component.scss  |  6 +++++-
 .../filter-option/filter-option.component.ts    |  4 +++-
 3 files changed, 19 insertions(+), 8 deletions(-)

diff --git a/src/app/portal/components/filter-option/filter-option.component.html b/src/app/portal/components/filter-option/filter-option.component.html
index d7c087ad4..5ba7644a1 100644
--- a/src/app/portal/components/filter-option/filter-option.component.html
+++ b/src/app/portal/components/filter-option/filter-option.component.html
@@ -1,15 +1,20 @@
-<div class='filter-option-layout' (click)='toggleValue()' matRipple>
-  <div style='margin-right: 0.5rem'>
-    <input type='checkbox' [ngModel]='value'>
+<div class='filter-option-layout focus-me' (click)='toggleValue()' matRipple tabindex='0'>
+  <div style='display: flex; justify-content: center; align-items: center'>
+
+    <!-- Position mat-checkbox to appear vertically and horizontally centered using pixels -->
+    <div style='width: 24px; height: 20px; margin: 5px 20px 5px 2px; position: relative'>
+      <mat-checkbox style='position: absolute; top: -5px; left: 2px; width: 10px; height: 10px' [ngModel]='value'></mat-checkbox>
+    </div>
+
   </div>
 
   <div style='display: flex; flex-grow: 1; justify-content: space-between'>
-    <div>
+    <div style='display: flex; justify-content: center; font-size: 1.1rem;'>
       {{label}}
     </div>
 
-    <div>
-      ({{count}})
+    <div style='display: flex; justify-content: center; align-items: center; font-size: 14px; color: grey'>
+      {{count}}
     </div>
   </div>
 </div>
diff --git a/src/app/portal/components/filter-option/filter-option.component.scss b/src/app/portal/components/filter-option/filter-option.component.scss
index 66d046b6f..0fcbfe167 100644
--- a/src/app/portal/components/filter-option/filter-option.component.scss
+++ b/src/app/portal/components/filter-option/filter-option.component.scss
@@ -5,8 +5,12 @@
 
 .filter-option-layout {
   display: flex;
+  justify-content: center;
   align-items: center;
-  padding: 16px 12px;
+
+  // padding: 16px 12px;
+  padding: 8px;
+
   cursor: pointer;
   user-select: none;
 
diff --git a/src/app/portal/components/filter-option/filter-option.component.ts b/src/app/portal/components/filter-option/filter-option.component.ts
index 69fe8d1e8..b9d37ef15 100644
--- a/src/app/portal/components/filter-option/filter-option.component.ts
+++ b/src/app/portal/components/filter-option/filter-option.component.ts
@@ -1,6 +1,7 @@
 import { Component, EventEmitter, Input, Output } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { MatRippleModule } from '@angular/material/core';
+import { MatCheckboxModule } from '@angular/material/checkbox';
 
 @Component({
   selector: 'app-filter-option',
@@ -8,7 +9,8 @@ import { MatRippleModule } from '@angular/material/core';
   styleUrls: ['./filter-option.component.scss'],
   imports: [
     FormsModule,
-    MatRippleModule
+    MatRippleModule,
+    MatCheckboxModule
   ],
   standalone: true
 })