🚚 Move ProductCard and UserCard

closer to their feature

frontend/src/features/users/UserCard.module.css

@@ -0,0 +1,49 @@
+.user {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 4px;
+  border: 1px solid transparent;
+  background: transparent;
+  border-radius: 4px;
+  color: var(--text);
+  transition: background-color 0.1s ease-out, border 0.1s ease-out;
+  max-height: 100px;
+}
+
+.user:hover {
+  border-color: var(--border);
+  cursor: pointer;
+}
+
+.active {
+  border-color: var(--border);
+  background: var(--border);
+}
+
+.active:hover {
+  /* TODO */
+}
+
+.avatar {
+  width: 50px;
+  height: 50px;
+  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
+}
+.avatarWrap {
+  filter: drop-shadow(0 0 4px var(--background)) drop-shadow(0 0 11px var(--background))
+    drop-shadow(0 0 19px var(--background));
+}
+
+.noAvatar {
+  display: block;
+  width: 50px;
+  height: 50px;
+  background-color: black;
+  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
+  content: "";
+}
+
+.name {
+  font-weight: bold;
+}