refactor: Standardize keyframes naming convention

tjtanjin · Oct 12, 2024 · 8957b06 · 8957b06
1 parent c8631f9
commit 8957b06
Show file tree

Hide file tree

Showing 12 changed files with 171 additions and 215 deletions.
diff --git a/src/components/Buttons/VoiceButton/VoiceButton.css b/src/components/Buttons/VoiceButton/VoiceButton.css
@@ -49,20 +49,9 @@
 }
 
 .rcb-voice-icon-on {
-    animation: ping 1s infinite;
+    animation: rcb-animation-ping 1s infinite;
 }
 
 .rcb-voice-icon-off {
     filter: grayscale(100%);
-}
-
-@keyframes ping {
-    0% {
-        filter: brightness(100%);
-        opacity: 1;
-    }
-    50% {
-        filter: brightness(50%);
-        opacity: 0.8;
-    }
 }
diff --git a/src/components/ChatBotBody/ChatBotBody.css b/src/components/ChatBotBody/ChatBotBody.css
@@ -66,18 +66,7 @@
 }
 
 .rcb-bot-message-entry {
-	animation: bot-entry 0.3s ease-in backwards;
-}
-
-@keyframes bot-entry {
-	0% {
-		transform: translate(-100%, 50%) scale(0);
-		opacity: 0;
-	}
-	100% {
-		transform: translate(0, 0) scale(1);
-		opacity: 1;
-	}
+	animation: rcb-animation-bot-message-entry 0.3s ease-in backwards;
 }
 
 .rcb-user-message {
@@ -90,18 +79,7 @@
 }
 
 .rcb-user-message-entry {
-	animation: user-entry 0.3s ease-in backwards;
-}
-
-@keyframes user-entry {
-	0% {
-		transform: translate(100%, 50%) scale(0);
-		opacity: 0;
-	}
-	100% {
-		transform: translate(0, 0) scale(1);
-		opacity: 1;
-	}
+	animation: rcb-animation-user-message-entry 0.3s ease-in backwards;
 }
 
 .rcb-message-bot-avatar,
@@ -136,7 +114,7 @@
 	border-radius: 50%;
 	background-color: #ccc;
 	margin-right: 4px;
-	animation: rcb-typing 1s infinite;
+	animation: rcb-animation-bot-typing 1s infinite;
 }
 
 .rcb-dot:nth-child(2) {
@@ -147,18 +125,6 @@
   	animation-delay: 0.4s;
 }
 
-@keyframes rcb-typing {
-	0% {
-		opacity: 0.4;
-	}
-	50% {
-		opacity: 1
-	}
-	100% {
-		opacity: 0.4;
-	}
-}
-
 /* Toast Container */
 .rcb-toast-prompt-container {
     position: absolute;

diff --git a/src/components/ChatBotBody/ChatMessagePrompt/ChatMessagePrompt.css b/src/components/ChatBotBody/ChatMessagePrompt/ChatMessagePrompt.css
@@ -1,48 +1,34 @@
 .rcb-message-prompt-container.visible {
-    position: sticky;
-    bottom: 0px;
-    margin: auto;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    opacity: 1;
-    animation: popIn 0.3s ease-in-out;
-    pointer-events: auto;
+	position: sticky;
+	bottom: 0px;
+	margin: auto;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	opacity: 1;
+	animation: rcb-animation-pop-in 0.3s ease-in-out;
+	pointer-events: auto;
 }
 
 .rcb-message-prompt-container.hidden {
-    opacity: 0;
-    height: 0px; /* work around for hiding element while still having animation */
-    visibility: hidden;
-    pointer-events: none;
+	opacity: 0;
+	height: 0px; /* work around for hiding element while still having animation */
+	visibility: hidden;
+	pointer-events: none;
 }
 
 .rcb-message-prompt-text {
-    padding: 6px 12px;
-    border-radius: 20px;
-    color: #adadad;
-    font-size: 12px;
-    background-color: #fff;
-    border: 0.5px solid #adadad;
-    cursor: pointer;
-    transition: color 0.3s ease, border-color 0.3s ease;
-    z-index: 9999;
+	padding: 6px 12px;
+	border-radius: 20px;
+	color: #adadad;
+	font-size: 12px;
+	background-color: #fff;
+	border: 0.5px solid #adadad;
+	cursor: pointer;
+	transition: color 0.3s ease, border-color 0.3s ease;
+	z-index: 9999;
 }
 
 .rcb-message-prompt-container.hidden .rcb-message-prompt-text {
-    padding: 0px;
-}
-
-@keyframes popIn {
-    0% {
-      transform: scale(0.8);
-      opacity: 0;
-    }
-    70% {
-      transform: scale(1.1);
-      opacity: 1;
-    }
-    100% {
-      transform: scale(1);
-    }
-}
+	padding: 0px;
+}
diff --git a/src/components/ChatBotBody/MediaDisplay/MediaDisplay.css b/src/components/ChatBotBody/MediaDisplay/MediaDisplay.css
@@ -43,16 +43,5 @@
 /* Media Display Entry Animations */
 
 .rcb-media-entry {
-	animation: media-entry 0.3s ease-in backwards;
-}
-
-@keyframes media-entry {
-	0% {
-		transform: translate(100%, 50%) scale(0);
-		opacity: 0;
-	}
-	100% {
-		transform: translate(0, 0) scale(1);
-		opacity: 1;
-	}
+	animation: rcb-animation-user-message-entry 0.3s ease-in backwards;
 }
