From 8bb84da3196d64dc4db448e14ac804306d11f26a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adina=20=C8=9Aeudan?= <adina@devplant.ro>
Date: Wed, 25 Nov 2020 18:29:30 +0200
Subject: [PATCH] Filters grid

---
 .../app/common/filter/filter.component.scss   |  2 +-
 .../src/assets/icons/general/arrow-right.svg  | 10 ++++---
 .../src/assets/icons/general/arrow-up.svg     | 10 ++++---
 .../red-ui/src/assets/icons/general/right.svg |  9 +++++++
 .../src/assets/styles/red-checkbox.scss       |  2 +-
 apps/red-ui/src/assets/styles/red-menu.scss   | 26 +++++++++++++++----
 6 files changed, 46 insertions(+), 13 deletions(-)
 create mode 100644 apps/red-ui/src/assets/icons/general/right.svg

diff --git a/apps/red-ui/src/app/common/filter/filter.component.scss b/apps/red-ui/src/app/common/filter/filter.component.scss
index 529547668..159c5b65d 100644
--- a/apps/red-ui/src/app/common/filter/filter.component.scss
+++ b/apps/red-ui/src/app/common/filter/filter.component.scss
@@ -3,7 +3,7 @@
 .filter-menu-header {
     display: flex;
     justify-content: space-between;
-    padding: 7px 15px 15px;
+    padding: 8px 16px 16px 16px;
     width: 350px;
 
     .actions {
diff --git a/apps/red-ui/src/assets/icons/general/arrow-right.svg b/apps/red-ui/src/assets/icons/general/arrow-right.svg
index c6aecfcd4..507e88575 100644
--- a/apps/red-ui/src/assets/icons/general/arrow-right.svg
+++ b/apps/red-ui/src/assets/icons/general/arrow-right.svg
@@ -1,3 +1,7 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid meet" viewBox="0 0 300 450" width="300" height="450"><defs><path d="M0 -0.76L0 449.24L300 224.24L0 -0.76Z" id="bbDgPANXr"></path></defs><g><g><g><use xlink:href="#bbDgPANXr" opacity="1" fill-opacity="1"></use><g><use xlink:href="#bbDgPANXr" opacity="1" fill-opacity="0" stroke="#000000" stroke-width="1" stroke-opacity="0"></use></g></g></g></g></svg>
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="14px" height="14px" viewBox="0 0 14 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>right_expandable</title>
+    <g id="right_expandable" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <polygon id="Fill-1" fill="currentColor" transform="translate(7.000000, 7.000000) rotate(-90.000000) translate(-7.000000, -7.000000) " points="7 9 10 5 4 5"></polygon>
+    </g>
+</svg>
diff --git a/apps/red-ui/src/assets/icons/general/arrow-up.svg b/apps/red-ui/src/assets/icons/general/arrow-up.svg
index b4d9d527d..11a03f1f9 100644
--- a/apps/red-ui/src/assets/icons/general/arrow-up.svg
+++ b/apps/red-ui/src/assets/icons/general/arrow-up.svg
@@ -1,3 +1,7 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid meet" viewBox="0 0 640 426.67" width="640" height="426.67"><defs><path d="M0 427.67L640 427.67L320 1L0 427.67Z" id="bjTkd31yo"></path></defs><g><g><g><use xlink:href="#bjTkd31yo" opacity="1" fill-opacity="1"></use><g><use xlink:href="#bjTkd31yo" opacity="1" fill-opacity="0" stroke="#000000" stroke-width="1" stroke-opacity="0"></use></g></g></g></g></svg>
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="6px" height="6px" viewBox="0 0 6 6" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>sort-up</title>
+    <g id="sort-up" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <polygon id="Fill-1" fill="currentColor" transform="translate(3.000000, 3.000000) rotate(-180.000000) translate(-3.000000, -3.000000) " points="3 5 6 1 -1.33216355e-14 1"></polygon>
+    </g>
+</svg>
diff --git a/apps/red-ui/src/assets/icons/general/right.svg b/apps/red-ui/src/assets/icons/general/right.svg
new file mode 100644
index 000000000..0390cde02
--- /dev/null
+++ b/apps/red-ui/src/assets/icons/general/right.svg
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="6px" height="6px" viewBox="0 0 6 6" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>right</title>
+    <g id="right" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="down" fill="#283241">
+            <polygon id="Fill-1" transform="translate(3.000000, 3.000000) rotate(-90.000000) translate(-3.000000, -3.000000) " points="3 5 6 1 -1.33216355e-14 1"></polygon>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/apps/red-ui/src/assets/styles/red-checkbox.scss b/apps/red-ui/src/assets/styles/red-checkbox.scss
index 21457c3ee..4b5f957a0 100644
--- a/apps/red-ui/src/assets/styles/red-checkbox.scss
+++ b/apps/red-ui/src/assets/styles/red-checkbox.scss
@@ -24,6 +24,6 @@
 
         display: flex;
         align-items: center;
-        gap: 4px;
+        gap: 8px;
     }
 }
diff --git a/apps/red-ui/src/assets/styles/red-menu.scss b/apps/red-ui/src/assets/styles/red-menu.scss
index a08b46ba5..2defa1624 100644
--- a/apps/red-ui/src/assets/styles/red-menu.scss
+++ b/apps/red-ui/src/assets/styles/red-menu.scss
@@ -5,12 +5,21 @@
     box-shadow: 0 2px 6px 0 rgba(40, 50, 65, 0.3);
     max-width: none !important;
     min-width: 180px !important;
-    margin-top: 4px;
+    margin-top: 10px;
+
+    .mat-menu-content:not(:empty) {
+        padding-top: 8px;
+        padding-bottom: 24px;
+    }
 
     .mat-menu-item {
         font-family: 'Inter', sans-serif;
         font-size: 13px;
         color: $accent;
+        padding: 0 8px;
+        margin: 0 8px 2px 8px;
+        border-radius: 4px;
+        width: -webkit-fill-available;
 
         display: flex;
         align-items: center;
@@ -18,18 +27,25 @@
 
         .arrow-wrapper {
             width: 16px;
-            margin-right: 8px;
             text-align: center;
 
             mat-icon {
-                width: 9px;
-                height: 9px;
+                width: 16px;
+                height: 16px;
                 margin: 0;
             }
         }
 
         &.padding-left {
-            padding-left: 64px;
+            padding-left: 56px;
+        }
+
+        &:last-of-type {
+            margin-bottom: 0;
+        }
+
+        &:hover {
+            background-color: rgba($primary, 0.1);
         }
     }
 }