gatsby-matrix-theme 36.0.3 → 37.0.0

package/CHANGELOG.md

@@ -1,3 +1,36 @@
+# [37.0.0](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v36.0.4...v37.0.0) (2023-11-13)
+
+
+### Bug Fixes
+
+* cookie consent buttons ([34e4cd8](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/34e4cd89375adb57b44d667699a7674e2da15886))
+
+
+### Code Refactoring
+
+* add operator image and fix storybook issue ([fe6472f](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/fe6472f93b20feccc73bd696dee078a4d5208d68))
+* change to tablet view ([39cc3b8](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/39cc3b8df89b567900eaf2af5e559b37c16e26b0))
+* changes to toplist tablet view ([0fd3ab7](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/0fd3ab78d8eb78050aaf6590e3cf0c83be239820))
+* remove temp ([ad18f01](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/ad18f01450a7b73ba4a07ad0f8df12c31a07b46d))
+* temp ([1adc1b0](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/1adc1b0b06b9a3e01e4b40068eb0caf406409168))
+
+
+* Merge branch 'tm-3691-toplist' into 'master' ([18bc94d](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/18bc94d6f0a1ebf8ed88c6219b5b37655e64101f))
+* Merge branch 'tm-3815-storybook-issue' into 'master' ([93e63af](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/93e63afe94cf9067722fbe5e2c06f973d5107543))
+* Merge branch 'master' into tm-3691-toplist ([9b7a3bd](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/9b7a3bdd8c90bd88731082ef8fecb950b1d2cff6))
+
+## [36.0.4](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v36.0.3...v36.0.4) (2023-11-10)
+
+
+### Bug Fixes
+
+* button refactoring ([a42bfe9](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/a42bfe946e32d3405b9e3f2b106da235f6d6397b))
+* conflict ([0e5ca99](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/0e5ca9965d34946d9a69d1cf92406240b3ef4c88))
+* updated core theme ([f9dceb7](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/f9dceb7a0c94740bf8b5271bbfc7c85fea6e9705))
+
+
+* Merge branch 'tm-3755-buttons-refactoring' into 'master' ([ff6c6c9](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/ff6c6c9cdf181cf8f2f2ea51148c7f4a7e9c0eb1))
+
 ## [36.0.3](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v36.0.2...v36.0.3) (2023-11-09)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gatsby-matrix-theme",
-  "version": "36.0.3",
+  "version": "37.0.0",
   "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.16",
+    "gatsby-core-theme": "30.0.18",
     "gatsby-plugin-sharp": "^5.11.0",
     "gatsby-plugin-sitemap": "^3.3.0",
     "gatsby-transformer-sharp": "^5.11.0",

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

@@ -8,7 +8,7 @@ import PropTypes from 'prop-types';
 import { AiOutlineCheckCircle } from '@react-icons/all-files/ai/AiOutlineCheckCircle';
 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-button';
+import OperatorCta from 'gatsby-core-theme/src/components/atoms/button/operator-cta';
 import StarRating from 'gatsby-core-theme/src/components/molecules/star-rating/one-star';
 import ReviewLink from 'gatsby-core-theme/src/components/atoms/review-link';
 import Link from 'gatsby-core-theme/src/hooks/link';

package/src/components/atoms/cards/game-cards/template-five/index.js

@@ -9,8 +9,8 @@ import {
   translate,
   getAltText,
 } from 'gatsby-core-theme/src/helpers/getters';
-import Button from 'gatsby-core-theme/src/components/atoms/button';
-import OperatorCta from 'gatsby-core-theme/src/components/atoms/operator-cta-button';
+import Button from 'gatsby-core-theme/src/components/atoms/button/button';
+import OperatorCta from 'gatsby-core-theme/src/components/atoms/button/operator-cta';
 import GatsbyImg from 'gatsby-core-theme/src/hooks/gatsby-img';
 import Link from 'gatsby-core-theme/src/hooks/link';
 import LazyImage from 'gatsby-core-theme/src/hooks/lazy-image';
