gatsby-matrix-theme 48.0.5 → 48.0.7

package/CHANGELOG.md

@@ -1,3 +1,25 @@
+## [48.0.7](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v48.0.6...v48.0.7) (2024-07-25)
+
+
+### Bug Fixes
+
+* updated operator details + theme version ([2d9e752](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/2d9e7521fd6d6b504fce6f69ddb3488998342c03))
+
+## [48.0.6](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v48.0.5...v48.0.6) (2024-07-22)
+
+
+### Bug Fixes
+
+* change to env demo ([c6c0f9c](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/c6c0f9ce3d22fe97cf0bf977b27c79a3560a70ea))
+
+
+### Code Refactoring
+
+* changes to horse calc iphone select/tooltip issue ([8b4e7c6](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/8b4e7c6a77f433c0beb4395c2847587507c45b0e))
+
+
+* Merge branch 'tm-4544-horse-calculator' into 'master' ([f74e490](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/f74e49009d7c54017ad639642125559a189eefcc))
+
 ## [48.0.5](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v48.0.4...v48.0.5) (2024-07-19)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gatsby-matrix-theme",
-  "version": "48.0.5",
+  "version": "48.0.7",
   "main": "index.js",
   "description": "Matrix Theme NPM Package",
   "author": "",
@@ -25,7 +25,7 @@
   "dependencies": {
     "@react-icons/all-files": "^4.1.0",
     "gatsby": "^5.11.0",
-    "gatsby-core-theme": "35.0.3",
+    "gatsby-core-theme": "35.0.5",
     "gatsby-plugin-sharp": "^5.11.0",
     "gatsby-transformer-sharp": "^5.11.0",
     "prop-types": "15.7.2",

package/src/components/atoms/select/index.js

@@ -17,13 +17,14 @@ export default function Select({
   index,
   tooltip = null,
   tooltipMinWidth = 10,
+  customClass = null,
 }) {
   if (!label) {
     return (
       <div
-        className={`${styles?.dropdownStyling || ''} ${
-          tooltip ? styles.tooltip || '' : styles.fullWidth || ''
-        }`}
+        className={`${styles?.dropdownStyling || ''} ${styles.noLabel || ''} ${
+          customClass ? customClass || '' : ''
+        } ${tooltip ? styles.tooltip || '' : styles.fullWidth || ''}`}
       >
         <select ref={refObj} onChange={(e) => onChangeFunc(e, index)} id={id}>
           {options.map((option) => option)}
@@ -38,9 +39,9 @@ export default function Select({
   }
 
   return (
-    <label htmlFor={id}>
-      <div>
-        {useTranslate(id, label)}
+    <div className={`${styles.selectContainer || ''} ${customClass ? customClass || '' : ''}`}>
+      <div className={styles.labelContainer || ''}>
+        <label htmlFor={id}>{useTranslate(id, label)}</label>
         {tooltip && (
           <Tooltip content={useTranslate(`${id}_tooltip`, tooltip)} minWidth={tooltipMinWidth}>
             <BsQuestionCircle size="2.6rem" title="Question Icon" />
@@ -56,7 +57,7 @@ export default function Select({
           {options.map((option) => option)}
         </select>
       </div>
-    </label>
+    </div>
   );
 }
 
@@ -69,4 +70,5 @@ Select.propTypes = {
   index: PropTypes.number,
   tooltip: PropTypes.string,
   tooltipMinWidth: PropTypes.number,
+  customClass: PropTypes.string,
 };

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

@@ -135,31 +135,6 @@
   gap: 1.6rem;
   @include flex-direction(column);
   > label {
-    > div {
-      color: #1b1b1c;
-      font-size: 1.6rem;
-      font-style: normal;
-      font-weight: 600;
-      line-height: 2.4rem;
-      text-transform: capitalize;
-      @include flex-direction(row);
-      @include flex-align(center, start);
-      gap: 0.8rem;
-      > div {
-        width: 2rem;
-        height: 2rem;
-        svg {
-          width: 2rem;
-          height: 2rem;
-          fill: #50657a;
-        }
-      }
-      &::after {
-        right: 1.6rem;
-        left: auto;
-        pointer-events: none;
-      }
-    }
   }
   select {
     width: 100%;
@@ -181,16 +156,45 @@
     display: grid;
     grid-template-columns: repeat(3, 1fr);
   }
+}
 
-  > label {
-    @include flex-direction(column);
-    flex-basis: 50%;
-    gap: 1rem;
-    font-weight: 700;
-    font-size: 16px;
-    line-height: 23px;
+.selectesSelect {
+  @include flex-direction(column);
+  flex-basis: 50%;
+  gap: 1rem;
+  font-weight: 700;
+  font-size: 16px;
+  line-height: 23px;
+
+  > div {
+    color: #1b1b1c;
+    font-size: 1.6rem;
+    font-style: normal;
+    font-weight: 600;
+    line-height: 2.4rem;
+    text-transform: capitalize;
+    @include flex-direction(row);
+    @include flex-align(center, start);
+    gap: 0.8rem;
+
+    > div {
+      width: 2rem;
+      height: 2rem;
+      svg {
+        width: 2rem;
+        height: 2rem;
+        fill: #50657a;
+      }
+    }
+
+    &::after {
+      right: 1.6rem;
+      left: auto;
+      pointer-events: none;
+    }
   }
 }
+
 .stakeType {
   border-radius: 8px;
   background: #fbfaf9;
@@ -202,6 +206,8 @@
     display: grid;
     grid-template-columns: repeat(2, 1fr);
   }
+
+  .stakeTypeSelect,
   label {
     color: #1b1b1c;
     font-size: 16px;
@@ -209,10 +215,12 @@
     font-weight: 600;
     line-height: 24px;
     text-transform: capitalize;
+    @include flex-direction(column);
+    gap: 0.8rem;
+
     > div {
       select,
       input {
-        margin-top: 0.8rem;
         border-radius: 8px;
         border: 1px solid #b0d0d0;
         background: #fff;

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

@@ -272,6 +272,7 @@ const HorseCalculator = ({ mainTitle = 'Bet Calculator', tooltipMinWidth = 20 })
                 ))}
                 refObj={betTypeRef}
                 tooltipMinWidth={tooltipMinWidth}
+                customClass={styles.selectesSelect}
               />
 
               <Select
@@ -286,6 +287,7 @@ const HorseCalculator = ({ mainTitle = 'Bet Calculator', tooltipMinWidth = 20 })
                   </option>,
                 ]}
                 tooltipMinWidth={tooltipMinWidth}
+                customClass={styles.selectesSelect}
               />
 
               {eachWay === 'Yes' && activeBetType.multiple_options && (
@@ -309,6 +311,7 @@ const HorseCalculator = ({ mainTitle = 'Bet Calculator', tooltipMinWidth = 20 })
                     </option>,
                   ]}
                   tooltipMinWidth={tooltipMinWidth}
+                  customClass={styles.selectesSelect}
                 />
               )}
 
@@ -323,6 +326,7 @@ const HorseCalculator = ({ mainTitle = 'Bet Calculator', tooltipMinWidth = 20 })
                   ))}
                   refObj={numSelectionRef}
                   tooltipMinWidth={tooltipMinWidth}
+                  customClass={styles.selectesSelect}
                 />
               )}
 
