changed notification design

src/components/app/MainNav.vue

@@ -320,7 +320,6 @@ export default {
   border-radius: 50%;
   cursor: pointer;
   user-select: none;
-  opacity: 0.8;
   transition: 0.2s;
   &:hover {
     background: #093b4b;
@@ -345,7 +344,7 @@ export default {
   width: 20px;
   height: 20px;
   border-radius: 50%;
-  background: rgba(255, 23, 23, 0.753);
+  background: #ee3e34;
   flex-shrink: 0;
 }
 

src/components/app/Navigation.vue

@@ -352,25 +352,6 @@ export default {
   height: 2px;
 }
 
-.notifyAnimation:before {
-  content: "!";
-  color: white;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  align-content: center;
-  font-size: 15px;
-  position: absolute;
-  z-index: 115651;
-  top: 5px;
-  right: 5px;
-  width: 20px;
-  height: 20px;
-  border-radius: 50%;
-  background: rgba(255, 23, 23, 0.753);
-  flex-shrink: 0;
-}
-
 
 .tool-tip {
   color: white;

src/components/app/ServerTemplate/ChannelTemplate.vue

@@ -1,10 +1,13 @@
 <template>
   <div
     class="channel"
-    :class="{notify: hasNotifications, selected: selectedChannelID === channelData.channelID}"
+    :class="{selected: selectedChannelID === channelData.channelID}"
   >
     <i class="material-icons">storage</i>
     <div class="channel-name">{{ channelData.name }}</div>
+    <div class="notification" v-if="hasNotifications">
+      {{hasNotifications.count}}
+    </div>
   </div>
 </template>
 
@@ -24,7 +27,6 @@ export default {
       ) {
         return false;
       }
-
       const find = notifications.find(
         n => n.channelID === this.channelData.channelID
       );
@@ -37,7 +39,7 @@ export default {
 
 <style scoped>
 .notify {
-  background: rgba(255, 0, 0, 0.411);
+  background: rgba(255, 0, 0, 0.411) !important;
 }
 
 .channel {
@@ -69,4 +71,20 @@ export default {
   text-overflow: ellipsis;
   margin-left: 5px;
 }
+.notification {
+  position: absolute;
+  display: flex;
+  flex-direction: column;
+  flex-shrink: 0;
+  text-align: center;
+  justify-content: center;
+  background: #ee3e34;
+  height: 34px;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  min-width: 40px;
+  max-width: 70px;
+  border-radius: 1px;
+}
 </style>

src/components/app/ServerTemplate/ServerTemplate.vue

@@ -132,7 +132,7 @@ export default {
   width: 20px;
   height: 20px;
   border-radius: 50%;
-  background: rgba(255, 23, 23, 0.753);
+  background: #ee3e34;
 }
 
 </style>

src/components/app/relationships/FriendsTemplate.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     class="friend"
-    :class="{selected: uniqueIDSelected, notify: (notifications && notifications > 0), tree }"
+    :class="{selected: uniqueIDSelected, tree }"
     @click="openChat"
     @mouseover="hover = true"
     @mouseleave="hover = false"
@@ -136,9 +136,6 @@ export default {
 .tree {
   padding-left: 22px;
 }
-.notify {
-  background: rgba(255, 0, 0, 0.411);
-}
 
 
 .friend:hover {
@@ -173,7 +170,7 @@ export default {
 .notification {
   position: absolute;
   display: flex;
-  background: rgba(134, 134, 134, 0.315);
+  background: #ee3e34;
   height: 100%;
   right: 0;
   top: 0;