Unverified Commit 26bd2feb authored by Ridwan Amode's avatar Ridwan Amode Committed by GitHub
Browse files

ENSWBSITES-1129: Launchbar and header update (#508)

* ENSWBSITES-1129: Launchbar and header update
switch About ensembl and genome data & annotation in launchbar and header
- remove extra html tag not being used
- rename classes to more appropriate name
- code cleanup
parent 393d0d14
Pipeline #165748 passed with stages
in 6 minutes and 39 seconds
......@@ -61,25 +61,8 @@
}
}
.aboutEnsembl {
display: flex;
align-items: baseline;
margin-top: 4px;
font-size: 12px;
color: $light-blue;
}
.logotypeAbout {
height: 10px;
fill: $light-blue;
margin-left: 0.5rem;
.topbarRight {
font-size: 13px;
margin-right: 25px;
}
// For disabling temporarily the about Ensembl link in production
.aboutEnsemblDisabled {
color: $medium-dark-grey;
.logotypeAbout {
fill: $medium-dark-grey;
}
}
......@@ -17,8 +17,6 @@
import React from 'react';
import { Link } from 'react-router-dom';
import { isEnvironment, Environment } from 'src/shared/helpers/environment';
import Launchbar from './launchbar/Launchbar';
import { ReactComponent as Logotype } from 'static/img/brand/logotype.svg';
......@@ -60,24 +58,10 @@ export const Topbar = () => (
</div>
</div>
</div>
<AboutEnsembl />
<div className={styles.topbarRight}>Genome data & annotation</div>
</div>
);
// Temporarily disable the link to About Ensembl in production
const AboutEnsembl = () =>
isEnvironment([Environment.DEVELOPMENT, Environment.INTERNAL]) ? (
<Link to="/about" className={styles.aboutEnsembl}>
About
<Logotype className={styles.logotypeAbout} />
</Link>
) : (
<div className={styles.aboutEnsemblDisabled}>
About
<Logotype className={styles.logotypeAbout} />
</div>
);
export const Header = () => (
<header>
<Topbar />
......
......@@ -77,14 +77,25 @@
}
}
.about {
.aboutEnsembl {
display: flex;
align-items: center;
margin-left: 20px;
padding-right: 46px;
color: $blue;
}
.logotype {
height: 10px;
fill: $blue;
margin-left: 0.5rem;
margin-right: 0.5rem;
}
// For disabling temporarily the about Ensembl link in production
.aboutEnsemblDisabled {
color: $medium-dark-grey;
.aboutText {
font-weight: $light;
margin-right: 25px;
margin-top: 2px;
.logotype {
fill: $medium-dark-grey;
}
}
......@@ -15,6 +15,7 @@
*/
import React from 'react';
import { Link } from 'react-router-dom';
import { useSelector } from 'react-redux';
import { getEnabledCommittedSpecies } from 'src/content/app/species-selector/state/speciesSelectorSelectors';
......@@ -25,6 +26,7 @@ import { ReactComponent as BrowserIcon } from 'static/img/launchbar/browser.svg'
import { ReactComponent as EntityViewerIcon } from 'static/img/launchbar/entity-viewer.svg';
import { ReactComponent as CustomDownloadIcon } from 'static/img/launchbar/custom-download.svg';
import { ReactComponent as HelpIcon } from 'static/img/launchbar/help.svg';
import { ReactComponent as Logotype } from 'static/img/brand/logotype.svg';
import { isEnvironment, Environment } from 'src/shared/helpers/environment';
import LaunchbarButton from './LaunchbarButton';
......@@ -90,21 +92,33 @@ const Launchbar = () => {
app="help"
description="Help & documentation"
icon={HelpIcon}
enabled={
isEnvironment([
Environment.DEVELOPMENT,
Environment.INTERNAL
])
}
enabled={isEnvironment([
Environment.DEVELOPMENT,
Environment.INTERNAL
])}
/>
</div>
</div>
</div>
<div className={styles.about}>
<span className={styles.aboutText}>Genome data & annotation</span>
</div>
<AboutEnsembl />
</div>
);
};
// Temporarily disable the link to About Ensembl in production
const AboutEnsembl = () =>
isEnvironment([Environment.DEVELOPMENT, Environment.INTERNAL]) ? (
<Link to="/about" className={styles.aboutEnsembl}>
About the
<Logotype className={styles.logotype} />
team & its work
</Link>
) : (
<div className={styles.aboutEnsemblDisabled}>
About the
<Logotype className={styles.logotype} />
team & its work
</div>
);
export default Launchbar;
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