From 438e7bb1db5ae03fe1c6339380ba9a2f4bd86e39 Mon Sep 17 00:00:00 2001
From: Dominik Pschenitschni <mail@celement.de>
Date: Mon, 18 Oct 2021 14:21:26 +0200
Subject: [PATCH] feat: merge notifications.vue with component styles

---
 .../notifications/notifications.vue           | 110 ++++++++++++++++++
 src/styles/components/_index.scss             |   1 -
 src/styles/components/notifications.scss      | 107 -----------------
 3 files changed, 110 insertions(+), 108 deletions(-)
 delete mode 100644 src/styles/components/notifications.scss

diff --git a/src/components/notifications/notifications.vue b/src/components/notifications/notifications.vue
index bd185511c..b67d8816a 100644
--- a/src/components/notifications/notifications.vue
+++ b/src/components/notifications/notifications.vue
@@ -133,3 +133,113 @@ export default {
 	},
 }
 </script>
+
+<style lang="scss" scoped>
+.notifications {
+	width: $navbar-icon-width;
+
+	.unread-indicator {
+		position: absolute;
+		top: .75rem;
+		right: 1.15rem;
+		width: .75rem;
+		height: .75rem;
+
+		background: $primary;
+		border-radius: 100%;
+		border: 2px solid $white;
+	}
+
+	.notifications-list {
+		position: fixed;
+		right: 1rem;
+		margin-top: 1rem;
+		max-height: 400px;
+		overflow-y: auto;
+
+		background: $white;
+		width: 350px;
+		max-width: calc(100vw - 2rem);
+		padding: .75rem .25rem;
+		border-radius: $radius;
+		box-shadow: $shadow-sm;
+		font-size: .85rem;
+
+		@media screen and (max-width: $tablet) {
+			max-height: calc(100vh - 1rem - #{$navbar-height});
+		}
+
+		.head {
+			font-family: $vikunja-font;
+			font-size: 1rem;
+			padding: .5rem;
+		}
+
+		.single-notification {
+			display: flex;
+			align-items: center;
+			padding: 0.25rem 0;
+
+			transition: background-color $transition;
+
+			&:hover {
+				background: $grey-100;
+				border-radius: $radius;
+			}
+
+			.read-indicator {
+				width: .35rem;
+				height: .35rem;
+				background: $primary;
+				border-radius: 100%;
+				margin-left: .5rem;
+
+				&.read {
+					background: transparent;
+				}
+			}
+
+			.user {
+				display: inline-flex;
+				align-items: center;
+				width: auto;
+				margin: 0 .5rem;
+
+				span {
+					font-family: $family-sans-serif;
+				}
+
+				.avatar {
+					height: 16px;
+				}
+
+				img {
+					margin-right: 0;
+				}
+			}
+
+			.created {
+				color: $grey-400;
+			}
+
+			&:last-child {
+				margin-bottom: .25rem;
+			}
+
+			a {
+				color: $grey-800;
+			}
+		}
+
+		.nothing {
+			text-align: center;
+			padding: 1rem 0;
+			color: $grey-500;
+
+			.explainer {
+				font-size: .75rem;
+			}
+		}
+	}
+}
+</style>
\ No newline at end of file
diff --git a/src/styles/components/_index.scss b/src/styles/components/_index.scss
index d5645eca0..77ba10b9f 100644
--- a/src/styles/components/_index.scss
+++ b/src/styles/components/_index.scss
@@ -9,5 +9,4 @@
 @import "teams";
 @import "table-view";
 @import "namespaces";
-@import "notifications";
 @import "quick-actions";
\ No newline at end of file
diff --git a/src/styles/components/notifications.scss b/src/styles/components/notifications.scss
deleted file mode 100644
index 8b0f1d233..000000000
--- a/src/styles/components/notifications.scss
+++ /dev/null
@@ -1,107 +0,0 @@
-.notifications {
-	width: $navbar-icon-width;
-
-	.unread-indicator {
-		position: absolute;
-		top: .75rem;
-		right: 1.15rem;
-		width: .75rem;
-		height: .75rem;
-
-		background: $primary;
-		border-radius: 100%;
-		border: 2px solid $white;
-	}
-
-	.notifications-list {
-		position: fixed;
-		right: 1rem;
-		margin-top: 1rem;
-		max-height: 400px;
-		overflow-y: auto;
-
-		background: $white;
-		width: 350px;
-		max-width: calc(100vw - 2rem);
-		padding: .75rem .25rem;
-		border-radius: $radius;
-		box-shadow: $shadow-sm;
-		font-size: .85rem;
-
-		@media screen and (max-width: $tablet) {
-			max-height: calc(100vh - 1rem - #{$navbar-height});
-		}
-
-		.head {
-			font-family: $vikunja-font;
-			font-size: 1rem;
-			padding: .5rem;
-		}
-
-		.single-notification {
-			display: flex;
-			align-items: center;
-			padding: 0.25rem 0;
-
-			transition: background-color $transition;
-
-			&:hover {
-				background: $grey-100;
-				border-radius: $radius;
-			}
-
-			.read-indicator {
-				width: .35rem;
-				height: .35rem;
-				background: $primary;
-				border-radius: 100%;
-				margin-left: .5rem;
-
-				&.read {
-					background: transparent;
-				}
-			}
-
-			.user {
-				display: inline-flex;
-				align-items: center;
-				width: auto;
-				margin: 0 .5rem;
-
-				span {
-					font-family: $family-sans-serif;
-				}
-
-				.avatar {
-					height: 16px;
-				}
-
-				img {
-					margin-right: 0;
-				}
-			}
-
-			.created {
-				color: $grey-400;
-			}
-
-			&:last-child {
-				margin-bottom: .25rem;
-			}
-
-			a {
-				color: $grey-800;
-			}
-		}
-
-		.nothing {
-			text-align: center;
-			padding: 1rem 0;
-			color: $grey-500;
-
-			.explainer {
-				font-size: .75rem;
-			}
-		}
-	}
-}