💄 Site > Chat > Trigger > Add style

site/src/components/chat/style.styl

@@ -1,11 +1,37 @@
 .chat
     position fixed
     bottom 0
-    right 90px
+    right 123px
-    background #fff
+    color #fff
 
-.header
+.trigger
-    cursor pointer
+    position absolute
+    bottom 0
+    right 0
+    height 40px
+    padding-left 14px
+    padding-right 18px
+    line-height 40px
+    background #24263A
+    font-size 14px
+    white-space nowrap
+
+    .icon
+        margin-left 4px
+
+    .unread
+        display inline-block
+        position absolute
+        top 7px
+        left calc(100% - 25px)
+        width 20px
+        text-align center
+        font-size 9px
+        line-height 9px
+        color #4BD1C5
+
+    &:hover
+        color #4BD1C5
 
 .user-name
     outline none

site/src/components/chat/template.html

@@ -1,8 +1,14 @@
 <div class="chat">
-    <header class="header" @click="onHeaderClick">
+    <a href="#" v-show="!open" class="trigger" @click="onHeaderClick">
-        Discussions ({{ unreadCount }})
+        Discussions
-    </header>
+        <img v-if="unreadCount === 0" class="icon default" src="../../../static/svg/chat-star.svg" alt="">
+        <img v-if="unreadCount > 0" class="icon hover" src="../../../static/svg/chat-star-hover.svg" alt="">
+        <span v-if="unreadCount > 0" class="unread">{{ unreadCount > 99 ? '99+' : unreadCount }}</span>
+    </a>
     <div class="content" v-show="open">
+        <a href="#" class="header" @click="onHeaderClick">
+            Discussions
+        </a>
         <div class="messages" @scroll="onMessagesScroll">
             <div class="inner-messages">
                 <div class="message" v-for="message of messages" :key="message.date">