From 5e20b6792e9e195e8e3da60f9de3ebfc6d7379ab Mon Sep 17 00:00:00 2001
From: gillespi314 <73313222+gillespi314@users.noreply.github.com>
Date: Fri, 16 Jul 2021 19:42:54 -0500
Subject: [PATCH] Adjust query library styling (#1386)

---
 .../assets/styles/bootstrap-overrides.less    |  2 +-
 .../assets/styles/pages/query-library.less    | 13 ++++++++-
 website/views/pages/query-library.ejs         | 28 +++++++++----------
 3 files changed, 27 insertions(+), 16 deletions(-)

diff --git a/website/assets/styles/bootstrap-overrides.less b/website/assets/styles/bootstrap-overrides.less
index 254770f4e2..7b6215be6d 100644
--- a/website/assets/styles/bootstrap-overrides.less
+++ b/website/assets/styles/bootstrap-overrides.less
@@ -130,7 +130,7 @@ a.text-danger:hover, a.text-danger:focus {
 }
 
 .dropdown-menu {
-  left: 16px !important; //lesshint-disable-line importantRule
+  left: 16px;
   min-width: 0;
   margin: 0;
 }
diff --git a/website/assets/styles/pages/query-library.less b/website/assets/styles/pages/query-library.less
index 0562cd9ddb..f1ac18d6b2 100644
--- a/website/assets/styles/pages/query-library.less
+++ b/website/assets/styles/pages/query-library.less
@@ -86,17 +86,28 @@
   }
 
   .dropdown-menu {
+    left: 0px;
+    width: 180px;
     border-radius: 8px;
     cursor: pointer;
   }
   .dropdown-item {
-    border-radius: 8px;
+    padding: 12px;
+    border-radius: 5px;
     cursor: pointer;
     &:hover {
       background-color: lightness(@core-vibrant-blue, 10%);
       margin-right: 15px;
     }
   }
+  .dropdown-toggle::after {
+    margin-left: 4px;
+    vertical-align: 3px;
+    border-top: 5px solid;
+    border-right: 5px solid transparent;
+    border-bottom: 0;
+    border-left: 5px solid transparent;
+  }
 
   select {
     color: @core-vibrant-blue;
diff --git a/website/views/pages/query-library.ejs b/website/views/pages/query-library.ejs
index a29453b49b..21d984c93b 100644
--- a/website/views/pages/query-library.ejs
+++ b/website/views/pages/query-library.ejs
@@ -43,35 +43,35 @@
           <div class="d-flex px-0 align-items-center filters">
             <div class="d-flex">
               <div class="dropdown flex-wrap filter purpose">
-                <p class="d-inline-flex mb-0">Show</p>
-                <button class="btn btn-secondary btn-sm dropdown-toggle px-1 py-0" type="button"
+                <p class="d-inline-flex mb-0 pr-1">Show</p>
+                <button class="btn btn-secondary btn-sm dropdown-toggle p-0" type="button"
                   id="dropdownMenuSelectPurpose" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                   {{selectedPurpose}}
                 </button>
-                <div class="dropdown-menu px-2 py-1" aria-labelledby="dropdownMenuSelectPurpose">
-                  <button class="dropdown-item p-3" type="button" @click="clickSelectPurpose('all queries')">all
+                <div class="dropdown-menu p-2" aria-labelledby="dropdownMenuSelectPurpose">
+                  <button class="dropdown-item" type="button" @click="clickSelectPurpose('all queries')">all
                     queries</button>
-                  <button class="dropdown-item p-3" type="button"
+                  <button class="dropdown-item" type="button"
                     @click="clickSelectPurpose('informational')">informational</button>
-                  <button class="dropdown-item p-3" type="button"
+                  <button class="dropdown-item" type="button"
                     @click="clickSelectPurpose('detection')">detection</button>
                 </div>
               </div>
             </div>
             <div class="d-flex">
               <div class="dropdown d-flex flex-wrap filter platform">
-                <p class="d-inline-flex flex-wrap pl-1 mb-0">compatible with</p>
-                <button class="btn btn-secondary btn-sm dropdown-toggle pl-2 pr-1 py-0" type="button"
+                <p class="d-inline-flex flex-wrap px-2 mb-0">compatible with</p>
+                <button class="btn btn-secondary btn-sm dropdown-toggle p-0" type="button"
                   id="dropdownMenuSelectPlatform" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                   {{selectedPlatform}}
                 </button>
-                <div class="dropdown-menu px-2 py-1" aria-labelledby="dropdownMenuSelectPlatform">
-                  <button class="dropdown-item p-3" type="button" @click="clickSelectPlatform('all platforms')">all platforms</button>
-                  <button class="dropdown-item p-3" type="button" @click="clickSelectPlatform('macOS')">macOS</button>
-                  <button class="dropdown-item p-3" type="button"
+                <div class="dropdown-menu p-2" aria-labelledby="dropdownMenuSelectPlatform">
+                  <button class="dropdown-item" type="button" @click="clickSelectPlatform('all platforms')">all platforms</button>
+                  <button class="dropdown-item" type="button" @click="clickSelectPlatform('macOS')">macOS</button>
+                  <button class="dropdown-item" type="button"
                     @click="clickSelectPlatform('Windows')">Windows</button>
-                  <button class="dropdown-item p-3" type="button" @click="clickSelectPlatform('Linux')">Linux</button>
-                  <button class="dropdown-item p-3" type="button"
+                  <button class="dropdown-item" type="button" @click="clickSelectPlatform('Linux')">Linux</button>
+                  <button class="dropdown-item" type="button"
                     @click="clickSelectPlatform('FreeBSD')">FreeBSD</button>
                 </div>
               </div>