style: add rotation animation to ChatGptIcon logo

Eric-2369 · Feb 12, 2025 · cb626d0 · cb626d0
1 parent bbbeb19
commit cb626d0
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 1 deletion.
diff --git a/app/components/home.module.scss b/app/components/home.module.scss
@@ -94,6 +94,19 @@
   }
 }
 
+.chat-gpt-icon-rotate {
+  animation: chat-gpt-icon-rotate-keyframes 10s infinite linear;
+}
+
+@keyframes chat-gpt-icon-rotate-keyframes {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
 .window-content {
   width: var(--window-content-width);
   height: 100%;

diff --git a/app/components/sidebar.tsx b/app/components/sidebar.tsx
@@ -252,7 +252,7 @@ export function SideBar(props: { className?: string }) {
       <SideBarHeader
         title="NextChat"
         subTitle="Build your own AI assistant."
-        logo={<ChatGptIcon />}
+        logo={<ChatGptIcon className={styles["chat-gpt-icon-rotate"] + " no-dark"}/>}
         shouldNarrow={shouldNarrow}
       >
         <div className={styles["sidebar-header-bar"]}>