Unverified Commit 257afe8e authored by Imran Salam's avatar Imran Salam Committed by GitHub
Browse files

Update the Ensembl help link (#535)

parent 3cd7019c
Pipeline #181265 passed with stages
in 6 minutes and 18 seconds
......@@ -82,11 +82,15 @@
}
}
.helpLabel {
color: $blue;
font-weight: $bold;
}
.homeTopRight {
position: absolute;
top: 7px;
right: 20px;
color: $blue;
display: grid;
grid-template-columns: auto auto;
height: 28px;
......
......@@ -17,13 +17,13 @@
import React from 'react';
import { Link } from 'react-router-dom';
import { HelpPopupButton } from 'ensemblRoot/src/shared/components/help-popup';
import ConversationIcon from 'ensemblRoot/src/shared/components/communication-framework/ConversationIcon';
import { ReactComponent as Logotype } from 'static/img/brand/logotype.svg';
import { ReactComponent as SpeciesSelectorIcon } from 'static/img/launchbar/species-selector.svg';
import { ReactComponent as BrowserIcon } from 'static/img/launchbar/browser.svg';
import { ReactComponent as EntityViewerIcon } from 'static/img/launchbar/entity-viewer.svg';
import { ReactComponent as HelpIcon } from 'static/img/launchbar/help.svg';
import speciesStripUrl from 'static/img/home/species-strip.svg';
import ebiLogoUrl from 'static/img/home/EMBLEBI-logo.svg';
import elixirLogoUrl from 'static/img/home/elixir-logo.svg';
......@@ -34,13 +34,6 @@ import blogIconUrl from 'static/img/home/blog.svg';
import styles from './Home.scss';
const Home = () => {
const helpButton = (
<div className={styles.howToUse}>
<div className={styles.text}>How to use Ensembl</div>
<HelpIcon className={styles.helpIcon} />
</div>
);
return (
<div className={styles.home}>
<div className={styles.main}>
......@@ -94,7 +87,11 @@ const Home = () => {
</div>
<div className={styles.homeTopRight}>
<Link to="/help">{helpButton}</Link>
<HelpPopupButton
label="About using Ensembl"
slug="ensembl-website-basics"
labelClass={styles.helpLabel}
/>
<div className={styles.conversationIcon}>
<ConversationIcon />
</div>
......
......@@ -15,6 +15,7 @@
*/
import React, { useState } from 'react';
import classNames from 'classnames';
import { isEnvironment, Environment } from 'src/shared/helpers/environment';
......@@ -24,11 +25,13 @@ import { HelpAndDocumentation } from 'src/shared/components/app-bar/AppBar';
import { ReactComponent as HelpIcon } from 'static/img/launchbar/help.svg';
import { SlugReference } from './types';
import styles from './HelpPopupButton.scss';
type Props = SlugReference;
type Props = {
labelClass?: string;
label: string;
slug: string;
};
const HelpPopupButton = (props: Props) => {
const [shouldShowModal, setShouldShowModal] = useState(false);
......@@ -45,21 +48,27 @@ const HelpPopupButton = (props: Props) => {
return <HelpAndDocumentation />;
}
const labelClasses = classNames(styles.label, props.labelClass);
return (
<>
<div className={styles.wrapper} onClick={openModal}>
<span className={styles.label}>Help</span>
<span className={labelClasses}>{props.label}</span>
<div className={styles.button}>
<HelpIcon className={styles.icon} />
</div>
</div>
{shouldShowModal && (
<Modal classNames={{ body: styles.helpPopup }} onClose={closeModal}>
<HelpPopupBody {...props} />
<HelpPopupBody slug={props.slug} />
</Modal>
)}
</>
);
};
HelpPopupButton.defaultProps = {
label: 'Help'
};
export default HelpPopupButton;
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment