🔨 Fix Bug: Importing Styled Components

Aldhanekaa · Jun 20, 2023 · 9a7c556 · 9a7c556
1 parent df02cf3
commit 9a7c556
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 10 deletions.
diff --git a/src/components/View/AppCommands/index.tsx b/src/components/View/AppCommands/index.tsx
@@ -1,21 +1,14 @@
 import * as React from "react";
-import styled from "styled-components";
 
 import RefreshButton from "../AppCommands/Refresh";
 import { MessageCircle } from "lucide-react";
 import { ChatGlobalContext } from "src/machines/chat.context";
 
-const AppCommandButtonsContainer = styled.div`
-	width: 100%;
-	display: flex;
-	justify-content: center;
-	gap: 10px;
-`;
 export default function AppCommands() {
 	const globalContext = React.useContext(ChatGlobalContext);
 
 	return (
-		<AppCommandButtonsContainer>
+		<div className="AppCommandButtonsContainer">
 			<RefreshButton />
 			<button
 				id="LucideIconButton"
@@ -29,6 +22,6 @@ export default function AppCommands() {
 			>
 				<MessageCircle width="15" height="15" />
 			</button>
-		</AppCommandButtonsContainer>
+		</div>
 	);
 }
diff --git a/src/components/View/chats.tsx b/src/components/View/chats.tsx
@@ -85,7 +85,7 @@ function RenderChatCard({
 						src="https://www.gstatic.com/lamda/images/sparkle_resting_v2_darkmode_2bdb7df2724e450073ede.gif"
 					></img>
 				) : (
-					<Sparkles color="#2e80f2" />
+					<Sparkles color="#2e80f2" width="35px" height="35px" />
 				)}
 			</div>
 			<div className="contentContainer">

diff --git a/styles.css b/styles.css
@@ -23,6 +23,14 @@ If your plugin does not need CSS, delete this file.
 	gap: 10px;
 }
 
+/* AppCommands/index.tsx */
+.AppCommandButtonsContainer {
+	width: 100%;
+	display: flex;
+	justify-content: center;
+	gap: 10px;
+}
+
 /* chats.tsx */
 .ChatsContainer {
 	display: flex;