From a286fece0a323074a819d98add068304d390a6d0 Mon Sep 17 00:00:00 2001
From: Gabriel Delavald <gdelavald@gmail.com>
Date: Fri, 25 Aug 2017 02:59:46 -0300
Subject: [PATCH] Merge pull request #7880 from
 RocketChat/fix-sidebar-alignments

[FIX] sidebar paddings
---
 .../client/imports/components/sidebar/rooms-list.css  | 11 +++++++++++
 .../imports/components/sidebar/sidebar-account.css    |  2 +-
 .../imports/components/sidebar/sidebar-item.css       |  9 +++++++--
 .../client/imports/components/sidebar/sidebar.css     |  9 ++++++---
 .../client/imports/components/sidebar/toolbar.css     |  7 ++++---
 5 files changed, 29 insertions(+), 9 deletions(-)

diff --git a/packages/rocketchat-theme/client/imports/components/sidebar/rooms-list.css b/packages/rocketchat-theme/client/imports/components/sidebar/rooms-list.css
index ea7a770e1f5a..1231eefac4f8 100644
--- a/packages/rocketchat-theme/client/imports/components/sidebar/rooms-list.css
+++ b/packages/rocketchat-theme/client/imports/components/sidebar/rooms-list.css
@@ -11,6 +11,7 @@
 
 	&__type {
 		margin-bottom: 0.5rem;
+		margin-left: calc(var(--sidebar-default-padding) - calc(var(--sidebar-default-padding) / 3));
 
 		color: var(--rooms-list-title-color);
 
@@ -18,6 +19,7 @@
 	}
 
 	&__empty-room {
+		margin-left: calc(var(--sidebar-default-padding) - calc(var(--sidebar-default-padding) / 3));
 
 		color: var(--rooms-list-empty-text-color);
 
@@ -43,3 +45,12 @@
 		background-color: var(--sidebar-background);
 	}
 }
+
+@media (width <= 400px) {
+	.rooms-list {
+		&__type,
+		&__empty-room {
+			margin-left: 0;
+		}
+	}
+}
diff --git a/packages/rocketchat-theme/client/imports/components/sidebar/sidebar-account.css b/packages/rocketchat-theme/client/imports/components/sidebar/sidebar-account.css
index ff6f5cdfe97c..2db3cbf0fb5c 100644
--- a/packages/rocketchat-theme/client/imports/components/sidebar/sidebar-account.css
+++ b/packages/rocketchat-theme/client/imports/components/sidebar/sidebar-account.css
@@ -39,6 +39,7 @@
 		flex: 1;
 
 		max-width: 160px;
+		max-width: fit-content;
 		height: calc(var(--sidebar-account-username-size) + 0.1rem);
 		margin-bottom: 0.5rem;
 
@@ -147,7 +148,6 @@
 
 		&-username {
 			width: auto;
-			max-width: 160px;
 			margin: 0  0.65rem;
 
 			font-weight: var(--sidebar-small-account-username-weight);
diff --git a/packages/rocketchat-theme/client/imports/components/sidebar/sidebar-item.css b/packages/rocketchat-theme/client/imports/components/sidebar/sidebar-item.css
index 9481fa95da5b..1c70e77d4e94 100644
--- a/packages/rocketchat-theme/client/imports/components/sidebar/sidebar-item.css
+++ b/packages/rocketchat-theme/client/imports/components/sidebar/sidebar-item.css
@@ -1,11 +1,12 @@
 .sidebar-item {
-
 	position: relative;
 
 	display: flex;
 
 	height: var(--sidebar-item-height);
 
+	padding-left: calc(var(--sidebar-default-padding) - calc(var(--sidebar-default-padding) / 3));
+
 	cursor: pointer;
 
 	border-radius: var(--sidebar-item-radius);
@@ -55,6 +56,7 @@
 
 	&__icon {
 		margin: 0 auto;
+
 		font-size: 1.25rem;
 		fill: currentColor;
 	}
@@ -66,7 +68,7 @@
 
 	&__user-status {
 		position: absolute;
-		right: calc(100% + var(--sidebar-item-user-status-size));
+		left: 4px;
 
 		width: var(--sidebar-item-user-status-size);
 		height: var(--sidebar-item-user-status-size);
@@ -110,8 +112,11 @@
 
 @media (width <= 400px) {
 	.sidebar-item {
+		padding-left: 0;
+
 		&__user-status {
 			right: calc(100% + var(--sidebar-small-item-user-status-size));
+			left: auto;
 		}
 	}
 }
diff --git a/packages/rocketchat-theme/client/imports/components/sidebar/sidebar.css b/packages/rocketchat-theme/client/imports/components/sidebar/sidebar.css
index 081170ac3289..9609acbe9d72 100644
--- a/packages/rocketchat-theme/client/imports/components/sidebar/sidebar.css
+++ b/packages/rocketchat-theme/client/imports/components/sidebar/sidebar.css
@@ -65,9 +65,8 @@
 		display: none;
 	}
 
-	& .rooms-list,
-	& .unread-rooms {
-		padding: 0 var(--sidebar-default-padding) var(--sidebar-default-padding) var(--sidebar-default-padding);
+	& .rooms-list {
+		padding: 0 calc(var(--sidebar-default-padding) / 3);
 	}
 }
 
@@ -98,6 +97,10 @@
 			padding: 0 var(--sidebar-small-default-padding)  var(--sidebar-small-default-padding)  var(--sidebar-small-default-padding);
 		}
 
+		&__footer {
+			display: none;
+		}
+
 		&:not(&--light) {
 			transform: translate3d(-100%, 0, 0);
 		}
diff --git a/packages/rocketchat-theme/client/imports/components/sidebar/toolbar.css b/packages/rocketchat-theme/client/imports/components/sidebar/toolbar.css
index fbfd5d3623ef..db7694c823d5 100644
--- a/packages/rocketchat-theme/client/imports/components/sidebar/toolbar.css
+++ b/packages/rocketchat-theme/client/imports/components/sidebar/toolbar.css
@@ -29,8 +29,8 @@
 
 	&__icon {
 		&--plus {
-				font-size: 1.25rem;
-			}
+			font-size: 1.25rem;
+		}
 	}
 
 	& .rc-input {
@@ -69,8 +69,9 @@
 			}
 
 			&-svg--plus {
-				font-size: 1rem;
 				transform: rotate(45deg);
+
+				font-size: 1rem;
 			}
 		}
 	}