gatsby-matrix-theme 4.0.0 → 4.0.1

package/CHANGELOG.md

@@ -1,3 +1,23 @@
+## [4.0.1](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v4.0.0...v4.0.1) (2022-02-21)
+
+
+### Bug Fixes
+
+* cleanup anchor ([ec69b31](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/ec69b316f2dad3844e8541b58cc05e9d40302117))
+* cleanup operator cards ([65595d2](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/65595d27fdcf623733a3e5914b6a55f32075caf1))
+* image object fit ([4ec7355](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/4ec73555c1caf67d125d014d287a8139ca93f41b))
+* spotlight fixes ([0d55c9d](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/0d55c9d63dd43f307e63b1fb1b54676bb1b0d202))
+
+
+### Code Refactoring
+
+* fix, remove and update some of the files being badly overriden ([321517f](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/321517f102a02b8f306c2ab61339cc6055c5518c))
+* remove unneeded div at footer ([1d8aa9d](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/1d8aa9dc51ea0f9fb2044a450f5f01dff03afb23))
+
+
+* Merge branch 'tm-2716-html-cleanup' into 'master' ([e83f062](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/e83f0624b206484d1ae69e8a08b02994af4fa889))
+* Merge branch 'tm-2624-spotlight-fixes' into 'master' ([a963872](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/a9638724e153560f386cabd08f383f544b01211f))
+
 # [4.0.0](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v3.2.28...v4.0.0) (2022-02-16)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gatsby-matrix-theme",
-  "version": "4.0.0",
+  "version": "4.0.1",
   "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": "^3.0.0",
+    "gatsby-core-theme": "^4.0.0",
     "gatsby-image": "^3.3.0",
     "gatsby-plugin-image": "^1.3.1",
     "gatsby-plugin-postcss": "^4.3.0",

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

