gatsby-matrix-theme 3.0.8 → 3.1.1

package/CHANGELOG.md

@@ -1,3 +1,69 @@
+## [3.1.1](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v3.1.0...v3.1.1) (2021-12-17)
+
+
+### Config
+
+* updated theme version ([d35a8d2](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/d35a8d258252b7376968683cd5fc65af089923eb))
+
+
+* Merge branch 'master' of git.ilcd.rocks:team-floyd/themes/matrix-theme ([ec89a34](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/ec89a340a0c73ed3261f0b5d9eff2b33254dc35c))
+
+# [3.1.0](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v3.0.10...v3.1.0) (2021-12-17)
+
+
+### Bug Fixes
+
+* add default copyright_disclaimer ([f0c330f](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/f0c330fc779e79be0e6a7bab17cd54989e3e93de))
+* carousel slides ([ae7dea9](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/ae7dea9a0025daca522572efbd6ce27b5c7d3a0a))
+* casino table ([2d0b8ec](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/2d0b8ec4cd2e18fc9a21d1b17dcf1c529ac03aab))
+* fixed bonus issue and loadable condition ([7f1f1a7](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/7f1f1a7d6e467da005b60a8806056280fad671e7))
+* fixed copyrightDisclaimer ([1a606d2](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/1a606d2990c3883e2a3f0541d369e52dd93457f4))
+* merge ([14a32ab](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/14a32ab72c7c430e3619755433d5a92a79fe742c))
+* merged master ([5a983ab](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/5a983ab64013fe9029d99eea3223ecb2c4145a1b))
+* progress made ([55c3175](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/55c3175b5e827a2d1c3d1b33cb44ff3ca3b23379))
+* remove re-declared copyrightDisclaimer ([598ac18](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/598ac182d54e7a62e638ccfe42cda809f899ffc7))
+* small fix ([9d8c24d](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/9d8c24dc18245c6b07c658afce398ddf55802cec))
+* small fix ([a9341ad](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/a9341ad547865d2a154c98d55d12c78bd09f5982))
+* spotlight images ([8daaf46](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/8daaf460f49bafdda908899ae37fe8ff992befe2))
+* spotlight images ([fa886b6](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/fa886b6cbe2aa31992a415828f21f2927d5d8c97))
+* style issues ([2881939](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/28819392bbfec1ffa64739b42cb9dfc367ef7f82))
+* updated core theme version and fixed disclaimer text bug ([3ce75e2](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/3ce75e2c58812fef1ee3177c200a5268a5763f78))
+
+
+### Code Refactoring
+
+* check the data ([dd25ece](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/dd25ece863cd5956663ab47a34dde6eca5ded85a))
+
+
+* Merge branch 'tm-2613-carousel-fix' into 'master' ([bdf02e8](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/bdf02e8b330e9923437ae8a1c68568ce19c2c181))
+* Merge branch 'tm-2597-casino-table' into 'master' ([6861c37](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/6861c37c160aab7426288b8b4f40b3b8eabad3cf))
+* Update index.js ([056c9bd](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/056c9bddb0d7e63d0fbe8538968933c4d69d99b8))
+
+
+### Features
+
+* twitter graph ([dfdf8bf](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/dfdf8bfe5e9ff07a20b25f2c5f659126767dcffb))
+
+## [3.0.10](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v3.0.9...v3.0.10) (2021-12-10)
+
+
+### Code Refactoring
+
+* setting components to loadable if loaded against a condition ([b8c7040](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/b8c704014f9d80bf0e0fef6d3c97a39ebede8366))
+
+
+* Merge branch 'performance-improvements' into 'master' ([429f393](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/429f3936928ba46717e7b551751c1e6e5abbd0e0))
+
+## [3.0.9](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v3.0.8...v3.0.9) (2021-12-09)
+
+
+### Bug Fixes
+
+* added loadable ([2caaf41](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/2caaf41131f0fcb1caa8eeb65ec886fd11963489))
+
+
+* Merge branch 'master' of git.ilcd.rocks:team-floyd/themes/matrix-theme ([e171920](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/e1719202cc8e06e3904dd84b0089caf9af65dcc5))
+
 ## [3.0.8](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v3.0.7...v3.0.8) (2021-12-09)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gatsby-matrix-theme",
