From 7612bcf0960fc50bdff78e6dc821a58036e15614 Mon Sep 17 00:00:00 2001
From: Mouse Reeve <mousereeve@riseup.net>
Date: Wed, 30 Sep 2020 11:56:02 -0700
Subject: [PATCH] Use "tag" for notifications

---
 bookwyrm/static/css/format.css | 13 -------------
 bookwyrm/templates/layout.html | 20 +++++++++++---------
 2 files changed, 11 insertions(+), 22 deletions(-)

diff --git a/bookwyrm/static/css/format.css b/bookwyrm/static/css/format.css
index 134df44c1..112a0b25c 100644
--- a/bookwyrm/static/css/format.css
+++ b/bookwyrm/static/css/format.css
@@ -10,19 +10,6 @@
     position: absolute;
     overflow: hidden;
 }
-.icon ~ .bubble {
-    background-color: #FF1654;
-    color: white;
-    font-size: 0.7rem;
-    border-radius: 50%;
-    display: block;
-    position: absolute;
-    text-align: center;
-    top: 0.8rem;
-    right: 0.3rem;
-    height: 1rem;
-    width: 1rem;
-}
 
 
 /* --- TOGGLES --- */
diff --git a/bookwyrm/templates/layout.html b/bookwyrm/templates/layout.html
index 61da35c52..7abf9a2e2 100644
--- a/bookwyrm/templates/layout.html
+++ b/bookwyrm/templates/layout.html
@@ -83,16 +83,18 @@
                 </div>
             </div>
             <div class="navbar-item">
-                <div class="buttons">
-		    <a href="/notifications">
-			<span class="icon icon-bell">
-			    <span class="hidden-text">Notitications</span>
-			</span>
-			{% if request.user|notification_count %}
-                        <span class="bubble">{{ request.user | notification_count }}</span>
+                <a href="/notifications">
+                    <div class="tags has-addons">
+                        <span class="tag">
+                            <span class="icon icon-bell">
+                                <span class="hidden-text">Notitications</span>
+                            </span>
+                        </span>
+                        {% if request.user|notification_count %}
+                        <span class="tag is-danger">{{ request.user | notification_count }}</span>
                         {% endif %}
-		    </a>
-                </div>
+                    </div>
+                </a>
             </div>
 	    {% else %}
             <div class="navbar-item">