dropdown: refactor to make the button an actual button

app/assets/stylesheets/new_design/buttons.scss

@@ -6,6 +6,7 @@
   padding: 8px 16px;
   border-radius: 30px;
   border: 1px solid $border-grey;
+  font-family: "Muli";
   font-size: 14px;
   line-height: 20px;
   background-color: #FFFFFF;
@@ -113,9 +114,20 @@
     margin-right: $default-spacer;
   }
 
-  &.dropdown {
-    position: relative;
+  &.icon-only {
+    padding: 9px 16px;
 
+    .icon {
+      margin-right: 0;
+    }
+  }
+}
+
+.dropdown {
+  display: inline-block;
+  position: relative;
+
+  .dropdown-button {
     &::after {
       content: "▾";
       margin-left: $default-spacer;
@@ -128,24 +140,14 @@
         color: $blue;
       }
     }
-
-    .dropdown-content {
-      display: none;
-    }
-
-    &.open {
-      .dropdown-content {
-        display: block;
-      }
-    }
   }
 
-  &.icon-only {
-    padding: 9px 16px;
+  .dropdown-content {
+    display: none;
+  }
 
-    .icon {
-      margin-right: 0;
-    }
+  &.open .dropdown-content {
+    display: block;
   }
 }
 

app/assets/stylesheets/new_design/new_header.scss

@@ -159,6 +159,19 @@ $landing-breakpoint: 1040px;
   }
 }
 
+.header-menu-button {
+  border: none;
+  padding: 0;
+
+  &:hover {
+    background: none;
+  }
+
+  &::after {
+    display: none;
+  }
+}
+
 .header-menu {
   display: none;
   position: absolute;