-  "version": "3.0.8",
+  "version": "3.1.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": "^1.6.21",
+    "gatsby-core-theme": "^2.0.2",
     "gatsby-image": "^3.3.0",
     "gatsby-plugin-image": "^1.3.1",
     "gatsby-plugin-postcss": "^4.3.0",

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

@@ -0,0 +1,58 @@
+/* eslint-disable camelcase */
+import React, { useContext } from 'react';
+import PropTypes from 'prop-types';
+import Link from 'gatsby-core-theme/src/hooks/link';
+import { Context } from 'gatsby-core-theme/src/context/TranslationsProvider';
+import { translate, getBonus } from 'gatsby-core-theme/src/helpers/getters';
+import styles from './table.module.scss';
+
+const CasinosTable = ({ module }) => {
+  const { translations } = useContext(Context);
+  const { items } = module || {};
+
+  const oneLiner = ({ one_liner }) => {
+    const [firstLine, secondLine] = one_liner.split('+');
+    return (
+      <>
+        <span className={styles.firstLine}>{firstLine}<br /></span>
+        <span className={styles.secondLine}>{`+${secondLine}`}</span>
+      </>
+    );
+  };
+
+  return (
+    <div className={styles.container}>
+      <table>
+        <thead>
+          <tr>
+            <th>{`${translate(translations, 'casino', 'Casino')}`}</th>
+            <th>{`${translate(translations, 'bonus', 'Bonus')}`}</th>
+            <th>{`${translate(translations, 'visit_casino', 'Visit casino')}`}</th>
+          </tr>
+        </thead>
+        <tbody>
+          {items &&
+            items.map((item) => (
+              <tr>
+                <td>{item.title}</td>
+                <td>{oneLiner(getBonus('main', item?.relation))}</td>
+                <td>
+                  <Link to={item?.path} name={item?.relation?.name}>
+                    {`${item?.relation?.name} ${translate(translations, 'read_review', 'Review')}`}
+                  </Link>
+                </td>
+              </tr>
+            ))}
+        </tbody>
+      </table>
+    </div>
+  );
+};
+
+export default CasinosTable;
+
+CasinosTable.propTypes = {
+  module: PropTypes.shape({
+    items: PropTypes.arrayOf({}),
+  }).isRequired,
+};

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

