gatsby-matrix-theme 3.2.7 → 3.2.11

package/CHANGELOG.md

@@ -1,3 +1,65 @@
+## [3.2.11](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v3.2.10...v3.2.11) (2022-01-13)
+
+
+### Code Refactoring
+
+* update newsletter form for w3 validator ([11243b9](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/11243b94527d6dc2a62310c60d530199e9be1516))
+
+
+* Merge branch 'tm-2567-update-theme-for-w3-validator' into 'master' ([82c4eaf](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/82c4eafbdac22cde92706d82a6e7365878f1854d))
+
+## [3.2.10](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v3.2.9...v3.2.10) (2022-01-13)
+
+
+### Bug Fixes
+
+* add coupon code logic ([a78dbca](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/a78dbca6c26f2c4e880c04ccfe6c41e1d615c7d7))
+* add padding ([c9273eb](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/c9273eb3e5da3703df8b5ba4af0cea29afd32b63))
+* add some space ([1f511ef](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/1f511ef0aa10554b9732b3d162e28a1e0d69e85d))
+* added yarn lock ([ee50cd3](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/ee50cd3017a6daf71d588823e31234f4bca6f7c9))
+* dmca fixes ([752a65f](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/752a65f633e5934307a45a3cbae8c1766266f470))
+* dmca script and hardcoded ([c2f70bb](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/c2f70bba5618b3e8d0ef488229af3f236b806e1d))
+* fix small issue ([bc5a03d](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/bc5a03d440d9e298b235ee94f5bd25f1104aee9e))
+* fix space ([874c3a5](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/874c3a5f28a02c48e80907acb542c747cf011df1))
+* import dmca in footer from core theme ([ccaa070](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/ccaa070d6daf3cf7689cdf8aec8569bb9524e08c))
+* make style ([7ee8177](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/7ee8177530662322e871a7e4d0e5f9bf507c7d36))
+* make style for comparison table ([b5acb4c](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/b5acb4c8e058736ea30fc58362c0bfcd17fbe0b7))
+* merged master branch ([0dc9fad](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/0dc9fad624948eb6b4d0271871c61eaf1b59035c))
+* small fix ([6c0d8c8](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/6c0d8c8b64ab1371439b78bbfae6bf497a3a383d))
+* update new core theme version ([66fe211](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/66fe211293c89dff450cbfcad220fad68ac1b4fd))
+
+
+* Merge branch 'tm-2625-dmca-implementation' into 'master' ([54d8b7a](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/54d8b7adff19085a2768cdef7f8791aae9a96b78))
+* Merge branch 'tm-2585-comparisonTabel' into 'master' ([ef11b91](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/ef11b917bd4b6a875cf66bf8b1d6a373e636911b))
+* Update index.js ([e5985b2](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/e5985b2665e6259bed07b81cd55285730432b2e1))
+
+## [3.2.9](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v3.2.8...v3.2.9) (2022-01-12)
+
+
+### Bug Fixes
+
+* operators table bug fix ([3fba8a3](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/3fba8a30274c740dc6f37935f42f0dedce164439))
+
+## [3.2.8](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v3.2.7...v3.2.8) (2022-01-11)
+
+
+### Bug Fixes
+
+* bonus remove extra div ([5e108d0](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/5e108d024d9e671d9e12192436bb1c183a804977))
+* removed extra div in module title ([a483704](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/a4837049445250db1641d49e055a173ac77d42cd))
+* removing extra divs ([1280197](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/12801975b30e758820e3a405a3e1eaafe02a45c9))
+* test bonus ([3bb0bd7](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/3bb0bd7713067852232579d62928902a1116c3fa))
+* updated core version and updated cards html ([6c22ad7](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/6c22ad752db25073d21e0d36d0b344bc39d1d6ad))
+
+
+### Config
+
+* changed site ([20d1730](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/20d17303c4e8716d82a7d57d2b0c1d67b44620e0))
+* updated theme ([f5304b1](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/f5304b1efd50e45d3b72cc846e1bd7abae6fe41c))
+
+
+* Merge branch 'cards-improvments' into 'master' ([fa54f54](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/fa54f549817558c2a57441f9d49cc14d39634fd1))
+
 ## [3.2.7](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v3.2.6...v3.2.7) (2022-01-10)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gatsby-matrix-theme",