@@ -54,37 +54,33 @@ const OperatorCard = ({ item, featured = false, number, width, height }) => {
         }`}
       >
         <div className={styles.casinoText}>
-          <div className={styles.casinoName}>
-            <Link to={reviewPath} title={relation.name} className="operator-card-gtm">
-              {relation.name}
-            </Link>
-          </div>
-          <div className={styles.casinoBonus}>
-            {!isInactive && <Bonus item={relation} tracker="main" />}
-          </div>
+          <Link to={reviewPath} title={relation.name} className="operator-card-gtm">
+            {relation.name}
+          </Link>
+          {!isInactive && <Bonus item={relation} tracker="main" />}
         </div>
         <div
           className={`${styles.cardFooter} ${featured && styles.featured} ${
             backgroundImage && styles.hasBackground
           }`}
         >
-          <div className={styles.reviewLink}>
-            <Link to={reviewPath} title={relation.name} className="operator-card-gtm">
-              {`${relation.name} ${translate(translations, 'read_review', 'Review')}`}
-            </Link>
-          </div>
-          <div className={`${styles.cardButtons}`}>
-            <OperatorCta
-              tracker="main"
-              operator={relation}
-              playText={translate(translations, 'play_now', 'Play Now')}
-              gtmClass="operator-card-gtm btn-cta"
-            />
-          </div>
+          <Link
+            to={reviewPath}
+            title={relation.name}
+            className={`${styles.reviewLink} operator-card-gtm`}
+          >
+            {`${relation.name} ${translate(translations, 'read_review', 'Review')}`}
+          </Link>
+          <OperatorCta
+            tracker="main"
+            operator={relation}
+            playText={translate(translations, 'play_now', 'Play Now')}
+            gtmClass="operator-card-gtm btn-cta"
+          />
           {relation?.extra_fields?.terms_and_conditions_text_enabled === '1' && (
-            <div className={styles.tnc}>
+            <span className={styles.tnc}>
               <Tnc hasCollapse={false} operator={relation} />
-            </div>
+            </span>
           )}
         </div>
       </div>

package/src/components/atoms/cards/operator-card/operator-card.module.scss

@@ -5,27 +5,7 @@
   padding: 0 1.6rem 2rem;
   position: relative;
   color: var(--color-44);
-  .casinoName {
-    font-size: 1.6rem;
-    font-weight: 400;
-    margin-bottom: 0.8rem;
-    a {
-      color: #000;
-    }
-  }
-  .casinoBonus {
-    div {
-      font-size: 1.4rem;
-      color: var(--color-44);
-      font-weight: 400;
-    }
-    div:first-child {
-      font-size: 1.6rem;
-      font-weight: 700;
-      color: var(--primary-color);
-      font-weight: 700;
-    }
-  }
+
   .casinoText {
     @include flex-align(flex-start, flex-start);
     width: 100%;
@@ -33,56 +13,50 @@
     margin-bottom: 0.8rem;
     height: 8.2rem;
     overflow: hidden;
+
+    a {
+      color: #000;
+      font-size: 1.6rem;
+      font-weight: 400;
+      margin-bottom: 0.8rem;
+    }
   }
   &.featured {
     color: #fff;
-    .casinoName {
+
+    .casinoText {
       a {
         color: #fff;
       }
     }
-    .casinoBonus {
-      div {
-        color: #fff;
-      }
-      div:first-child {
-        font-size: 2.4rem;
-        line-height: 1.2;
-        color: #fff;
-      }
-    }
   }
 }
 .cardFooter {
   width: 100%;
   color: var(--color-44);
+  @include flex-direction(column);
+
   .tnc {
     margin: 0.8rem 0 -0.7rem;
     p {
       font-size: 1rem;
     }
   }
-  .cardButtons {
-    @include flex-align(center, space-between);
-    width: 100%;
-    flex-direction: row-reverse;
 
-    @include max(tablet) {
-      flex-direction: column;
-      a[class*='button'] {
-        display: block;
-        width: 100%;
-        margin-bottom: 0.5rem;
-      }
-    }
+  a:last-of-type {
+    max-width: fit-content;
+    align-self: flex-end;
+  }
 
-    .reviewLink {
-      color: var(--text-link-color);
-      font-size: 1.6rem;
-      font-weight: 700;
-      text-decoration: underline;
+  @include max(tablet) {
+    a[class*='button'] {
+      display: block;
+      width: 100%;
+      max-width: 100%;
+      margin-bottom: 0.5rem;
     }
   }
+
   &.featured {
     color: #fff;
   }

package/src/components/atoms/footer/bottom/index.js

@@ -1,14 +1,5 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 
-const FooterBottom = () => {
-  return <></>;
-};
-
-FooterBottom.propTypes = {
-  section: PropTypes.shape({
-    extra_fields: PropTypes.object,
-  }),
-};
+const FooterBottom = () => <></>;
 
 export default FooterBottom;

package/src/components/atoms/footer/top/index.js

@@ -1,14 +1,5 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 
-const FooterTop = () => {
-  return <></>;
-};
-
-FooterTop.propTypes = {
-  section: PropTypes.shape({
-    extra_fields: PropTypes.object,
-  }),
-};
+const FooterTop = () => <></>;
 
 export default FooterTop;

package/src/components/pages/contact-us/index.js

@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
 import keygen from 'gatsby-core-theme/src/helpers/keygen';
 import { Context } from 'gatsby-core-theme/src/context/TranslationsProvider';
 import Form from 'gatsby-core-theme/src/components/organisms/form';
-import Header from '../../molecules/header';
+import Header from 'gatsby-core-theme/src/components/molecules/header';
 import AuthorCard from '../../atoms/author-card';
 import SocialIcons from '../../atoms/social-icons';
 import styles from './contact-us.module.scss';

package/src/{components/molecules → gatsby-core-theme/components/atoms}/info-grid/info-grid.stories.js

@@ -1,3 +1,4 @@
+/* eslint-disable import/no-extraneous-dependencies */
 import React from 'react';
 import {
   Title,

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

@@ -0,0 +1,14 @@
+import React from 'react';
+import Spotlights from 'gatsby-core-theme/src/components/atoms/spotlights/index';
+import styleTheme from './spotlights-theme.module.scss';
+import styleSite from './spotlights-site.module.scss';
+
+export default (props) => (
+  <Spotlights
+    {...props}
+    themeStyles={{
+      ...styleTheme,
+      ...styleSite,
+    }}
+  />
+);

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

@@ -0,0 +1 @@
+// To be overriden by sites and add custom styling 

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

@@ -0,0 +1,101 @@
+.testimonials {
+  ul {
+    li {
+      border: 1px solid var(--spotlight-testimonials-border-color);
+      border-radius: 0.8rem;
+      background-color: var(--spotlight-testimonials-background-color);
+
+      img {
+        border-radius: 8rem;
+        width: 15rem !important;
+        height: 15rem !important;
+        margin: 0 auto;
+        object-fit: cover;
+      }
+
+      > span,
+      label {
+        font-size: 1.4rem;
+      }
+
+      > label {
+        padding-bottom: 0.8rem;
+        padding-top: 0.5rem;
+        font-size: var(--spotlight-testimonials-label-size);
+        color: var(--spotlight-testimonials-label-color);
+      }
+
+      > span {
+        width: 50%;
+        margin: 0 auto;
+        font-size: var(--spotlight-testimonials-subtitle-size);
+        color: var(--spotlight-testimonials-subtitle-color);
+      }
+
+      > div {
+        font-size: var(--spotlight-testimonials-text-size);
+        color: var(--spotlight-testimonials-text-color);
+      }
+    }
+  }
+}
+
+.boxes_with_icons {
+  ul {
+    display: flex;
+    flex-direction: column;
+
+    li {
+      border: 1px solid var(--spotlight-boxes-border-color);
+      background-color: var(--spotlight-boxes-background-color);
+      box-sizing: border-box;
+      border-radius: .6rem;
+      position: relative;
+      max-width: 568px;
+      margin-left: 4.5rem;
+      margin-bottom: 3rem;
+      padding: 2.4rem 2.4rem 2.8rem 7.2rem;
+      min-height: 15rem;
+      text-align: left;
+      justify-content: center;
+
+      > img {
+        position: absolute;
+        left: -4.5rem;
+        top: 50%;
+        transform: translateY(-50%);
+        display: inline-block;
+        min-width: 9.5rem !important;
+        width: 9.5rem;
+        height: 9.5rem !important;
+        border-radius: 50%;
+        object-fit: cover;
+      }
+
+      &:first-of-type {
+        margin-top: 3rem;
+      }
+
+      @include max(mobile) {
+        width: auto;
+      }
+
+      > label {
+        font-size: var(--spotlight-testimonials-label-size);
+        color: var(--spotlight-testimonials-label-color);
+      }
+       
+      > div {
+        font-size: var(--spotlight-testimonials-text-size);
+        color: var(--spotlight-testimonials-text-color);
+      }
+    }
+
+    li:nth-child(2n) {
+      margin-left: auto;
+      @include max(mobile) {
+        margin-left: 4.5rem;
+      }
+    }
+  }
+}

package/src/gatsby-core-theme/components/molecules/footer/footer.module.scss

@@ -82,12 +82,17 @@
       flex-direction: column-reverse;
       justify-content: center;
       align-items: center;
+      margin-bottom: 3rem;
+
+      @include min(laptop) {
+        margin-bottom: 0;
+      }
 
       .copyrightDisclaimer {
-        padding: 3rem 0;
+        margin: 3rem 0 2rem 0;
 
         @include min(laptop) {
-          padding: 3rem 0 0 0;
+          margin: 3rem 0 2rem 0;
         }
 
         p {
@@ -99,6 +104,10 @@
         }
       }
 
+      .copyrightText {
+        order: -1;
+      }
+
       .logos {
         > ul {
           @include flex-align(center, center);

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

@@ -48,16 +48,15 @@ const Footer = ({
 
       <div className={styles.bottomPart}>
         {footerBottomCustom && <BottomSection section={section} page={page} />}
-        <div className={styles.copyrightDisclaimer}>
-          {copyrightDisclaimerValue && (
-            <div
-              dangerouslySetInnerHTML={{
-                __html: copyrightDisclaimerValue.replace(/\. /g, '.<br />'),
-              }}
-            />
-          )}
-          <p>{copyrightText()}</p>
-        </div>
+        {copyrightDisclaimerValue && (
+          <div
+            className={styles.copyrightDisclaimer}
+            dangerouslySetInnerHTML={{
+              __html: copyrightDisclaimerValue.replace(/\. /g, '.<br />'),
+            }}
+          />
+        )}
+        <p className={styles.copyrightText}>{copyrightText()}</p>
         <div className={styles.logos}>
           {footerLogos && getExtraField(section?.extra_fields, footerLogos) && (
             <LinkList

package/src/{components → gatsby-core-theme/components}/molecules/header/index.js

@@ -13,19 +13,27 @@ export const headerContent = (props) => {
     case 'article_detail':
     case 'article_casino':
     case 'article_sports': {
-      ModuleComponent = loadable(() => import('./variants/article'));
+      ModuleComponent = loadable(() =>
+        import('../../../../components/molecules/header/variants/article')
+      );
       return <ModuleComponent page={props.section.page} />;
     }
     case 'operator_review': {
-      ModuleComponent = loadable(() => import('./variants/operator'));
+      ModuleComponent = loadable(() =>
+        import('../../../../components/molecules/header/variants/operator')
+      );
       return <ModuleComponent operator={props.section.page.relation} />;
     }
     case 'game_review': {
-      ModuleComponent = loadable(() => import('./variants/slot'));
+      ModuleComponent = loadable(() =>
+        import('../../../../components/molecules/header/variants/slot')
+      );
       return <ModuleComponent page={props.section.page} />;
     }
     case 'author': {
-      ModuleComponent = loadable(() => import('./variants/author'));
+      ModuleComponent = loadable(() =>
+        import('../../../../components/molecules/header/variants/author')
+      );
       return <ModuleComponent page={props.section.page} />;
     }
     default:

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

@@ -5,9 +5,10 @@ import PropTypes from 'prop-types';
 import loadable from '@loadable/component';
 import { anchorLink } from 'gatsby-core-theme/src/helpers/strings';
 import { prettyTracker, getSectionExtraField } from 'gatsby-core-theme/src/helpers/getters';
-import styles from 'gatsby-core-theme/src/components/molecules/module/module.module.scss';
 import ModuleTitle from 'gatsby-core-theme/src/components/atoms/module-title';
 
+import styles from './module.module.scss';
+
 const Modules = ({ module, page, pageContext }) => {
   const GetModuleComponent = (moduleItem) => {
     switch (moduleItem.name) {
@@ -15,7 +16,7 @@ const Modules = ({ module, page, pageContext }) => {
       case 'content':
         return loadable(() => import('../content'));
       case 'top_list':
-        return loadable(() => import('../../../../components/organisms/toplist'));
+        return loadable(() => import('gatsby-core-theme/src/components/organisms/toplist'));
       case 'archive':
         if (!moduleItem.items || moduleItem.items.length === 0) return null;
         return loadable(() => import('../../organisms/archive'));
@@ -70,7 +71,7 @@ const Modules = ({ module, page, pageContext }) => {
         return loadable(() => import('gatsby-core-theme/src/components/atoms/operator-info-block'));
       case 'info_grid':
       case 'information_grid':
-        return loadable(() => import('../../../../components/molecules/info-grid'));
+        return loadable(() => import('gatsby-core-theme/src/components/atoms/info-grid'));
       case 'content_box':
         return loadable(() => import('gatsby-core-theme/src/components/atoms/content-box'));
       case 'timeline':

package/src/gatsby-core-theme/components/molecules/module/module.module.scss

@@ -0,0 +1,3 @@
+.module {
+  background-color: var(--module-background-color);
+}

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

@@ -5,7 +5,6 @@ import { navigate } from 'gatsby';
 import { FaSearch } from 'react-icons/fa';
 import loadable from '@loadable/component';
 import Tabs from 'gatsby-matrix-theme/src/hooks/tabs';
-import styles from 'gatsby-core-theme/src/components/molecules/search/search.module.scss';
 import { translate } from 'gatsby-core-theme/src/helpers/getters';
 import { Context } from 'gatsby-core-theme/src/context/TranslationsProvider';
 
@@ -21,6 +20,8 @@ import { NavigationContext } from '~organisms/navigation/navigationContext';
 
 /* eslint-disable no-underscore-dangle */
 
+import styles from './search.module.scss';
+
 const Search = ({
   searchIcon = null,
   uniqueField = 'id',

package/src/gatsby-core-theme/components/molecules/search/search.module.scss

@@ -0,0 +1,39 @@
+.form {
+  width: 50%;
+  display: flex;
+  flex-direction: column;
+  position: absolute;
+  top: 10%;
+  left: 50%;
+  transform: translateX(-50%);
+
+  input {
+    width: 100%;
+    padding: 3rem 2rem;
+  }
+
+  .searchButton {
+    position: absolute;
+    right: 0;
+    top: 0.6rem;
+    padding: 2rem;
+
+    svg {
+      font-size: 3rem;
+    }
+  }
+}
+
+.searchGrid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+}
+
+.loading {
+  width: 150px;
+  height: 20px;
+  display: block;
+}
+.selectwrapper {
+  position: relative;
+}

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

@@ -38,23 +38,20 @@ function Anchor({ module: { items }, headerOffset = 80, isFixed = false, icon =
       });
     }
   };
+
   return (
-    <div id="faq-container">
-      <div className={isFixedMenu && styles.isFixed}>
-        <div className={styles.anchor}>
-          {items?.map((anchor) => (
-            <a
-              className={`${styles.link} anchor-carousel-gtm anchor-menu-gtm`}
-              key={keygen()}
-              onClick={handleClick}
-              href={`#${anchor.label && anchorLink(anchor?.label?.toLowerCase().trim())}`}
-            >
-              {anchor.label}
-              {icon}
-            </a>
-          ))}
-        </div>
-      </div>
+    <div id="faq-container" className={`${styles.anchor} ${isFixedMenu && styles.isFixed}`}>
+      {items?.map((anchor) => (
+        <a
+          className={`${styles.link} anchor-carousel-gtm anchor-menu-gtm`}
+          key={keygen()}
+          onClick={handleClick}
+          href={`#${anchor.label && anchorLink(anchor?.label?.toLowerCase().trim())}`}
+        >
+          {anchor.label}
+          {icon}
+        </a>
+      ))}
     </div>
   );
 }

