gatsby-core-theme 44.4.43 → 44.4.44

package/CHANGELOG.md

@@ -1,3 +1,12 @@
+## [44.4.44](https://gitlab.com/g2m-gentoo/team-floyd/themes/gatsby-themes/compare/v44.4.43...v44.4.44) (2025-08-29)
+
+
+### Bug Fixes
+
+* bug ([47ff70b](https://gitlab.com/g2m-gentoo/team-floyd/themes/gatsby-themes/commit/47ff70b136bbcbd7efe441637dbd28d5ff0a3818))
+* bug ([2c76971](https://gitlab.com/g2m-gentoo/team-floyd/themes/gatsby-themes/commit/2c76971d6dca396f1c793786e9907d84f7b8fc15))
+* styling fixes ([da45e7d](https://gitlab.com/g2m-gentoo/team-floyd/themes/gatsby-themes/commit/da45e7d745c79953f5f2d830d0c7c86c8a72f4a6))
+
 ## [44.4.43](https://gitlab.com/g2m-gentoo/team-floyd/themes/gatsby-themes/compare/v44.4.42...v44.4.43) (2025-08-29)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gatsby-core-theme",
-  "version": "44.4.43",
+  "version": "44.4.44",
   "description": "Gatsby Theme NPM Package",
   "author": "",
   "license": "ISC",

package/src/components/molecules/comment/comment.module.scss

@@ -3,27 +3,17 @@
 
     gap: 1.6rem;
     position: relative;
+    margin-bottom: 3.4rem;
 
-    ~ div .commentContainer::before{
-        border-left: .1rem solid #cfc7c0;
-        top: -13rem;
-        content: "";
-        height: 22rem;
-        position: absolute;
-        right: 100%;
-        width: 2.9rem;
-        z-index: 0;
-    }
-
-    + div .commentContainer::before{
-        height: 12rem;
-        top: -5rem;
+    @include min(tablet){
+        margin-bottom: 0;
     }
 }
 
 .commentTopArea{
     @include flex-align(center, start);
 
+    flex-wrap: wrap;
     gap: .8rem;
 }
 
@@ -31,6 +21,7 @@
     font-size: 18px;
     font-weight: 600;
     line-height: 28px;
+    color: #1B1B1C;
 }
 
 .commentJobTitle{
@@ -44,6 +35,7 @@
 
     border-radius: 5rem;
     background: #CFC7C0;
+    color: #0F172A;
 }
 
 .commentDate{
@@ -61,19 +53,6 @@
     padding: 2.4rem;
 }
 
-.isReplyThread::before{
-    content: "";
-    position: absolute;
-    right: 100%;
-    border-left: .1rem solid #CFC7C0;
-    border-bottom: .1rem solid #CFC7C0;
-    border-bottom-left-radius: 2rem;
-    height: -webkit-fill-available;
-    width: 3rem;
-    bottom: 50%;
-    z-index: 0;
-}
-
 .commentActions{
     margin-left: auto;
 
@@ -81,10 +60,12 @@
 }
 
 .buttonGroup{
-    background: #CFC7C0;
+    background: #EAE5E0;
     font-size: 1.2rem;
-    padding: .8rem;
+    padding: .5rem .8rem;
+    height: 2.8rem;
     gap: .4rem;
+    color: #0F172A;
 
     @include flex-align(center, center);
 
@@ -113,7 +94,7 @@
     line-height: 1.8rem;
     text-transform: capitalize;
     margin-left: .8rem;
-    padding: 0.8rem 1.6rem;
+    padding: 0.2rem 1.6rem;
 }
 
 .replySection{

package/src/components/molecules/comment/index.js

@@ -76,6 +76,11 @@ const Comment = ({
             .catch((error) => reject(error?.response?.data?.errors?.join() || error.message));
         });
     }
+    const userVote = currentUserInteractions.current?.find(v => v.startsWith(`${comment.comment_id}:`))?.split(': ')[1];
+
+    const displayedLikes = userVote === 'vote_down' ? likes + 1 : likes;
+    const displayedDislikes = userVote === 'vote_down' ? dislikes + 1 : dislikes;
+
     
     return  <div className={`${styles.commentContainer} ${isReply ? styles.isReply : ''}`}>
                 <div className={styles.commentTopArea}>
@@ -101,7 +106,7 @@ const Comment = ({
                                 disabled={currentUserInteractions.current?.find(v => v.startsWith(`${comment.comment_id}:`))}
                                 >
                                 <LazyImage className={styles.buttonGroupIcon} src='/images/like.svg' />
-                                <span>{currentUserInteractions.current?.find(v => v.startsWith(`${comment.comment_id}:`))?.split(': ')[1] === 'vote_down' ? setLikes(likes+1) : likes}</span>
+                                <span>{displayedLikes}</span>
                             </button>
                             <button 
                                 onClick={async () => {
@@ -114,7 +119,7 @@ const Comment = ({
                                 disabled={currentUserInteractions.current?.find(v => v.startsWith(`${comment.comment_id}:`))}
                                 >
                                 <LazyImage className={styles.buttonGroupIcon} src='/images/dislike.svg' />
-                                <span>{currentUserInteractions.current?.find(v => v.startsWith(`${comment.comment_id}:`))?.split(': ')[1] === 'vote_down' ? setDislikes(dislikes+1) : dislikes}</span>
+                                <span>{displayedDislikes}</span>
                             </button>
                         </>
                     )}

package/src/components/molecules/leave-comment-form/index.js

@@ -82,6 +82,7 @@ const LeaveCommentForm = ({
             validationMessage={validationMessage}
             path={page?.path}
             buttonIcon={buttonIcon}
+            titleType='h3'
             customClass='commentForm'
         />
 };

package/src/components/organisms/anchor/template-one/anchor.module.scss

@@ -1,4 +1,4 @@
-@keyframes fadeIn {
+@keyframes fade-in {
   0% {
     opacity: 0;
   }
@@ -24,16 +24,17 @@
 
 .defaultConatiner {
   position: relative;
+
   @include flex-direction(row);
 }
 
 .anchor {
   max-width: var(--main-container-max);
+
   @include flex-direction(row);
 
   &::-webkit-scrollbar {
     height: 0.4rem;
-    // display: none;
   }
 
   &::-webkit-scrollbar-track {
@@ -49,23 +50,26 @@
 
 .stickyContainer {
   position: fixed;
-  z-index: 1;
-  animation: fadeIn 1s forwards;
+  z-index: 2;
+  animation: fade-in 1s forwards;
   width: 100%;
-  background-color: white;
-  box-shadow: 0px 8px 12px 0px;
+  background-color: #fff;
+  box-shadow: 0 8px 12px 0;
   left: 0;
   right: 0;
   top: var(--nav-height);
+
   @include flex-direction(row);
   @include flex-align(center, center);
+
   padding-bottom: 0.5rem;
-  .anchor{
 
+  .anchor{
   &::-webkit-scrollbar {
     display: none;
   }
   }
+
   &.usingExclOperator {
     top: calc(var(--nav-height) + var(--exc-operator-height));
   }
@@ -84,6 +88,7 @@
   line-height: 27px;
 
   @include flex-align(center, center);
+
   margin-right: 1.6rem;
   margin-bottom: 0.5rem;
   margin-top: 0.5rem;
@@ -95,7 +100,7 @@
   @include min(laptop) {
     &:hover {
       background-color: #272735;
-      color: #ffffff;
+      color: #fff;
     }
   }
 }
@@ -119,11 +124,14 @@
 .buttLeft,
 .buttRight {
   @include flex-align(center, center);
-  background-color: var(--body-background-color, white);
+
+  background-color: var(--body-background-color, #fff);
+
   @include flex-align(center, center);
+
   display: none;
   z-index: 1;
-  padding: 0rem 1rem;
+  padding: 0 1rem;
 
   @include custom-min(960) {
     display: flex;
@@ -133,7 +141,7 @@
     width: 3.2rem;
     height: 3.2rem;
     padding: 0.8rem;
-    color: #ffffff;
+    color: #fff;
     background-color: #262629;
     border-radius: 10rem;
   }

package/src/components/organisms/comments/comment-tree/comment-tree.module.scss

@@ -0,0 +1,47 @@
+.comment_0{
+    margin-left: 0;
+
+    >div>div{
+        z-index: 1;
+    }
+}
+
+.comment_1{
+    @include min(tablet){
+        margin-left: 5.6rem;
+    }
+
+    margin-left: 2.4rem;
+}
+
+.comment_2{
+    @include min(tablet){
+        margin-left: 11.2rem;
+    }
+
+    margin-left: 4rem;
+}
+
+.isReply{
+    position: relative;
+
+    &::before{
+        content: "";
+        position: absolute;
+        right: 100%;
+        border-left: .1rem solid #CFC7C0;
+        border-bottom: .1rem solid #CFC7C0;
+        border-bottom-left-radius: 2rem;
+        bottom: 50%;
+        height: calc(50% + 8.5rem);
+        width: 1.1rem;
+
+        @include min(tablet){
+            width: 3rem;
+        }
+    }
+
+    + .isReply::before{
+        height: calc(50% + 25.5rem);
+    }
+}

package/src/components/organisms/comments/comment-tree/index.js

@@ -4,8 +4,10 @@ import PropTypes, { arrayOf } from 'prop-types';
 import keygen from '~helpers/keygen';
 import Comment from "../../../molecules/comment";
 
+import styles from './comment-tree.module.scss';
+
 const CommentTree = React.memo(({ pageContext, comment, authors, depth = 0, cookieComments }) => 
-  <div key={keygen()} style={{ marginLeft: depth * 56 }}>
+  <div key={keygen()} className={`${styles?.[`comment_${depth}`]} ${depth > 0 && styles.isReply}`}>
     <Comment pageContext={pageContext} comment={comment} authors={authors} isReply={depth > 0} userInteractions={cookieComments} />
     {comment.replies?.map(reply => (
       <CommentTree 

package/src/components/organisms/form/fields/fields.module.scss

@@ -29,7 +29,7 @@
   @include flex-align(flex-end, flex-start);
 
   > span {
-    font-size: 1.4rem;
+    font-size: 1.2rem;
     font-weight: 400;
     line-height: 2.2rem;
   }
@@ -105,7 +105,7 @@
   cursor: pointer;
   width: 4.8rem;
   inset: 0;
-  background-color: #ccc;
+  background-color: #AFAFB0;
   transition: 0.4s;
   border-radius: 3.4rem;
   height: 2.4rem;
@@ -137,6 +137,9 @@ input:checked + .slider::before {
 
 .switchLabel{
   margin-left: 4.5rem;
+  font-size: 1.6rem;
+  font-weight: 400;
+  color: #3C3C40;
 }
 
 .errorMsg {

package/src/components/organisms/form/form.module.scss

@@ -228,58 +228,89 @@
   padding: 0;
   margin-top: 3.5rem;
 
+    input:not([type="range"]),
+    textarea,
+    select {
+      background: #fff !important;
+      font-size: 1.4rem;
+      line-height: 2.1rem;
+      padding: 1.6rem;
+      max-width: 100%;
+      outline: none;
+      border-radius: 0.8rem;
+      border: 1px solid #E2E8F0 !important;
+      color: #0F172A !important;
+    }
+
+
   > form{
+    display: flex;
+    grid-template-columns: 1fr 1fr;
+
+    @include min(tablet){
       display: grid;
-      grid-template-columns: 1fr 1fr;
+      gap: 1.6rem;
+    }
 
-      div > input ~ span, div > textarea ~ span{
-        display: none;
-      }
+    label{
+      font-size: 1.6rem;
+      font-weight: 600;
+      color: #262629;
+    }
 
-      input:user-invalid{
-        border: .15rem solid var(--comment-input-error, #DD4B39);
-      }
+    div > input ~ span, div > textarea ~ span{
+      display: none;
+    }
 
-      textarea:user-invalid{
-        border: .15rem solid var(--comment-input-error, #DD4B39);
-      }
+    input:user-invalid{
+      border: 1.5px solid var(--comment-input-error, #DD4B39) !important;
+    }
 
-      input:user-invalid ~ span{
-        display: block;
-      }
+    textarea:user-invalid{
+      border: 1.5px solid var(--comment-input-error, #DD4B39) !important;
+    }
 
-      textarea:user-invalid ~ span{
-        display: block;
-      }
+    input:user-invalid ~ span{
+      display: block;
+    }
 
-      textarea:not(:placeholder-shown):invalid ~ span{
-        display: block;     
-      }
+    textarea:user-invalid ~ span{
+      display: block;
+    }
 
-      input:not([type='checkbox'], :placeholder-shown):invalid ~ span{
-        display: block;     
-      }
+    textarea:not(:placeholder-shown):invalid ~ span{
+      display: block;     
+    }
 
-      input:not(:placeholder-shown):invalid, textarea:not(:placeholder-shown):invalid{
-        border: .15rem solid var(--comment-input-error, #DD4B39);
-      }
+    input:not([type='checkbox'], :placeholder-shown):invalid ~ span{
+      display: block;     
+    }
+
+    input:not(:placeholder-shown):invalid, textarea:not(:placeholder-shown):invalid{
+      border: 1.5px solid var(--comment-input-error, #DD4B39) !important;
+    }
+
+    > .formButton{
+      border: .2rem solid #161128;
+      padding: 8px 16px !important;
+      margin-left: auto;
+      border-radius: 5rem;
+      font-size: 1.4rem;
+      font-weight: 700;
+      background: transparent !important;
+      text-align: center !important;
+      line-height: 2.2rem;
+      text-transform: capitalize;
+      color: #161128 !important; 
+      height: 4rem !important;
+      grid-column: 1 / -1;
+      width: 100%;
+      margin-bottom: 3.4rem;
 
-      > .formButton{
-        border: .2rem solid #161128;
-        padding: 8px 16px !important;
+      @include min(tablet){
         width: auto !important;
-        margin-left: auto;
-        border-radius: 5rem;
-        font-size: 1.4rem;
-        font-weight: 700;
-        background: transparent !important;
-        text-align: center !important;
-        line-height: 2.2rem;
-        text-transform: capitalize;
-        color: #161128 !important; 
-        height: 4rem !important;
-        grid-column: 1 / -1;
       }
+    }
   }
 
   div:has(>input[type="checkbox"] ) {
@@ -288,6 +319,12 @@
     grid-template-columns: 1.3rem 1fr;
   }
 
+  input[type="checkbox"] + label{
+    font-size: 1.4rem;
+    font-weight: 400;
+    line-height: 2.2rem;
+  }
+
   .alertDanger, .alertSuccess, .alertWarning {
     background-color: var(--alert-error-bg, #FEE2E2);
     color: var(--alert-error-text, #09090B);