Merge pull request #332 from topcoder-platform/issue-331

Info icons next to visual styles are missing #331

Author: ThomasKranitsas

src/assets/data/website-design-styles.json

@@ -1,34 +1,42 @@
 [
     {
         "name": "Dark / Saturated",
-        "className": "dark-saturated"
+        "className": "dark-saturated",
+        "description": "Dark and saturated backgroud colors give a dramatic feel. Used often in entertainment and luxury brand websites."
     },
     {
         "name": "Light / Airy",
-        "className": "light-airy"
+        "className": "light-airy",
+        "description": "Light and airy themes provide a clean and fresh feel. Used often in wellness and e-commerce sites for a calm and sophisticated style."
     },
     {
         "name": "Fun / Playful",
-        "className": "fun-playful"
+        "className": "fun-playful",
+        "description": "A fun and playful feel is suggested with bright colors and whimsical elements. Many sites geared at consumers for entertainment and children’s products follow this style."
     },
     {
         "name": "Mature / Serious",
-        "className": "mature-serious"
+        "className": "mature-serious",
+        "description": "Mature and serious subject matter is often represented with straightforward font styling and photographs. Muted colors and clear typography help keep the focus on content being presented."
     },
     {
         "name": "Simple / Minimalist",
-        "className": "simple-minimalist"
+        "className": "simple-minimalist",
+        "description": "Many modern brands use a very simple and minimalist approach to website style. White space is plentiful and the display is kept to few key elements without added decoration."
     },
     {
         "name": "Vibrant / Colorful",
-        "className": "vibrant-colorful"
+        "className": "vibrant-colorful",
+        "description": "Bold color combinations and engaging visual shapes or images provide a feel of high energy. This style is often used to match a youthful brand or engaging subject matter."
     },
     {
         "name": "Soft / Organic",
-        "className": "soft-organic"
+        "className": "soft-organic",
+        "description": "Earthy or pale colors and organic shapes are often used in sites wishing to convey a sense of nature and softness."
     },
     {
         "name": "Bold / Rugged",
-        "className": "bold-rugged"
+        "className": "bold-rugged",
+        "description": "Bold colors, larger heavy fonts, rough shapes, and outdoor settings are used in sites wanting to convey a solid and masculine feel."
     }
 ]

src/components/HelpIcon/index.jsx

@@ -5,16 +5,17 @@ import { v4 as uuidv4 } from "uuid";
 
 import "./styles.module.scss";
 
-const HelpIcon = ({ children }) => {
+const HelpIcon = ({ children, inverted, arrowColor = "#f4f4f4", backgroundColor = "#f4f4f4", textColor = "#00000" }) => {
   const tooltipId = useRef(uuidv4());
 
   return (
     <div styleName="help-icon">
       <HintIcon data-tip data-for={tooltipId.current} />
       <ReactTooltip
-        arrowColor="#f4f4f4"
-        backgroundColor="#f4f4f4"
-        styleName="tooltip"
+        arrowColor={arrowColor}
+        backgroundColor={backgroundColor}
+        textColor={textColor}
+        styleName={["tooltip", inverted ? "inverted" : ""].join(" ")}
         id={tooltipId.current}
         aria-haspopup="true"
         place="bottom"

src/components/HelpIcon/styles.module.scss

@@ -14,5 +14,10 @@
     border-radius: 8px;
     opacity: 1 !important;
     box-shadow: 0 1px 5px $tips-shadow;
+
+    &.inverted {
+      background-color: $black;
+      color: $grey-bg;
+    }
   }
 }

src/routes/Products/components/StyleOptions/index.jsx

@@ -9,6 +9,7 @@ import { v4 as uuidV4 } from "uuid";
 import LikeIcon from "../../../../assets/images/thumbsup.svg";
 import DislikeIcon from "../../../../assets/images/thumbsdown.svg";
 import styles from "../../../../assets/data/website-design-styles.json";
+import HelpIcon from "../../../../components/HelpIcon"
 import "./styles.module.scss";
 
 const StyleOptions = ({ likes = [], dislikes = [], onLike, onDislike }) => {
@@ -26,7 +27,10 @@ const StyleOptions = ({ likes = [], dislikes = [], onLike, onDislike }) => {
             )}
           >
             <div styleName="name">
-              {style.name}
+              <span>{style.name}</span> &nbsp;
+              <HelpIcon textColor="#f4f4f4" inverted backgroundColor="#000" arrowColor="#000">
+              {style.description}
+              </HelpIcon>
             </div>
             <div styleName="box">
               <div styleName="preview" />

src/routes/Products/components/StyleOptions/styles.module.scss

@@ -104,13 +104,19 @@
 
     .name {
       @include font-roboto;
+      display: flex;
+      justify-content: center;
       style: $black;
       font-size: 16px;
       font-weight: 600;
       line-height: 26px;
       text-align: center;
       margin-top: 8px;
       margin-bottom: 8px;
+
+      .toolTip {
+        margin-left: 2px;
+      }
     }
   }
 }