@@ -0,0 +1,87 @@
+.container {
+  table {
+    width: 100%;
+    border-collapse: inherit;
+    box-shadow: 0 2px 16px #17182f14;
+    thead {
+      tr {
+        th {
+          text-align: left;
+          background-color: var(--table-head-background);
+          color: white;
+          padding: 1.2rem 0 1.2rem 0.8rem;
+          &:first-child {
+            border-top-left-radius: var(--table-border-radius);
+          }
+
+          &:last-child {
+            border-top-right-radius: var(--table-border-radius);
+          }
+        }
+      }
+    }
+    tr {
+      td {
+        padding: 1.2rem 0 1.2rem 0.8rem;
+        a {
+          text-decoration: underline;
+        }
+        .secondLine{
+          color: red;
+        }
+      }
+      &:nth-child(odd) {
+        background-color: var(--table-highlight);
+      }
+    }
+
+    @include max(mobile) {
+      thead {
+        display: none;
+      }
+
+      tbody {
+        tr {
+          &:first-child {
+            
+            td {
+              color: white;
+              background-color: var(--table-head-background);
+              border-radius: 0;
+              .secondLine{
+                color: white;
+              }
+              &:first-child {
+                border-top-left-radius: var(--table-border-radius);
+                border-top-right-radius: var(--table-border-radius);
+              }
+
+                a {
+                  color: white;
+                  text-decoration: underline;
+                }                
+            }
+          }
+
+          td {
+            display: block;
+            text-align: left;
+            border-bottom: 1px solid #bfd3e5;
+            width: 100%;            
+          }
+
+          &:last-child {
+            td {
+              border-radius: 0;
+              &:last-child {
+                border-bottom-right-radius: var(--table-border-radius);
+                border-bottom-left-radius: var(--table-border-radius);
+                border-bottom: none;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}

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

@@ -42,6 +42,7 @@
             width: 100%;
             img {
               height: 5.6rem;
+              width: auto;
             }
           }
           .label {

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

@@ -5,6 +5,7 @@ import parse from 'html-react-parser';
 import PropTypes from 'prop-types';
 import LazyImage from 'gatsby-core-theme/src/hooks/lazy-image';
 import { parseCss } from 'gatsby-core-theme/src/helpers/css-parser';
+import loadable from '@loadable/component';
 import styles from './content.module.scss';
 
 const Content = ({ module }) => {
@@ -12,6 +13,11 @@ const Content = ({ module }) => {
   const [showMore, setShowMore] = useState(show_more_enabled === '1');
 
   const replaceMedia = (node) => {
+    if (node.name === 'iframe') {
+      const Iframe = loadable(() => import('gatsby-core-theme/src/components/atoms/iframe'));
+      return <Iframe src={node.attribs.src} />;
+    }
+
     if (node.name === 'img') {
       let stylesClass = null;
       const classes = node.attribs.class;

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

@@ -19,6 +19,7 @@ const Footer = ({
   const TopSection = footerTopCustom;
   const BottomSection = footerBottomCustom;
   const showLinks = template !== 'ppc';
+  const copyrightDisclaimerValue = getExtraField(section?.extra_fields, copyrightDisclaimer);
 
   return (
     <footer className={`${styles.footer} ${hasFooterLinks && styles.hasFooterLinks}`}>
@@ -38,20 +39,17 @@ const Footer = ({
       <div className={styles.bottomPart}>
         {footerBottomCustom && <BottomSection section={section} page={page} />}
         <div className={styles.copyrightDisclaimer}>
-          {copyrightDisclaimer && getExtraField(section?.extra_fields, copyrightDisclaimer) && (
-            <p
+          {copyrightDisclaimerValue && (
+            <div
               dangerouslySetInnerHTML={{
-                __html: getExtraField(section?.extra_fields, copyrightDisclaimer).replace(
-                  /\. /g,
-                  '.<br />'
-                ),
+                __html: copyrightDisclaimerValue.replace(/\. /g, '.<br />'),
               }}
             />
           )}
           <p>{copyrightText()}</p>
         </div>
         <div className={styles.logos}>
-          {footerLogos && (
+          {footerLogos && getExtraField(section?.extra_fields, footerLogos) && (
             <LinkList
               showListTitle={false}
               imageOnly

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

@@ -7,7 +7,6 @@ import Module from 'gatsby-core-theme/src/components/molecules/module';
 
 import styles from 'gatsby-core-theme/src/components/molecules/main/main.module.scss';
 import keygen from 'gatsby-core-theme/src/helpers/keygen';
-import AuthorBox from 'gatsby-core-theme/src/components/atoms/author-box';
 import Newsletter from '../../../../components/molecules/newsletter';
 
 const Main = ({ section = {}, pageContext = {}, showNewsletter = false }) => {
@@ -27,6 +26,7 @@ const Main = ({ section = {}, pageContext = {}, showNewsletter = false }) => {
   const NotFound = page.path.includes('404')
     ? loadable(() => import(`gatsby-core-theme/src/components/atoms/not-found`))
     : null;
+  const AuthorBox = page.author ? loadable(() => import(`~atoms/author-box`)) : null;
 
   return (
     <main className={styles.modulePage}>
@@ -39,7 +39,7 @@ const Main = ({ section = {}, pageContext = {}, showNewsletter = false }) => {
       {SearchPage && <SearchPage page={page} />}
       {showNewsletter && <Newsletter page={page} />}
       {NewsletterSuccess && showNewsletter && <NewsletterSuccess />}
-      {page.author && <AuthorBox author={page.author} />}
+      {AuthorBox && <AuthorBox author={page.author} />}
     </main>
   );
 };

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

@@ -22,7 +22,11 @@ const Modules = ({ module, page, pageContext }) => {
       case 'counter':
         return loadable(() => import('gatsby-core-theme/src/components/molecules/counter'));
       case 'cards':
+        return loadable(() => import('../../organisms/cards'));
       case 'cards_v2':
+        if (moduleItem.style === 'stack_table' && moduleItem.cards_page_type === 'operator') {
+          return loadable(() => import('../../../../components/atoms/cards/operators-table'));
+        }
         return loadable(() => import('../../organisms/cards'));
       case 'pros_and_cons':
         return loadable(() => import('gatsby-core-theme/src/components/molecules/pros-cons'));

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

@@ -1,9 +1,9 @@
+/* eslint-disable import/no-extraneous-dependencies */
 import React, { useState, useEffect, useRef, useCallback, useContext } from 'react';
 import PropTypes from 'prop-types';
 import { navigate } from 'gatsby';
 import { FaSearch } from 'react-icons/fa';
-
-// eslint-disable-next-line import/no-extraneous-dependencies
+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';
@@ -16,9 +16,7 @@ import keygen from '~helpers/keygen';
 import { filterByKey, sortDateOn, sortIntOn, sortStringOn } from '~helpers/search';
 import loadSource from '~helpers/search-source';
 import { leftTrim } from '~helpers/strings';
-import Archive from '~organisms/archive';
 import ModuleTitle from '~atoms/module-title';
-import CustomSelect from '~atoms/custom-select';
 import { NavigationContext } from '~organisms/navigation/navigationContext';
 
 /* eslint-disable no-underscore-dangle */
@@ -222,6 +220,7 @@ const Search = ({
     }
   }, [pageSearchOptionsCopy]);
   if (pageSearchOptionsCopy !== null && pageSearchOptionsCopy.sort !== undefined) {
+    const CustomSelect = loadable(() => import('~atoms/custom-select'));
     pageSearchOptionsCopy.tabsOptions.HeaderComp = (
       <div className={styles.selectwrapper}>
         <CustomSelect
@@ -359,6 +358,8 @@ const Search = ({
 
                 if (items.length === 0) return null;
 
+                const Archive = loadable(() => import('~organisms/archive'));
+
                 return (
                   <div label={titleObj.title} tabId={type + index} key={keygen()}>
                     {pageSearchOptionsCopy.useArchive === undefined ||

package/src/gatsby-core-theme/components/organisms/carousel/carousel.module.scss

@@ -1,3 +1,27 @@
-.screenshotCarousel > div {
-  outline: none;
+:global {
+  .carousel-module {
+    background-color: var(--color-5);
+  }
+}
+.carouselContainer {
+  .carouselTitle {
+    margin-bottom: 1.5rem;
+  }
+  .slide {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    width: 100%;
+  }
+  .carouselItem {
+    padding: 0.5rem;
+    width: 50%;
+    @include max(tablet) {
+      width: 100%;
+      text-align: center;
+    }
+    img {
+      border-radius: 0.6rem;
+    }
+  }
 }

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

@@ -6,6 +6,7 @@ import PropTypes from 'prop-types';
 import { schemaGenerator } from '~helpers/schema';
 import { getUrl, getPageImage, imagePrettyUrl } from '~helpers/getters';
 import keygen from '~helpers/keygen';
+import { getTwitterUsername } from '../../../../helpers/strings';
 
 export function getLanguage(language) {
   const name = process.env.GATSBY_SITE_NAME;
@@ -43,41 +44,55 @@ function setName(string) {
 }
 const Head = ({ page = {}, siteInfo }) => {
   const pageImage = getPageImage(page) ? getPageImage(page) : imagePrettyUrl(siteInfo?.site_logo);
-  // When google re-indexes dev NSA and IRL, remove lines 28, 41, 42, 43 and process.env.GATSBY_ACTIVE_ENV !== 'development' from lines 24, 25, 27, 29, 43
+  const twitterUsername = getTwitterUsername(page.siteSchema?.twitter);
+
   return (
-    <Helmet>
-      <meta charSet="utf-8" />
-      <title>{page.meta_title}</title>
-      <html lang={getLanguage(page.language)} />
-      <meta name="description" content={page.meta_description} />
-      {page.meta_robots && process.env.GATSBY_ACTIVE_ENV !== 'development' && (
-        <meta name="robots" content={page.meta_robots.join()} />
-      )}
-      {page.robot_options && !page.path.includes('/page/') && (
-        <meta name="robots" content={getRobotOptions(page.robot_options)} />
-      )}
-      {page.path.includes('/page/') && <meta name="robots" content="noindex,follow" />}
-      {process.env.GATSBY_ACTIVE_ENV === 'development' && (
-        <meta name="googlebot" content="noindex,follow" />
-      )}
-      <link rel="canonical" href={getCanonicalUrl(page)} />
-      {page.preconnect_links &&
-        page.preconnect_links.map((link) => <link key={keygen()} rel="preconnect" href={link} />)}
-      <meta name="og:title" content={page.meta_title} />
-      <meta name="og:site_name" content={siteInfo?.site_name && setName(siteInfo?.site_name)} />
-      <meta name="og:description" content={page.meta_description} />
-      <meta name="og:type" content={page.path === '/' ? 'website' : 'article'} />
-      <meta name="og:image" content={pageImage} />
-      <meta name="og:url" content={getUrl(page.path)} />
-      {schemaGenerator(page, pageImage).map(
-        (schema) =>
-          schema && (
-            <script key={keygen()} type="application/ld+json">
-              {`${schema}`}
-            </script>
-          )
+    <>
+      <Helmet>
+        <meta charSet="utf-8" />
+        <title>{page.meta_title}</title>
+        <html lang={getLanguage(page.language)} />
+        <meta name="description" content={page.meta_description} />
+        {page.meta_robots && process.env.GATSBY_ACTIVE_ENV !== 'development' && (
+          <meta name="robots" content={page.meta_robots.join()} />
+        )}
+        {page.robot_options && !page.path.includes('/page/') && (
+          <meta name="robots" content={getRobotOptions(page.robot_options)} />
+        )}
+        {page.path.includes('/page/') && <meta name="robots" content="noindex,follow" />}
+        {process.env.GATSBY_ACTIVE_ENV === 'development' && (
+          <meta name="googlebot" content="noindex,follow" />
+        )}
+        <link rel="canonical" href={getCanonicalUrl(page)} />
+        {page.preconnect_links &&
+          page.preconnect_links.map((link) => <link key={keygen()} rel="preconnect" href={link} />)}
+        <meta name="og:title" content={page.meta_title} />
+        <meta name="og:site_name" content={siteInfo?.site_name && setName(siteInfo?.site_name)} />
+        <meta name="og:description" content={page.meta_description} />
+        <meta name="og:type" content={page.path === '/' ? 'website' : 'article'} />
+        <meta name="og:image" content={pageImage} />
+        <meta name="og:url" content={getUrl(page.path)} />
+
+        {schemaGenerator(page, pageImage).map(
+          (schema) =>
+            schema && (
+              <script key={keygen()} type="application/ld+json">
+                {`${schema}`}
+              </script>
+            )
+        )}
+      </Helmet>
+
+      {twitterUsername && (
+        <Helmet>
+          <meta name="twitter:title" content={page.meta_title} />
+          <meta name="twitter:description" content={page.meta_description} />
+          <meta name="twitter:site" content={`@${twitterUsername}`} />
+          <meta name="twitter:card" content="summary" />
+          <meta name="twitter:image" content={pageImage} />
+        </Helmet>
       )}
-    </Helmet>
+    </>
   );
 };
 

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

@@ -4,7 +4,6 @@ import PropTypes from 'prop-types';
 import loadable from '@loadable/component';
 import { getSection } from 'gatsby-core-theme/src/helpers/getters';
 import Navigation from 'gatsby-core-theme/src/components/organisms/navigation';
-import OperatorBanner from 'gatsby-core-theme/src/components/molecules/operator-banner';
 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';
@@ -52,6 +51,11 @@ function Body({ pageContext, children }) {
       ? loadable(() => import(`../../../../components/organisms/footer-navigation`))
       : null;
 
+  const OperatorBanner =
+    pageType === 'operator' && !hideBanner
+      ? loadable(() => import(`gatsby-core-theme/src/components/molecules/operator-banner`))
+      : null;
+
   return (
     <>
       {navigation && (
@@ -82,7 +86,7 @@ function Body({ pageContext, children }) {
           {!isSearch && !is404 && <Header section={pageContext} />}
           {main && !children && <Main section={main} pageContext={pageContext} />}
           {children && <main>{children}</main>}
-          {pageType === 'operator' && !hideBanner && (
+          {OperatorBanner && (
             <OperatorBanner
               template={template}
               sticky

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

@@ -1,21 +1,24 @@
+/* eslint-disable import/no-extraneous-dependencies */
 /* eslint-disable react/forbid-prop-types */
 import React, { useContext } from 'react';
 import PropTypes from 'prop-types';
 import Breadcrumbs from 'gatsby-core-theme/src/components/atoms/breadcrumbs';
-import Search from 'gatsby-core-theme/src/components/molecules/search';
 import moduleStyles from 'gatsby-core-theme/src/components/molecules/module/module.module.scss';
 import { translate } from 'gatsby-core-theme/src/helpers/getters';
 import { Context } from 'gatsby-core-theme/src/context/TranslationsProvider';
-import CardArticle from '../../../../components/atoms/cards/article-card';
-import CardGame from '../../../../components/atoms/cards/game-card';
-import CardOperator from '../../../../components/atoms/cards/operator-card';
-import PaymentMethods from '../../../../components/atoms/cards/payment-method-card';
-import SoftwareProvider from '../../../../components/atoms/cards/software-provider-card';
+import loadable from '@loadable/component';
+// import CardArticle from '../../../../components/atoms/cards/article-card';
+// import CardGame from '../../../../components/atoms/cards/game-card';
+// import CardOperator from '../../../../components/atoms/cards/operator-card';
+// import PaymentMethods from '../../../../components/atoms/cards/payment-method-card';
+// import SoftwareProvider from '../../../../components/atoms/cards/software-provider-card';
 import styles from './search.module.scss';
 
 const SearchContent = ({ page }) => {
   const { translations } = useContext(Context) || {};
 
+  const Search = loadable(() => import('gatsby-core-theme/src/components/molecules/search'));
+
   return (
     <div className={`${styles.searchPage} ${moduleStyles.module} module`}>
       {page.path && <Breadcrumbs page={page} />}
@@ -73,23 +76,13 @@ const SearchContent = ({ page }) => {
           },
         }}
       >
-        {(item) => (
+        {() => (
           <>
-            <div type="operator">
-              <CardOperator item={item} />
-            </div>
-            <div type="game">
-              <CardGame item={item} />
-            </div>
-            <div type="article">
-              <CardArticle item={item} />
-            </div>
-            <div type="payment_method">
-              <PaymentMethods item={item} />
-            </div>
-            <div type="software_provider">
-              <SoftwareProvider item={item} />
-            </div>
+            <div type="operator">{/* <CardOperator item={item} /> */}</div>
+            <div type="game">{/* <CardGame item={item} /> */}</div>
+            <div type="article">{/* <CardArticle item={item} /> */}</div>
+            <div type="payment_method">{/* <PaymentMethods item={item} /> */}</div>
+            <div type="software_provider">{/* <SoftwareProvider item={item} /> */}</div>
           </>
         )}
       </Search>

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

@@ -12,6 +12,14 @@
   --modal-background-color: white;
 
   --star-rating-color: orange;
+  --full-star-fill-color: #fba62f;  
+  --full-star-border-color: #fba62f;
+  --halfFull-star-fill-color: #fba62f;
+  --halfEmpty-star-fill-color: white;
+  --half-star-border-color: #fba62f;
+  --empty-star-fill-color: white;
+  --empty-star-border-color: grey;
+  --selling-point-icon-color: #00889e;
 
   --main-font: sans-serif;
 
@@ -64,4 +72,6 @@
   --page-number-background: #393939;
   --page-number-color: #fff;
   --sitemap-background-color: #fff;
+
+
 }