-  "version": "3.2.7",
+  "version": "3.2.11",
   "main": "index.js",
   "description": "Matrix Theme NPM Package",
   "author": "",
@@ -31,7 +31,7 @@
     "cross-env": "^7.0.2",
     "dotenv": "8.2.0",
     "gatsby": "^3.3.1",
-    "gatsby-core-theme": "^2.0.16",
+    "gatsby-core-theme": "^2.1.0",
     "gatsby-image": "^3.3.0",
     "gatsby-plugin-image": "^1.3.1",
     "gatsby-plugin-postcss": "^4.3.0",

package/src/components/atoms/cards/base-card/index.js

@@ -22,18 +22,20 @@ const BaseCard = ({
   );
 
   return (
-    <div className={`${styles.baseCard} ${styles[cardType]} ${featured ? styles.featured : ''}`}>
-      <div className={styles.cardWrapper}>
-        {featured &&
-          (isLinked ? (
-            <Link to={path} title={title} className={`${styles.cardLink} base-card-gtm`}>
-              {imgContent}
-            </Link>
-          ) : (
-            <div className={styles.cardLink}>{imgContent}</div>
-          ))}
-        {children}
-      </div>
+    <div
+      className={`${styles.baseCard} ${styles[cardType]} ${featured ? styles.featured : ''} ${
+        styles.cardWrapper
+      }`}
+    >
+      {featured &&
+        (isLinked ? (
+          <Link to={path} title={title} className={`${styles.cardLink} base-card-gtm`}>
+            {imgContent}
+          </Link>
+        ) : (
+          <div className={styles.cardLink}>{imgContent}</div>
+        ))}
+      {children}
     </div>
   );
 };

package/src/components/atoms/cards/comparison-table/table/index.js

@@ -1,6 +1,7 @@
 import React, { useContext } from 'react';
 import PropTypes from 'prop-types';
 import { AiOutlineCheckCircle } from 'react-icons/ai';
+import { VscFiles } from 'react-icons/vsc';
 import { imagePrettyUrl, translate } from 'gatsby-core-theme/src/helpers/getters';
 import LazyImg from 'gatsby-core-theme/src/hooks/lazy-image';
 import OperatorCta from 'gatsby-core-theme/src/components/atoms/operator-cta';
@@ -11,44 +12,43 @@ import { Context } from 'gatsby-core-theme/src/context/TranslationsProvider';
 
 import styles from './table.module.scss';
 
