From 8ec2ce1055661a524332385ca7ce4f00f8a3b8b3 Mon Sep 17 00:00:00 2001
From: Gaurav Nyaupane <nightmaregaurav@users.noreply.github.com>
Date: Tue, 12 Nov 2024 23:00:26 +0545
Subject: [PATCH] Fixed issue with offline profiles's border radius

---
 package-lock.json      | 4 ++--
 package.json           | 2 +-
 src/ProfilePicture.tsx | 8 ++++++--
 src/profilePicture.css | 1 -
 4 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 70025bc..31b937d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@nightmaregaurav/react-profile-picture",
-  "version": "1.0.5",
+  "version": "1.0.7",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@nightmaregaurav/react-profile-picture",
-      "version": "1.0.5",
+      "version": "1.0.7",
       "license": "MIT",
       "devDependencies": {
         "@types/react": "^18.3.12",
diff --git a/package.json b/package.json
index c31ce75..98fb11e 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@nightmaregaurav/react-profile-picture",
-  "version": "1.0.7",
+  "version": "1.0.8",
   "description": "Simple react profile picture component.",
   "repository": {
     "type": "git",
diff --git a/src/ProfilePicture.tsx b/src/ProfilePicture.tsx
index 1b35bc0..34cbffc 100644
--- a/src/ProfilePicture.tsx
+++ b/src/ProfilePicture.tsx
@@ -1,6 +1,8 @@
 import React, {CSSProperties} from 'react';
 import "./profilePicture.css";
 
+const BORDER_WIDTH = "3px";
+
 interface ProfilePictureProps {
   size: Exclude<CSSProperties["width"], undefined>;
   imageUrl: string;
@@ -23,11 +25,13 @@ const ProfilePicture = (
       className={`profile-picture`}
       style={{
         backgroundImage: `url(${imageUrl})`,
-        width: `calc(${size} - 3px)`,
-        height: `calc(${size} - 3px)`,
+        width: `calc(${size} - ${BORDER_WIDTH} - ${BORDER_WIDTH})`,
+        height: `calc(${size} - ${BORDER_WIDTH} - ${BORDER_WIDTH})`,
+        borderWidth: (showOnlineBadge && isOnline) ? BORDER_WIDTH : "0px",
         borderColor: (showOnlineBadge && isOnline)
           ? onlineBadgeColor
           : "rgba(0, 0, 0, 0)",
+        padding: (showOnlineBadge && isOnline) ? "0px" : BORDER_WIDTH,
       }}
     />
   );
diff --git a/src/profilePicture.css b/src/profilePicture.css
index e812cae..e09eacf 100644
--- a/src/profilePicture.css
+++ b/src/profilePicture.css
@@ -5,6 +5,5 @@
     background-repeat: no-repeat;
     background-position: center;
     background-size: cover;
-    border-width: 3px;
     border-style: solid;
 }