New theme for counter

Author: kkartunov

src/shared/components/Contentful/Countdown/index.jsx

@@ -25,6 +25,7 @@ export default function CountdownLoader(props) {
           title={data.entries.items[id].fields.title}
           end={new Date(data.entries.items[id].fields.endDate)}
           extraStylesForContainer={data.entries.items[id].fields.extraStylesForContainer}
+          themeName={data.entries.items[id].fields.theme}
         />
       )}
       renderPlaceholder={LoadingIndicator}

src/shared/components/Countdown/index.jsx

@@ -8,7 +8,13 @@ import PT from 'prop-types';
 import React from 'react';
 import { fixStyle } from 'utils/contentful';
 
-import './style.scss';
+import defaultTheme from './themes/style.scss';
+import TCO21 from './themes/TCO21.scss';
+
+const THEMES = {
+  Default: defaultTheme,
+  TCO21,
+};
 
 /* We have to use state component, as we need to manipulate with DOM nodes to
  * access nuka-carousel state. */
@@ -34,6 +40,8 @@ export default class Countdown extends React.Component {
   }
 
   render() {
+    const { themeName } = this.props;
+    const theme = THEMES[themeName];
     let { elapsed } = this.state;
     const oneDay = 24 * 60 * 60;
     const oneHour = 60 * 60;
@@ -54,27 +62,26 @@ export default class Countdown extends React.Component {
     );
     return (
       <div
-        styleName="container"
+        className={theme.container}
         style={styles}
       >
-        <div styleName="title"> {title} </div>
-        <div styleName="title colon"> : </div>
-        <div styleName="time-container">
+        <div className={theme.title}> {title} </div>
+        <div className={theme['time-container']}>
           <div>
-            <div styleName="time-value"> {day} </div>
-            <div styleName="time-label"> days </div>
+            <div className={theme['time-value']}> {day} </div>
+            <div className={theme['time-label']}> days </div>
           </div>
           <div>
-            <div styleName="time-value"> {hour} </div>
-            <div styleName="time-label"> hours </div>
+            <div className={theme['time-value']}> {hour} </div>
+            <div className={theme['time-label']}> hours </div>
           </div>
           <div>
-            <div styleName="time-value"> {minute} </div>
-            <div styleName="time-label"> minutes </div>
+            <div className={theme['time-value']}> {minute} </div>
+            <div className={theme['time-label']}> minutes </div>
           </div>
-          <div styleName="time-second">
-            <div styleName="time-value"> {second} </div>
-            <div styleName="time-label"> seconds </div>
+          <div className={theme['time-second']}>
+            <div className={theme['time-value']}> {second} </div>
+            <div className={theme['time-label']}> seconds </div>
           </div>
         </div>
       </div>
@@ -85,10 +92,12 @@ export default class Countdown extends React.Component {
 Countdown.defaultProps = {
   title: 'Countdown to TCO19 Final',
   extraStylesForContainer: {},
+  themeName: 'Default',
 };
 
 Countdown.propTypes = {
   title: PT.string,
   end: PT.instanceOf(Date).isRequired,
   extraStylesForContainer: PT.shape(),
+  themeName: PT.string,
 };

src/shared/components/Countdown/themes/TCO21.scss

@@ -0,0 +1,77 @@
+@import "~styles/mixins";
+
+$text-color-gray: #37373b;
+$container-background-yello: #fce217;
+
+.container {
+  @include roboto-regular;
+
+  display: -webkit-flex; /* Safari */
+  display: flex;
+  -webkit-flex-direction: row; /* Safari */
+  flex-direction: row;
+  -webkit-justify-content: center; /* Safari */
+  justify-content: center;
+  padding: 40px;
+  background: $container-background-yello;
+
+  @media only screen and (max-width: 767px) {
+    -webkit-flex-direction: column; /* Safari */
+    flex-direction: column;
+  }
+
+  .title {
+    @include barlow-condensed-medium;
+
+    color: #2a2a2a;
+    font-size: 48px;
+    line-height: 50px;
+    text-align: center;
+    margin: auto 41px auto 0;
+    text-transform: uppercase;
+
+    @media only screen and (max-width: 767px) {
+      margin-bottom: 20px;
+    }
+  }
+
+  .time-container {
+    display: -webkit-flex; /* Safari */
+    display: flex;
+    -webkit-flex-direction: row; /* Safari */
+    flex-direction: row;
+    -webkit-justify-content: center; /* Safari */
+    justify-content: center;
+  }
+
+  .time-value {
+    @include barlow-condensed;
+
+    color: #9d41c9;
+    font-size: 80px;
+    line-height: 74px;
+    text-align: center;
+  }
+
+  .time-label {
+    color: #2a2a2a;
+    font-size: 14px;
+    letter-spacing: 0.5px;
+    line-height: 18px;
+    text-align: center;
+    width: 100px;
+    text-transform: uppercase;
+    margin-top: 4px;
+
+    @media only screen and (max-width: 767px) {
+      width: auto;
+      margin-left: 10px;
+      margin-right: 10px;
+      font-size: 18px;
+    }
+  }
+
+  .time-second {
+    display: block;
+  }
+}

src/shared/components/Countdown/style.scss renamed to src/shared/components/Countdown/themes/style.scss

@@ -31,16 +31,8 @@ $container-background-yello: #fce217;
     margin-bottom: auto;
     text-transform: uppercase;
 
-    &.colon {
-      margin-right: 30px;
-    }
-
     @media only screen and (max-width: 767px) {
       margin-bottom: 20px;
-
-      &.colon {
-        display: none;
-      }
     }
   }