@@ -129,10 +129,9 @@ const TemplateFive = ({
           ) : (
             <Button
               to={path}
-              primaryColor={!featured}
-              btnText={translate(translations, button_text, 'Play now')}
-              className={styles.playNow}
+              buttonType={!featured ? 'primary' : 'secondary'}
               gtmClass="game-card-gtm btn-cta"
+              btnText={translate(translations, button_text, 'Play now')}
             />
           )}
         </div>

package/src/components/atoms/cards/game-cards/template-four/index.js

@@ -9,8 +9,8 @@ import {
   translate,
   getAltText,
 } from 'gatsby-core-theme/src/helpers/getters';
-import Button from 'gatsby-core-theme/src/components/atoms/button';
-import OperatorCta from 'gatsby-core-theme/src/components/atoms/operator-cta-button';
+import Button from 'gatsby-core-theme/src/components/atoms/button/button';
+import OperatorCta from 'gatsby-core-theme/src/components/atoms/button/operator-cta';
 import GatsbyImg from 'gatsby-core-theme/src/hooks/gatsby-img';
 import Link from 'gatsby-core-theme/src/hooks/link';
 import LazyImage from 'gatsby-core-theme/src/hooks/lazy-image';
@@ -114,10 +114,9 @@ const TemplateFour = ({
           ) : (
             <Button
               to={path}
-              primaryColor={!featured}
-              btnText={translate(translations, button_text, 'Play now')}
-              className={styles.playNow}
+              buttonType={!featured ? 'primary' : 'secondary'}
               gtmClass="game-card-gtm btn-cta"
+              btnText={translate(translations, button_text, 'Play now')}
             />
           )}
         </div>

package/src/components/atoms/cards/game-cards/template-one/index.js

@@ -10,8 +10,8 @@ import {
   translate,
   getAltText,
 } from 'gatsby-core-theme/src/helpers/getters';
-import Button from 'gatsby-core-theme/src/components/atoms/button';
-import OperatorCta from 'gatsby-core-theme/src/components/atoms/operator-cta-button';
+import Button from 'gatsby-core-theme/src/components/atoms/button/button';
+import OperatorCta from 'gatsby-core-theme/src/components/atoms/button/operator-cta';
 import GatsbyImg from 'gatsby-core-theme/src/hooks/gatsby-img';
 import Link from 'gatsby-core-theme/src/hooks/link';
 import LazyImage from 'gatsby-core-theme/src/hooks/lazy-image';
@@ -115,10 +115,9 @@ const TemplateOne = ({
         ) : (
           <Button
             to={path}
-            primaryColor={!featured}
-            btnText={translate(translations, button_text, 'Play now')}
-            className={styles.playNow}
+            buttonType={!featured ? 'primary' : 'secondary'}
             gtmClass="game-card-gtm btn-cta"
+            btnText={translate(translations, button_text, 'Play now')}
             icon={<FaArrowRight title="Right-pointing Arrow Icon" />}
           />
         )}

package/src/components/atoms/cards/game-cards/template-three/index.js

@@ -9,8 +9,8 @@ import {
   translate,
   getAltText,
 } from 'gatsby-core-theme/src/helpers/getters';
-import Button from 'gatsby-core-theme/src/components/atoms/button';
-import OperatorCta from 'gatsby-core-theme/src/components/atoms/operator-cta-button';
+import Button from 'gatsby-core-theme/src/components/atoms/button/button';
+import OperatorCta from 'gatsby-core-theme/src/components/atoms/button/operator-cta';
 import GatsbyImg from 'gatsby-core-theme/src/hooks/gatsby-img';
 import Link from 'gatsby-core-theme/src/hooks/link';
 import LazyImage from 'gatsby-core-theme/src/hooks/lazy-image';
