Ember js user active notification

Im develop Ember js project for my university, im use ember paper i need to show user login after on the top user name active bubble int he green color, and display some error this bubble is get red color, i don't know how to put it and how to write this code for ember js, please help me to fix this you can understand this look my image

My currant view

i need like this

code part .hbs

  <div class="custom-navbar custom-navbar-fixed-top">
      <div class="custom-navbar-inner">
        <div class="container">
          <div class="brand"> Velocity </div>
          

          
    
       

         <h2><span style="color:black; margin: 0 12px;">Hi</span></h2>
         <span class="flex"></span>
          <i class="icon-user icn-01"></i>
          <i class="icon-question-sign icn-01"></i>
         <a ><i class="icon-off icn-01"></i></a>

       
     
          
          <!--/.nav-collapse -->

        </div>
        <!-- /container -->

      </div>
      <!-- /navbar-inner -->

    </div>

css

.custom-navbar .icon-user:before {
    content: "\f007"; color: black;
    margin: 0 25px;
}
.custom-navbar .icn-01 {margin: 0 5px;  text-decoration: none; }


.custom-navbar  .icon-question-sign:before {
    content: "\f059";color: black;  margin: 0 25px;
}

.custom-navbar .icon-power-off:before, .icon-off:before {
    content: "\f011";color: black;  margin: 0 25px;
}

.custom-navbar .md-toolbar-tools {
    font-size: 20px;
background: none;
    letter-spacing: 0.005em;
    box-sizing: border-box;
    font-weight: 400;
    display: -ms-flexbox;

    -ms-flex-align: center;
    align-items: center;
    -ms-flex-direction: row;
    flex-direction: row;
    width: 100%;
    height:auto;
    max-height:54px;
    padding: 0 16px;
    margin: 0;

}
md-toolbar {
    box-sizing: border-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    position: relative;
    z-index: 2;
    font-size: 20px;
    min-height: 52px;
    width: 100%;
}
md-toolbar.md-default-theme:not(.md-menu-toolbar), md-toolbar:not(.md-menu-toolbar) {
  background: -webkit-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(229, 229, 229, 1) 100%);

}
 .custom-navbar h2 {
    margin: 0;
    font-family: inherit;
    font-weight: bold;
    color:#428bca;
    text-rendering: optimizelegibility;
}