From c1c683f01e4e5bf4eeefb6b74a938d8d901b2aac Mon Sep 17 00:00:00 2001
From: Simon Malesys <simon.malesys@pasteur.fr>
Date: Tue, 15 Oct 2024 11:50:35 +0200
Subject: [PATCH] Turn checkboxes into chips

---
 src/client/components/AdvancedSearch.vue  | 18 ++++++++++++++----
 src/client/components/AntibodiesTable.vue |  2 +-
 src/client/components/TheAntibodyPage.vue |  2 +-
 src/client/globals.css                    |  1 +
 4 files changed, 17 insertions(+), 6 deletions(-)

diff --git a/src/client/components/AdvancedSearch.vue b/src/client/components/AdvancedSearch.vue
index 773248e4..8b59449f 100644
--- a/src/client/components/AdvancedSearch.vue
+++ b/src/client/components/AdvancedSearch.vue
@@ -227,7 +227,7 @@ function removeFilter (filterChip: FilterChip): void {
 }
 
 .filter-chip {
-  border-radius: 16px;
+  border-radius: var(--big-radius);
   border: 1px solid var(--primary);
   color: var(--primary);
   padding-left: 8px;
@@ -260,25 +260,35 @@ function removeFilter (filterChip: FilterChip): void {
   flex-flow: row wrap;
   gap: var(--spacing);
   padding-left: var(--spacing);
+  padding-bottom: var(--spacing);
   max-width: 800px;
 }
 
 .checkbox {
   display: flex;
-  gap: calc(var(--spacing) / 2);
+  transition: color 0.1s;
 
   &:hover {
     color: var(--primary);
   }
 }
 
-.checkbox input,
+.checkbox input {
+  display: none;
+}
+
 .checkbox label {
   cursor: pointer;
+  border: 1px solid inherit;
+  border-radius: var(--big-radius);
+  padding: calc(var(--spacing) / 3) calc(var(--spacing) / 2);
+  transition: all 0.2s;
 }
 
 .checkbox input:checked+label {
-  color: var(--primary);
+  background-color: var(--primary);
+  border-color: var(--primary);
+  color: var(--black);
 }
 
 .advanced-search-dialog footer {
diff --git a/src/client/components/AntibodiesTable.vue b/src/client/components/AntibodiesTable.vue
index 79e33d4d..4dbd9627 100644
--- a/src/client/components/AntibodiesTable.vue
+++ b/src/client/components/AntibodiesTable.vue
@@ -351,7 +351,7 @@ function download(): void {
 .loader {
   height: 23px;
   width: 23px;
-  border-radius: 50%;
+  border-radius: var(--big-radius);
   display: inline-block;
   border-top: 3px solid #FFF;
   border-right: 3px solid transparent;
diff --git a/src/client/components/TheAntibodyPage.vue b/src/client/components/TheAntibodyPage.vue
index 3425fc9d..a03e5772 100644
--- a/src/client/components/TheAntibodyPage.vue
+++ b/src/client/components/TheAntibodyPage.vue
@@ -140,7 +140,7 @@ nav {
 .doc-link {
   border: 1px solid;
   border-color: inherit;
-  border-radius: 50%;
+  border-radius: var(--big-radius);
   margin-left: 7px;
   padding: 0 7px;
 }
diff --git a/src/client/globals.css b/src/client/globals.css
index c8a7d569..3383f5f0 100644
--- a/src/client/globals.css
+++ b/src/client/globals.css
@@ -20,6 +20,7 @@
   --spacing: 20px;
   --spacing-table: 16px;
   --radius: 5px;
+  --big-radius: 24px;
 
   --button-padding: 0.5em 0.75em;
 
-- 
GitLab