Added notification popups

scss/main.scss

@@ -30,3 +30,6 @@
 @import "menus/audiomenu";
 @import "menus/network";
 @import "menus/bluetooth";
+
+//notifications
+@import "notifications/popups";

scss/menus/bluetooth.scss

@@ -19,7 +19,7 @@
 }
 
 .menu-items {
-    min-width: 300px;
+    min-width: 350px;
 }
 
 .menu-icon-button {
@@ -41,3 +41,15 @@
 .menu-button-name.status {
     margin-left: 2.1rem;
 }
+
+.search-devices-container {
+    min-height: 8rem;
+}
+
+.empty-bt-devices-container {
+    margin-top: 2rem;
+}
+
+.bluetooth-isconnecting {
+    color: $sky;
+}

scss/notifications/popups.scss

@@ -0,0 +1,58 @@
+@import "../colors";
+
+.notification-card {
+  color: $text;
+  background: $mantle;
+  margin-top: 0.5rem;
+  margin-right: 0.5rem;
+  border: 0.15rem solid $lavender;
+  min-width: 32rem;
+  min-height: 7rem;
+  border-radius: 0.8rem;
+}
+
+.notification-card-container {
+  padding: 1px;
+}
+
+
+.notification-card-image-container {
+  margin: 1.5rem 0.75rem;
+  min-width: 4rem;
+  min-height: 4rem;
+  // border: 0.15rem solid $surface2;
+  border-radius: 0.7rem;
+}
+.notification-card-image {
+  min-width: 4rem;
+  min-height: 4rem;
+  // padding: 1rem 1rem;
+  margin: 0.5rem 0rem;
+  margin-left: 0.5rem;
+  background-size: contain;
+  background-repeat:  no-repeat;
+}
+
+.notification-card-content {
+  min-width: 3.5rem;
+  min-height: 3.5rem;
+  padding: 0.6rem 0.6rem;
+  margin: 0.2rem 0rem;
+  margin-right: 1rem;
+}
+
+.notification-card-appname-label {
+  margin-top: 0.4rem;
+  font-size: 0.9rem;
+  color: $pink;
+}
+
+.notification-card-header-label {
+  font-size: 1.15rem;
+  margin-bottom: 0.25rem;
+  color: $lavender;
+}
+
+.notification-card-body-label {
+  font-size: 1rem;
+}