Change notification settings UI to be more compact

Signed-off-by: Claire <claire.github-309c@sitedethib.com>

app/javascript/flavours/glitch/styles/components/columns.scss

@@ -483,6 +483,50 @@
   margin-right: 5px;
 }
 
+.column-settings__pillbar {
+  display: flex;
+  overflow: hidden;
+  background-color: transparent;
+  border: 0;
+  border-radius: 4px;
+  margin-bottom: 10px;
+  align-items: stretch;
+}
+
+.pillbar-button {
+  border: 0;
+  color: #fafafa;
+  padding: 2px;
+  margin: 0;
+  margin-left: 2px;
+  font-size: inherit;
+  flex: auto;
+  background-color: $ui-base-color;
+  transition: background-color 0.2s ease;
+
+  &[disabled] {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+
+  &:hover:not([disabled]) {
+    background-color: darken($ui-base-color, 10%);
+  }
+
+  &.active {
+    background-color: $ui-highlight-color;
+  }
+
+  &.active:hover:not([disabled]) {
+    background-color: lighten($ui-highlight-color, 10%);
+  }
+
+  /* TODO: check RTL? */
+  &:first-child {
+    margin-left: 0;
+  }
+}
+
 .empty-column-indicator,
 .error-column,
 .follow_requests-unlocked_explanation {