From fa8e98ba487035111944e19e24654804f05d7479 Mon Sep 17 00:00:00 2001
From: Vio <vio@beanon.com>
Date: Sun, 6 Aug 2023 17:11:02 +0200
Subject: [PATCH 1/2] enhance(ui): Dropdown - add space between items

---
 packages/ui/src/ui/dropdown/dropdown.module.css | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/packages/ui/src/ui/dropdown/dropdown.module.css b/packages/ui/src/ui/dropdown/dropdown.module.css
index 2e00739371..36ca632919 100644
--- a/packages/ui/src/ui/dropdown/dropdown.module.css
+++ b/packages/ui/src/ui/dropdown/dropdown.module.css
@@ -62,6 +62,10 @@
   text-decoration: none;
 }
 
+.item + .item {
+  margin-top: calc(var(--space-xxxsmall) / 2);
+}
+
 .item[data-active-item],
 .item:hover,
 .item:focus,

From 3a1ca87a1679f13bfca0af8ae0d4ece865e84078 Mon Sep 17 00:00:00 2001
From: Vio <vio@beanon.com>
Date: Sun, 6 Aug 2023 17:11:33 +0200
Subject: [PATCH 2/2] enhance(ui): Filters dropdown - improve only button

---
 packages/ui/src/ui/filters/filters.module.css | 33 ++++++++++++++++---
 1 file changed, 28 insertions(+), 5 deletions(-)

diff --git a/packages/ui/src/ui/filters/filters.module.css b/packages/ui/src/ui/filters/filters.module.css
index 414a9c65eb..74f9418df3 100644
--- a/packages/ui/src/ui/filters/filters.module.css
+++ b/packages/ui/src/ui/filters/filters.module.css
@@ -28,20 +28,43 @@
 }
 
 .filterOnlyButton {
-  padding: var(--space-xxxsmall);
+  padding: calc(var(--space-xxxsmall) / 2 - 1px) var(--space-xxxsmall);
   display: none;
   appearance: none;
   border: none;
-  background: linear-gradient(90deg, rgba(255, 255, 255, 0), var(--color-highlight) 30%);
+  border-radius: var(--radius-small);
   cursor: pointer;
   position: absolute;
-  right: 0;
-  top: 0;
-  bottom: 0;
+  right: 1px;
+  top: 1px;
+  bottom: 1px;
+  transition: var(--transition-in);
+  background: var(--color-info);
+  color: var(--color-background);
   font-size: var(--size-small);
   line-height: var(--space-xsmall);
 }
 
+.filterOnlyButton:hover,
+.filterOnlyButton:active,
+.filterOnlyButton:focus {
+  transition: var(--transition-out);
+  background: var(--color-info-dark);
+  color: var(--color-background);
+}
+
+/** cover item text */
+.filterOnlyButton::before {
+  content: ' ';
+  display: block;
+  position: absolute;
+  top: 0;
+  right: 100%;
+  bottom: 0;
+  width: var(--space-medium);
+  background: linear-gradient(90deg, rgba(255, 255, 255, 0), var(--color-highlight) 75%);
+}
+
 /** filter disabled state */
 .filterInput[disabled] + .filterLabel {
   color: var(--color-text-light);