gatsby-matrix-theme 25.1.6 → 25.1.7

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+## [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.7",
   "main": "index.js",
   "description": "Matrix Theme NPM Package",
   "author": "",

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

@@ -19,7 +19,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 +36,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%;
+        }
+      }
     }
   }
 }
@@ -83,16 +97,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 +120,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 +144,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 +155,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 +189,12 @@
 
 .reccommendedCasinos {
   > h3 {
-    margin-top: 1rem;
+    margin-top: 2.4rem;
+    margin-bottom: 1.6rem;
+    
+    @include min(tablet) {
+      margin-top: 3.2rem;
+    }
   }
 
   > div {
@@ -172,19 +202,44 @@
     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;
+
+    }
 
     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.f03d4a3e.iframe.bundle.js"></script></body></html>