From d7fa63d296f0393c4d94d82fb3286f3a3e58e28b Mon Sep 17 00:00:00 2001
From: Karthik Venkateswaran <karthik@hasura.io>
Date: Tue, 4 Sep 2018 19:54:00 +0530
Subject: [PATCH] Adds support dropdown, heart icon, import/export/reload
 metadata. Fixes #292 #293 #8

---
 console/src/components/Main/Main.js   | 146 +++++++++++++-------------
 console/src/components/Main/Main.scss |   6 +-
 console/src/components/Main/mail.svg  |  35 ++++++
 3 files changed, 112 insertions(+), 75 deletions(-)
 create mode 100644 console/src/components/Main/mail.svg

diff --git a/console/src/components/Main/Main.js b/console/src/components/Main/Main.js
index ca3462b26e581..5e1e9cd1b9e83 100644
--- a/console/src/components/Main/Main.js
+++ b/console/src/components/Main/Main.js
@@ -82,6 +82,7 @@ class Main extends React.Component {
     const logo = require('./logo.svg');
     const github = require('./Github.svg');
     const discord = require('./Discord.svg');
+    const mail = require('./mail.svg');
     const pixHeart = require('./pix-heart.svg');
     const closeIcon = require('./cancel-icon.svg');
     const githubicon = require('./githubicon.png');
@@ -222,12 +223,12 @@ class Main extends React.Component {
                         target="_blank"
                         rel="noopener noreferrer"
                       >
-                        <span> Report bugs & suggest improvements</span>
                         <img
                           className={'img-responsive'}
                           src={github}
                           alt={'github'}
                         />
+                        <span>Report bugs & suggest improvements</span>
                       </a>
                     </li>
                     <li className={'dropdown-item'}>
@@ -236,21 +237,22 @@ class Main extends React.Component {
                         target="_blank"
                         rel="noopener noreferrer"
                       >
-                        <span> Ask for help & discuss ideas</span>
                         <img
                           className={'img-responsive'}
                           src={discord}
                           alt={'discord'}
                         />
+                        <span>Ask for help & discuss ideas</span>
                       </a>
                     </li>
                     <li className={'dropdown-item'}>
-                      Reach out to us directly{' '}
-                      <a
-                        className={styles.displayBlock}
-                        href="mailto:support@hasura.io"
-                      >
-                        support@hasura.io
+                      <a href="mailto:support@hasura.io">
+                        <img
+                          className={'img-responsive'}
+                          src={mail}
+                          alt={'mail'}
+                        />
+                        <span>Reach out ({'support@hasura.io'})</span>
                       </a>
                     </li>
                   </div>
@@ -258,29 +260,29 @@ class Main extends React.Component {
               </div>
               {!this.state.loveConsentState.isDismissed
                 ? [
-                  <div
-                    className={styles.shareSection + ' dropdown-toggle'}
-                    data-toggle="dropdown"
-                    aria-expanded="false"
-                  >
-                    <img
-                      className={'img-responsive'}
-                      src={pixHeart}
-                      alt={'pix Heart'}
-                    />
-                    {/* <i className={styles.heart + ' fa fa-heart'} /> */}
-                  </div>,
-                  <ul className={'dropdown-menu ' + styles.dropdown_menu}>
-                    <div className={styles.dropdown_menu_container}>
-                      <div className={styles.closeDropDown}>
-                        <img
-                          className={'img-responsive'}
-                          src={closeIcon}
-                          alt={'closeIcon'}
-                          onClick={this.closeLoveIcon.bind(this)}
-                        />
-                      </div>
-                      {/*
+                    <div
+                      className={styles.shareSection + ' dropdown-toggle'}
+                      data-toggle="dropdown"
+                      aria-expanded="false"
+                    >
+                      <img
+                        className={'img-responsive'}
+                        src={pixHeart}
+                        alt={'pix Heart'}
+                      />
+                      {/* <i className={styles.heart + ' fa fa-heart'} /> */}
+                    </div>,
+                    <ul className={'dropdown-menu ' + styles.dropdown_menu}>
+                      <div className={styles.dropdown_menu_container}>
+                        <div className={styles.closeDropDown}>
+                          <img
+                            className={'img-responsive'}
+                            src={closeIcon}
+                            alt={'closeIcon'}
+                            onClick={this.closeLoveIcon.bind(this)}
+                          />
+                        </div>
+                        {/*
                       <div className={styles.arrow_up_dropdown} />
                       <div className={styles.graphqlHeartText}>
                         Love GraphQL Engine? Shout it from the rooftops!
@@ -291,29 +293,29 @@ class Main extends React.Component {
                         </span>
                       </div>
                       */}
-                      <div className={styles.displayFlex}>
-                        <li className={styles.pixelText1}>
+                        <div className={styles.displayFlex}>
+                          <li className={styles.pixelText1}>
                             Roses are red, Violets are blue; Hasura/GraphQL
                             star/tweet cos v love u {'<'}3
-                        </li>
-                        <li className={'dropdown-item'}>
-                          <a
-                            href="/hasura/graphql-engine"
-                            target="_blank"
-                            rel="noopener noreferrer"
-                          >
-                            <div className={styles.socialIcon}>
-                              <img
-                                className="img img-responsive"
-                                src={githubicon}
-                                alt={'Github'}
-                              />
-                            </div>
-                            <div className={styles.pixelText}>
+                          </li>
+                          <li className={'dropdown-item'}>
+                            <a
+                              href="/hasura/graphql-engine"
+                              target="_blank"
+                              rel="noopener noreferrer"
+                            >
+                              <div className={styles.socialIcon}>
+                                <img
+                                  className="img img-responsive"
+                                  src={githubicon}
+                                  alt={'Github'}
+                                />
+                              </div>
+                              <div className={styles.pixelText}>
                                 Star us on Github
-                            </div>
-                          </a>
-                          {/*
+                              </div>
+                            </a>
+                            {/*
                           <div className={styles.gitHubBtn}>
                             <iframe
                               title="github"
@@ -325,29 +327,29 @@ class Main extends React.Component {
                             />
                           </div>
                           */}
-                        </li>
-                        <li className={'dropdown-item '}>
-                          <a
-                            href="https://twitter.com/intent/tweet?hashtags=hasura,graphql,postgres&amp;text=Get%20Instant%20Realtime%20GraphQL%20APIs%20on%20PostgreSQL&amp;url=https%3A%2F%2Fgithub.com%2F/hasura%2Fgraphql-engine"
-                            target="_blank"
-                            rel="noopener noreferrer"
-                          >
-                            <div className={styles.socialIcon}>
-                              <img
-                                className="img img-responsive"
-                                src={twittericon}
-                                alt={'Twitter'}
-                              />
-                            </div>
-                            <div className={styles.pixelText}>
+                          </li>
+                          <li className={'dropdown-item '}>
+                            <a
+                              href="https://twitter.com/intent/tweet?hashtags=hasura,graphql,postgres&amp;text=Get%20Instant%20Realtime%20GraphQL%20APIs%20on%20PostgreSQL&amp;url=https%3A%2F%2Fgithub.com%2F/hasura%2Fgraphql-engine"
+                              target="_blank"
+                              rel="noopener noreferrer"
+                            >
+                              <div className={styles.socialIcon}>
+                                <img
+                                  className="img img-responsive"
+                                  src={twittericon}
+                                  alt={'Twitter'}
+                                />
+                              </div>
+                              <div className={styles.pixelText}>
                                 Tweet at us
-                            </div>
-                          </a>
-                        </li>
+                              </div>
+                            </a>
+                          </li>
+                        </div>
                       </div>
-                    </div>
-                  </ul>,
-                ]
+                    </ul>,
+                  ]
                 : null}
             </div>
           </div>
diff --git a/console/src/components/Main/Main.scss b/console/src/components/Main/Main.scss
index cf6de80a729be..0ea8ab98db845 100644
--- a/console/src/components/Main/Main.scss
+++ b/console/src/components/Main/Main.scss
@@ -846,7 +846,7 @@
 }
 
 .settingsIcon {
-  background: #495680;
+  background: #5668a4;
   a {
     text-decoration: none;
   }
@@ -912,7 +912,7 @@
 .pixelText
 {
   font-family: arcadeClassic;
-  font-size: 10px;
+  font-size: 20px;
   text-transform: uppercase;
   padding-top: 10px;
   text-align: center;
@@ -965,7 +965,7 @@
       {
         width: 20px;
         display: inline-block;
-        margin-left: 10px;
+        margin-right: 10px;
       }
     }
     a:hover
diff --git a/console/src/components/Main/mail.svg b/console/src/components/Main/mail.svg
new file mode 100644
index 0000000000000..8eb15d090f454
--- /dev/null
+++ b/console/src/components/Main/mail.svg
@@ -0,0 +1,35 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 22.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 66 66" style="enable-background:new 0 0 66 66;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#0AD4EF;}
+	.st1{fill:#FFFFFF;}
+</style>
+<g id="Layer_1_1_">
+	<title>Discord</title>
+	<desc>Created with Sketch.</desc>
+	<g id="Page-1">
+		<g id="Hasura_Jun29-Update" transform="translate(-1157.000000, -872.000000)">
+			<g id="Group-6" transform="translate(1066.000000, 872.000000)">
+				<g id="Discord" transform="translate(91.000000, 0.000000)">
+					<g>
+						<g id="Twitter-Copy">
+							<path id="back" class="st0" d="M0,33C0,14.8,14.8,0,33,0s33,14.8,33,33S51.2,66,33,66S0,51.2,0,33z"/>
+						</g>
+					</g>
+				</g>
+			</g>
+		</g>
+	</g>
+</g>
+<g>
+	<path class="st1" d="M16.3,20.7c-0.3,0-0.6,0.1-0.9,0.2l5.5,5.6l5.5,5.7l0.1,0.1l0.2,0.2l0.2,0.2l0.3,0.3l4.8,4.9
+		c0.1,0,0.3,0.3,0.5,0.4c0.2,0.1,0.5,0.2,0.7,0.2c0.3,0,0.6-0.1,0.8-0.2c0.2-0.1,0.3-0.2,0.5-0.4l5.5-5.7l5.6-5.7l5.4-5.5
+		c-0.3-0.2-0.7-0.3-1.1-0.3L16.3,20.7L16.3,20.7z M14.6,21.4c-0.6,0.6-1,1.4-1,2.3v18.5c0,0.8,0.2,1.5,0.6,2l0.8-0.7l5.7-5.6
+		l5.1-4.9l-0.1-0.1l-5.6-5.7L14.6,21.4L14.6,21.4z M51.6,21.6l-5.4,5.6l-5.5,5.7L40.5,33l5.3,5.1l5.7,5.6l0.3,0.3
+		c0.3-0.5,0.5-1.1,0.5-1.8V23.7C52.4,22.9,52.1,22.1,51.6,21.6L51.6,21.6z M26.5,33.7l-5.1,4.9l-5.7,5.6L15,44.9
+		c0.4,0.2,0.8,0.4,1.3,0.4h33.5c0.6,0,1.1-0.2,1.5-0.6l-0.4-0.4l-5.7-5.6l-5.3-5.1l-4.8,4.9c-0.3,0.2-0.4,0.4-0.7,0.5
+		c-0.4,0.2-0.8,0.3-1.3,0.3c-0.4,0-0.9-0.2-1.3-0.4c-0.2-0.1-0.3-0.2-0.5-0.4L26.5,33.7L26.5,33.7z"/>
+</g>
+</svg>