-export default function ComparisonTable({ items }) {
+const listHeadings = [
+  {
+    defaultValue: 'Casino name',
+    key: 'casino_name',
+  },
+  {
+    defaultValue: 'Rating',
+    key: 'rating',
+  },
+  {
+    defaultValue: 'Bonus',
+    key: 'bonus',
+  },
+  {
+    defaultValue: 'Top Features',
+    key: 'top_features',
+  },
+  {
+    defaultValue: 'Payment Methods',
+    key: 'payment_methods',
+  },
+  {
+    defaultValue: 'Banking',
+    key: 'banking',
+  },
+  {
+    defaultValue: 'Currencies',
+    key: 'currencies',
+  },
+  {
+    defaultValue: 'Licenses',
+    key: 'licenses',
+  },
+];
+export default function ComparisonTable({ items, tabelInfo = listHeadings }) {
   const { translations } = useContext(Context) || {};
 
-  const tabelInfo = [
-    {
-      defaultValue: 'Casino name',
-      key: 'casino_name',
-    },
-    {
-      defaultValue: 'Rating',
-      key: 'rating',
-    },
-    {
-      defaultValue: 'Bonus',
-      key: 'bonus',
-    },
-    {
-      defaultValue: 'Top Features',
-      key: 'top_features',
-    },
-    {
-      defaultValue: 'Payment Methods',
-      key: 'payment_methods',
-    },
-    {
-      defaultValue: 'Banking',
-      key: 'banking',
-    },
-    {
-      defaultValue: 'Currencies',
-      key: 'currencies',
-    },
-    {
-      defaultValue: 'Licenses',
-      key: 'licenses',
-    },
-  ];
-
   const cell = (heading, item, index) => {
     switch (heading) {
       case 'casino_name':
@@ -65,8 +65,9 @@ export default function ComparisonTable({ items }) {
               <OperatorCta
                 tracker="main"
                 operator={item?.relation}
-                playText={translate(translations, 'play_now', 'Play Now')}
-                gtmClass="operator-card-gtm btn-cta"
+                // new key
+                translationKey="play_ex"
+                gtmClass="comparison-table-gtm btn-cta"
               />
             </div>
           </td>
@@ -95,6 +96,19 @@ export default function ComparisonTable({ items }) {
               ))}
           </td>
         );
+      case 'coupon_code':
+        return (
+          <td key={index} className={styles.couponCode}>
+            {item?.relation?.extra_fields?.coupon_code && (
+              <>
+                <p>
+                  {item?.relation?.extra_fields?.coupon_code}{' '}
+                  <VscFiles color="var(--coupon-code-color);" />
+                </p>
+              </>
+            )}
+          </td>
+        );
       case 'payment_methods':
         return (
           <td key={index} className={styles.paymentMethods}>
@@ -131,7 +145,9 @@ export default function ComparisonTable({ items }) {
                 {item?.relation?.bonus?.currencies &&
                   item?.relation?.bonus?.currencies
                     .slice(0, 3)
-                    .map((currencies) => currencies.iso_code)}
+                    .map((currencies, i, list) => (
+                      <>{`${currencies.iso_code}${i + 1 < list.length ? ', ' : ''}`}</>
+                    ))}
               </span>
             </p>
           </td>

package/src/components/atoms/cards/comparison-table/table/table.module.scss

@@ -21,6 +21,7 @@
 
     th {
       @include flex-align(center, center);
+      padding: 2rem 2rem;
       background-color: var(--comparison-header-background-color);
       border: 1px solid var(--comparison-header-border-color);
       border-bottom: none;
@@ -49,11 +50,18 @@
         border: 1px solid var(--color-9);
         box-sizing: border-box;
         margin-right: 1.6rem;
+        border-radius: 0.6rem;
       }
-      span {
-        font-weight: bold;
-        font-size: 18px;
-        line-height: 25px;
+      > div {
+        height: 100%;
+        @include flex-direction(column);
+        @include flex-align(flex-start, space-between);
+        span {
+          font-weight: bold;
+          font-size: 18px;
+          line-height: 25px;
+          color: black;
+        }
       }
     }
 
@@ -67,13 +75,14 @@
         font-weight: bold;
       }
     }
-    
+
     .raiting {
       @include flex-align(center, space-between);
 
       a {
         font-weight: bold;
         font-size: 1.6rem;
+        color: var(--text-link-color);
       }
     }
     .topFeatures {
@@ -82,10 +91,13 @@
       span {
         @include flex-direction(row);
         @include flex-align(center, center);
-        margin-bottom: 0.8rem;
+        margin-bottom: 0.4rem;
+        margin-top: 0.4rem;
         svg {
           color: var(--comparison-top-features-icon-color);
           margin-right: 0.93rem;
+          min-width: 2.5rem;
+          height: 2rem;
         }
       }
     }
@@ -99,12 +111,14 @@
         font-size: 1.4rem;
         line-height: 2.4rem;
         margin-bottom: 1rem;
+        color: black;
         span {
           font-weight: bold;
         }
       }
     }
     .currencies {
+      padding: 1.6rem 1rem;
       span {
         margin-left: 0.4rem;
         background: var(--comparison-currencies-background-color);
@@ -114,6 +128,10 @@
         font-weight: bold;
         font-size: 12px;
         line-height: 18px;
+        width: 4.4rem;
+        height: 2.4rem;
+        padding: 0.499rem 0.8rem;
+        color: #17182f;
       }
     }
     .paymentMethods {
@@ -125,12 +143,45 @@
         font-weight: bold;
         font-size: 14px;
         line-height: 18px;
+        object-fit: contain;
+        color: white;
+        margin-bottom: 0.5rem;
+        margin-top: 0.5rem;
+        img {
+          width: 7.2rem;
+          height: 3.2rem;
+          object-fit: contain;
+        }
+      }
+    }
+    .couponCode {
+      @include flex-align(center, flex-start);
+      box-sizing: border-box;
+      p {
+        @include flex-align(center, center);
+        border: 1px dashed var(--coupon-code-color);
+        background-color: var(--backgorund--coupon-code-color);
+        width: fit-content;
+        padding: 0.4rem 1.6rem;
+        border-radius: 0.5rem;
+        font-weight: bold;
+        font-size: 1.4rem;
+        color: var(--coupon-code-color);
+        svg{
+          margin-left: 1rem;
+        }
       }
     }
