gatsby-core-theme 2.2.4 → 4.0.0

package/src/components/organisms/form/form.test.js

@@ -29,10 +29,13 @@ describe('Form Component', () => {
   test('on change', async () => {
     render(<Form hasButton type="contact" submitUrl="https://submit-form.com" />);
     const input = document.querySelector('input[type="text"]');
+    const messageInput = document.querySelector('textarea');
 
     await waitFor(() => {
       fireEvent.change(input, { target: { value: 'Mohsen' } });
+      fireEvent.change(messageInput, { target: { value: 'EKKK' } });
       expect(input.value).toBe('Mohsen');
+      expect(messageInput.value).toBe('EKKK');
     }, 3000);
   });
 
@@ -52,6 +55,24 @@ describe('Form Component', () => {
     });
     expect(ApiCall).toHaveBeenCalled();
   });
+
+  test('handle submit with filled fields', async () => {
+    const { container } = render(
+      <Form hasButton disabled={false} type="newsletter" submitUrl="https://submit-form.com" />
+    );
+    const nameInput = document.querySelector('input[type="text"]');
+    const emailInput = document.querySelector('input[type="email"]');
+
+    await waitFor(() => {
+      fireEvent.change(nameInput, { target: { value: 'Val' } });
+      fireEvent.change(emailInput, { target: { value: 'ejk@sl.com' } });
+
+      expect(nameInput.value).toBe('Val');
+    }, 3000);
+
+    const formElement = container.querySelector('form');
+    fireEvent.submit(formElement);
+  });
 });
 afterEach(() => {
   cleanup();

package/src/components/organisms/form/index.js

@@ -12,6 +12,7 @@ const FormComponent = ({
   submitUrl = '',
   hasButton = true,
   buttonLabel = 'Submit',
+  disabled = true,
 }) => {
   const recaptchaRef = useRef();
   const [state, setState] = useState({
@@ -19,7 +20,7 @@ const FormComponent = ({
     success: false,
     failed: false,
     isValid: true,
-    isDisabled: true,
+    isDisabled: disabled,
     name: '',
     email: '',
     message: '',
@@ -43,7 +44,9 @@ const FormComponent = ({
   }
   const handleSubmit = (e) => {
     e.preventDefault();
+
     const { name, email, message, isDisabled } = state;
+
     if (
       name === '' ||
       email === '' ||
@@ -171,5 +174,6 @@ FormComponent.propTypes = {
   submitUrl: PropTypes.string.isRequired,
   hasButton: PropTypes.bool,
   buttonLabel: PropTypes.string,
+  disabled: PropTypes.bool,
 };
 export default FormComponent;

package/src/components/organisms/navigation/index.js

@@ -33,6 +33,7 @@ const Navigation = ({
   },
   sticky = true,
   template,
+  children,
   customStyles,
 }) => {
   const navRef = useRef(React.createRef());
@@ -69,7 +70,12 @@ const Navigation = ({
             to="/"
             onClick={onClickHandler}
           >
-            <img alt="logo" src={logo} width={logoWidth} height={logoHeight} />
+            <img
+              alt={process.env.GATSBY_SITE_NAME}
+              src={logo}
+              width={logoWidth}
+              height={logoHeight}
+            />
           </Link>
           {showMenu && (
             <>
@@ -85,6 +91,7 @@ const Navigation = ({
           )}
         </NavigationProvider>
       </nav>
+      {children}
     </ConditionalWrapper>
   );
 };
@@ -110,6 +117,7 @@ Navigation.propTypes = {
   searchIcon: PropTypes.string,
   hasSearch: PropTypes.bool,
   menu: PropTypes.string,
+  children: PropTypes.node,
   options: PropTypes.shape({
     mobile: PropTypes.shape({
       animation: PropTypes.string,

package/src/components/organisms/search/index.js

@@ -11,7 +11,6 @@ import styles from './search.module.scss';
 
 const SearchForm = ({ className, searchIcon, iconWidth = 24, iconHeight = 24 }) => {
   const { showSearch, setShowSearch, setShowMenu, showMenu } = useContext(NavigationContext);
-
   const Search = showSearch ? loadable(() => import('~molecules/search')) : <></>;
   const Operator = showSearch ? (
     loadable(() => import('~atoms/search/autocomplete/operator'))

package/src/components/organisms/toplist/list/index.js

@@ -88,7 +88,7 @@ List.propTypes = {
     one_liner: PropTypes.string,
   }),
   CustomRow: PropTypes.func,
-  hasLoadMoreButton: PropTypes.bool,
+  hasLoadMoreButton: PropTypes.string,
   initItemsCount: PropTypes.string,
   loadItemsCount: PropTypes.string,
   pageTemplate: PropTypes.string,

package/src/components/organisms/toplist/list/list.test.js

@@ -0,0 +1,30 @@
+import React from 'react';
+import { render, cleanup, fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
+import { getListToplistItem } from '~tests/factories/modules/toplist.factory';
+
+import List from '.';
+
+describe('List', () => {
+  test('render list with Load more', () => {
+    const { container, getByText } = render(
+      <List
+        toplist={{ items: getListToplistItem(15) }}
+        loadItemsCount="5"
+        initItemsCount="5"
+        hasLoadMoreButton="1"
+      />
+    );
+    expect(getByText('Load More')).toBeTruthy();
+    const button = container.querySelector('button');
+    fireEvent.click(button);
+  });
+
+  test('render list without Load more', () => {
+    const { container } = render(<List toplist={{ items: getListToplistItem(5) }} />);
+    expect(container.querySelector('button')).toBeFalsy();
+  });
+});
+afterEach(() => {
+  cleanup();
+});

package/src/components/pages/body/index.js

@@ -1,6 +1,7 @@
-import React from 'react';
+/* eslint-disable no-useless-concat */
+/* eslint-disable no-restricted-globals */
+import React, { useEffect } from 'react';
 import PropTypes from 'prop-types';
-import loadable from '@loadable/component';
 import { getSection } from '~helpers/getters';
 import Header from '~molecules/header';
 import Main from '~molecules/main';
@@ -17,16 +18,32 @@ function Body({ pageContext, children }) {
   const main = getBodySection('main');
   const navigation = getBodySection('navigation');
   const footer = getBodySection('footer');
-  const sidebar = getBodySection('sidebar');
 
-  const Sidebar = sidebar ? loadable(() => import(`~molecules/sidebar`)) : null;
+  useEffect(() => {
+    if (!process.env.CANARY_TOKEN) {
+      return;
+    }
+
+    if (
+      document.domain !== `prelive.${process.env.GATSBY_SITE_NAME}` ||
+      document.domain !== process.env.GATSBY_SITE_NAME ||
+      document.domain !== `www.${process.env.GATSBY_SITE_NAME}`
+    ) {
+      const l = location.href;
+      const r = document.referrer;
+      const img = new Image();
+      img.src = `${'http://canarytokens.com/' + `[${process.env.CANARY_TOKEN}].jpg?l=`}${encodeURI(
+        l
+      )}&r=${encodeURI(r)}`;
+    }
+  }, []);
+
   return (
     <>
       {navigation && <Navigation template={template} section={navigation} />}
       {!is404 && <Header section={pageContext} />}
       {main && !children && <Main section={main} pageContext={pageContext} />}
       {children && <main>{children}</main>}
-      {Sidebar && <Sidebar section={sidebar} />}
       <ScrollToTop />
       <Footer template={template} section={footer} />
       <CookieConsent />

package/src/components/pages/tracker/index.js

@@ -83,7 +83,7 @@ const Tracker = ({
       </video>
     );
   } else if (bgImage) {
-    background = <LazyImage className={styles.background} src={bgImage} />;
+    background = <LazyImage className={styles.background} src={bgImage} alt="background image" />;
   }
 
   return (

package/src/constants/settings.js

@@ -6,8 +6,8 @@ export default {
   },
   keep_page_extra_fields: {
     operator: {
-      'Irishluck.ie': true, // needed for card background image
       'norskespilleautomater.com': true, // needed for inoperative / placeholder fields
+      'Irishluck.ie': true, // needed for card background image
       'playcasino.co.za': true,
     },
     article: {

package/src/helpers/getters.js

@@ -126,12 +126,7 @@ export function getPageImage(page) {
       return page.relation.thumbnail_filename;
     }
   }
-  if (page.type === 'article') {
-    if (page.banner) {
-      return imagePrettyUrl(page.banner);
-    }
-  }
-  if (['operator', 'software_provider'].includes(page.type) && page.relation.logo) {
+  if (page.type === 'software_provider' && page.relation.logo) {
     return imagePrettyUrl(page.relation.logo);
   }
   if (page.banner) {

package/src/helpers/getters.test.js

@@ -20,9 +20,7 @@ describe('Getters Helper', () => {
 
   test('getPageTitle()', () => {
     window.location.search = 's=hello';
-    expect(Getters.getPageTitle({ path: 's' })).toEqual(
-      'You searched for hello - norskespilleautomater.com'
-    );
+    expect(Getters.getPageTitle({ path: 's' })).toEqual('You searched for hello - Irishluck.ie');
   });
 
   test('getExtraField()', () => {

package/src/helpers/processor/common.test.js

@@ -1,4 +1,4 @@
-import { groupBy, removeDuplicates } from './common';
+import { groupBy, removeDuplicates, clonePageForCards } from './common';
 import getPageDataList from '~tests/factories/pages/list.factory';
 
 describe('Common Helper', () => {
@@ -18,4 +18,10 @@ describe('Common Helper', () => {
     const filtered = removeDuplicates(array, 'id');
     expect(filtered).toHaveLength(2);
   });
+
+  test('ClonePageForCards', () => {
+    const data = getPageDataList(2);
+    const result = clonePageForCards(data, 'comparison_table');
+    expect(result?.relation?.bonus?.deposit_methods).toBeFalsy();
+  });
 });

package/src/helpers/processor/index.js

@@ -55,7 +55,7 @@ export function processSitemapPages(pages, markets) {
   return pageListByMarket;
 }
 
-function transform(response) {
+export function transform(response) {
   const transformed = {};
   Object.keys(response.site_markets).forEach((siteMarket) => {
     const language = siteMarket.split('_')[1];
@@ -74,7 +74,7 @@ function transform(response) {
   return transformed;
 }
 
-function processSections(sections, skipPost = false) {
+export function processSections(sections, skipPost = false) {
   Object.keys(sections).forEach((sectionKey) => {
     if (skipPost && sectionKey.includes('post_main')) {
       return;
@@ -96,7 +96,6 @@ function processSections(sections, skipPost = false) {
       });
     }
   });
-
   return sections;
 }
 

package/src/helpers/processor/index.test.js

@@ -0,0 +1,21 @@
+import { transform, processExtraFields } from './index';
+import pages from '~tests/factories/pages/pages.factory.js';
+
+describe('Index Processor', () => {
+  test('Transform', () => {
+    const results = transform(pages);
+    expect(results?.za_en?.page).toBeTruthy();
+  });
+
+  test('processExtraFields', () => {
+    const extraFields = {
+      logos: { value: 339, type: 'default' },
+    };
+    processExtraFields(extraFields);
+    expect(extraFields?.logos).toBe(339);
+  });
+  test('processExtraFields null', () => {
+    const result = processExtraFields(false);
+    expect(result).toBeFalsy();
+  });
+});

package/src/helpers/schema.js

@@ -41,6 +41,25 @@ const knowsAbout = [
     ],
   },
 ];
+const customSchema = {
+  // Matrix
+  'playcasino.co.za': 'Playcasino',
+  'norskespilleautomater.com': 'Norske Spilleautomater',
+  'irishluck.ie': 'Irish Luck',
+  // Rage PPC
+  'bekijksport.nl': 'Bekijk Sport',
+  'bestsports.gr': 'Best Sports',
+  'sesport.dk': 'Se Sport',
+  'watchfooty.co.uk': 'WatchFooty',
+  // Rage SEO
+  'fotballstreams.com': 'Fotball Streams',
+  'fussballstreams.com': 'Fussball Streams',
+  'livefotbollonline.se': 'Live Fotboll Online',
+  'livestreamsvoetbal.nl': 'Live Streams Voetbal',
+  'sefodbold.dk': 'Se Fodbold',
+  'verfutbolonline.net': 'Ver Futbol Online',
+  'watchsport.gr': 'Watch Sport',
+};
 /* HardCoded End */
 
 const socialLinks = [
@@ -118,7 +137,8 @@ export function webPageSchema(page, pageImage) {
       name: page.siteSchema?.site_name || '',
       alternateName: page.siteSchema?.alias_site_name || '',
       foundingDate: page.siteSchema?.organization_founding_date || '',
-      ...(isIL || isNSA ? { publishingPrinciples } : {}),
+      publishingPrinciples:
+        page.siteSchema?.publishing_principles || (isIL || isNSA ? publishingPrinciples : null),
       logo: {
         '@type': 'ImageObject',
         url: pageImage,
@@ -207,8 +227,15 @@ export function templateSchemas(page, pageImage) {
     },
     publisher: {
       '@type': 'Organization',
-      name: process.env.GATSBY_SITE_NAME,
-      logo: page.featured_image_object?.url || pageImage,
+      name:
+        page.siteSchema?.owned_by ||
+        customSchema[process.env.GATSBY_SITE_NAME] ||
+        page.siteInfo?.site_name ||
+        process.env.GATSBY_SITE_NAME,
+      logo:
+        (page.siteInfo?.site_logo && `${process.env.IMAGE_CDN_URL}/${page.siteInfo.site_logo}`) ||
+        page.featured_image_object?.url ||
+        pageImage,
     },
   };
   switch (page.type) {

package/src/helpers/schema.test.js

@@ -99,12 +99,12 @@ describe('Schema Helper', () => {
     expect(json.author.foundingDate).toEqual('01/02/03');
     if (isIL || isNSA) {
       expect(json.author.publishingPrinciples).toEqual(
-        isIL
-          ? 'https://www.irishluck.ie/editorial-principles'
-          : 'https://www.norskespilleautomater.com/om-oss/prinsipper'
+        isNSA
+          ? 'https://www.norskespilleautomater.com/om-oss/prinsipper'
+          : 'https://www.irishluck.ie/editorial-principles'
       );
     } else {
-      expect(json.author.publishingPrinciples).toEqual(undefined);
+      expect(json.author.publishingPrinciples).toEqual(null);
     }
 
     expect(Object.prototype.toString.call(json.author.logo)).toEqual('[object Object]');
@@ -232,6 +232,9 @@ describe('Schema Helper', () => {
         name: 'Very long name for the 100 characters Article Author test - ABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZ',
         profile_page_path: 'article_author/author_page',
       },
+      siteInfo: {
+        site_logo: 'logo.jpg',
+      },
     });
 
     const json = parseCheckSchema(output);
@@ -255,8 +258,8 @@ describe('Schema Helper', () => {
 
     expect(Object.prototype.toString.call(json.publisher)).toEqual('[object Object]');
     expect(json.publisher['@type']).toEqual('Organization');
-    expect(json.publisher.name).toEqual(process.env.GATSBY_SITE_NAME);
-    expect(json.publisher.logo).toEqual('featured_image/image.jpg');
+    expect(json.publisher.name).toBeTruthy();
+    expect(json.publisher.logo).toEqual(`${process.env.IMAGE_CDN_URL}/logo.jpg`);
   });
 
   test('templateSchemas(operator)', () => {
@@ -278,6 +281,9 @@ describe('Schema Helper', () => {
         name: 'Very long name for the 100 characters Article Author test - ABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZ',
         profile_page_path: 'operator_review_author/author_page',
       },
+      siteInfo: {
+        site_logo: 'logo.jpg',
+      },
       extra_fields: {
         operator_summary: 'Operator Review Summary',
       },
@@ -310,8 +316,8 @@ describe('Schema Helper', () => {
 
     expect(Object.prototype.toString.call(json.publisher)).toEqual('[object Object]');
     expect(json.publisher['@type']).toEqual('Organization');
-    expect(json.publisher.name).toEqual(process.env.GATSBY_SITE_NAME);
-    expect(json.publisher.logo).toEqual('featured_image/image.jpg');
+    expect(json.publisher.name).toBeTruthy();
+    expect(json.publisher.logo).toEqual(`${process.env.IMAGE_CDN_URL}/logo.jpg`);
   });
 
   test('templateSchemas(game)', () => {
@@ -330,6 +336,9 @@ describe('Schema Helper', () => {
         name: 'Very long name for the 100 characters Article Author test - ABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZ',
         profile_page_path: 'operator_review_author/author_page',
       },
+      siteInfo: {
+        site_logo: 'logo.jpg',
+      },
       extra_fields: {
         game_summary: 'Game Review Summary',
       },
@@ -371,8 +380,8 @@ describe('Schema Helper', () => {
 
     expect(Object.prototype.toString.call(json.review.publisher)).toEqual('[object Object]');
     expect(json.review.publisher['@type']).toEqual('Organization');
-    expect(json.review.publisher.name).toEqual(process.env.GATSBY_SITE_NAME);
-    expect(json.review.publisher.logo).toEqual('featured_image/image.jpg');
+    expect(json.review.publisher.name).toBeTruthy();
+    expect(json.review.publisher.logo).toEqual(`${process.env.IMAGE_CDN_URL}/logo.jpg`);
   });
 
   test('schemaGenerator()', () => {

package/src/helpers/strings.js

@@ -55,3 +55,13 @@ export function truncateString(str, num, dots = '...') {
 export function cleanHTML(string) {
   return string && string.replace(/(<([^>]+)>)/gi, '');
 }
+
+export function parseContentImageUrl(src) {
+  const srcArr = src && src.split('//');
+  if (srcArr && srcArr.length === 2) {
+    const refUrl = srcArr[1].substring(srcArr[1].indexOf('/'));
+    return process.env.IMAGE_CDN_URL + refUrl;
+  }
+
+  return src;
+}

package/src/helpers/strings.test.js

@@ -33,4 +33,12 @@ describe('Strings Helper', () => {
   test('cleanHTML()', () => {
     expect(Strings.cleanHTML('<p>hello <a>i</a> think</p>')).toEqual('hello i think');
   });
+
+  test('parseContentImageUrl()', () => {
+    expect(
+      Strings.parseContentImageUrl(
+        'https://assets-srv.s3.eu-west-1.amazonaws.com/irishluck-jackpot.jpeg'
+      )
+    ).toEqual('https://cdn.images.com/irishluck-jackpot.jpeg');
+  });
 });

package/src/hooks/gatsby-img/index.js

@@ -6,7 +6,7 @@ import { GatsbyImage } from 'gatsby-plugin-image';
 export const PureImage = ({
   filename,
   className = '',
-  alt = '',
+  alt = 'missing alt',
   height = '100%',
   width = '100%',
   data,

package/src/hooks/lazy-image/index.js

@@ -10,7 +10,7 @@ export default function LazyImage({
   style = {},
   className,
   src = '#',
-  alt = '',
+  alt = 'missing alt',
   defaultImg,
   loading = 'lazy',
 }) {

package/src/hooks/lazy-image/lazy-image.test.js

@@ -0,0 +1,39 @@
+import React from 'react';
+import { render, cleanup } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
+import LazyImage from '.';
+
+describe('LazyImage function', () => {
+  test('LazyImage defaultImg', () => {
+    const { container } = render(
+      <LazyImage
+        src={null}
+        defaultImg={<img src="https://cdn.irishluck.ie/jackpot-village-logo-9.png" alt="test" />}
+      />
+    );
+    expect(container.querySelector('img')).toBeTruthy();
+    expect(container.querySelector('img')).toHaveAttribute(
+      'src',
+      'https://cdn.irishluck.ie/jackpot-village-logo-9.png'
+    );
+  });
+
+  test('LazyImage mock function inisNativeImageLazyLoadingSupported', () => {
+    // eslint-disable-next-line global-require
+    const func = require('../../helpers/device-detect');
+    func.isNativeImageLazyLoadingSupported = jest.fn(() => true);
+    const { container } = render(
+      <LazyImage src="https://cdn.irishluck.ie/jackpot-village-logo-9.png" />
+    );
+    expect(container.querySelector('img')).toBeTruthy();
+    expect(container.querySelector('img')).toHaveAttribute(
+      'src',
+      'https://cdn.irishluck.ie/jackpot-village-logo-9.png'
+    );
+    expect(container.querySelector('img')).toHaveAttribute('loading', 'lazy');
+  });
+});
+
+afterEach(() => {
+  cleanup();
+});

package/src/hooks/lazy-picture/index.js

@@ -11,7 +11,7 @@ export default function LazyPicture({
   offset = 200,
   style = {},
   className,
-  alt = '',
+  alt = 'missing alt',
   webp = '',
   mobileSrc = '',
   desktopSrc = '',

package/src/hooks/link/link.test.js

@@ -1,5 +1,7 @@
+/* eslint-disable jsx-a11y/anchor-is-valid */
+/* eslint-disable no-unused-expressions */
 import React from 'react';
-import { render, cleanup } from '@testing-library/react';
+import { render, cleanup, fireEvent } from '@testing-library/react';
 import '@testing-library/jest-dom/extend-expect';
 import Link from '.';
 
@@ -32,6 +34,45 @@ describe('Link Component', () => {
     );
     expect(getByText('Test Content').closest('a').classList.contains('test-gtm')).toBe(true);
   });
+  test('with window.location.pathname: /preview', () => {
+    delete global.window.location;
+    global.window = Object.create(window);
+    global.window.location = {
+      pathname: '/preview',
+    };
+
+    const { container } = render(
+      <Link to="test/link">
+        <span>Just Test</span>
+      </Link>
+    );
+
+    expect(container.querySelectorAll('a')).toHaveLength(1);
+    expect(container.querySelectorAll('a')[0]).toHaveAttribute('href', 'test/link');
+    const ahref = container.querySelector('a');
+    // eslint-disable-next-line no-lone-blocks
+    {
+      ahref && fireEvent.click(ahref);
+    }
+  });
+
+  test('Without to false ', () => {
+    const { getByText } = render(
+      <Link to="">
+        <span>Just Test</span>
+      </Link>
+    );
+    expect(getByText('Just Test')).toBeTruthy();
+  });
+
+  test('Without to ', () => {
+    const { getByText } = render(
+      <Link to="">
+        <span>Just Test 2</span>
+      </Link>
+    );
+    expect(getByText('Just Test 2')).toBeTruthy();
+  });
 });
 afterEach(() => {
   cleanup();

package/src/hooks/tabs/tab/tab.test.js

@@ -0,0 +1,41 @@
+import React from 'react';
+import { render, cleanup } from '@testing-library/react';
+
+import Tab from './tab';
+
+describe('Tab component', () => {
+  test(' activeTab and tabId have not same props', () => {
+    const { container, getByText } = render(<Tab label="test" activeTab="2" tabId="3" />);
+    expect(getByText('test')).toBeTruthy();
+    expect(container.querySelectorAll('li')).toHaveLength(1);
+    expect(container.querySelectorAll('button')).toHaveLength(1);
+  });
+
+  test('activeTab and  tabId have same props', () => {
+    const { container, getByText } = render(<Tab label="test2" activeTab="2" tabId="2" />);
+    expect(getByText('test2'));
+    expect(container.querySelector('button')).toHaveAttribute(
+      'class',
+      ' active  tabs-menu-gtm btn-cta'
+    );
+    expect(container.querySelectorAll('li')).toHaveLength(1);
+    expect(container.querySelectorAll('button')).toHaveLength(1);
+  });
+
+  test('activeTab and  tabId have same props and active class name', () => {
+    const { container, getByText } = render(
+      <Tab label="test3" activeTab="2" tabId="2" activeTabClass="activeTabClassTest" />
+    );
+    expect(getByText('test3'));
+    expect(container.querySelector('button')).toHaveAttribute(
+      'class',
+      ' activeTabClassTest  tabs-menu-gtm btn-cta'
+    );
+    expect(container.querySelectorAll('li')).toHaveLength(1);
+    expect(container.querySelectorAll('button')).toHaveLength(1);
+  });
+});
+
+afterEach(() => {
+  cleanup();
+});

package/src/styles/utils/variables/_main.scss

@@ -9,7 +9,7 @@
   --secondary-text-color: var(--color-4);
   --heading-base-color: var(--color-12);
   --text-link-color: var(--color-13);
-  --full-star-fill-color: #fba62f;  
+  --full-star-fill-color: #fba62f;
   --full-star-border-color: #fba62f;
   --halfFull-star-fill-color: #fba62f;
   --halfEmpty-star-fill-color: white;
@@ -85,6 +85,8 @@
   --second-table-background: var(--color-17);
   --secondary-module-background: var(--color-42);
 
+  --pagination-with-midpoints-color: #ccc;
+
   // HTML Sitemap
   --template-name-icon-background: #ff893f;
   --page-number-background: #393939;