(refactor) add css helper file

Author: antoine92190

src/ChatWindow/ChatWindow.vue

@@ -168,46 +168,4 @@ export default {
 	height: 100%;
 	display: flex;
 }
-
-// General
-$borderStyle: 1px solid var(--chat-border-color);
-
-.app-border {
-	border: $borderStyle;
-}
-
-.app-border-t {
-	border-top: $borderStyle;
-}
-
-.app-border-r {
-	border-right: $borderStyle;
-}
-
-.app-border-b {
-	border-bottom: $borderStyle;
-}
-
-.vertical-center {
-	display: flex;
-	align-items: center;
-	height: 100%;
-
-	.vertical-container {
-		width: 100%;
-		text-align: center;
-	}
-}
-
-.svg-button {
-	max-height: 30px;
-	display: flex;
-	cursor: pointer;
-	transition: all 0.2s;
-}
-
-.svg-button:hover {
-	transform: scale(1.1);
-	opacity: 0.7;
-}
 </style>

src/ChatWindow/MessagesList.vue

@@ -424,16 +424,6 @@ export default {
 	border-top-right-radius: 4px;
 }
 
-.room-avatar {
-	background-size: cover !important;
-	background-position: center center !important;
-	background-repeat: no-repeat !important;
-	height: 42px;
-	width: 42px;
-	margin-right: 15px;
-	border-radius: 50%;
-}
-
 .room-name {
 	font-size: 17px;
 }

src/ChatWindow/RoomsList.vue

@@ -197,16 +197,6 @@ input {
 	min-height: 71px;
 }
 
-.room-avatar {
-	background-size: cover !important;
-	background-position: center center !important;
-	background-repeat: no-repeat !important;
-	height: 42px;
-	width: 42px;
-	margin-right: 15px;
-	border-radius: 50%;
-}
-
 .name-container {
 	-webkit-box-align: center;
 	align-items: center;

src/styles/helper.scss

@@ -0,0 +1,50 @@
+$borderStyle: 1px solid var(--chat-border-color);
+
+.app-border {
+	border: $borderStyle;
+}
+
+.app-border-t {
+	border-top: $borderStyle;
+}
+
+.app-border-r {
+	border-right: $borderStyle;
+}
+
+.app-border-b {
+	border-bottom: $borderStyle;
+}
+
+.vertical-center {
+	display: flex;
+	align-items: center;
+	height: 100%;
+
+	.vertical-container {
+		width: 100%;
+		text-align: center;
+	}
+}
+
+.svg-button {
+	max-height: 30px;
+	display: flex;
+	cursor: pointer;
+	transition: all 0.2s;
+}
+
+.svg-button:hover {
+	transform: scale(1.1);
+	opacity: 0.7;
+}
+
+.room-avatar {
+	background-size: cover !important;
+	background-position: center center !important;
+	background-repeat: no-repeat !important;
+	height: 42px;
+	width: 42px;
+	margin-right: 15px;
+	border-radius: 50%;
+}

src/styles/index.scss

@@ -1,2 +1,3 @@
 @import 'animation';
 @import 'menu';
+@import 'helper';