1 files changed, 42 insertions, 15 deletions
diff --git a/webui/src/pages/list/ListQuery.tsx b/webui/src/pages/list/ListQuery.tsx
index 7eb6f4c5..424ffac0 100644
--- a/webui/src/pages/list/ListQuery.tsx
+++ b/webui/src/pages/list/ListQuery.tsx
@@ -2,6 +2,7 @@ import { ApolloError } from '@apollo/client';
 import React, { useState, useEffect, useRef } from 'react';
 import { useLocation, useHistory, Link } from 'react-router-dom';
 
+import { Button } from '@material-ui/core';
 import IconButton from '@material-ui/core/IconButton';
 import InputBase from '@material-ui/core/InputBase';
 import Paper from '@material-ui/core/Paper';
@@ -40,6 +41,17 @@ const useStyles = makeStyles<Theme, StylesProps>((theme) => ({
     alignItems: 'center',
     justifyContent: 'space-between',
   },
+  filterissueLabel: {
+    fontSize: '14px',
+    fontWeight: 'bold',
+    paddingRight: '12px',
+  },
+  filterissueContainer: {
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'flex-start',
+    justifyContents: 'left',
+  },
   search: {
     borderRadius: theme.shape.borderRadius,
     borderColor: fade(theme.palette.primary.main, 0.2),
@@ -95,6 +107,13 @@ const useStyles = makeStyles<Theme, StylesProps>((theme) => ({
       padding: theme.spacing(2, 3),
     },
   },
+  greenButton: {
+    backgroundColor: '#2ea44fd9',
+    color: '#fff',
+    '&:hover': {
+      backgroundColor: '#2ea44f',
+    },
+  },
 }));
 
 function editParams(
@@ -271,21 +290,29 @@ function ListQuery() {
   return (
     <Paper className={classes.main}>
       <header className={classes.header}>
-        <h1>Issues</h1>
-        <form onSubmit={formSubmit}>
-          <InputBase
-            placeholder="Filter"
-            value={input}
-            onInput={(e: any) => setInput(e.target.value)}
-            classes={{
-              root: classes.search,
-              focused: classes.searchFocused,
-            }}
-          />
-          <button type="submit" hidden>
-            Search
-          </button>
-        </form>
+        <div className="filterissueContainer">
+          <form onSubmit={formSubmit}>
+            <label className={classes.filterissueLabel} htmlFor="issuefilter">
+              Filter
+            </label>
+            <InputBase
+              id="issuefilter"
+              placeholder="Filter"
+              value={input}
+              onInput={(e: any) => setInput(e.target.value)}
+              classes={{
+                root: classes.search,
+                focused: classes.searchFocused,
+              }}
+            />
+            <button type="submit" hidden>
+              Search
+            </button>
+          </form>
+        </div>
+        <Button className={classes.greenButton} variant="contained" href="/new">
+          New issue
+        </Button>
       </header>
       <FilterToolbar query={query} queryLocation={queryLocation} />
       {content}