Navigation Bar Visual Improvements (#15278)

* update privacy policy

* Fix serving memoized content

* add missing info to mystery item strings

* add missing string info to July mystery items

* fix food

* melior updates - loading screen & menu bar

* updates to currency tray spacing

* table styling

* one last table style

* add margin adjustment

* fix spacing

* clean up spacing styles

* remove table rounded corners

* correct faq tyops

* spacing updates

* fix web challenge instructions

* beach umbrella you are not shady except when you are

* fix mobile margin weirdness

* update wording on answers

* mobile spacing

* add chart showing details of item 1.4

* revert unrelated changes

* melior centering and icon spacing

* remove unnecessary files

* rejiggering spacing

* remove errant comma

* remove unnecessary files

* remove duplicated class

* remove duplicated class

* ...and more spacing

* notification bubble

* notification icon & currency alignment

* fix(CSS): clean up some unnecessary classes

---------

Co-authored-by: Phillip Thelen <phillip@habitica.com>
Co-authored-by: Sabe Jones <sabe@habitica.com>

website/client/src/components/header/messageCount.functional.vue

@@ -12,13 +12,13 @@
 .message-count {
   background-color: $red-50;
   border-radius: 50%;
-  height: 20px;
-  width: 20px;
-  float: right;
   color: $white;
-  text-align: center;
-  font-weight: bold;
   font-size: 12px;
+  font-weight: bold;
+  height: 20px;
+  left: 24px;
+  text-align: center;
+  width: 20px;
 
   svg {
     width: 12px;
@@ -36,4 +36,11 @@
 .message-count.top-count-gray {
   background-color: $gray-200;
 }
+
+@media only screen and (max-width: 992px) {
+
+  .message-count {
+    left: 12px;
+  }
+}
 </style>