Merge pull request #4109 from hirentimbadiya/timbadiyahiren

Changed heading gradient when hovered : Issue 4099
layer5io · May 6, 2023 · a10d3f5 · a10d3f5
2 parents 0726cf4 + 40b09cb
commit a10d3f5
Show file tree

Hide file tree

Showing 6 changed files with 20 additions and 14 deletions.
diff --git a/src/sections/Meshmap/FeaturesSection/Collaborate/CollaboratorFeatures.js b/src/sections/Meshmap/FeaturesSection/Collaborate/CollaboratorFeatures.js
@@ -32,7 +32,7 @@ export default function CollaboratorFeatures({ features }) {
             <div id="featureHeading" className="fixed" onMouseEnter={handleEnter} onMouseLeave={handleLeave}>
               <h1>Collaborate</h1>
               <div className="learn-more">
-                <h5 style={{ color: "#ececec" }}>Learn more</h5>
+                <h5 style={cursorOverArrow ? { color: "#ffffff" } : { color: "#ececec" }}>Learn more</h5>
                 <img src={cursorOverArrow ? LinkArrow : LinkArrowDark} alt="Learn more" style={{ maxWidth: "15%" }} className={cursorOverArrow ? "arrow-enter" : "arrow"} />
               </div>
             </div>

diff --git a/src/sections/Meshmap/FeaturesSection/Collaborate/CollaboratorFeatures.style.js b/src/sections/Meshmap/FeaturesSection/Collaborate/CollaboratorFeatures.style.js
@@ -73,8 +73,7 @@ const CollaboratorFeaturesWrapper = styled.section`
       font-weight: 600;
       padding-top: 1rem;
       padding-bottom: 1rem;
-      background: linear-gradient(123deg, #00b39f 60%, #00b39f 100%);
-
+      
       @media (max-width: 767px) {
         font-size: 1.75rem;
       }
@@ -153,7 +152,7 @@ const CollaboratorFeaturesWrapper = styled.section`
   .fixed {
     top: 6rem;
     font-weight: 300;
-    transition: 0.3s ease-in-out;
+    transition: all 250ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s;
     background: #00b39f;
     box-shadow: 0px 6px 5px 0px rgb(0 0 0 / 25%);
     & > h1 {
@@ -162,6 +161,9 @@ const CollaboratorFeaturesWrapper = styled.section`
     @media (max-width: 912px) {
       top: 5rem;
     }
+    &:hover{
+      background: #00d3a9;
+    }
   }
 
   #add-border {

diff --git a/src/sections/Meshmap/FeaturesSection/Design/DesignerFeatures.js b/src/sections/Meshmap/FeaturesSection/Design/DesignerFeatures.js
@@ -33,7 +33,7 @@ export default function DesignerFeatures({ features }) {
             <div id="featureHeading" className="fixed" onMouseEnter={handleEnter} onMouseLeave={handleLeave}>
               <h1>Design</h1>
               <div className="learn-more">
-                <h5 style={{ color: "#ececec" }}>Learn more</h5>
+                <h5 style={cursorOverArrow ? { color: "#ffffff" } : { color: "#ececec" }}>Learn more</h5>
                 <img src={cursorOverArrow ? LinkArrow : LinkArrowDark} alt="Learn more" style={{ maxWidth: "15%" }} className={cursorOverArrow ? "arrow-enter" : "arrow"} />
               </div>
             </div>

diff --git a/src/sections/Meshmap/FeaturesSection/Design/DesignerFeatures.style.js b/src/sections/Meshmap/FeaturesSection/Design/DesignerFeatures.style.js
@@ -72,11 +72,10 @@ margin-top: 1rem;
       font-weight: 600;
       padding-top: 1rem;
       padding-bottom: 1rem;
-      background: linear-gradient(123deg, #00b39f 60%, #00b39f 100%);
-
+  
       @media (max-width: 767px) {
-      font-size: 1.75rem;
-    }
+        font-size: 1.75rem;
+      }
     }
   }
 
@@ -151,7 +150,7 @@ margin-top: 1rem;
   .fixed {
     top: 6rem;
     font-weight: 300;
-    transition: .4s ease-in-out;
+    transition: all 250ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s;
     background: #00b39f;
     box-shadow: 0px 6px 5px 0px rgb(0 0 0 / 25%);
     & > h1 {
@@ -160,6 +159,9 @@ margin-top: 1rem;
     @media (max-width: 912px) {
       top: 5rem;
     }
+    &:hover{
+      background: #00d3a9;
+    }
 }
 
 #add-border {

diff --git a/src/sections/Meshmap/FeaturesSection/Visualize/VisualizerFeatures.js b/src/sections/Meshmap/FeaturesSection/Visualize/VisualizerFeatures.js
@@ -34,7 +34,7 @@ export default function VisualizerFeatures({ features }) {
             <div id="featureHeading" className="fixed" onMouseEnter={handleEnter} onMouseLeave={handleLeave}>
               <h1>Visualize</h1>
               <div className="learn-more">
-                <h5 style={{ color: "#ececec" }}>Learn more</h5>
+                <h5 style={cursorOverArrow ? { color: "#ffffff" } : { color: "#ececec" }}>Learn more</h5>
                 <img src={cursorOverArrow ? LinkArrow : LinkArrowDark} alt="Learn more" style={{ maxWidth: "15%" }} className={cursorOverArrow ? "arrow-enter" : "arrow"} />
               </div>
             </div>

diff --git a/src/sections/Meshmap/FeaturesSection/Visualize/VisualizerFeatures.style.js b/src/sections/Meshmap/FeaturesSection/Visualize/VisualizerFeatures.style.js
@@ -75,8 +75,7 @@ const VisualizerFeaturesWrapper = styled.section`
       font-weight: 600;
       padding-top: 1rem;
       padding-bottom: 1rem;
-      background: linear-gradient(123deg, #00b39f 60%, #00b39f 100%);
-
+    
       @media (max-width: 767px) {
         font-size: 1.75rem;
       }
@@ -154,7 +153,7 @@ const VisualizerFeaturesWrapper = styled.section`
   .fixed {
     top: 6rem;
     font-weight: 300;
-    transition: 0.3s ease-in-out;
+    transition: all 500ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s;
     background: #00b39f;
     box-shadow: 0px 6px 5px 0px rgb(0 0 0 / 25%);
     & > h1 {
@@ -163,6 +162,9 @@ const VisualizerFeaturesWrapper = styled.section`
     @media (max-width: 912px) {
       top: 5rem;
     }
+    &:hover{
+      background: #00d3a9;
+    }
   }
   #add-border {
     border-color: #00b39f;