refactor: remove dimenstions from SidebarHeader Icon (#35)

* refactor: remove dimensions from SidebarHeader Icon * chore: add changeset
zenml-io · Oct 23, 2023 · d541014 · d541014
1 parent 4a79333
commit d541014
Show file tree

Hide file tree

Showing 5 changed files with 14 additions and 9 deletions.
diff --git a/.changeset/nice-jeans-film.md b/.changeset/nice-jeans-film.md
@@ -0,0 +1,5 @@
+---
+"@zenml-io/react-component-library": patch
+---
+
+remove dimenstions from SidebarHeader Icon
diff --git a/src/components/Sidebar/Sidebar.stories.tsx b/src/components/Sidebar/Sidebar.stories.tsx
@@ -39,7 +39,7 @@ export const defaultStory: Story = {
 	args: {
 		children: (
 			<>
-				<SidebarHeader icon={<CloseButton />} title="ZenML Tenant">
+				<SidebarHeader icon={<CloseButton className="w-6 h-6" />} title="ZenML Tenant">
 					<SidebarHeaderImage>
 						<img src={`https://avatar.vercel.sh/ZenMLTenant?size=32`} />
 					</SidebarHeaderImage>
@@ -50,29 +50,29 @@ export const defaultStory: Story = {
 						<li className="w-full">
 							<SidebarItem isActive={true}>
 								<div>
-									<SidebarItemContent isActive={true} icon={<CPU />} label="Models" />
+									<SidebarItemContent svgStroke isActive={true} icon={<CPU />} label="Models" />
 								</div>
 							</SidebarItem>
 						</li>
 						<li className="w-full">
 							<SidebarItem isActive={false}>
 								<div>
-									<SidebarItemContent isActive={false} icon={<CPU />} label="Models" />
+									<SidebarItemContent svgStroke isActive={false} icon={<CPU />} label="Models" />
 								</div>
 							</SidebarItem>
 						</li>
 						<li className="w-full">
 							<SidebarItem isActive={false}>
 								<div>
-									<SidebarItemContent isActive={false} icon={<CPU />} label="Models" />
+									<SidebarItemContent svgStroke isActive={false} icon={<CPU />} label="Models" />
 								</div>
 							</SidebarItem>
 						</li>
 					</SidebarList>
 					<div style={{ marginTop: "auto" }}>
 						<SidebarItem>
 							<div>
-								<SidebarItemContent isActive={false} icon={<CPU />} label="Models" />
+								<SidebarItemContent svgStroke isActive={false} icon={<CPU />} label="Models" />
 							</div>
 						</SidebarItem>
 					</div>

diff --git a/src/components/Sidebar/Sidebar.tsx b/src/components/Sidebar/Sidebar.tsx
@@ -62,7 +62,7 @@ export const SidebarHeader = forwardRef<HTMLDivElement, SidebarHeaderProps>(
 
 		const iconClasses = cn(
 			existingIconClasses,
-			"w-6 ml-auto shrink-0 h-6 opacity-0 group-hover:opacity-100  duration-300 transition-all"
+			"ml-auto shrink-0 opacity-0 group-hover:opacity-100  duration-300 transition-all"
 		);
 
 		return (

diff --git a/src/components/Sidebar/SidebarHeader.stories.tsx b/src/components/Sidebar/SidebarHeader.stories.tsx
@@ -25,7 +25,7 @@ export const sidebarHeader: Story = {
 	name: "Sidebar Header",
 	args: {
 		title: "ZenML Tenant",
-		icon: <CloseButton />,
+		icon: <CloseButton className="w-6 h-6" />,
 		children: (
 			<SidebarHeaderImage>
 				<img src={`https://avatar.vercel.sh/ZenMLTenant?size=32`} />

diff --git a/src/components/Sidebar/SidebarItem.stories.tsx b/src/components/Sidebar/SidebarItem.stories.tsx
@@ -27,7 +27,7 @@ export const inactive: Story = {
 		isActive: false,
 		children: (
 			<div>
-				<SidebarItemContent icon={<CPU />} label="Models" />
+				<SidebarItemContent svgStroke icon={<CPU />} label="Models" />
 			</div>
 		)
 	}
@@ -39,7 +39,7 @@ export const active: Story = {
 		isActive: true,
 		children: (
 			<div>
-				<SidebarItemContent isActive={true} icon={<CPU />} label="Models" />
+				<SidebarItemContent svgStroke isActive={true} icon={<CPU />} label="Models" />
 			</div>
 		)
 	}