Fix display notifications

app/assets/stylesheets/common.css.scss

@@ -37,3 +37,11 @@ label {
     width: 400px;
     min-width: 0;
 }
+
+
+
+#alert {
+  .nothing {
+    padding: 1em 0;
+  }
+}

app/views/layouts/application.html.erb

@@ -52,14 +52,21 @@
               <li class="dropdown" id="alert">
                 <a
                   class="dropdown-toggle"
-                  v-class="
-                    btn-info: hasAlerts
-                  "
                   data-toggle="dropdown" href="#"
                   >
-                  <i class="fa fa-bell fa-fw"></i> <i class="fa fa-caret-down"></i>
+                  <i class="fa fa-bell fa-fw"></i>
+                  <span class="badge" v-if="hasAlerts">{{ alertsCount }}</span>
+                  <i class="fa fa-caret-down"></i>
                 </a>
                 <ul class="nav dropdown-menu dropdown-alerts">
+                  <li v-if="!hasAlerts">
+                    <a>
+                      <div class="nothing text text-success">
+                        <%= icon "fa-check" %>
+                        <%= t "terms.no_alert" %>
+                      </div>
+                    </a>
+                  </li>
                   <li v-repeat="alerts">
                     <a>
                       <div>

config/locales/translation_ja.yml

@@ -14,7 +14,7 @@ ja:
     misc: &misc その他
     version: バージョン
     fluent_version: "fluentd %{version}"
-    no_alert: なし
+    no_alert: 通知なし
     update_password: パスワード更新
     detail: 詳細
     create: 作成