package/src/{components → gatsby-core-theme/components}/organisms/toplist/index.js

@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
 import keygen from '~helpers/keygen';
 import List from './list';
 import Tabs from '~hooks/tabs';
-import Row from '../../molecules/toplist/row/variant-one';
+import Row from '../../../../components/molecules/toplist/row/variant-one';
 
 // eslint-disable-next-line no-unused-vars
 const TopList = ({ module, toplistHeading, CustomRow, page }) => {

package/src/gatsby-core-theme/components/pages/body/index.js

@@ -8,7 +8,7 @@ import Navigation from 'gatsby-core-theme/src/components/organisms/navigation';
 import ScrollToTop from 'gatsby-core-theme/src/components/atoms/scroll-to-top';
 import CookieConsent from 'gatsby-core-theme/src/components/organisms/cookie-consent';
 import Main from 'gatsby-core-theme/src/components/molecules/main';
-import Header from '../../../../components/molecules/header';
+import Header from 'gatsby-core-theme/src/components/molecules/header';
 import Footer from '../../molecules/footer';
 import LinkMenu from '../../../../components/atoms/link-menu';
 import FooterTop from '../../../../components/atoms/footer/top';

package/src/gatsby-core-theme/styles/utils/variables/_main.scss

@@ -83,4 +83,22 @@
   --comparison-currencies-text-color: #000;
   --comparison-currencies-background-color: #fff;
   --comparison-header-text-transform: uppercase;
+
+
+  // Spotlight
+  --spotlight-testimonials-border-color: #000;
+  --spotlight-testimonials-background-color: #fff;
+  --spotlight-testimonials-label-color: #ff893f;
+  --spotlight-testimonials-label-size: 2rem;
+  --spotlight-testimonials-subtitle-color: #000;
+  --spotlight-testimonials-subtitle-size: 1.4rem;
+  --spotlight-testimonials-text-color: #000;
+  --spotlight-testimonials-text-size: 1.6rem;
+
+  --spotlight-boxes-border-color: #000;
+  --spotlight-boxes-background-color: #fff;
+  --spotlight-testimonials-label-color: #000;
+  --spotlight-testimonials-label-size: 1.8rem;
+  --spotlight-testimonials-text-color: #000;
+  --spotlight-testimonials-text-size: 1.4rem;
 }