@@ -338,6 +342,7 @@ const HorseCalculator = ({ mainTitle = 'Bet Calculator', tooltipMinWidth = 20 })
                   </option>,
                 ]}
                 tooltipMinWidth={tooltipMinWidth}
+                customClass={styles.selectesSelect}
               />
             </div>
             <div className={styles.stakeType}>
@@ -354,6 +359,7 @@ const HorseCalculator = ({ mainTitle = 'Bet Calculator', tooltipMinWidth = 20 })
                   </option>,
                 ]}
                 tooltipMinWidth={tooltipMinWidth}
+                customClass={styles.stakeTypeSelect}
               />
               {!(activeBetType.name === 'Accumulator' && foldOption === '2') && (
                 <label htmlFor="stake">
@@ -402,6 +408,7 @@ const HorseCalculator = ({ mainTitle = 'Bet Calculator', tooltipMinWidth = 20 })
                           ))}
                           index={index}
                           tooltipMinWidth={tooltipMinWidth}
+                          customClass={styles.overflowTableSelect}
                         />
                       </td>
                       <td
@@ -438,6 +445,7 @@ const HorseCalculator = ({ mainTitle = 'Bet Calculator', tooltipMinWidth = 20 })
                               <option value={option}>{option}</option>
                             ))}
                             tooltipMinWidth={tooltipMinWidth}
