User card (#3213)

app/components/NoteAvatar.module.css

@@ -0,0 +1,66 @@
+.wrapper {
+	position: relative;
+	display: inline-flex;
+	flex-shrink: 0;
+	width: fit-content;
+}
+
+.badge {
+	position: absolute;
+	bottom: 15%;
+	inset-inline-start: 15%;
+	transform: translate(-50%, 50%);
+	display: grid;
+	place-items: center;
+	border-radius: var(--radius-full);
+	border: 2px solid var(--color-bg);
+	color: var(--color-bg);
+
+	& > svg {
+		stroke-width: 3;
+	}
+}
+
+.badgeMd {
+	width: 1.25rem;
+	height: 1.25rem;
+
+	& > svg {
+		width: 0.75rem;
+		height: 0.75rem;
+	}
+}
+
+.badgeSm {
+	width: 0.9rem;
+	height: 0.9rem;
+	border-width: 1.5px;
+
+	& > svg {
+		width: 0.6rem;
+		height: 0.6rem;
+	}
+}
+
+.badgeXs {
+	width: 0.65rem;
+	height: 0.65rem;
+	border-width: 1.5px;
+
+	& > svg {
+		width: 0.45rem;
+		height: 0.45rem;
+	}
+}
+
+.positive {
+	background-color: var(--color-success);
+}
+
+.negative {
+	background-color: var(--color-error);
+}
+
+.neutral {
+	background-color: var(--color-text-high);
+}