gatsby-matrix-theme 3.2.9 → 3.2.10

package/CHANGELOG.md

@@ -1,3 +1,28 @@
+## [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)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gatsby-matrix-theme",
-  "version": "3.2.9",
+  "version": "3.2.10",
   "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.19",
+    "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/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/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} />