[IMPROVE] Sidebar icons margins (#22498)

* Change components * Update fuselage Co-authored-by: Tasso Evangelista <tasso.evangelista@rocket.chat>
RocketChat · Jul 7, 2021 · 212636a · 212636a
1 parent dc5b544
commit 212636a
Show file tree

Hide file tree

Showing 5 changed files with 56 additions and 48 deletions.
diff --git a/client/sidebar/Item/Condensed.js b/client/sidebar/Item/Condensed.js
@@ -31,14 +31,16 @@ const Condensed = ({
 		<Sidebar.Item {...props} href={href} clickable={!!href}>
 			{avatar && <Sidebar.Item.Avatar>{avatar}</Sidebar.Item.Avatar>}
 			<Sidebar.Item.Content>
-				{icon}
-				<Sidebar.Item.Title
-					data-qa='sidebar-item-title'
-					className={unread && 'rcx-sidebar-item--highlighted'}
-				>
-					{title}
-				</Sidebar.Item.Title>
-				{badges}
+				<Sidebar.Item.Wrapper>
+					{icon}
+					<Sidebar.Item.Title
+						data-qa='sidebar-item-title'
+						className={unread && 'rcx-sidebar-item--highlighted'}
+					>
+						{title}
+					</Sidebar.Item.Title>
+				</Sidebar.Item.Wrapper>
+				{badges && <Sidebar.Item.Badge>{badges}</Sidebar.Item.Badge>}
 				{menu && (
 					<Sidebar.Item.Menu {...handleMenuEvent}>
 						{menuVisibility ? (

diff --git a/client/sidebar/Item/Extended.js b/client/sidebar/Item/Extended.js
@@ -45,34 +45,38 @@ const Extended = ({
 		>
 			{avatar && <Sidebar.Item.Avatar>{avatar}</Sidebar.Item.Avatar>}
 			<Sidebar.Item.Content>
-				<Sidebar.Item.Wrapper>
-					{icon}
-					<Sidebar.Item.Title
-						data-qa='sidebar-item-title'
-						className={unread && 'rcx-sidebar-item--highlighted'}
-					>
-						{title}
-					</Sidebar.Item.Title>
-					{time && <Sidebar.Item.Time>{formatDate(time)}</Sidebar.Item.Time>}
-				</Sidebar.Item.Wrapper>
-				<Sidebar.Item.Wrapper>
-					<Sidebar.Item.Subtitle
-						tabIndex='-1'
-						className={unread && 'rcx-sidebar-item--highlighted'}
-					>
-						{subtitle}
-					</Sidebar.Item.Subtitle>
-					<Sidebar.Item.Badge>{badges}</Sidebar.Item.Badge>
-					{menu && (
-						<Sidebar.Item.Menu {...handleMenuEvent}>
-							{menuVisibility ? (
-								menu()
-							) : (
-								<ActionButton square ghost mini rcx-sidebar-item__menu icon='kebab' />
-							)}
-						</Sidebar.Item.Menu>
-					)}
-				</Sidebar.Item.Wrapper>
+				<Sidebar.Item.Content>
+					<Sidebar.Item.Wrapper>
+						{icon}
+						<Sidebar.Item.Title
+							data-qa='sidebar-item-title'
+							className={unread && 'rcx-sidebar-item--highlighted'}
+						>
+							{title}
+						</Sidebar.Item.Title>
+						{time && <Sidebar.Item.Time>{formatDate(time)}</Sidebar.Item.Time>}
+					</Sidebar.Item.Wrapper>
+				</Sidebar.Item.Content>
+				<Sidebar.Item.Content>
+					<Sidebar.Item.Wrapper>
+						<Sidebar.Item.Subtitle
+							tabIndex='-1'
+							className={unread && 'rcx-sidebar-item--highlighted'}
+						>
+							{subtitle}
+						</Sidebar.Item.Subtitle>
+						<Sidebar.Item.Badge>{badges}</Sidebar.Item.Badge>
+						{menu && (
+							<Sidebar.Item.Menu {...handleMenuEvent}>
+								{menuVisibility ? (
+									menu()
+								) : (
+									<ActionButton square ghost mini rcx-sidebar-item__menu icon='kebab' />
+								)}
+							</Sidebar.Item.Menu>
+						)}
+					</Sidebar.Item.Wrapper>
+				</Sidebar.Item.Content>
 			</Sidebar.Item.Content>
 			{actions && (
 				<Sidebar.Item.Container>

diff --git a/client/sidebar/Item/Medium.js b/client/sidebar/Item/Medium.js
@@ -31,14 +31,16 @@ const Medium = ({
 		<Sidebar.Item {...props} href={href} clickable={!!href}>
 			{avatar && <Sidebar.Item.Avatar>{avatar}</Sidebar.Item.Avatar>}
 			<Sidebar.Item.Content>
-				{icon}
-				<Sidebar.Item.Title
-					data-qa='sidebar-item-title'
-					className={unread && 'rcx-sidebar-item--highlighted'}
-				>
-					{title}
-				</Sidebar.Item.Title>
-				{badges}
+				<Sidebar.Item.Wrapper>
+					{icon}
+					<Sidebar.Item.Title
+						data-qa='sidebar-item-title'
+						className={unread && 'rcx-sidebar-item--highlighted'}
+					>
+						{title}
+					</Sidebar.Item.Title>
+				</Sidebar.Item.Wrapper>
+				{badges && <Sidebar.Item.Badge>{badges}</Sidebar.Item.Badge>}
 				{menu && (
 					<Sidebar.Item.Menu {...handleMenuEvent}>
 						{menuVisibility ? (

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -157,7 +157,7 @@
 		"@rocket.chat/apps-engine": "1.27.1",
 		"@rocket.chat/css-in-js": "^0.27.0",
 		"@rocket.chat/emitter": "^0.27.0",
-		"@rocket.chat/fuselage": "^0.27.0",
+		"@rocket.chat/fuselage": "^0.6.3-dev.288",
 		"@rocket.chat/fuselage-hooks": "^0.27.0",
 		"@rocket.chat/fuselage-polyfills": "^0.27.0",
 		"@rocket.chat/fuselage-tokens": "^0.27.0",