-
     .licenses {
+      padding: 1.1rem;
       img {
         max-height: 3.2rem;
+        width: 7.2rem;
+        object-fit: contain;
+        background-color: #fff;
+        margin-right: 1rem;
+        margin-top: 0.5rem;
+        margin-bottom: 0.5rem;
       }
     }
   }

package/src/components/atoms/cards/operators-table/index.js

@@ -38,7 +38,9 @@ const CasinosTable = ({ module }) => {
             items.map((item) => (
               <tr>
                 <td>{item.title}</td>
-                <td>{oneLiner(getBonus('main', item?.relation))}</td>
+                <td>
+                  {getBonus('main', item?.relation) && oneLiner(getBonus('main', item?.relation))}
+                </td>
                 <td>
                   <Link to={item?.path} name={item?.relation?.name}>
                     {`${item?.relation?.name} ${translate(translations, 'read_review', 'Review')}`}

package/src/components/atoms/newsletter/form/index.js

@@ -45,8 +45,8 @@ const NewsletterForm =({
     }
     return(
         <form action={formAction} method="post" ref={form} onSubmit={handelSubmit}>
-            <input type="hidden" name="listname" aria-label="hidden" value={newsletterListId} />
-            <input type="hidden" name="redirect" aria-label="hidden" value={redirectUrl} />
+            <input type="hidden" name="listname" aria-label="listname" aria-hidden="true" value={newsletterListId} />
+            <input type="hidden" name="redirect" aria-label="redirect" aria-hidden="true" value={redirectUrl} />
             <input className={styles.input} placeholder={placeholderName} type="text" name="name" />
             <input className={styles.input} placeholder={placeholderEmail}  type="email" name="email"  />
             <button className={styles.button} type="submit">{buttonText}</button>

package/src/components/molecules/faq/index.js

@@ -71,9 +71,11 @@ const Faq = ({ module, openAll = true, openItem, closeOthers = false, icon = ''
                 <span dangerouslySetInnerHTML={{ __html: item.question }} />
               </span>
             </button>
-            <div className={styles.content} ref={(el) => (itemRefs.current[index] = el)}>
-              <div dangerouslySetInnerHTML={{ __html: item.answer }} />
-            </div>
+            <div
+              className={styles.content}
+              ref={(el) => (itemRefs.current[index] = el)}
+              dangerouslySetInnerHTML={{ __html: item.answer }}
+            />
           </div>
         ))}
       </div>

package/src/gatsby-core-theme/components/atoms/bonus/bonus.module.scss

@@ -1,15 +1,15 @@
-.bonus {
-  @include flex-direction(column);
-  div:first-child {
+// .bonus {
+//   @include flex-direction(column);
+  .title {
     font-size: 2rem;
     font-weight: 700;
     color: var(--primary-color);
     padding-right: 1rem;
   }
-  div:nth-child(2) {
+  .desc {
     font-size: 1.6rem;
     color: var(--color-22);
     font-weight: 700;
     padding: 0.5rem 0;
   }
-}
+// }

package/src/gatsby-core-theme/components/atoms/bonus/index.js

@@ -20,10 +20,10 @@ export default function Bonus({ item, tracker }) {
   }
 
   return (
-    <div className={styles.bonus}>
-      {!isInoperative && <div className={styles.title}>{mainLine && mainLine}</div>}
-      {!isInoperative && <div className={styles.desc}>{secondLine && `+${secondLine}`}</div>}
-    </div>
+    <>
+      {!isInoperative && <p className={styles.title}>{mainLine && mainLine}</p>}
+      {!isInoperative && <p className={styles.desc}>{secondLine && `+${secondLine}`}</p>}
+    </>
   );
 }
 

package/src/gatsby-core-theme/components/atoms/module-title/index.js

@@ -76,28 +76,34 @@ const ModuleTitle = ({ module, viewMoreIcon = <FaAngleRight />, pageContext = nu
 
   const template = pageContext && pageContext?.page?.template;
   return (
-    <div className={`${tabsToplist ? styles.tabsToplist : null}`}>
-      {(module.module_title ||
-        module.link_label ||
-        (module.title && (module.name === 'cards' || module.name === 'top_list'))) && (
-        <div
-          className={`${styles.moduleTitle} ${styles[template]} ${
-            module?.style && styles[module.style]
-          }`}
-        >
-          <div className={styles.toplistTitle}>
-            {(module?.title || module.module_title) && getTitle(module)}
-          </div>
-
-          {module.link_label && (
-            <Link to={module.link_value} className={`${styles.viewMore} module-title-gtm`}>
-              {module.link_label}
-              {viewMoreIcon}
-            </Link>
-          )}
+    (module.module_title ||
+      (module.title && (module.name === 'cards' || module.name === 'top_list'))) &&
+    (module.link_label ? (
+      <div
+        className={`${styles.moduleTitle} ${styles[template]} ${
+          module?.style && styles[module.style]
+        } ${tabsToplist ? styles.tabsToplist : null}`}
+      >
+        <div className={styles.toplistTitle}>
+          {(module?.title || module.module_title) && getTitle(module)}
         </div>
-      )}
-    </div>
+
+        {module.link_label && (
+          <Link to={module.link_value} className={`${styles.viewMore} module-title-gtm`}>
+            {module.link_label}
+            {viewMoreIcon}
+          </Link>
+        )}
+      </div>
+    ) : (
+      <div
+        className={`${styles.moduleTitle} ${styles[template]} ${
+          module?.style && styles[module.style]
+        } ${styles.toplistTitle} ${tabsToplist ? styles.tabsToplist : null}`}
+      >
+        {(module?.title || module.module_title) && getTitle(module)}
+      </div>
+    ))
   );
 };
 

package/src/gatsby-core-theme/components/molecules/footer/index.js

@@ -2,6 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import LinkList from 'gatsby-core-theme/src/components/molecules/link-list';
 import { getExtraField, copyrightText } from 'gatsby-core-theme/src/helpers/getters';
+import Disclaimer from 'gatsby-core-theme/src/components/atoms/disclaimer';
 import styles from './footer.module.scss';
 /* eslint-disable react/no-danger */
 
@@ -20,6 +21,9 @@ const Footer = ({
   const BottomSection = footerBottomCustom;
   const showLinks = template !== 'ppc';
   const copyrightDisclaimerValue = getExtraField(section?.extra_fields, copyrightDisclaimer);
+  const dmcaImg = (
+    <img src="https://cdn.playcasino.co.za/image-1-8.png" alt="DMCA.com Protection Status" />
+  );
 
   return (
     <footer className={`${styles.footer} ${hasFooterLinks && styles.hasFooterLinks}`}>
@@ -58,6 +62,7 @@ const Footer = ({
               gtmClass="mobile-menu-gtm logo-cta"
             />
           )}
+          <Disclaimer image={dmcaImg} />
         </div>
       </div>
     </footer>

package/src/gatsby-core-theme/components/organisms/head/index.js

@@ -83,7 +83,6 @@ const Head = ({ page = {}, siteInfo }) => {
             )
         )}
       </Helmet>
-
       {twitterUsername && (
         <Helmet>
           <meta name="twitter:title" content={page.meta_title} />