From 6ccb26abe5723c1d292a1792a15a5bc4c7e425a1 Mon Sep 17 00:00:00 2001
From: Alex Andreev <alex.andreev.email@gmail.com>
Date: Tue, 30 Nov 2021 10:19:54 +0300
Subject: [PATCH] Making avatar a bit more rounded

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
---
 src/renderer/components/avatar/avatar.module.css      | 2 +-
 src/renderer/components/hotbar/hotbar-icon.module.css | 6 +++++-
 src/renderer/components/hotbar/hotbar-icon.tsx        | 2 +-
 3 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/src/renderer/components/avatar/avatar.module.css b/src/renderer/components/avatar/avatar.module.css
index 6848c3cf7a..1c1b9234ad 100644
--- a/src/renderer/components/avatar/avatar.module.css
+++ b/src/renderer/components/avatar/avatar.module.css
@@ -42,7 +42,7 @@
 }
 
 .rounded {
-  border-radius: var(--border-radius);
+  border-radius: 4px;
 }
 
 .disabled {
diff --git a/src/renderer/components/hotbar/hotbar-icon.module.css b/src/renderer/components/hotbar/hotbar-icon.module.css
index 952d871ffc..5bed4d351b 100644
--- a/src/renderer/components/hotbar/hotbar-icon.module.css
+++ b/src/renderer/components/hotbar/hotbar-icon.module.css
@@ -26,7 +26,7 @@
   display: flex;
   cursor: pointer;
   position: relative;
-  border-radius: var(--border-radius);
+  border-radius: 6px;
   transition: box-shadow 0.1s ease-in-out;
 
   &:not(.active):hover {
@@ -38,6 +38,10 @@
   cursor: context-menu;
 }
 
+.avatar {
+  border-radius: 6px;
+}
+
 .active {
   box-shadow: var(--iconActiveShadow);
 }
\ No newline at end of file
diff --git a/src/renderer/components/hotbar/hotbar-icon.tsx b/src/renderer/components/hotbar/hotbar-icon.tsx
index 08f51021f9..0cd746b72f 100644
--- a/src/renderer/components/hotbar/hotbar-icon.tsx
+++ b/src/renderer/components/hotbar/hotbar-icon.tsx
@@ -77,7 +77,7 @@ export const HotbarIcon = observer(({ menuItems = [], size = 40, tooltip, ...pro
         id={id}
         title={title}
         colorHash={`${title}-${source}`}
-        className={cssNames({ [styles.active]: active })}
+        className={cssNames(styles.avatar, { [styles.active]: active })}
         disabled={disabled}
         size={size}
         src={src}