Fixed issue with offline profiles's border radius

nightmaregaurav · Nov 12, 2024 · 8ec2ce1 · 8ec2ce1
1 parent 129c722
commit 8ec2ce1
Show file tree

Hide file tree

Showing 4 changed files with 9 additions and 6 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git 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
@@ -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
@@ -5,6 +5,5 @@
     background-repeat: no-repeat;
     background-position: center;
     background-size: cover;
-    border-width: 3px;
     border-style: solid;
 }