From 4a13ca9bbf939f8e551cb32a28a7532408317f05 Mon Sep 17 00:00:00 2001
From: Hamude Homsi <Hamude.Homsi@endava.com>
Date: Thu, 29 Jun 2023 13:43:50 +0300
Subject: [PATCH] refactor(avatar): add changes after PR review

---
 packages/bee-q/src/components/avatar/bq-avatar.tsx |  9 +++++----
 .../src/components/avatar/scss/bq-avatar.scss      |  6 +++---
 .../avatar/scss/bq-avatar.variables.scss           | 14 +++++++++++---
 3 files changed, 19 insertions(+), 10 deletions(-)

diff --git a/packages/bee-q/src/components/avatar/bq-avatar.tsx b/packages/bee-q/src/components/avatar/bq-avatar.tsx
index 84bd95f21..f6a12d2ee 100644
--- a/packages/bee-q/src/components/avatar/bq-avatar.tsx
+++ b/packages/bee-q/src/components/avatar/bq-avatar.tsx
@@ -140,10 +140,11 @@ export class BqAvatar {
           class={{
             avatar: true,
             [`size--${this.size}`]: true,
-            'rounded-full': this.shape === 'circle',
-            'rounded-xs': this.shape === 'square' && this.size === 'xsmall',
-            'rounded-s': this.shape === 'square' && this.size === 'small',
-            'rounded-m': this.shape === 'square' && (this.size === 'medium' || this.size === 'large'),
+            'rounded-[var(--bq-avatar--border-radius-circle)]': this.shape === 'circle',
+            'rounded-[var(--bq-avatar--border-radius-squareXs)]': this.shape === 'square' && this.size === 'xsmall',
+            'rounded-[var(--bq-avatar--border-radius-squareS)]': this.shape === 'square' && this.size === 'small',
+            'rounded-[var(--bq-avatar--border-radius-squareM)]':
+              this.shape === 'square' && (this.size === 'medium' || this.size === 'large'),
           }}
           aria-label={this.label}
           role="img"
diff --git a/packages/bee-q/src/components/avatar/scss/bq-avatar.scss b/packages/bee-q/src/components/avatar/scss/bq-avatar.scss
index e5e83aecd..fda8fea34 100644
--- a/packages/bee-q/src/components/avatar/scss/bq-avatar.scss
+++ b/packages/bee-q/src/components/avatar/scss/bq-avatar.scss
@@ -9,10 +9,10 @@
 }
 
 .avatar {
-  @apply relative overflow-hidden;
-  @apply bg-[var(--bq-avatar-background)];
+  @apply relative overflow-hidden bg-[var(--bq-avatar-background)];
+  @apply border-[length:var(--bq-avatar--border-width)] border-[color:var(--bq-avatar--border-color)];
 
-  border: var(--bq-avatar--border-width) var(--bq-avatar--border-style) var(--bq-avatar--border-color);
+  border-style: var(--bq-avatar--border-style);
 }
 
 .size {
diff --git a/packages/bee-q/src/components/avatar/scss/bq-avatar.variables.scss b/packages/bee-q/src/components/avatar/scss/bq-avatar.variables.scss
index 66cefaf0d..9d3beeeac 100644
--- a/packages/bee-q/src/components/avatar/scss/bq-avatar.variables.scss
+++ b/packages/bee-q/src/components/avatar/scss/bq-avatar.variables.scss
@@ -9,7 +9,11 @@
   * @prop --bq-avatar--border-color: Avatar border color
   * @prop --bq-avatar--border-style: Avatar border style
   * @prop --bq-avatar--border-width: Avatar border width
-  * @prop --bq-avatar--border-radius: Avatar border radius
+
+  * @prop --bq-avatar--border-radius-circle: Avatar border radius for circle & any size
+  * @prop --bq-avatar--border-radius-squareXs: Avatar border radius for square & size xsmall
+  * @prop --bq-avatar--border-radius-squareS: Avatar border radius for square & size small
+  * @prop --bq-avatar--border-radius-squareM: Avatar border radius for square & size medium/large
 
   * @prop --bq-avatar--size-xsmall: Avatar xsmall size
   * @prop --bq-avatar--size-small: Avatar small size
@@ -25,8 +29,12 @@
 
   --bq-avatar--border-color: theme('colors.stroke.tiertary');
   --bq-avatar--border-style: solid;
-  --bq-avatar--border-width: theme('borderSpacing.xs3');
-  --bq-avatar--border-radius: theme('borderRadius.full');
+  --bq-avatar--border-width: 2px;
+
+  --bq-avatar--border-radius-circle: theme('borderRadius.full');
+  --bq-avatar--border-radius-squareXs: theme('borderRadius.xs');
+  --bq-avatar--border-radius-squareS: theme('borderRadius.s');
+  --bq-avatar--border-radius-squareM: theme('borderRadius.m');
 
   --bq-avatar--size-xsmall: 24px;
   --bq-avatar--size-small: 32px;