Common button styles + added filter pagination UI.

frontend/src/components/filter/Form.vue

@@ -74,15 +74,34 @@
       </div>
     </div>
 
-    <div class="limit-container input-text-container">
-      <label for="limit">Limit</label>
-      <input type="number"
-             id="limit"
-             name="limit"
-             @input="newFilter.limit = Number($event.target.value)"
-             @change="newFilter.limit = Number($event.target.value)"
-             :value="newFilter.limit"
-             min="1" />
+    <div class="pagination-container">
+      <div class="page-button-container">
+        <button type="button"
+                @click="$emit('prev-page')"
+                title="Previous Results"
+                :disabled="!hasPrev">
+          <font-awesome-icon icon="fas fa-chevron-left" />
+        </button>
+      </div>
+      <div class="limit-container">
+        <label for="limit">Max Results</label>
+        <input type="number"
+               id="limit"
+               name="limit"
+               @input="newFilter.limit = Number($event.target.value)"
+               @change="newFilter.limit = Number($event.target.value)"
+               :value="newFilter.limit"
+               min="1" />
+      </div>
+
+      <div class="page-button-container">
+        <button type="button"
+                @click="$emit('next-page')"
+                title="Next Results"
+                :disabled="!hasNext">
+          <font-awesome-icon icon="fas fa-chevron-right" />
+        </button>
+      </div>
     </div>
 
     <div class="footer">
@@ -95,9 +114,21 @@
 import _ from 'lodash'
 
 export default {
-  emit: ['refresh'],
+  emit: [
+    'next-page',
+    'prev-page',
+    'refresh',
+  ],
   props: {
     value: Object,
+    hasPrev: {
+      type: Boolean,
+      default: true,
+    },
+    hasNext: {
+      type: Boolean,
+      default: true,
+    },
   },
 
   computed: {
@@ -269,33 +300,31 @@ export default {
         margin-top: 0.5em;
 
         button {
-          padding: 0.25em 0.5em;
           margin-right: 0.25em;
-          border: 1px solid var(--color-border);
-          border-radius: 0.25em;
-          background: var(--color-background);
           font-size: 0.75em;
-          cursor: pointer;
-
-          &:disabled {
-            opacity: 0.5;
-            cursor: not-allowed;
-          }
-
-          &:hover {
-            color: var(--color-hover);
-          }
         }
       }
     }
   }
 
-  .input-text-container {
+  .pagination-container {
     display: flex;
-    flex-direction: column;
+    flex-direction: row;
+    justify-content: space-between;
     align-items: center;
     margin: 0.5em;
 
+    .limit-container {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+    }
+
+    .page-button-container {
+      display: flex;
+      justify-content: center;
+    }
+
     label {
       margin-bottom: 0.25em;
     }

frontend/src/components/filter/ToggleButton.vue

@@ -1,5 +1,5 @@
 <template>
-  <button :class="{ 'selected': value }"
+  <button class="toggle-button" :class="{ 'selected': value }"
           @click="$emit('input')"
           :title="title"
           :aria-pressed="value"
@@ -24,11 +24,12 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-button {
+button.toggle-button {
   background: var(--color-background);
   color: var(--color-text);
   width: 4em;
   height: 4em;
+  font-size: 1em;
   padding: 1.5em;
   outline: none;
   border: none;
@@ -36,10 +37,6 @@ button {
   box-shadow: 1px 1px 2px 2px var(--color-border);
   cursor: pointer;
 
-  &:hover {
-    color: var(--color-accent) !important;
-  }
-
   &.selected {
     background: var(--color-accent);
     color: var(--color-background);

frontend/src/styles/common.scss

@@ -22,3 +22,30 @@ $screen-lg: 1200px;
     @content;
   }
 }
+
+// Common element styles
+
+button {
+  margin: 0 0.5em;
+  padding: 0.25em 0.5em;
+  border: 1px solid var(--color-border);
+  border-radius: 0.25em;
+  background: var(--color-background);
+  font-size: 1.25em;
+  cursor: pointer;
+
+  &:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  &:hover {
+    color: var(--color-hover);
+  }
+}
+
+button[type=submit] {
+  margin: 0.5em;
+  font-size: 1.15em;
+  padding: 0.5em;
+}