TypedAvatar.vue colored background

resources/js/components/Others/ListInfoItem.vue

@@ -23,10 +23,12 @@
 
         .action-button {
             cursor: pointer;
+			display: flex;
+			align-items: center;
 
             .edit-icon {
                 display: inline-block;
-                margin-left: 3px;
+                margin-left: 7px;
             }
         }
 

resources/js/components/Others/Notifications/ToasterWrapper.vue

@@ -45,14 +45,13 @@
     #toastr-wrapper {
         position: absolute;
         right: 30px;
-        top: 30px;
+        bottom: 30px;
         z-index: 90;
     }
 
     @media only screen and (max-width: 690px) {
 
         #toastr-wrapper {
-            top: initial;
             right: 15px;
             left: 15px;
             bottom: 15px;

resources/js/components/Others/TypedAvatar.vue

@@ -1,5 +1,5 @@
 <template>
-	<div class="typed-avatar" :style="{width: size + 'px', height: size + 'px'}">
+	<div class="typed-avatar" :style="{width: size + 'px', height: size + 'px', background: color ? color : '#f4f5f6'}">
 		<span class="letter">{{ letter }}</span>
 	</div>
 </template>
@@ -9,6 +9,7 @@ export default {
 	name: "TypedAvatar",
 	props: [
 		'letter',
+		'color',
 		'size',
 	]
 }