Add the start screen for contact us (#538)

Co-authored-by: Imran Salam <imran@ebi.ac.uk>

src/ensembl/src/content/home/Home.scss

@@ -87,7 +87,6 @@
   top: 7px;
   right: 20px;
   color: $blue;
-  font-weight: $bold;
   display: grid;
   grid-template-columns: auto auto;
   height: 28px;
@@ -98,6 +97,7 @@
   }
 
   .text {
+    font-weight: $bold;
     align-self: center;
   }
 

src/ensembl/src/shared/components/communication-framework/CommunicationPanel.scss

 @import 'src/styles/common';
 
+$offsetTop: 110px; // the distance between the top of the window and the top border of the panel
+
 .wrapper {
   position: fixed;
   width: 100%;
@@ -11,52 +13,59 @@
 .panelWrapper {
   position: fixed;
   right: 0;
-  top: 110px;
+  top: $offsetTop;
   z-index: 11; /* Need to go above the top bar */
-  height: calc(100% - 150px);
-  max-height: 750px;
+  min-height: 100px;
   animation: .3s ease-out 0s 1 slideInFromRight;
 }
 
 .panel {
   position: relative;
-  min-height: 100px;
+  display: grid;
+  grid-template-areas:
+          'conversation tabs close'
+          '. main main';
+  grid-template-columns: 67px 1fr 46px;
+  grid-template-rows: auto 1fr;
+  max-height: calc(100vh - 110px - 5vh);
+  height: auto;
+  padding-top: 17px;
+  color: $body-font-color;
   border-top-left-radius: 5px;
   border-bottom-left-radius: 5px;
-  max-width: 100%;
   background: $white;
   box-shadow: 1px 1px 4px $shadow-color;
-  height: 100%;
+  padding-bottom: 90px;
   z-index: 2;
   width: 750px;
-  
 }
 
-.panelBody { 
-  position: relative;
-  border-bottom-right-radius: 5px;
-  border-bottom-left-radius: 5px;
+.panelHeader {
+  margin-bottom: 20px;
+}
+
+.panelBody {
+  grid-area: main;
+  padding-top: 30px;
+  padding-left: 28px;
   overflow: auto;
   height: 100%;
 }
 
 .panelCloseButton {
-  position: absolute;
-  right: 25px;
-  top: 20px;
-  z-index: 1;
+  grid-area: close;
+  align-self: center;
+  margin-bottom: 3px;
 }
 
-.panelContent {
-  display: grid;
-  grid-template-columns: 95px auto;
-  height: 100%;
-
-  .conversationIcon {
-    width: 40px;
-    margin: 17px 0 0 27px;
-  }
+.conversationIcon {
+  grid-area: conversation;
+  width: 40px;
+  align-self: center;
+  justify-self: right;
+  cursor: pointer;
 }
+
 .overlay {
   background-color: rgba(0, 0, 0, 0.1);
   position: fixed;

src/ensembl/src/shared/components/communication-framework/CommunicationPanel.tsx

@@ -19,6 +19,7 @@ import { useDispatch, useSelector } from 'react-redux';
 
 import Overlay from 'src/shared/components/overlay/Overlay';
 import CloseButton from 'src/shared/components/close-button/CloseButton';
+import ContactUs from './contact-us/ContactUs';
 
 import { toggleCommunicationPanel } from 'src/shared/state/communication/communicationSlice';
 import { isCommunicationPanelOpen } from 'src/shared/state/communication/communicationSelector';
@@ -43,13 +44,13 @@ const CommunicationPanel = () => {
       <Overlay className={styles.overlay} />
       <div className={styles.panelWrapper}>
         <div className={styles.panel}>
+          <ConversationIcon
+            className={styles.conversationIcon}
+            onClick={onClose}
+          />
           <CloseButton className={styles.panelCloseButton} onClick={onClose} />
           <div className={styles.panelBody}>
-            <div className={styles.panelContent}>
-              <div className={styles.conversationIcon}>
-                <ConversationIcon />
-              </div>
-            </div>
+            <ContactUs />
           </div>
         </div>
       </div>

src/ensembl/src/shared/components/communication-framework/contact-us/ContactUs.scss

+.wrapper {
+  max-width: 450px;
+
+  h2 {
+    font-size: 13px;
+    margin-top: 30px;
+  }
+
+  p,
+  dd {
+    margin-bottom: 20px;
+  }
+
+  dd {
+    margin: 5px 0 15px 0;
+  }
+}
+
+.socialMediaInfo {
+  margin-top: 50px;
+
+  a {
+    display: inline-block;
+    margin-right: 20px;
+  }
+}
+
+.socialMediaLinkText {
+  display: inline-block;
+  margin-right: 10px;
+}
+
+.icon {
+  position: relative;
+  top: 8px;
+  height: 25px;
+  width: 25px;
+}

src/ensembl/src/shared/components/communication-framework/contact-us/ContactUs.tsx

+/**
+ * See the NOTICE file distributed with this work for additional information
+ * regarding copyright ownership.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React, { useState } from 'react';
+
+import { SecondaryButton } from 'src/shared/components/button/Button';
+import ExternalLink from 'src/shared/components/external-link/ExternalLink';
+
+import { ReactComponent as BlogIcon } from 'static/img/home/blog.svg';
+import { ReactComponent as FacebookIcon } from 'static/img/home/facebook.svg';
+import { ReactComponent as TwitterIcon } from 'static/img/home/twitter.svg';
+
+import styles from './ContactUs.scss';
+
+const ContactUs = () => {
+  const [shouldShowForm, setShouldShowForm] = useState(false);
+
+  if (shouldShowForm) {
+    return <div>Will display the form</div>;
+  }
+
+  return (
+    <div className={styles.wrapper}>
+      <section>
+        <p>
+          Please contact us if you have a problem with the website or need help
+        </p>
+        <SecondaryButton onClick={() => setShouldShowForm(!shouldShowForm)}>
+          Contact us
+        </SecondaryButton>
+      </section>
+      <section className={styles.socialMediaInfo}>
+        <p>
+          Visit the blog for details of releases, workshops and other tidbits of
+          information about the Ensembl project.
+        </p>
+        <p>
+          Visit Facebook or Twitter for the latest breaking Ensembl news and
+          service status updates.
+        </p>
+        <p>
+          <a href="https://www.ensembl.info/">
+            <span className={styles.socialMediaLinkText}>Ensembl Blog</span>{' '}
+            <BlogIcon className={styles.icon} />{' '}
+          </a>
+          <a href="https://www.facebook.com/Ensembl.org/">
+            <FacebookIcon className={styles.icon} />{' '}
+          </a>
+          <a href="https://twitter.com/ensembl">
+            <TwitterIcon className={styles.icon} />
+          </a>
+        </p>
+      </section>
+      <section>
+        <h2>Online Help</h2>
+        <p>
+          Each app has a Help icon (top right) that will show context-sensitive
+          help for that view.
+        </p>
+        <p>All Help articles and videos can be found in the Help app.</p>
+      </section>
+      <section>
+        <h2>Mailing lists</h2>
+        <p> We have two public mailing lists: </p>
+        <dl>
+          <dt>
+            <ExternalLink
+              linkText="announce"
+              to="https://lists.ensembl.org/mailman/listinfo/announce_ensembl.org"
+            />
+          </dt>
+          <dd>
+            a low-traffic list for release announcements and web status updates
+          </dd>
+          <dt>
+            <ExternalLink
+              linkText="dev"
+              to="https://lists.ensembl.org/mailman/listinfo/dev_ensembl.org"
+            />
+          </dt>
+          <dd>
+            programming help from the Ensembl development team and other Ensembl
+            power users
+          </dd>
+        </dl>
+      </section>
+    </div>
+  );
+};
+
+export default ContactUs;

src/ensembl/src/styles/_normalize.scss

@@ -29,6 +29,7 @@ body {
   font-family: $body-font-family;
   font-weight: $global-weight-normal;
   line-height: $global-lineheight;
+  text-size-adjust: none; // prevent automatic text size inflation on smartphones running Chromium-based browsers
   color: $body-font-color;
 
   @if ($body-antialiased) {