@@ -113,10 +113,9 @@ const TemplateThree = ({
           ) : (
             <Button
               to={path}
-              primaryColor={!featured}
-              btnText={translate(translations, button_text, 'Play now')}
-              className={styles.playNow}
+              buttonType={!featured ? 'primary' : 'secondary'}
               gtmClass="game-card-gtm btn-cta"
+              btnText={translate(translations, button_text, 'Play now')}
             />
           )}
         </div>

package/src/components/atoms/cards/game-cards/template-two/index.js

@@ -9,8 +9,8 @@ import {
   translate,
   getAltText,
 } from 'gatsby-core-theme/src/helpers/getters';
-import Button from 'gatsby-core-theme/src/components/atoms/button';
-import OperatorCta from 'gatsby-core-theme/src/components/atoms/operator-cta-button';
+import Button from 'gatsby-core-theme/src/components/atoms/button/button';
+import OperatorCta from 'gatsby-core-theme/src/components/atoms/button/operator-cta';
 import GatsbyImg from 'gatsby-core-theme/src/hooks/gatsby-img';
 import Link from 'gatsby-core-theme/src/hooks/link';
 import LazyImage from 'gatsby-core-theme/src/hooks/lazy-image';
@@ -115,10 +115,9 @@ const TemplateTwo = ({
           ) : (
             <Button
               to={path}
-              primaryColor={!featured}
-              btnText={translate(translations, button_text, 'Play now')}
-              className={styles.playNow}
+              buttonType={!featured ? 'primary' : 'secondary'}
               gtmClass="game-card-gtm btn-cta"
+              btnText={translate(translations, button_text, 'Play now')}
             />
           )}
         </div>

package/src/components/atoms/cards/operator-card/template-one/index.js

@@ -10,7 +10,7 @@ import LazyImage from 'gatsby-core-theme/src/hooks/lazy-image';
 import Bonus from 'gatsby-core-theme/src/components/molecules/bonus-box/template-one';
 import ReviewLink from 'gatsby-core-theme/src/components/atoms/review-link';
 import Tnc from 'gatsby-core-theme/src/components/molecules/tnc';
-import OperatorCta from 'gatsby-core-theme/src/components/atoms/operator-cta-button';
+import OperatorCta from 'gatsby-core-theme/src/components/atoms/button/operator-cta';
 import SellingPoints from 'gatsby-core-theme/src/components/atoms/selling-points';
 import OperatorDetails from '../../../../molecules/operator-details';
 import styles from './template-one.module.scss';

package/src/components/atoms/cards/operator-card/template-three/index.js

@@ -7,7 +7,7 @@ import { BiDislike } from '@react-icons/all-files/bi/BiDislike';
 import { FaArrowRight } from '@react-icons/all-files/fa/FaArrowRight';
 import Bonus from 'gatsby-core-theme/src/components/molecules/bonus-box/template-one';
 import ReviewLink from 'gatsby-core-theme/src/components/atoms/review-link';
-import OperatorCta from 'gatsby-core-theme/src/components/atoms/operator-cta-button';
+import OperatorCta from 'gatsby-core-theme/src/components/atoms/button/operator-cta';
 import OperatorDetails from '../../../../molecules/operator-details';
 import styles from './template-three.module.scss';
 

package/src/components/atoms/cards/payment-method/template-one/index.js

@@ -3,7 +3,7 @@
 import React, { useContext } from 'react';
 import PropTypes from 'prop-types';
 import loadable from '@loadable/component';
