Small fixes on the ConversationIcon design

- Fix alignment and proper sizing of the elements
- Reduced star size for better antialiasing

2 files changed, 31 insertions, 22 deletions

diff --git a/src/components/ConversationIcon.vue b/src/components/ConversationIcon.vue
index 426d6ce40..bff76a7d8 100644
--- a/src/components/ConversationIcon.vue
+++ b/src/components/ConversationIcon.vue
@@ -90,34 +90,36 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+$icon-size: 44px;
+
 .conversation-icon {
-	width: 44px;
-	height: 44px;
+	width: $icon-size;
+	height: $icon-size;
 
 	.icon:not(.icon-favorite) {
-		width: 44px;
-		height: 44px;
-		line-height: 44px;
-		font-size: 24px;
+		width: $icon-size;
+		height: $icon-size;
+		line-height: $icon-size;
+		font-size: $icon-size / 2;
 		background-color: var(--color-background-darker);
 
 		&.icon-changelog {
-			background-size: 44px;
+			background-size: $icon-size;
 		}
 		&.icon-public,
 		&.icon-contacts,
 		&.icon-password,
 		&.icon-file,
 		&.icon-mail {
-			background-size: 20px;
+			background-size: $icon-size / 2;
 		}
 
 	}
 
 	.favorite-mark {
 		position: absolute;
-		top: 8px;
-		left: calc(44px - 8px);
+		top: 6px;
+		left: $icon-size - 6px;
 		line-height: 100%;
 
 		.icon-favorite {
diff --git a/src/components/LeftSidebar/ConversationsList/AppContentListItem/AppContentListItem.vue b/src/components/LeftSidebar/ConversationsList/AppContentListItem/AppContentListItem.vue
index 83d413ed2..bce1a52d5 100644
--- a/src/components/LeftSidebar/ConversationsList/AppContentListItem/AppContentListItem.vue
+++ b/src/components/LeftSidebar/ConversationsList/AppContentListItem/AppContentListItem.vue
@@ -142,27 +142,32 @@ export default {
 // AppContentListItem
 .acli {
 	position: relative;
-	padding: 10px 2px 10px 8px;
 	display: flex;
-	justify-content: space-between;
 	align-items: center;
 	flex: 0 0 auto;
+	justify-content: flex-start;
+	padding: 10px 2px 10px 8px;
 	cursor: pointer;
+
 	&__content {
 		width: 240px;
+		// same as the acli left padding for
+		// nice visual balance around the avatar
 		margin-left: 8px;
+
 		&__line-one {
 			display: flex;
-			justify-content: space-between;
 			align-items: center;
+			justify-content: space-between;
 			white-space: nowrap;
+
 			&__title {
-				flex-grow: 1;
 				overflow: hidden;
-				text-overflow: ellipsis;
-				color: var(--color-main-text);
+				flex-grow: 1;
 				padding-right: 4px;
 				cursor: pointer;
+				text-overflow: ellipsis;
+				color: var(--color-main-text);
 			}
 			&__actions {
 				margin: -5px 0 -3px 0;
@@ -173,19 +178,21 @@ export default {
 				}
 			}
 		}
+
 		&__line-two {
 			display: flex;
-			justify-content: space-between;
 			align-items: flex-start;
+			justify-content: space-between;
 			white-space: nowrap;
+
 			&__subtitle {
-				flex-grow: 1;
 				overflow: hidden;
-				text-overflow: ellipsis;
-				white-space: nowrap;
-				color: var(--color-text-lighter);
+				flex-grow: 1;
 				padding-right: 4px;
 				cursor: pointer;
+				white-space: nowrap;
+				text-overflow: ellipsis;
+				color: var(--color-text-lighter);
 			}
 			&__counter {
 				margin-right: 12px;
@@ -196,7 +203,7 @@ export default {
 
 .active {
 	background-color: var(--color-primary-light);
-	box-shadow: inset 4px 0 var(--color-primary)
+	box-shadow: inset 4px 0 var(--color-primary);
 }
 
 </style>