Fix #2735

Author: kkartunov

src/shared/components/Contentful/MemberCard/MemberCard.jsx

@@ -24,7 +24,8 @@ export function MemberCardInner({
   const country = memberCard.country && memberCard.country.toLowerCase();
   const imageUrl = _.get(image, 'file.url');
   const trackIconUrl = _.get(trackIcon, 'file.url');
-  const { memberName, trackColor } = memberCard;
+  const { memberName, trackColor, description } = memberCard;
+
   return (
     <a
       href={memberCard.url}
@@ -48,6 +49,9 @@ export function MemberCardInner({
           { memberName && (
             <div className={theme.memberName}>{memberName}</div>
           )}
+          { description && (
+            <div className={theme.description}>{description}</div>
+          )}
           { country && (
             <div className={theme.countryWrapper}>
               <span className={`flag-icon flag-icon-${country} ${theme.flag}`} />
@@ -57,7 +61,6 @@ export function MemberCardInner({
             </div>
           )}
         </div>
-
       </div>
     </a>
   );

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

@@ -10,10 +10,12 @@ import _ from 'lodash';
 
 import MemberCard from './MemberCard';
 import defaultTheme from './themes/default.scss';
+import speakerCard from './themes/speakerCard.scss';
 
 // Future themes added here
 const THEMES = {
   Default: defaultTheme,
+  'Speaker Card': speakerCard,
 };
 
 /* Loads the main member card entry. */

src/shared/components/Contentful/MemberCard/themes/default.scss

@@ -58,13 +58,23 @@
     }
 
     .memberName {
+      font-family: "Roboto", Helvetica, Arial, sans-serif;
       color: #2a2a2b;
       font-size: 15px;
       font-weight: 500;
       line-height: 20px;
       text-align: left;
     }
 
+    .description {
+      color: #555;
+      font-family: "Roboto", Helvetica, Arial, sans-serif;
+      font-size: 15px;
+      font-weight: 400;
+      line-height: 25px;
+      text-align: left;
+    }
+
     .countryWrapper {
       display: flex;
       align-items: center;

src/shared/components/Contentful/MemberCard/themes/speakerCard.scss

@@ -0,0 +1,9 @@
+@import "./default";
+
+.info {
+  .handleWrapper {
+    .handle {
+      color: #0d61bf;
+    }
+  }
+}