New generate query (#38)

* Ability to detect selecting all columns in a db
* Reset Query clears error message
* Ability to create multiple joins on a table
* Account for alias being same initial
* Account for same letter alias

Author: aliicewong

app/components/Login.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import styled, { keyframes } from 'styled-components';
 import { useState, useEffect } from 'react';
 import styled from 'styled-components';
 import { Redirect } from 'react-router-dom';
@@ -32,13 +33,22 @@ const Panel = styled.div`
   align-items: center;
 `;
 
+const funtimes = keyframes`
+    0%{background-position:0% 50%}
+    50%{background-position:100% 50%}
+    100%{background-position:0% 50%}
+`;
+
 const LeftPanel = styled(Panel)`
-  background-color: #013243;
-  color: #f2f1ef;
+  background-color: white;
+  color: white;
+  animation: ${funtimes} 8s ease infinite;
+  background: linear-gradient(270deg, #49cefe, #c647bc);
+  background-size: 400% 400%;
 `;
 
 const RightPanel = styled(Panel)`
-  background-color: #f2f1ef;
+  background-color: white;
 `;
 
 const LoginContainer = styled.div`
@@ -70,11 +80,11 @@ const LoginTypeButton = styled.button<LoginTypeButtonProps>`
   border: none;
   border-bottom: ${({ selectedLoginType, buttonType }) =>
     selectedLoginType === buttonType
-      ? '3px solid #013243'
+      ? '3px solid #E55982'
       : '3px solid transparent'};
   transition: 0.3s;
   :hover {
-    border-bottom: 3px solid #013243;
+    border-bottom: 3px solid #e55982;
     cursor: pointer;
   }
   :focus {

app/components/mainpanel/QueryResults.tsx

@@ -12,6 +12,11 @@ const QueryResultWrapper = styled.div`
   height: 60vh;
 `;
 
+const reactTableStyle = {
+  fontSize: '60%',
+  backgroundColor: 'transparent'
+};
+
 interface IQueryResult {
   status: string;
   message: any[];
@@ -37,7 +42,11 @@ const QueryResults: React.SFC<IQueryResultsProps> = ({ queryResult }) => {
   return (
     <QueryResultWrapper>
       {queryResult.message.length > 0 && (
-        <ReactTable data={queryResult.message} columns={columns} />
+        <ReactTable
+          style={reactTableStyle}
+          data={queryResult.message}
+          columns={columns}
+        />
       )}
       {queryResult.message.length === 0 &&
         queryResult.status === 'No results' && (