usability: highlight test envs

gbif · Aug 14, 2024 · 99ed546 · 99ed546
1 parent 7d51fb7
commit 99ed546
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 4 deletions.
diff --git a/src/api/util/config.js b/src/api/util/config.js
@@ -8,6 +8,7 @@ const datasetAttemptLogs = "https://logs.gbif.org/app/discover#/?_g=(filters:!()
 
 const environments = {
   prod: {
+    isProduction: true,
     gbifUrl: 'https://www.gbif.org',
     dataApi: 'https://registry-api.gbif.org',
     dataApi_v1: 'https://api.gbif.org/v1',

diff --git a/src/components/Layout/index.js b/src/components/Layout/index.js
@@ -10,7 +10,7 @@ import BasicMenu from './BasicMenu';
 import SelectLang from './SelectLang';
 import UserMenu from './UserMenu';
 import Logo from './Logo';
-
+import config from '../../api/util/config';
 import './menu.css';
 import { FormattedMessage } from 'react-intl';
 import withContext from "../hoc/withContext";
@@ -96,19 +96,21 @@ class SiteLayout extends Component {
     </React.Fragment>;
 
     return (
-      <Layout style={{ minHeight: '100vh' }}>
+      <Layout style={{ minHeight: '100vh' }} className={config.isProduction ? '' : 'testEnv'}>
         {sideMenu}
         <Layout style={{ marginLeft: `${isRTL ? 0 : contentMargin}px`, marginRight: `${isRTL ? contentMargin : 0}px` }}>
 
-          <Header style={{ background: '#fff', padding: 0, display: 'flex' }}>
+          <Header className="header__primary" style={{ padding: 0, display: 'flex' }}>
             {isMobile && <div className="headerLogo"><Logo style={{ height: '100px', flex: '0 0 auto' }} /></div>}
 
            {collapsed ? <MenuUnfoldOutlined style={{ flex: '0 0 auto' }}
               className="menu-trigger"
               onClick={this.toggle} /> : <MenuFoldOutlined style={{ flex: '0 0 auto' }}
               className="menu-trigger"
               onClick={this.toggle} />}
-            <div style={{ flex: '1 1 auto' }} />
+            <div style={{ flex: '1 1 auto' }}>
+              <span className="header__warning">Test environment</span>
+            </div>
             <div className="header__secondary" style={{ flex: '0 0 auto' }}>
               <UserMenu />
               <SelectLang />

diff --git a/src/components/Layout/menu.css b/src/components/Layout/menu.css
@@ -9,4 +9,20 @@
 .header__secondary {
   float: right;
   padding: 0 16px;
+}
+
+.header__primary {
+  background: white!important
+}
+.testEnv .header__primary {
+  background: repeating-linear-gradient(45deg, #ffffff, #ffffff 10px, #ffd9d6 10px, #ffd9d6 20px)!important;
+}
+
+.header__warning {
+  display: none;
+}
+.testEnv .header__warning {
+  display: block;
+  font-weight: bold;
+  color: tomato;
 }