update graphiql-online footer css (#967)

community/tools/graphiql-online/src/components/Login/App.css

@@ -55,3 +55,29 @@ body
   border-radius: 5px;
   background-color: #f6f6f6;
 }
+.footerWrapper {
+  position: fixed;
+  bottom: 20px;
+  width: 100%;
+  display: flex;
+  justify-content: center;
+}
+.apiHasura {
+  font-size: 14px;
+  text-align: right;
+}
+.apiHasura i {
+  color: #757575;;
+  font-size: 22px;
+}
+.apiHasura i:hover {
+  color: #000;
+}
+.built {
+  text-align: right;
+  font-size: 14px;
+  margin-right: 10px;
+}
+.built i {
+  color: #f93c18;
+}

community/tools/graphiql-online/src/components/Login/Login.js

@@ -15,38 +15,50 @@ class LoginComponent extends React.Component {
   render() {
     const { dispatch } = this.props;
     return (
-      <div className="loginWrapper">
-        <Helmet
-          title="GraphiQL Online with Headers | Built by Hasura"
-          description="An online version of GraphiQL. Manage headers easily. Test your GraphQL servers."
-        />
-        <h2 className="loginHeading"> Online GraphiQL </h2>
-        <div className="login">
-          <div>
-            <form>
-              <input
-                type="text"
-                id="username"
-                className="loginTextbox"
-                placeholder="Enter GraphQL Endpoint URL"
-                onChange={this.setGraphQLEndpoint.bind(this)}
-              />
-              <button
-                className="loginButton"
-                type="submit"
-                onClick={(e) => {
-                  e.preventDefault();
-                  const emailRegex = /^(http[s]?:\/\/){0,1}(www\.){0,1}[a-zA-Z0-9\.\-]+\.[a-zA-Z]{2,5}[\.]{0,1}/;
-                  if (!emailRegex.test(this.state.graphqlEndpoint)) {
-                    alert('Please enter a valid URL');
-                  } else {
-                    dispatch(updateGraphQLEndpoint(this.state.graphqlEndpoint));
-                  }
-                }}
-              >
-                <i className={'fa fa-sign-in'} />
-              </button>
-            </form>
+      <div>
+        <div className="loginWrapper">
+          <Helmet
+            title="GraphiQL Online with Headers | Built by Hasura"
+            description="An online version of GraphiQL. Manage headers easily. Test your GraphQL servers."
+          />
+          <h2 className="loginHeading"> Online GraphiQL </h2>
+          <div className="login">
+            <div>
+              <form>
+                <input
+                  type="text"
+                  id="username"
+                  className="loginTextbox"
+                  placeholder="Enter GraphQL Endpoint URL"
+                  onChange={this.setGraphQLEndpoint.bind(this)}
+                />
+                <button
+                  className="loginButton"
+                  type="submit"
+                  onClick={(e) => {
+                    e.preventDefault();
+                    const emailRegex = /^(http[s]?:\/\/){0,1}(www\.){0,1}[a-zA-Z0-9\.\-]+\.[a-zA-Z]{2,5}[\.]{0,1}/;
+                    if (!emailRegex.test(this.state.graphqlEndpoint)) {
+                      alert('Please enter a valid URL');
+                    } else {
+                      dispatch(updateGraphQLEndpoint(this.state.graphqlEndpoint));
+                    }
+                  }}
+                >
+                  <i className={'fa fa-sign-in'} />
+                </button>
+              </form>
+            </div>
+          </div>
+        </div>
+        <div className="footerWrapper">
+          <div className="built">
+            Built with <i className="fa fa-heart" /> by <a href={'http://hasura.io/'} target={'_blank'}>Hasura</a>
+          </div>
+          <div className="apiHasura">
+            <a href="https://github.com/hasura/graphql-engine/tree/master/community/tools/graphiql-online" target={'_blank'}>
+              <i className="fa fa-github" />
+            </a>
           </div>
         </div>
       </div>

community/tools/graphiql-online/src/helpers/Html.js

@@ -25,6 +25,9 @@ export default class Html extends Component {
       <html lang="en-us">
         <head>
           <link rel="icon" type="image/png" href="/rstatic/favicon.png" />
+          <title>GraphiQL Online with Headers | Built by Hasura</title>
+          <meta name="title" content="GraphiQL Online with Headers | Built by Hasura" />
+          <meta name="description" content="An online version of GraphiQL. Manage headers easily. Test your GraphQL servers" />
 
           {Object.keys(assets.styles).map((style, key) => (
             <link

community/tools/graphiql-online/static/index.html

@@ -1,6 +1,9 @@
 <html lang="en-us">
   <head>
     <link rel="icon" type="image/png" href="./favicon.png" />
+    <title>GraphiQL Online with Headers | Built by Hasura</title>
+    <meta name="title" content="GraphiQL Online with Headers | Built by Hasura" />
+    <meta name="description" content="An online version of GraphiQL. Manage headers easily. Test your GraphQL servers" />
     <script>
       window.__env = {
         graphqlEndpoint: '',