diff --git a/src/components/ChatBotBody/ToastPrompt/ToastPrompt.css b/src/components/ChatBotBody/ToastPrompt/ToastPrompt.css
@@ -1,28 +1,15 @@
-.rcb-toast-prompt-text {
-    padding: 6px 12px;
-    border-radius: 5px;
-    color: #7a7a7a;
-    font-size: 12px;
-    text-align: center;
-    background-color: #fff;
-    border: 0.5px solid #7a7a7a;
-    cursor: pointer;
-    transition: color 0.3s ease, border-color 0.3s ease;
-    z-index: 9999;
-    width: 100%;
-    margin-top: 6px;
-}
-
-@keyframes popIn {
-    0% {
-      transform: scale(0.8);
-      opacity: 0;
-    }
-    70% {
-      transform: scale(1.1);
-      opacity: 1;
-    }
-    100% {
-      transform: scale(1);
-    }
-}
+.rcb-toast-prompt {
+	padding: 6px 12px;
+	border-radius: 5px;
+	color: #7a7a7a;
+	font-size: 12px;
+	text-align: center;
+	background-color: #fff;
+	border: 0.5px solid #7a7a7a;
+	cursor: pointer;
+	transition: color 0.3s ease, border-color 0.3s ease;
+	z-index: 9999;
+	width: 100%;
+	margin-top: 6px;
+	animation: rcb-animation-pop-in 0.3s ease-in-out;
+}
diff --git a/src/components/ChatBotBody/ToastPrompt/ToastPrompt.tsx b/src/components/ChatBotBody/ToastPrompt/ToastPrompt.tsx
@@ -78,7 +78,7 @@ const Toast = ({
 						dismissToast(id);
 					}
 				}}
-				className="rcb-toast-prompt-text"
+				className="rcb-toast-prompt"
 			>
 				{content}
 			</div>

diff --git a/src/components/ChatBotBody/UserCheckboxes/UserCheckboxes.css b/src/components/ChatBotBody/UserCheckboxes/UserCheckboxes.css
@@ -26,25 +26,14 @@
 	width: 80%;
 	cursor: pointer;
 	background-color: #fff;
-	animation: checkboxes-entry 0.5s ease-out;
+	animation: rcb-animations-checkboxes-entry 0.5s ease-out;
 	overflow: hidden;
 }
 
 .rcb-checkbox-row-container:hover {
 	box-shadow: 0 0 5px rgba(0, 0, 0, 0.2); 
 }
 
-@keyframes checkboxes-entry {
-	0% {
-	  transform: translateX(-100%);
-	  opacity: 0;
-	}
-	100% {
-	  transform: translateX(0);
-	  opacity: 1;
-	}
-}
-
 /* Checkbox Row */
 
 .rcb-checkbox-row {
@@ -100,7 +89,7 @@
 	width: 80%;
 	cursor: pointer;
 	background-color: #fff;
-	animation: checkboxes-entry 0.5s ease-out;
+	animation: rcb-animations-checkboxes-entry 0.5s ease-out;
 }
 
 .rcb-checkbox-next-button::before {

diff --git a/src/components/ChatBotBody/UserOptions/UserOptions.css b/src/components/ChatBotBody/UserOptions/UserOptions.css
@@ -26,21 +26,10 @@
 	border-style: solid;
 	cursor: pointer;
 	transition: background-color 0.3s ease;
-	animation: options-entry 0.5s ease-out;
+	animation: rcb-animation-options-entry 0.5s ease-out;
 	overflow: hidden;
 }
 
-@keyframes options-entry {
-	0% {
-	  transform: scale(0);
-	  opacity: 0;
-	}
-	100% {
-	  transform: scale(1);
-	  opacity: 1;
-	}
-}
-
 .rcb-options:hover {
 	box-shadow: 0 0 5px rgba(0, 0, 0, 0.2); 
 }
diff --git a/src/components/ChatBotButton/ChatBotButton.css b/src/components/ChatBotButton/ChatBotButton.css
@@ -18,13 +18,13 @@
 .rcb-toggle-button.rcb-button-hide {
 	opacity: 0;
 	visibility: hidden;
-	animation: collapse 0.3s ease-in-out forwards;
+	animation: rcb-animation-collapse 0.3s ease-in-out forwards;
 }
 
 .rcb-toggle-button.rcb-button-show {
 	opacity: 1;
 	visibility: visible;
-	animation: expand 0.3s ease-in-out forwards;
+	animation: rcb-animation-expand 0.3s ease-in-out forwards;
 }
 
 /* ChatBot Toggle Icon */
@@ -42,28 +42,6 @@
 	border-radius: inherit;
 }
 
-@keyframes expand {
-	0% {
-		transform: translate(100%, 100%) scale(0);
-		opacity: 0;
-	}
-	100% {
-		transform: translate(0, 0) scale(1);
-		opacity: 1;
-	}
-}
-
-@keyframes collapse {
-	0% {
-		transform: translate(0, 0) scale(1);
-		opacity: 1;
-	}
-	100% {
-		transform: translate(100%, 100%) scale(0);
-		opacity: 0;
-	}
-}
-
 /* ChatBot Notification Badge*/
 
 .rcb-badge {