feat: add version number in the main title

nextstrain · Jul 31, 2020 · cbb5518 · cbb5518
1 parent 581394e
commit cbb5518
Showing 1 changed file with 40 additions and 10 deletions.
diff --git a/packages/web/src/components/Main/Title.tsx b/packages/web/src/components/Main/Title.tsx
@@ -5,10 +5,13 @@ import styled from 'styled-components'
 
 import { TITLE_COLORS } from 'src/constants'
 
+const PACKAGE_VERSION = process.env.PACKAGE_VERSION
+
 // Borrowed with modifications from Nextstrain.org
 // https://github.com/nextstrain/nextstrain.org/blob/master/static-site/src/components/splash/title.jsx
 
 const TitleH1 = styled.h1`
+  display: inline;
   margin-top: 0px;
   margin-bottom: 0px;
   font-weight: 300;
@@ -28,7 +31,8 @@ const TitleH1 = styled.h1`
   }
 `
 
-const VersionBadge = styled(Badge)`
+const VersionMaturityBadge = styled(Badge)`
+  display: inline;
   position: relative;
   top: -50px;
   left: -5px;
@@ -53,20 +57,46 @@ const VersionBadge = styled(Badge)`
   }
 `
 
+const VersionNumberBadge = styled.p`
+  display: inline;
+  position: relative;
+  left: -50px;
+  font-size: 0.85rem;
+  color: #7b838a;
+
+  @media (max-width: 780px) {
+    left: -35px;
+    font-size: 0.8rem;
+  }
+
+  @media (max-width: 560px) {
+    left: -30px;
+    font-size: 0.75rem;
+  }
+
+  @media (max-width: 490px) {
+    left: -23px;
+    font-size: 0.7rem;
+  }
+`
+
 const LetterSpan = styled.span<{ pos: number }>`
   color: ${(props) => TITLE_COLORS[props.pos]};
 `
 
 export const Title = () => (
-  <TitleH1>
-    {'Nextclade'.split('').map((letter, i) => (
-      // eslint-disable-next-line react/no-array-index-key
-      <LetterSpan key={`${i}_${letter}`} pos={i}>
-        {letter}
-      </LetterSpan>
-    ))}
-    <VersionBadge color="secondary">{'beta'}</VersionBadge>
-  </TitleH1>
+  <span>
+    <TitleH1>
+      {'Nextclade'.split('').map((letter, i) => (
+        // eslint-disable-next-line react/no-array-index-key
+        <LetterSpan key={`${i}_${letter}`} pos={i}>
+          {letter}
+        </LetterSpan>
+      ))}
+    </TitleH1>
+    <VersionMaturityBadge color="secondary">{'beta'}</VersionMaturityBadge>
+    {PACKAGE_VERSION && <VersionNumberBadge color="secondary">{`v${PACKAGE_VERSION}`}</VersionNumberBadge>}
+  </span>
 )
 
 export const Subtitle = styled.h1`