Skip to content

Commit cd097ff

Browse files
committed
Add animation to chat container button to improve clickability
1 parent 200ec14 commit cd097ff

File tree

2 files changed

+25
-2
lines changed

2 files changed

+25
-2
lines changed

streams-react/src/components/ChatContainer/ChatContainer.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ const ChatContainer = () => {
3030
<div ref={containerRef} className={`${styles.container} ${isChatOpen ? styles["container--on"] : ""}`}>
3131
<button type="button" className={styles.chat__button} onClick={handleClick}>
3232
<i className={`fas fa-chevron-left ${styles.chevron} ${isChatOpen ? styles["chevron--open"] : styles.hidden}`}></i>
33-
<i className={`fas fa-chevron-right ${styles.chevron} ${isChatOpen ? styles.hidden : styles["chevron--open"]}`}></i>
33+
<i className={`fas fa-chevron-right ${styles.chevron} ${isChatOpen ? styles.hidden : styles["chevron--closed"]}`}></i>
3434
</button>
3535
<div className={`${styles.chat__container} ${isChatOpen ? "" : styles["chat__container--closed"]}`}>
3636
<ChatList />

streams-react/src/components/ChatContainer/ChatContainer.module.css

Lines changed: 24 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,7 @@
4545
animation: rotateChevron 0.85s ease-in forwards;
4646
}
4747
.chevron--closed {
48-
animation: rotateChevron 0.85s ease-in forwards;
48+
animation: rotateChevron 0.85s ease-in forwards, clickMe 3.8s 1.7s infinite;
4949
}
5050
.hidden {
5151
display: none;
@@ -69,4 +69,27 @@
6969
100% {
7070
transform: rotateZ(180deg);
7171
}
72+
}
73+
@keyframes clickMe {
74+
0% {
75+
transform: rotateZ(180deg);
76+
}
77+
72% {
78+
transform: rotateZ(180deg);
79+
}
80+
75% {
81+
transform: rotateZ(210deg);
82+
}
83+
78% {
84+
transform: rotateZ(160deg);
85+
}
86+
82% {
87+
transform: rotateZ(188deg);
88+
}
89+
84% {
90+
transform: rotateZ(175deg);
91+
}
92+
100% {
93+
transform: rotate(180deg);
94+
}
7295
}

0 commit comments

Comments
 (0)