gatsby-matrix-theme 34.0.5 → 34.0.7

package/CHANGELOG.md

@@ -1,3 +1,30 @@
+## [34.0.7](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v34.0.6...v34.0.7) (2023-10-04)
+
+
+### Bug Fixes
+
+* update matrix version ([ec2dcd3](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/ec2dcd3c303f4d1453dd6adaa6c865cedb993aa2))
+
+
+* Merge branch 'update-version' into 'master' ([a66be3a](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/a66be3a031df7347d3659425d14fbfd2a0930031))
+
+## [34.0.6](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v34.0.5...v34.0.6) (2023-10-04)
+
+
+### Bug Fixes
+
+* add an extra prop ([2c9cf41](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/2c9cf41e01775ee4c927e29d1be0630ed5874a23))
+* cleanup ([68bb2ac](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/68bb2ac90acd75a7049382c82536f21b78290e6c))
+* update twitter logo ([98ffcef](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/98ffcef36585b28365c09d7746fa9644e747b8e1))
+* updated h2 to span ([918dae4](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/918dae47f7d4bf6f050c4d6028041b13750784ed))
+* updated h2 to span ([8026eef](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/8026eefbe63c323d2a72343a9306e04dd9e5493d))
+
+
+* Merge branch 'tm-3596-popup' into 'master' ([66def3b](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/66def3b9b80d3359cd1754829c2ace4257b94636))
+* Merge branch 'tm-3589-wagering-calculator' into 'master' ([981e623](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/981e62376895fc5d33bc3d1b5b938c3b40780476))
+* Merge branch 'updating-twitter-logo' into 'master' ([b2ff2d6](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/b2ff2d62f41a25626184c9f74d63193f2e6caec6))
+* Merge branch 'cleanup' into 'master' ([70a9d03](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/70a9d03c8c8746a20c66c736b071baa208e6b1e9))
+
 ## [34.0.5](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v34.0.4...v34.0.5) (2023-10-02)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gatsby-matrix-theme",
-  "version": "34.0.5",
+  "version": "34.0.7",
   "main": "index.js",
   "description": "Matrix Theme NPM Package",
   "author": "",
