From 79680f603c7554eea0bc6199e667bb4a24b9a48b Mon Sep 17 00:00:00 2001
From: ajayduth-keyvalue <96684426+ajayduth-keyvalue@users.noreply.github.com>
Date: Mon, 22 Apr 2024 15:24:42 +0530
Subject: [PATCH] refactor: Add support for react versions>= 16.8, style
 changes

---
 package-lock.json                        | 2 +-
 package.json                             | 2 +-
 src/lib/inline-images/constants.ts       | 4 ++--
 src/lib/inline-images/styles.module.scss | 7 ++++---
 4 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 5e9835f..5f73448 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -63,7 +63,7 @@
         "node": ">=10"
       },
       "peerDependencies": {
-        "react": "^18.2.0"
+        "react": ">=16.8.0"
       }
     },
     "node_modules/@adobe/css-tools": {
diff --git a/package.json b/package.json
index c1e1f12..5927229 100644
--- a/package.json
+++ b/package.json
@@ -85,7 +85,7 @@
     "webpack-merge-and-include-globally": "^2.3.4"
   },
   "peerDependencies": {
-    "react": "^18.2.0"
+    "react": ">=16.8.0"
   },
   "files": [
     "build"
diff --git a/src/lib/inline-images/constants.ts b/src/lib/inline-images/constants.ts
index c6f297c..0569ef6 100644
--- a/src/lib/inline-images/constants.ts
+++ b/src/lib/inline-images/constants.ts
@@ -1,4 +1,4 @@
-export const DEFAULT_SPACE_BETWEEN_PICS = 20;
+export const DEFAULT_SPACE_BETWEEN_PICS = 45;
 
 export enum Elements {
   Avatar = "Avatar",
@@ -6,4 +6,4 @@ export enum Elements {
   Name = "Name"
 }
 
-export const DEFAULT_AVATAR_SIZE = 40;
\ No newline at end of file
+export const DEFAULT_AVATAR_SIZE = 64;
\ No newline at end of file
diff --git a/src/lib/inline-images/styles.module.scss b/src/lib/inline-images/styles.module.scss
index 628c42e..66575ad 100644
--- a/src/lib/inline-images/styles.module.scss
+++ b/src/lib/inline-images/styles.module.scss
@@ -8,7 +8,7 @@
     margin-top: 5px;
   }
   img {
-    border: 3px solid white;
+    border: 4px solid white;
     transition: all 0.3s;
     &.elevateOnHover:hover {
       transform: scale(1.1); 
@@ -40,8 +40,9 @@
     top: 0;
   }
   .extraCount {
-    border: 3px solid white;
-    background: floralwhite;
+    border: 4px solid white;
+    background: #F3F3FF;
+    color: #5D5FEF;
     display: flex;
     justify-content: center;
     align-items: center;