Partial commit for #158

Cláudio created 4 years ago

- Added bt to create new issue and its style (github like)

Change summary

webui/src/pages/list/ListQuery.css | 31 +++++++++++++++++++++++++++++++
webui/src/pages/list/ListQuery.tsx |  9 +++++++--
2 files changed, 38 insertions(+), 2 deletions(-)

Detailed changes

webui/src/pages/list/ListQuery.css

@@ -0,0 +1,31 @@
+header {
+    display: flex;
+    flex-direction: row;
+}
+
+.filterissue-container {
+    display: flex;
+    flex-direction: row;
+    align-items: flex-start;
+    justify-content: left;
+}
+
+.bt-new-issue {
+    background-color: #2ea44fd9;
+    border: 1px solid;
+    border-color: #1b1f2326;
+    border-radius: 6px;
+    padding: 3px 12px;
+
+    font-size: 12px;
+    color: #ffffff;
+    line-height: 20px;
+    text-decoration: none;
+
+    transition: all 0.2s cubic-bezier(0.3, 0, 0.5, 1);
+}
+
+.bt-new-issue:hover {
+    background-color: #2ea44f;
+    border-color: #1b1f2326;
+}

webui/src/pages/list/ListQuery.tsx

@@ -15,6 +15,8 @@ import FilterToolbar from './FilterToolbar';
 import List from './List';
 import { useListBugsQuery } from './ListQuery.generated';
 
+import './ListQuery.css';
+
 type StylesProps = { searching?: boolean };
 const useStyles = makeStyles<Theme, StylesProps>((theme) => ({
   main: {
@@ -272,9 +274,10 @@ function ListQuery() {
     <Paper className={classes.main}>
       <header className={classes.header}>
         <div className="filterissue-container">
-          <h1>Issues</h1>
           <form onSubmit={formSubmit}>
+            <label htmlFor="issuefilter">Filter</label>
             <InputBase
+              id="issuefilter"
               placeholder="Filter"
               value={input}
               onInput={(e: any) => setInput(e.target.value)}
@@ -288,7 +291,9 @@ function ListQuery() {
             </button>
           </form>
         </div>
-        <button className="bt-new-issue">New Issue</button>
+        <Link to="/newIssue" className="bt-new-issue">
+          New Issue
+        </Link>
       </header>
       <FilterToolbar query={query} queryLocation={queryLocation} />
       {content}