From 7bfa587a7797bf4d0735514d640f863a806270ab Mon Sep 17 00:00:00 2001
From: Nikolai R Kristiansen <nikolaik@gmail.com>
Date: Sun, 6 Mar 2022 13:34:05 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84=20Avatar=20rhombus?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/UserCard.module.css | 14 ++++++++++----
 frontend/src/components/UserCard.tsx        | 14 ++++++++++----
 2 files changed, 20 insertions(+), 8 deletions(-)

diff --git a/frontend/src/components/UserCard.module.css b/frontend/src/components/UserCard.module.css
index 8148631..31644d6 100644
--- a/frontend/src/components/UserCard.module.css
+++ b/frontend/src/components/UserCard.module.css
@@ -25,16 +25,22 @@
 }
 
 .avatar {
-  /* TODO: clip path */
   width: 50px;
   height: 50px;
-  border-radius: 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));
 }
 
-.avatar svg {
+.noAvatar {
+  display: block;
   width: 50px;
   height: 50px;
-  color: #ccc;
+  background-color: black;
+  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
+  content: "";
 }
 
 .name {
diff --git a/frontend/src/components/UserCard.tsx b/frontend/src/components/UserCard.tsx
index 549f195..9fdd310 100644
--- a/frontend/src/components/UserCard.tsx
+++ b/frontend/src/components/UserCard.tsx
@@ -15,10 +15,16 @@ export const UserCard: React.FC<UserCardProps> = ({ user, onUser, active = false
   const classes = clsx(styles.user, { [styles.active]: active });
   return (
     <button className={classes} onClick={onUser} type="button">
-      {user?.profile?.image && (
-        <img src={user.profile?.image} alt={`Profile for ${user.firstName}`} className={styles.avatar} />
-      )}
-      {!user?.profile?.image && <span className={styles.avatar}>TODO: NO IMAGE</span>}
+      <div className={styles.avatarWrap}>
+        {user?.profile?.image && (
+          <img src={user.profile?.image} alt={`Profile for ${user.firstName}`} className={styles.avatar} />
+        )}
+        {!user?.profile?.image && (
+          <span className={styles.avatar}>
+            <span className={styles.noAvatar} />
+          </span>
+        )}
+      </div>
       <span className={styles.name}>{user?.firstName || "Ekstern"}</span>
       <span className={styles.balance}>{user?.profile?.balance || ""}</span>
     </button>