@@ -25,7 +25,7 @@
   "dependencies": {
     "@react-icons/all-files": "^4.1.0",
     "gatsby": "^5.11.0",
-    "gatsby-core-theme": "30.0.4",
+    "gatsby-core-theme": "30.0.5",
     "gatsby-plugin-sharp": "^5.11.0",
     "gatsby-plugin-sitemap": "^3.3.0",
     "gatsby-transformer-sharp": "^5.11.0",

package/src/components/atoms/author/socials/index.js

@@ -3,7 +3,6 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { FaInstagram } from '@react-icons/all-files/fa/FaInstagram';
 import { FaFacebookSquare } from '@react-icons/all-files/fa/FaFacebookSquare';
-import { FaTwitter } from '@react-icons/all-files/fa/FaTwitter';
 import { IoLogoTiktok } from '@react-icons/all-files/io5/IoLogoTiktok';
 import { FaLinkedin } from '@react-icons/all-files/fa/FaLinkedin';
 import styles from './socials.module.scss';
@@ -13,7 +12,21 @@ export default function Socials({ className = '', author }) {
     { id: 'fb', link: author.facebook_profile, icon: <FaFacebookSquare title="Facebook Icon " /> },
     { id: 'ig', link: author.instagram_profile, icon: <FaInstagram title="Instagram Icon " /> },
     { id: 'li', link: author.linkedin_profile, icon: <FaLinkedin title="Linkedin Icon" /> },
-    { id: 'tw', link: author.twitter_profile, icon: <FaTwitter title="Twitter Icon" /> },
+    {
+      id: 'tw',
+      link: author.twitter_profile,
+      icon: (
+        <svg
+          width="1em"
+          height="1em"
+          viewBox="0 0 13 12"
+          fill="currentcolor"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path d="M9.97574 0H11.9181L7.67469 4.84989L12.6667 11.4495H8.75802L5.69659 7.44685L2.19363 11.4495H0.250147L4.78881 6.26203L0 0H4.0079L6.7752 3.65856L9.97574 0ZM9.29408 10.287H10.3703L3.42314 1.1015H2.26822L9.29408 10.287Z" />
+        </svg>
+      ),
+    },
     { id: 'tt', link: author.tik_tok, icon: <IoLogoTiktok title="Tiktok Icon" /> },
   ].filter((socialLink) => socialLink.link);
 

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

@@ -17,6 +17,7 @@ const PopupCard = ({
   showTnc = false,
   showRating = false,
   showReviewLink = false,
+  hasCollapse = true,
   template,
 }) => {
   const operatorName = item.name;
@@ -62,7 +63,7 @@ const PopupCard = ({
       </div>
       {showTnc && tnc === '1' && (
         <div className={styles?.tandc || ''}>
-          <Tnc onlyMobile operator={item} />
+          <Tnc onlyMobile operator={item} hasCollapse={hasCollapse} />
         </div>
       )}
     </div>
@@ -105,6 +106,7 @@ PopupCard.propTypes = {
   showRating: PropTypes.bool,
   showReviewLink: PropTypes.bool,
   template: PropTypes.string,
+  hasCollapse: PropTypes.bool,
 };
 
 export default PopupCard;

package/src/components/atoms/social-icons/index.js

@@ -2,7 +2,6 @@
 import React, { useContext } from 'react';
 import { FaInstagram } from '@react-icons/all-files/fa/FaInstagram';
 import { FaFacebookSquare } from '@react-icons/all-files/fa/FaFacebookSquare';
-import { FaTwitter } from '@react-icons/all-files/fa/FaTwitter';
 import { FaLinkedin } from '@react-icons/all-files/fa/FaLinkedin';
 import { FaYoutube } from '@react-icons/all-files/fa/FaYoutube';
 import PropTypes from 'prop-types';
@@ -17,7 +16,17 @@ const SocialIcons = ({
   icons = {
     instagram: <FaInstagram title="Instagram Icon" />,
     facebook: <FaFacebookSquare title="Facebook Icon" />,
-    twitter: <FaTwitter title="Twitter Icon" />,
+    twitter: (
+      <svg
+        width="1em"
+        height="1em"
+        viewBox="0 0 13 12"
+        fill="currentcolor"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path d="M9.97574 0H11.9181L7.67469 4.84989L12.6667 11.4495H8.75802L5.69659 7.44685L2.19363 11.4495H0.250147L4.78881 6.26203L0 0H4.0079L6.7752 3.65856L9.97574 0ZM9.29408 10.287H10.3703L3.42314 1.1015H2.26822L9.29408 10.287Z" />
+      </svg>
+    ),
     linkedin: <FaLinkedin title="Linkedin Icon" />,
     youtube: <FaYoutube title="Youtube Icon" />,
   },

package/src/components/molecules/header/variants/payment/template-five/template-five.module.scss

@@ -131,191 +131,3 @@
   }
 }
 
-.ribbon {
-  position: absolute;
-  top: -19px;
-  right: 0;
-  background-color: #f1b75b;
-  padding: 4px 8px;
-  border-radius: 8px 4px 0px 0px;
-  font-weight: 700;
-  font-size: 9px;
-
-  line-height: 11px;
-  color: #1b1b1c;
-  text-align: center;
-  letter-spacing: 0.5px;
-  text-transform: uppercase;
-
-  @include min(tablet) {
-    top: -29px;
-    right: 0;
-    padding: 7px 16px;
-    font-size: 12px;
-    line-height: 15px;
-  }
-}
-
-.templateTwoContainer {
-  margin: var(--operator-template-two-margin-mobile, 1.6rem);
-  display: flex;
-  flex-direction: column;
-
-  > ul {
-    order: 3;
-
-    > li {
-      min-height: 9.6rem;
-    }
-
-    @include min(tablet) {
-      order: 2;
-    }
-  }
-
-  @include min(tablet) {
-    margin: 0 auto;
-    margin-top: var(--operator-template-two-margin-top-desktop, 1.6rem);
-    margin-bottom: var(--operator-template-two-margin-bottom-desktop, 1.6rem);
-  }
-
-  > div:last-child {
-    margin: 0 1.6rem 1.6rem 1.6rem;
-    order: 2;
-
-    @include min(tablet) {
-      order: 3;
-      margin: 0rem;
-      border-top-left-radius: 0px;
-      border-top-right-radius: 0px;
-    }
-  }
-}
-
-.templateTwoTopSection {
-  display: flex;
-  padding-bottom: 1.8rem;
-
-  a {
-    position: static;
-
-    > img {
-      width: 80px;
-      height: 80px;
-      min-width: 80px;
-      border: 1.5px solid #e9e9e9;
-      border-radius: 16px;
-
-      @include min(tablet) {
-        width: 17.9rem;
-        min-width: 17.9rem;
-        height: 17.9rem;
-      }
-    }
-  }
-
-  @include min(tablet) {
-    padding-bottom: 2.6rem;
-  }
-}
-
-.templateTwoTopContent {
-  margin-left: 2.4rem;
-  margin-top: 1rem;
-  width: 100%;
-
-  @include min(tablet) {
-    margin-left: 4.8rem;
-  }
-}
-
-.templateTwoRibbon {
-  position: static;
-  width: fit-content;
-  margin-top: 1.2rem;
-
-  @include min(tablet) {
-    position: absolute;
-    top: 2.4rem;
-    right: 2.4rem;
-    margin-top: 0rem;
-  }
-}
-
-.ratingInactive {
-  background-color: #fbfbfb !important;
-  color: #6b6a72 !important;
-  font-weight: 700;
-  font-size: 20px !important;
-  line-height: 30px !important;
-
-  > svg {
-    margin-right: 6.32px;
-    color: var(--icons-rating-color, #ffdb20);
-  }
-}
-
-.licenses {
-  color: red;
-}
-
-.ratingGuideline {
-  color: #515156;
-  display: block;
-  font-size: 12px;
-
-  font-weight: 400;
-  line-height: 18px;
-  > a {
-    margin-left: 3px;
-    font-weight: 500;
-    text-decoration: underline;
-  }
-}
-
-.certificateAndLicense {
-  @include flex-direction(column);
-  margin: 0 1.6rem 1.6rem 1.6rem;
-  @include min(tablet) {
-    @include flex-direction(row);
-    gap: 1.6rem;
-    margin: 0 3.2rem 2.4rem 3.2rem;
-  }
-}
-
-.trustCertificate,
-.licenses {
-  min-height: 32px;
-  border-radius: 8px;
-  background: #f4f4f4;
-  padding: 8px;
-  display: flex;
-  align-items: center;
-  gap: 8px;
-
-  font-size: 12px;
-  color: #1b1b1c;
-  font-weight: 600;
-  line-height: 18px;
-  margin-bottom: 8px;
-
-  @include min(tablet) {
-    line-height: 26px;
-    font-size: 16px;
-    width: 100%;
-    min-height: 4.8rem;
-    margin-bottom: 0;
-    padding: 8px 16px;
-  }
-}
-
-.trustCertificate {
-  gap: 6px;
-}
-
-.licenses {
-  padding: 8px 8px 8px 12px;
-  @include min(tablet) {
-    padding: 8px 16px;
-  }
-}

package/src/components/molecules/header/variants/slot/template-two/template-two.module.scss

@@ -131,134 +131,6 @@
   }
 }
 
-.ribbon {
-  position: absolute;
-  top: -19px;
-  right: 0;
-  background-color: #f1b75b;
-  padding: 4px 8px;
-  border-radius: 8px 4px 0px 0px;
-  font-weight: 700;
-  font-size: 9px;
-
-  line-height: 11px;
-  color: #1b1b1c;
-  text-align: center;
-  letter-spacing: 0.5px;
-  text-transform: uppercase;
-
-  @include min(tablet) {
-    top: -29px;
-    right: 0;
-    padding: 7px 16px;
-    font-size: 12px;
-    line-height: 15px;
-  }
-}
-
-.templateTwoContainer {
-  margin: var(--operator-template-two-margin-mobile, 1.6rem);
-  display: flex;
-  flex-direction: column;
-
-  > ul {
-    order: 3;
-
-    > li {
-      min-height: 9.6rem;
-    }
-
-    @include min(tablet) {
-      order: 2;
-    }
-  }
-
-  @include min(tablet) {
-    margin: 0 auto;
-    margin-top: var(--operator-template-two-margin-top-desktop, 1.6rem);
-    margin-bottom: var(--operator-template-two-margin-bottom-desktop, 1.6rem);
-  }
-
-  > div:last-child {
-    margin: 0 1.6rem 1.6rem 1.6rem;
-    order: 2;
-
-    @include min(tablet) {
-      order: 3;
-      margin: 0rem;
-      border-top-left-radius: 0px;
-      border-top-right-radius: 0px;
-    }
-  }
-}
-
-.templateTwoTopSection {
-  display: flex;
-  padding-bottom: 1.8rem;
-
-  a {
-    position: static;
-
-    > img {
-      width: 80px;
-      height: 80px;
-      min-width: 80px;
-      border: 1.5px solid #e9e9e9;
-      border-radius: 16px;
-
-      @include min(tablet) {
-        width: 17.9rem;
-        min-width: 17.9rem;
-        height: 17.9rem;
-      }
-    }
-  }
-
-  @include min(tablet) {
-    padding-bottom: 2.6rem;
-  }
-}
-
-.templateTwoTopContent {
-  margin-left: 2.4rem;
-  margin-top: 1rem;
-  width: 100%;
-
-  @include min(tablet) {
-    margin-left: 4.8rem;
-  }
-}
-
-.templateTwoRibbon {
-  position: static;
-  width: fit-content;
-  margin-top: 1.2rem;
-
-  @include min(tablet) {
-    position: absolute;
-    top: 2.4rem;
-    right: 2.4rem;
-    margin-top: 0rem;
-  }
-}
-
-.ratingInactive {
-  background-color: #fbfbfb !important;
-  color: #6b6a72 !important;
-  font-weight: 700;
-  font-size: 20px !important;
-  line-height: 30px !important;
-
-  > svg {
-    margin-right: 6.32px;
-    color: var(--icons-rating-color, #ffdb20);
-  }
-}
-
-.licenses {
-  color: red;
-}
-
 .ratingGuideline {
   color: #515156;
   display: block;
@@ -272,50 +144,3 @@
     text-decoration: underline;
   }
 }
-
-.certificateAndLicense {
-  @include flex-direction(column);
-  margin: 0 1.6rem 1.6rem 1.6rem;
-  @include min(tablet) {
-    @include flex-direction(row);
-    gap: 1.6rem;
-    margin: 0 3.2rem 2.4rem 3.2rem;
-  }
-}
-
-.trustCertificate,
-.licenses {
-  min-height: 32px;
-  border-radius: 8px;
-  background: #f4f4f4;
-  padding: 8px;
-  display: flex;
-  align-items: center;
-  gap: 8px;
-
-  font-size: 12px;
-  color: #1b1b1c;
-  font-weight: 600;
-  line-height: 18px;
-  margin-bottom: 8px;
-
-  @include min(tablet) {
-    line-height: 26px;
-    font-size: 16px;
-    width: 100%;
-    min-height: 4.8rem;
-    margin-bottom: 0;
-    padding: 8px 16px;
-  }
-}
-
-.trustCertificate {
-  gap: 6px;
-}
-
-.licenses {
-  padding: 8px 8px 8px 12px;
-  @include min(tablet) {
-    padding: 8px 16px;
-  }
-}

package/src/components/molecules/wagering-calculator/index.js

@@ -57,7 +57,7 @@ const WageringCalculator = ({
           action="javascript:void(0);"
           target="_self"
         >
-          <h2 className={styles.mainTitle}>
+          <span className={styles.mainTitle}>
             {translate(translations, 'wagecalc_main_title', mainTitle)}
             {infoTitle && infoText && (
               <InfoIcon
@@ -67,7 +67,7 @@ const WageringCalculator = ({
                 title="Question Icon"
               />
             )}
-          </h2>
+          </span>
           <div className={styles.inputContainer}>
             <label className={styles.label} htmlFor="deposit">
               {translate(translations, 'wagecalc_deposit_amount', 'Deposit amount')}

package/src/components/molecules/wagering-calculator/wagering-calculator.module.scss

@@ -74,13 +74,17 @@
   }
   @include min(tablet) {
     overflow: visible;
-  } 
+  }
 }
 
 .mainTitle {
-  line-height: 3.4rem;
-  font-size: 2.4rem;
   grid-column: 1/3;
+  font-size: var(--h2-mobile-size, 2.4rem);
+  line-height: var(--h2-mobile-line-height, 3.4rem);
+  @include min(laptop) {
+    font-size: var(--h2-size, 2.4rem);
+    line-height: var(--h2-line-height, 3.4rem);
+  }
 }
 
 .infoTitle {