fix(banner): storybook date input and simplified gradient opacity

- also modified font size of banner since we have new h1-h4 values from previous tickets
eea · Jan 17, 2023 · 7674d76 · 7674d76
1 parent 6d15799
commit 7674d76
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 20 deletions.
diff --git a/src/ui/Banner/Banner.stories.jsx b/src/ui/Banner/Banner.stories.jsx
@@ -143,18 +143,8 @@ Default.args = {
   subtitle: 'Lorem ipsum dolor',
   metadata: [
     { hidden: false, value: 'Briefing', type: 'type' },
-    {
-      hidden: false,
-      value: Date.now(),
-      type: 'date',
-      title: 'Published Date',
-    },
-    {
-      hidden: false,
-      value: Date.now(),
-      type: 'date',
-      title: 'Modified Date',
-    },
+    { hidden: false, label: 'Published', value: '25 Nov 2022', type: 'date' },
+    { hidden: false, label: 'Modified', value: '29 Nov 2022', type: 'date' },
     { hidden: false, value: '5 min read', type: '' },
   ],
   image: true,

diff --git a/theme/themes/eea/extras/banner.variables b/theme/themes/eea/extras/banner.variables
@@ -10,7 +10,7 @@
 @imageBackgroundPosition : center;
 
 /* Gradient */
-@backgroundGradient           : linear-gradient(8deg,rgba(12,27,40,.7019607843137254) 32%,rgba(0,36,78,0) 80%);
+@backgroundGradient           : linear-gradient(8deg,rgba(12,27,40, 0.7) 32%,rgba(0,36,78,0) 80%);
 @backgroundGradientOpacity    : 1;
 
 /* Content */
@@ -27,12 +27,12 @@
 @titleMaxWidth             : 100%;
 @titleMarginBottom         : 0;
 @titleBorderBottom         : none;
-@mobileTitleFontSize       : 1.25rem;
-@tabletTitleFontSize       : 2.25rem;
-@computerTitleFontSize     : 3rem;
-@mobileTitleLineHeight     : 1.375rem;
-@tabletTitleLineHeight     : 2.75rem;
-@computerTitleLineHeight   : 3.5rem;
+@mobileTitleFontSize       : @mobileH1;
+@tabletTitleFontSize       : @h2;
+@computerTitleFontSize     : @h1;
+@mobileTitleLineHeight     : @headerLineHeight;
+@tabletTitleLineHeight     : @headerLineHeight;
+@computerTitleLineHeight   : @headerLineHeight;
 @mobileTitleMargin         : 0 0 0.5rem 0;
 @tabletTitleMargin         : 0 0 0.813rem 0;
 @computerTitleMargin       : 0 0 1.125rem 0;
@@ -87,4 +87,4 @@
 @sharePopupLineHeight: 1rem;
 // Actions
 @sharePopupActionsIconColor: @pineGreen;
-@sharePopupActionsIconMargin: 0;
+@sharePopupActionsIconMargin: 0;