gatsby-matrix-theme 25.1.6 → 25.1.8

package/CHANGELOG.md

@@ -1,3 +1,18 @@
+## [25.1.8](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v25.1.7...v25.1.8) (2023-06-13)
+
+
+### Bug Fixes
+
+* wagering calc styling ([6900f5a](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/6900f5abf61cf4d18413f095806e29eacadf97ef))
+* wagering calc styling ([582610e](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/582610ed84d53999dc4760b9f273c58d01035b9f))
+
+## [25.1.7](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v25.1.6...v25.1.7) (2023-06-13)
+
+
+### Bug Fixes
+
+* wagering calculator styling ([85f83ba](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/85f83ba584c1f13a021325b28519174bdb285daf))
+
 ## [25.1.6](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v25.1.5...v25.1.6) (2023-06-12)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gatsby-matrix-theme",
-  "version": "25.1.6",
+  "version": "25.1.8",
   "main": "index.js",
   "description": "Matrix Theme NPM Package",
   "author": "",

package/src/components/molecules/small-welcome-bonus/index.js

@@ -18,7 +18,7 @@ import styles from './small-welcome-bonus.module.scss';
 
 const Index = ({ page }) => {
   const operator = page?.extra_fields?.game_review_summary_operator;
-  const { logo_url, status } = operator;
+  const { status } = operator;
   const { translations } = useContext(Context) || {};
   const prettyLink = prettyTracker(operator, 'main', false, page.template);
   let playNow = translate(translations, 'play_now', 'Play now');
@@ -47,7 +47,7 @@ const Index = ({ page }) => {
                 width={120}
                 height={50}
                 alt={getAltText(logUrlObject, operator?.name)}
-                src={imagePrettyUrl(logo_url, 120, 50)}
+                src={imagePrettyUrl(logUrlObject.filename, 120, 50)}
               />
             </a>
           </div>

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

@@ -108,8 +108,11 @@ const WageringCalculator = ({
 
           {!!result && (
             <div className={styles.resultContainer}>
-              <span>{translate(translations, 'wagecalc_result', 'Result')}</span>
-              <span>{result}</span>
+              <span>{translate(translations, 'wagecalc_result', 'Results:')}</span>
+              <span>
+                {translate(translations, 'wagecalc_result_currency', '€')}
+                {result}
+              </span>
             </div>
           )}
         </form>

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

@@ -7,7 +7,6 @@
   border-radius: 1.2rem;
   box-shadow: 0px -3px 14px rgba(0, 0, 0, 0.09);
   background-color: var(--color-4);
-  z-index: 1;
 
   @include min(tablet) {
     padding: 2.4rem;
@@ -19,7 +18,7 @@
     gap: 1rem;
     @include flex-direction(column);
     svg {
-      margin-left: 1.2rem;
+      margin-left: 3.5rem;
       height: 2.67rem;
       width: 2.67rem;
       vertical-align: text-bottom;
@@ -36,6 +35,20 @@
       display: grid;
       grid-template-columns: 1fr 1fr;
       gap: 1rem;
+      column-gap: 4.8rem;
+    }
+
+    > div:nth-child(5) {
+      position: relative;
+      &:after {
+        @include arrow(var(--primary-text-color), 1rem, down, false);
+        position: absolute;
+        right: 2rem;
+        top: 40%;
+        @include min(tablet) {
+          top: 65%;
+        }
+      }
     }
   }
 }
@@ -46,11 +59,10 @@
 }
 
 .info {
-  height: 100vh;
+  height: 100%;
   position: absolute;
   top: 0;
   left: 0;
-  z-index: 3;
   background: white;
   padding: 2.4rem;
   svg {
@@ -83,16 +95,21 @@
 .mainTitle,
 .infoTitle {
   margin-top: 0;
-  margin-bottom: 2.4rem;
+  margin-bottom: 3.2rem;
   width: 100%;
 }
 
+.mainTitle {
+  margin-bottom: 1.4rem;
+  @include min(tablet) {
+    margin-bottom: 3.2rem;
+  }
+}
+
 .label {
   line-height: 2.6rem;
   font-size: 1.6rem;
-  @include min(tablet) {
-    margin-top: 1.6rem;
-  }
+  margin-bottom: 0.8rem;
 }
 
 .input,
@@ -101,6 +118,15 @@
   height: 4.8rem;
   background: #f8f7f5;
   border-radius: 4px;
+  border: 0px;
+  outline: 0px;
+}
+
+.select {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  padding-right: 1rem;
+  position: relative;
 }
 
 .input:invalid:required {
@@ -116,7 +142,7 @@
 .resultContainer {
   position: relative;
   order: 11;
-  margin-top: 3.2rem;
+  margin-top: 2.2rem;
   width: 100%;
   @include flex-align(center, space-between);
   padding: 1.6rem;
@@ -127,11 +153,8 @@
   flex-direction: column;
   gap: 1rem;
   grid-column: 1/3;
-
-  @include min(tablet) {
-    flex-direction: row;
-    gap: 0;
-  }
+  flex-direction: row;
+  gap: 0;
 
   &:before {
     content: '';
@@ -164,7 +187,12 @@
 
 .reccommendedCasinos {
   > h3 {
-    margin-top: 1rem;
+    margin-top: 2.4rem;
+    margin-bottom: 1.6rem;
+
+    @include min(tablet) {
+      margin-top: 3.2rem;
+    }
   }
 
   > div {
@@ -172,19 +200,45 @@
     background: #f1efec;
     border-radius: 1.6rem;
     @include flex-align(center, space-between);
-    padding: 1.6rem;
+    padding: 0.8rem;
     gap: 1rem;
+    @include min(tablet) {
+      padding: 1.6rem;
+    }
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+
+    a:first-child {
+      height: 6.4rem;
+      width: 6.4rem;
+      flex-grow: 1;
+      @include min(tablet) {
+        flex-grow: inherit;
+      }
+    }
 
     img {
       border-radius: 0.8rem;
+      height: 100%;
+    }
+
+    a:last-child {
+      padding: 0.8rem 1.3rem;
+      @include min(tablet) {
+        padding: 0.9rem 3rem;
+      }
     }
 
     > div {
-      flex-grow: 1;
+      flex-grow: inherit;
       @include flex-align(flex-start, center);
       @include flex-direction(column);
-
+      flex-basis: 39%;
       @include min(tablet) {
+        flex-basis: auto;
+        flex-grow: 1;
         @include flex-align(center, flex-start);
         @include flex-direction(row);
       }

package/storybook/public/iframe.html

@@ -345,4 +345,4 @@
           
       
           
-            window['STORIES'] = [{"titlePrefix":"","directory":"./src","files":"**/**/**/*.stories.js","importPathMatcher":"^\\.[\\\\/](?:src(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.stories\\.js)$"},{"titlePrefix":"","directory":"./src","files":"**/**/**/**/*.stories.js","importPathMatcher":"^\\.[\\\\/](?:src(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.stories\\.js)$"},{"titlePrefix":"","directory":"./src","files":"**/**/**/**/**/*.stories.js","importPathMatcher":"^\\.[\\\\/](?:src(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.stories\\.js)$"}];</script><script src="runtime~main.349b6fb9.iframe.bundle.js"></script><script src="134.8ffd6917.iframe.bundle.js"></script><script src="main.0c963906.iframe.bundle.js"></script></body></html>
+            window['STORIES'] = [{"titlePrefix":"","directory":"./src","files":"**/**/**/*.stories.js","importPathMatcher":"^\\.[\\\\/](?:src(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.stories\\.js)$"},{"titlePrefix":"","directory":"./src","files":"**/**/**/**/*.stories.js","importPathMatcher":"^\\.[\\\\/](?:src(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.stories\\.js)$"},{"titlePrefix":"","directory":"./src","files":"**/**/**/**/**/*.stories.js","importPathMatcher":"^\\.[\\\\/](?:src(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.stories\\.js)$"}];</script><script src="runtime~main.349b6fb9.iframe.bundle.js"></script><script src="134.8ffd6917.iframe.bundle.js"></script><script src="main.391cddf6.iframe.bundle.js"></script></body></html>