Skip to content

Commit 5db029f

Browse files
saurabhraghuvanshiisaurabhraghuvanshii
authored
Merge pull request #7083 from kishore08-07/hover-effect
Enhanced hover effects for featureHeading on Kanvas page
2 parents ed8c6cb + 0d39454 commit 5db029f

File tree

6 files changed

+108
-91
lines changed

6 files changed

+108
-91
lines changed

‎src/sections/Kanvas/FeaturesSection/Collaborate/CollaboratorFeatures.js‎

Lines changed: 24 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -36,35 +36,33 @@ export default function CollaboratorFeatures({ features }) {
3636
<img src={cursorOverArrow ? LinkArrow : LinkArrowDark} alt="Learn more" style={{ maxWidth: "15%" }} className={cursorOverArrow ? "arrow-enter" : "arrow"} />
3737
</div>
3838
</div>
39-
</Link>
40-
<div className="g-grid-container contentContainer" id="add-border">
41-
<Link to="/cloud-native-management/kanvas/collaborate">
39+
<div className="g-grid-container contentContainer" id="add-border">
4240
<div className="diagram scroll hideInMobile">
4341
<CollaboratorFeaturesDiagram activeExampleIndex={activeExampleIndex} />
4442
</div>
45-
</Link>
46-
<ul className="features collaborator-features">
47-
{features.map((feature, index) => (
48-
<li className="collaborator-feature-slide" key={index}>
49-
<Feature
50-
{...feature}
51-
onInViewStatusChanged={(state) => {
52-
const newStatusArray = [...viewportStatus];
53-
newStatusArray[index] = state;
54-
setViewportStatus(newStatusArray);
55-
// Calculate the first element in focus, set that as
56-
// our new activeExampleIndex. If it's been updated
57-
// notify the subscriber.
58-
const newExampleIndex = newStatusArray.lastIndexOf(true);
59-
if (activeExampleIndex !== newExampleIndex && newExampleIndex !== -1) {
60-
setActiveExampleIndex(newExampleIndex);
61-
}
62-
}}
63-
/>
64-
</li>
65-
))}
66-
</ul>
67-
</div>
43+
<ul className="features collaborator-features">
44+
{features.map((feature, index) => (
45+
<li className="collaborator-feature-slide" key={index}>
46+
<Feature
47+
{...feature}
48+
onInViewStatusChanged={(state) => {
49+
const newStatusArray = [...viewportStatus];
50+
newStatusArray[index] = state;
51+
setViewportStatus(newStatusArray);
52+
// Calculate the first element in focus, set that as
53+
// our new activeExampleIndex. If it's been updated
54+
// notify the subscriber.
55+
const newExampleIndex = newStatusArray.lastIndexOf(true);
56+
if (activeExampleIndex !== newExampleIndex && newExampleIndex !== -1) {
57+
setActiveExampleIndex(newExampleIndex);
58+
}
59+
}}
60+
/>
61+
</li>
62+
))}
63+
</ul>
64+
</div>
65+
</Link>
6866
</div>
6967
</Container>
7068
</CollaboratorFeaturesWrapper>

‎src/sections/Kanvas/FeaturesSection/Collaborate/CollaboratorFeatures.style.js‎

Lines changed: 12 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -149,6 +149,17 @@ const CollaboratorFeaturesWrapper = styled.section`
149149
}
150150
}
151151
152+
.collaborator-trigger-container {
153+
&:hover {
154+
.fixed {
155+
background: #EBC017;
156+
}
157+
#add-border {
158+
border-color: #EBC017;
159+
}
160+
}
161+
}
162+
152163
.fixed {
153164
top: 6rem;
154165
font-weight: 300;
@@ -161,17 +172,14 @@ const CollaboratorFeaturesWrapper = styled.section`
161172
@media (max-width: 912px) {
162173
top: 5rem;
163174
}
164-
&:hover{
165-
background: #EBC017;
166-
}
167175
}
168176
169177
#add-border {
170178
border-color: #00b39f;
171179
border-style: solid;
172180
border-width: 0px 2px 2px 2px;
173181
box-shadow: 0px 6px 5px 0px rgb(0 0 0 / 25%);
174-
transition: ease-in-out;
182+
transition: all 250ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s;
175183
}
176184
177185
.hideInMobile{

‎src/sections/Kanvas/FeaturesSection/Design/DesignerFeatures.js‎

Lines changed: 24 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -37,35 +37,33 @@ export default function DesignerFeatures({ features }) {
3737
<img src={cursorOverArrow ? LinkArrow : LinkArrowDark} alt="Learn more" style={{ maxWidth: "15%" }} className={cursorOverArrow ? "arrow-enter" : "arrow"} />
3838
</div>
3939
</div>
40-
</Link>
41-
<div className="g-grid-container contentContainer" id="add-border" >
42-
<Link to="/cloud-native-management/kanvas/design">
40+
<div className="g-grid-container contentContainer" id="add-border" >
4341
<div className="diagram scroll hideInMobile">
4442
<DesignerFeaturesDiagram activeExampleIndex={activeExampleIndex} />
4543
</div>
46-
</Link>
47-
<ul className="features design-features">
48-
{features.map((feature, index) => (
49-
<li className="design-feature-slide" key={index}>
50-
<Feature
51-
{...feature}
52-
onInViewStatusChanged={(state) => {
53-
const newStatusArray = [...viewportStatus];
54-
newStatusArray[index] = state;
55-
setViewportStatus(newStatusArray);
56-
// Calculate the first element in focus, set that as
57-
// our new activeExampleIndex. If it's been updated
58-
// notify the subscriber.
59-
const newExampleIndex = newStatusArray.lastIndexOf(true);
60-
if (activeExampleIndex !== newExampleIndex && newExampleIndex !== -1) {
61-
setActiveExampleIndex(newExampleIndex);
62-
}
63-
}}
64-
/>
65-
</li>
66-
))}
67-
</ul>
68-
</div>
44+
<ul className="features design-features">
45+
{features.map((feature, index) => (
46+
<li className="design-feature-slide" key={index}>
47+
<Feature
48+
{...feature}
49+
onInViewStatusChanged={(state) => {
50+
const newStatusArray = [...viewportStatus];
51+
newStatusArray[index] = state;
52+
setViewportStatus(newStatusArray);
53+
// Calculate the first element in focus, set that as
54+
// our new activeExampleIndex. If it's been updated
55+
// notify the subscriber.
56+
const newExampleIndex = newStatusArray.lastIndexOf(true);
57+
if (activeExampleIndex !== newExampleIndex && newExampleIndex !== -1) {
58+
setActiveExampleIndex(newExampleIndex);
59+
}
60+
}}
61+
/>
62+
</li>
63+
))}
64+
</ul>
65+
</div>
66+
</Link>
6967
</div>
7068
</Container>
7169
</DesignerFeaturesWrapper>

‎src/sections/Kanvas/FeaturesSection/Design/DesignerFeatures.style.js‎

Lines changed: 12 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -152,6 +152,17 @@ margin-top: 1rem;
152152
}
153153
}
154154
155+
.design-trigger-container {
156+
&:hover {
157+
.fixed {
158+
background: #EBC017;
159+
}
160+
#add-border {
161+
border-color: #EBC017;
162+
}
163+
}
164+
}
165+
155166
.fixed {
156167
top: 6rem;
157168
font-weight: 300;
@@ -164,17 +175,14 @@ margin-top: 1rem;
164175
@media (max-width: 912px) {
165176
top: 5rem;
166177
}
167-
&:hover{
168-
background: #EBC017;
169-
}
170178
}
171179
172180
#add-border {
173181
border-color: #00b39f;
174182
border-style: solid;
175183
border-width: 0px 2px 2px 2px;
176184
box-shadow: 0px 6px 5px 0px rgb(0 0 0 / 25%);
177-
transition: .4s ease-in-out;
185+
transition: all 250ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s;
178186
}
179187
.hideInMobile{
180188
@media (max-width: 799px) {

‎src/sections/Kanvas/FeaturesSection/Visualize/VisualizerFeatures.js‎

Lines changed: 24 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -38,36 +38,33 @@ export default function VisualizerFeatures({ features }) {
3838
<img src={cursorOverArrow ? LinkArrow : LinkArrowDark} alt="Learn more" style={{ maxWidth: "15%" }} className={cursorOverArrow ? "arrow-enter" : "arrow"} />
3939
</div>
4040
</div>
41-
</Link>
42-
<div className="g-grid-container contentContainer" id="add-border">
43-
<Link to="/cloud-native-management/kanvas/operate">
41+
<div className="g-grid-container contentContainer" id="add-border">
4442
<div className="diagram scroll hideInMobile">
4543
<VisualizerFeaturesDiagram activeExampleIndex={activeExampleIndex} />
4644
</div>
47-
</Link>
48-
<ul className="visualizer-features">
49-
{features.map((feature, index) => (
50-
<li className="visualizer-feature-slide" key={index}>
51-
<Feature
52-
{...feature}
53-
onInViewStatusChanged={(state) => {
54-
const newStatusArray = [...viewportStatus];
55-
newStatusArray[index] = state;
56-
setViewportStatus(newStatusArray);
57-
// Calculate the first element in focus, set that as
58-
// our new activeExampleIndex. If it's been updated
59-
// notify the subscriber.
60-
const newExampleIndex = newStatusArray.lastIndexOf(true);
61-
if (activeExampleIndex !== newExampleIndex && newExampleIndex !== -1) {
62-
setActiveExampleIndex(newExampleIndex);
63-
}
64-
}}
65-
/>
66-
</li>
67-
))}
68-
</ul>
69-
70-
</div>
45+
<ul className="visualizer-features">
46+
{features.map((feature, index) => (
47+
<li className="visualizer-feature-slide" key={index}>
48+
<Feature
49+
{...feature}
50+
onInViewStatusChanged={(state) => {
51+
const newStatusArray = [...viewportStatus];
52+
newStatusArray[index] = state;
53+
setViewportStatus(newStatusArray);
54+
// Calculate the first element in focus, set that as
55+
// our new activeExampleIndex. If it's been updated
56+
// notify the subscriber.
57+
const newExampleIndex = newStatusArray.lastIndexOf(true);
58+
if (activeExampleIndex !== newExampleIndex && newExampleIndex !== -1) {
59+
setActiveExampleIndex(newExampleIndex);
60+
}
61+
}}
62+
/>
63+
</li>
64+
))}
65+
</ul>
66+
</div>
67+
</Link>
7168
</div>
7269
</Container>
7370
</VisualizerFeaturesWrapper>

‎src/sections/Kanvas/FeaturesSection/Visualize/VisualizerFeatures.style.js‎

Lines changed: 12 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -150,6 +150,17 @@ const VisualizerFeaturesWrapper = styled.section`
150150
}
151151
}
152152
153+
.visualizer-trigger-container {
154+
&:hover {
155+
.fixed {
156+
background: #EBC017;
157+
}
158+
#add-border {
159+
border-color: #EBC017;
160+
}
161+
}
162+
}
163+
153164
.fixed {
154165
top: 6rem;
155166
font-weight: 300;
@@ -162,16 +173,13 @@ const VisualizerFeaturesWrapper = styled.section`
162173
@media (max-width: 912px) {
163174
top: 5rem;
164175
}
165-
&:hover{
166-
background: #EBC017;
167-
}
168176
}
169177
#add-border {
170178
border-color: #00b39f;
171179
border-style: solid;
172180
border-width: 0px 2px 2px 2px;
173181
box-shadow: 0px 6px 5px 0px rgb(0 0 0 / 25%);
174-
transition: ease-in-out;
182+
transition: all 500ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s;
175183
}
176184
.hideInMobile{
177185
@media (max-width: 799px) {

0 commit comments

Comments
 (0)