+                            customClass={styles.overflowTableSelect}
                           />
                         </td>
                       )}
@@ -450,6 +458,7 @@ const HorseCalculator = ({ mainTitle = 'Bet Calculator', tooltipMinWidth = 20 })
                               <option value={option}>{option}</option>
                             ))}
                             tooltipMinWidth={tooltipMinWidth}
+                            customClass={styles.overflowTableSelect}
                           />
                         </td>
                       )}
@@ -473,6 +482,7 @@ const HorseCalculator = ({ mainTitle = 'Bet Calculator', tooltipMinWidth = 20 })
                                   <option value={i + 1}>{i + 1}</option>
                                 ))}
                                 tooltipMinWidth={tooltipMinWidth}
+                                customClass={styles.overflowTableSelect}
                               />
                               <Select
                                 id="deadheatrunners"
@@ -482,6 +492,7 @@ const HorseCalculator = ({ mainTitle = 'Bet Calculator', tooltipMinWidth = 20 })
                                   <option value={i + 1}>{i + 1}</option>
                                 ))}
                                 tooltipMinWidth={tooltipMinWidth}
+                                customClass={styles.overflowTableSelect}
                               />
                               <Select
                                 id="placesoffered"
@@ -491,6 +502,7 @@ const HorseCalculator = ({ mainTitle = 'Bet Calculator', tooltipMinWidth = 20 })
                                   <option value={i + 1}>{i + 1}</option>
                                 ))}
                                 tooltipMinWidth={tooltipMinWidth}
+                                customClass={styles.overflowTableSelect}
                               />
                             </div>
                           </td>

package/src/components/molecules/operator-details/index.js

@@ -5,6 +5,7 @@ import LazyImage from 'gatsby-core-theme/src/hooks/lazy-image';
 import Link from 'gatsby-core-theme/src/hooks/link';
 import { imagePrettyUrl, getAltText } from 'gatsby-core-theme/src/helpers/getters';
 import StarRating from 'gatsby-core-theme/src/components/molecules/star-rating/one-star';
+import MultiStarRating from 'gatsby-core-theme/src/components/molecules/star-rating/';
 import ReviewLink from 'gatsby-core-theme/src/components/atoms/review-link';
 import useTranslate from '~hooks/useTranslate/useTranslate';
 import Author from '../../atoms/author/template-one';
@@ -24,7 +25,7 @@ const OperatorDetails = ({
   showAuthorAsLink = true,
   showRibbon = false,
   contentRibbon = false,
-  useOneStarRating = true,
+  useOneStarRating = false,
   showRatingLabel = false,
   showRatingDecimal = false,
   authorTemplateTwo = false,
@@ -128,15 +129,24 @@ const OperatorDetails = ({
           ${(!useOneStarRating && styles.starRatings) || ''}
           ${(showRatingLabel && useOneStarRating && styles.ratinglabel) || ''}`}
           >
-            {showRating && (
-              <StarRating
-                numOfStars={5}
-                rating={rating}
-                showLabel={showRatingLabel}
-                showDecimal={showRatingDecimal}
-                showRoundedRating={showRoundedRating}
-              />
-            )}
+            {showRating &&
+              (useOneStarRating ? (
+                <StarRating
+                  numOfStars={5}
+                  rating={rating}
+                  showLabel={showRatingLabel}
+                  showDecimal={showRatingDecimal}
+                  showRoundedRating={showRoundedRating}
+                />
+              ) : (
+                <MultiStarRating
+                  numOfStars={5}
+                  rating={rating}
+                  showLabel={showRatingLabel}
+                  showDecimal={showRatingDecimal}
+                  showRoundedRating={showRoundedRating}
+                />
+              ))}
             {showAuthor && (
               <Author
                 label={useTranslate('byAuthor', 'By')}