feat(landing-page): add grey around composition title

trompamusic · Mar 12, 2020 · 60a1509 · 60a1509
1 parent bf847ad
commit 60a1509
Show file tree

Hide file tree

Showing 6 changed files with 16 additions and 4 deletions.
diff --git a/src/components/Jumbotron/Jumbotron.jsx b/src/components/Jumbotron/Jumbotron.jsx
@@ -23,6 +23,7 @@ export default function Jumbotron ({ children, image, text }) {
       </Typography>
       <Typography variant="h2">
         {text.h2}
+        <span className={classes.compositionTitle}>Requiem in D minor</span>
       </Typography>
       <Typography gutterBottom>
         {text.paragraph}

diff --git a/src/components/Jumbotron/Jumbotron.styles.js b/src/components/Jumbotron/Jumbotron.styles.js
@@ -2,7 +2,7 @@ import { createStyles } from '@material-ui/styles';
 
 const backgroundGradient = (firstStop, secondStop) => `linear-gradient(105deg, rgba(255,255,255,1) ${firstStop}, rgba(255,140,2,1) ${secondStop}, rgba(244,87,49,1) 100%)`;
 
-export default ({ spacing, typography, breakpoints }) => createStyles({
+export default ({ spacing, palette, typography, shape, breakpoints }) => createStyles({
   root: {
     display                 : 'flex',
     position                : 'relative',
@@ -80,6 +80,11 @@ export default ({ spacing, typography, breakpoints }) => createStyles({
     height     : 15,
     marginRight: spacing(0.7),
   },
+  compositionTitle: {
+    backgroundColor: palette.common.faintGrey,
+    borderRadius   : shape.borderRadius,
+    padding        : '0 4px',
+  },
   buttonHero: {
     marginTop    : spacing(),
     padding      : '8px 32px',

diff --git a/src/components/Jumbotron/__snapshots__/Jumbotron.test.jsx.snap b/src/components/Jumbotron/__snapshots__/Jumbotron.test.jsx.snap
@@ -30,6 +30,11 @@ exports[`<Jumbotron /> renders and matches snapshot 1`] = `
       class="MuiTypography-root MuiTypography-h2"
     >
       H2
+      <span
+        class="makeStyles-compositionTitle-6"
+      >
+        Requiem in D minor
+      </span>
     </h2>
     <p
       class="MuiTypography-root MuiTypography-body1 MuiTypography-gutterBottom"
@@ -39,7 +44,7 @@ exports[`<Jumbotron /> renders and matches snapshot 1`] = `
   </div>
   <img
     alt=""
-    class="makeStyles-image-7"
+    class="makeStyles-image-8"
   />
 </div>
 `;
diff --git a/src/i18n/locales/en/home.json b/src/i18n/locales/en/home.json
@@ -2,7 +2,7 @@
   "create_modern_classics": "Create modern, playable scores from known and unknown classics.",
   "go_to_demo_campaign": "Go to demo campaign",
   "join_campaign": "Join campaign",
-  "help_us": "Help us digitise the Requiem in D minor",
+  "help_us": "Help us digitise the ",
   "title": "$t(common:website_name)",
   "make_more_memorable": "Make even Mozart more memorable",
   "trompa_collaboration_campaign_manager": "Trompa collaboration campaign manager",

diff --git a/src/theme/palette.js b/src/theme/palette.js
@@ -3,6 +3,7 @@ export default {
     white     : '#fff',
     black     : '#000',
     faintWhite: '#FAFAFA',
+    faintGrey : '#F2F2F2',
     darkBlack : 'rgba(0, 0, 0, 0.7)',
   },
   text: {

diff --git a/src/theme/typography.js b/src/theme/typography.js
@@ -17,7 +17,7 @@ export default {
     fontSize    : '26.09px',
     marginBottom: 8,
     fontFamily  : fontFamilyAvenir,
-    lineHeight  : 1,
+    lineHeight  : 1.2,
   },
   h3: {
     color     : '#3A3A3A',