-import Button from 'gatsby-core-theme/src/components/atoms/button';
+import Button from 'gatsby-core-theme/src/components/atoms/button/button';
 import Link from 'gatsby-core-theme/src/hooks/link';
 import LazyImage from 'gatsby-core-theme/src/hooks/lazy-image';
 import {
@@ -67,13 +67,14 @@ const TemplateOneTwo = ({ item, showSellingPoints = true, width = 150, height =
         </div>
         <Button
           to={path}
-          primaryColor
-          icon={<FaArrowRight title="Right-pointing Arrow Icon" />}
+          buttonType="primary"
+          gtmClass="game-card-gtm btn-cta"
           btnText={
             !showSellingPoints
               ? `${translate(translations, 'go_to_review', 'Go To Review')}`
               : `${translate(translations, 'read_review', 'Read Review')}`
           }
+          icon={<FaArrowRight title="Right-pointing Arrow Icon" />}
         />
       </div>
     </>

package/src/components/atoms/cards/payment-method/template-three/index.js

@@ -4,7 +4,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import loadable from '@loadable/component';
 import Link from 'gatsby-core-theme/src/hooks/link';
-import Button from 'gatsby-core-theme/src/components/atoms/button';
+import Button from 'gatsby-core-theme/src/components/atoms/button/button';
 import LazyImage from 'gatsby-core-theme/src/hooks/lazy-image';
 import { getAltText, imagePrettyUrl } from 'gatsby-core-theme/src/helpers/getters';
 import { FaArrowRight } from '@react-icons/all-files/fa/FaArrowRight';
@@ -53,11 +53,10 @@ const TemplateThree = ({ item, width = 150, height = 150, useOneStarRating = fal
         <div className={styles?.excerpt || ''}>
           <SellingPoints sellingPoints={selling_points} />
         </div>
-
         <Button
-          className={`${styles?.reviewButton || ''} payment-method-card-gtm`}
-          primaryColor
           to={path}
+          buttonType="primary"
+          gtmClass="game-card-gtm btn-cta"
           btnText="Read Review"
           icon={<FaArrowRight title="Right-pointing Arrow Icon" />}
         />

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

@@ -1,7 +1,7 @@
 /* eslint-disable import/no-extraneous-dependencies */
 import React from 'react';
 import PropTypes from 'prop-types';
-import OperatorCta from 'gatsby-core-theme/src/components/atoms/operator-cta-button';
+import OperatorCta from 'gatsby-core-theme/src/components/atoms/button/operator-cta';
 import { getAltText, imagePrettyUrl } from 'gatsby-core-theme/src/helpers/getters';
 import ReviewLink from 'gatsby-core-theme/src/components/atoms/review-link';
 import Tnc from 'gatsby-core-theme/src/components/molecules/tnc';

package/src/components/atoms/feedBackModule/feedback-module.module.scss

@@ -45,10 +45,7 @@
     font-size: 16px;
     line-height: var(--feedbackModule-secondText-anchor-line-height);
     color: var(--color-73);
-    text-decoration: var(--feedbackModule-here-underline);
-    > svg {
-      display: none;
-    }
+    padding: 0;
   }
 }
 .buttonContainer {

package/src/components/atoms/feedBackModule/index.js

@@ -1,6 +1,6 @@
 import React, { useContext, useState } from 'react';
 import PropTypes from 'prop-types';
-import Button from 'gatsby-core-theme/src/components/atoms/button';
+import Button from 'gatsby-core-theme/src/components/atoms/button/button';
 import { translate } from 'gatsby-core-theme/src/helpers/getters';
 import { Context } from 'gatsby-core-theme/src/context/MainProvider';
 import styles from './feedback-module.module.scss';
@@ -48,7 +48,7 @@ const FeedBackModule = ({ path = 'contact-us' }) => {
                 )}`}{' '}
                 <Button
                   btnText={`${translate(translations, 'here_text', 'here')}`}
-                  noStyle
+                  buttonType="none"
                   to={path}
                 />
               </p>
@@ -68,11 +68,11 @@ const FeedBackModule = ({ path = 'contact-us' }) => {
                   translations,
                   'no_second_text',
                   'Tell us what you need to know on this topic'
-                )}`}{' '}
+                )}`}
                 <Button
-                  btnText={`${translate(translations, 'here_text', 'here')}`}
-                  noStyle
                   to={path}
+                  buttonType="none"
+                  btnText={`${translate(translations, 'here_text', 'here')}`}
                 />
               </p>
             )}

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

@@ -116,7 +116,7 @@ const NewsletterForm = ({
       .then((response) => response.json())
       .then((data) => setIP(data.IPv4))
       .catch((err) => {
-        console.log(`Error ${err}`);
+        // console.log(`Error ${err}`);
       });
   };
 
@@ -165,6 +165,7 @@ const NewsletterForm = ({
         <>
           <p className={styles?.maintext || ''}>{formTextTranslated.mainText}</p>
           <p
+            // eslint-disable-next-line react/no-danger
             dangerouslySetInnerHTML={{ __html: formTextTranslated.subscribeText }}
             className={styles.subscribe}
           />
@@ -212,6 +213,7 @@ const NewsletterForm = ({
               />
             )}
             <PrivacyandSuccess
+              onclick={() => handelSubmit()}
               loading={setLogading || loading}
               btnText={formTextTranslated.buttonText}
               privacyText={privacyText}

package/src/components/atoms/newsletter/privacy&button/index.js

@@ -1,21 +1,22 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import Button from 'gatsby-core-theme/src/components/atoms/button';
+import Button from 'gatsby-core-theme/src/components/atoms/button/button';
 import styles from './newsletter-privacy&button.module.scss';
 
-const PrivacyandSuccess = ({ privacyText, btnText, loading }) => (
+const PrivacyandSuccess = ({ privacyText, btnText, onSubmit = null }) => (
   <div className={styles?.display || ''}>
     {privacyText ? (
+      // eslint-disable-next-line react/no-danger
       <p className={styles?.privacytext || ''} dangerouslySetInnerHTML={{ __html: privacyText }} />
     ) : null}
-    <Button disabled={loading} className={styles?.button || ''} btnText={btnText} isButton />
+    <Button btnText={btnText} buttonType="primary" onClick={() => onSubmit()} />
   </div>
 );
 
 PrivacyandSuccess.propTypes = {
   privacyText: PropTypes.string,
   btnText: PropTypes.string,
-  loading: PropTypes.bool,
+  onSubmit: PropTypes.func,
 };
 
 export default PrivacyandSuccess;

package/src/components/atoms/operator-bonuses/index.js

@@ -3,7 +3,7 @@
 /* eslint-disable react/prop-types */
 /* eslint-disable camelcase */
 import React, { useContext } from 'react';
-import OperatorCta from 'gatsby-core-theme/src/components/atoms/operator-cta-button';
+import OperatorCta from 'gatsby-core-theme/src/components/atoms/button/operator-cta';
 import { Context } from 'gatsby-core-theme/src/context/MainProvider';
 import PropTypes from 'prop-types';
 import styles from './operator-bonuses.module.scss';

package/src/components/atoms/table/column/index.js

@@ -7,7 +7,7 @@ import { FaAngleDown } from '@react-icons/all-files/fa/FaAngleDown';
 import { imagePrettyUrl } from 'gatsby-core-theme/src/helpers/getters';
 import Link from 'gatsby-core-theme/src/hooks/link';
 import LazyImage from 'gatsby-core-theme/src/hooks/lazy-image';
-import OperatorCta from 'gatsby-core-theme/src/components/atoms/operator-cta-button';
+import OperatorCta from 'gatsby-core-theme/src/components/atoms/button/operator-cta';
 import StarRating from 'gatsby-core-theme/src/components/molecules/star-rating';
 import SellingPoints from 'gatsby-core-theme/src/components/atoms/selling-points';
 import Tnc from 'gatsby-core-theme/src/components/molecules/tnc';

package/src/components/molecules/cookie-modal/index.js

@@ -7,7 +7,7 @@ import { MdClose } from '@react-icons/all-files/md/MdClose';
 import Link from 'gatsby-core-theme/src/hooks/link';
 import { translate } from '~helpers/getters';
 import CategoryContainer from './category/index';
-import Button from '~atoms/button';
+import Button from '~atoms/button/button';
 import LazyImage from '~hooks/lazy-image';
 import styles from './cookie-modal.module.scss';
 
@@ -123,7 +123,8 @@ const CookieModal = ({
               onClick={() => handleAcceptCookies()}
               btnText={translate(translations, 'cookie_accept_all_button', 'Accept All Cookies')}
               isInternalLink={false}
-              isButton
+              buttonType="primary"
+              buttonSize="m"
               gtmClass="cookie-consent-gtm btn-cta"
             />
           )}
@@ -135,7 +136,8 @@ const CookieModal = ({
               'I reject Non-Necessary'
             )}
             isInternalLink={false}
-            isButton
+            buttonType="secondary"
+            buttonSize="m"
             gtmClass="cookie-consent-gtm btn-cta"
           />
         </div>
@@ -186,7 +188,8 @@ const CookieModal = ({
               onClick={() => handleAcceptCookies()}
               btnText={translate(translations, 'cookie_confirm_button', 'Confirm my choices')}
               isInternalLink={false}
-              isButton
+              buttonType="primary"
+              buttonSize="m"
               gtmClass="cookie-consent-gtm btn-cta"
             />
           </div>

package/src/components/molecules/game-iframe/game-iframe.test.js

@@ -16,7 +16,7 @@ describe('Game Iframe component', () => {
     expect(container).toBeTruthy();
     expect(container.querySelector('iframe')).toBeFalsy();
 
-    const iframeLoadButton = container.querySelector('button');
+    const iframeLoadButton = container.querySelector('a');
     fireEvent.click(iframeLoadButton);
 
     await waitFor(() => {

package/src/components/molecules/game-iframe/index.js

@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
 import LazyImage from 'gatsby-core-theme/src/hooks/lazy-image';
 import { imagePrettyUrl } from 'gatsby-core-theme/src/helpers/getters';
 import Iframe from 'gatsby-core-theme/src/components/atoms/iframe';
-import Button from 'gatsby-core-theme/src/components/atoms/button';
+import Button from 'gatsby-core-theme/src/components/atoms/button/button';
 import GatsbyImg from 'gatsby-core-theme/src/hooks/gatsby-img';
 import styles from './game-iframe.module.scss';
 
@@ -53,11 +53,12 @@ const GameIframe = ({ page }) => {
               ) : (
                 <GatsbyImg alt={page.title} filename="default-slot.jpg" />
               )}
+
               <Button
+                onClick={() => clickHandler()}
                 isInternalLink={false}
-                onClick={clickHandler}
-                isButton
-                gtmClass="game-iframe-gtm btn-cta"
+                buttonType="primary"
+                buttonSize="m"
               />
             </div>
             {showIframe && (

package/src/components/molecules/header/variants/default/template-one/index.js

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { FaArrowRight } from '@react-icons/all-files/fa/FaArrowRight';
 import LazyImage from 'gatsby-core-theme/src/hooks/lazy-image';
-import Button from 'gatsby-core-theme/src/components/atoms/button';
+import Button from 'gatsby-core-theme/src/components/atoms/button/button';
 import { imagePrettyUrl, getAltText, getExtraField } from 'gatsby-core-theme/src/helpers/getters';
 import styles from './template-one.module.scss';
 
@@ -23,10 +23,9 @@ export default function TemplateOne({ title, description, extraFields, imageObj
         {link && (
           <Button
             to={link}
-            primaryColor={false}
+            buttonType="secondary"
+            gtmClass="game-card-gtm btn-cta"
             btnText={link}
-            invertColors
-            gtmClass="default-header-template-one-gtm btn-cta"
             icon={<FaArrowRight title="Right-pointing Arrow Icon" />}
           />
         )}

package/src/components/molecules/header/variants/default/template-two/index.js

@@ -2,7 +2,7 @@ import React, { useContext } from 'react';
 import PropTypes from 'prop-types';
 import { FaArrowRight } from '@react-icons/all-files/fa/FaArrowRight';
 import LazyImage from 'gatsby-core-theme/src/hooks/lazy-image';
-import Button from 'gatsby-core-theme/src/components/atoms/button';
+import Button from 'gatsby-core-theme/src/components/atoms/button/button';
 import {
   imagePrettyUrl,
   getAltText,
@@ -32,10 +32,9 @@ export default function TemplateTwo({ extraFields, imageObj }) {
         {link && (
           <Button
             to={link}
-            primaryColor={false}
-            btnText={translate(translations, 'online_casino', link)}
-            invertColors
+            buttonType="secondary"
             gtmClass="default-header-template-two-gtm btn-cta"
+            btnText={translate(translations, 'online_casino', link)}
             icon={<FaArrowRight title="Right-pointing Arrow Icon" />}
           />
         )}

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

@@ -4,7 +4,7 @@
 /* eslint-disable no-return-assign */
 /* eslint-disable jsx-a11y/control-has-associated-label */
 import React, { useRef, useState, useEffect, useCallback, useContext } from 'react';
-import Button from 'gatsby-core-theme/src/components/atoms/button';
+import Button from 'gatsby-core-theme/src/components/atoms/button/button';
 import { Context } from 'gatsby-core-theme/src/context/MainProvider';
 import { translate } from 'gatsby-core-theme/src/helpers/getters';
 import {
@@ -585,11 +585,11 @@ const HorseCalculator = () => {
         </div>
         <div className={styles?.ctaContainer || ''}>
           <Button
-            isButton
-            primaryColor={false}
+            onClick={() => resetCalculation()}
             btnText={translate(translations, 'reset-calculation', 'Reset Calculation')}
-            invertColors
-            onClick={resetCalculation}
+            isInternalLink={false}
+            buttonType="tertiary"
+            buttonSize="m"
           />
         </div>
       </div>

package/src/components/molecules/operator-exclusive/index.js

@@ -6,7 +6,7 @@ import React, { useContext, useState } from 'react';
 import PropTypes from 'prop-types';
 import { Context } from 'gatsby-core-theme/src/context/MainProvider';
 import Link from 'gatsby-core-theme/src/hooks/link';
-import OperatorCta from 'gatsby-core-theme/src/components/atoms/operator-cta-button';
+import OperatorCta from 'gatsby-core-theme/src/components/atoms/button/operator-cta';
 import { isMobileDevice } from 'gatsby-core-theme/src/helpers/device-detect';
 import LazyImage from 'gatsby-core-theme/src/hooks/lazy-image';
 import { imagePrettyUrl, translate, getAltText } from '~helpers/getters';

package/src/components/molecules/toplist/row/variant-one.js

@@ -3,7 +3,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import SellingPoints from 'gatsby-core-theme/src/components/atoms/selling-points';
-import OperatorCta from 'gatsby-core-theme/src/components/atoms/operator-cta-button';
+import OperatorCta from 'gatsby-core-theme/src/components/atoms/button/operator-cta';
 import Tnc from 'gatsby-core-theme/src/components/molecules/tnc';
 import Bonus from 'gatsby-core-theme/src/components/molecules/bonus-box/template-one';
 import CasinoDetails from '../../operator-details';

package/src/components/molecules/toplist/row/variant-one.module.scss

@@ -14,7 +14,8 @@
   }
 }
 
-.list {
+.list,
+.toplist_2 {
   &.rowNoTandC,
   > .container {
     @include min(tablet) {
@@ -60,9 +61,14 @@
 
 .grid {
   @include flex-align(stretch, stretch);
+
   @include min(tablet) {
     @include flex-align(stretch, space-between);
-    display: flex !important;
+
+    &.toplist_0,
+    &.toplist_1 {
+      display: flex !important;
+    }
     
     > div {
       > a {
@@ -73,6 +79,21 @@
       }
     }
   }
+
+  @include min(laptop) {
+    &.toplist_2 {
+      display: flex !important;
+      align-items: flex-start;
+
+      > ul {
+        padding: 0;
+      }
+
+      > a:last-child {
+        align-self: stretch;
+      }
+    }
+  }
 }
 
 .container {