From 755be351f9d4fc0f511caceafd8222b0c7f09900 Mon Sep 17 00:00:00 2001
From: Santosh Bhandari <contact@santoshb.com.np>
Date: Sat, 30 Oct 2021 18:53:21 +0545
Subject: [PATCH] Add border to color picker selector (#1329)

---
 frontend/src/Editor/Inspector/Elements/Color.jsx | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/frontend/src/Editor/Inspector/Elements/Color.jsx b/frontend/src/Editor/Inspector/Elements/Color.jsx
index 139ef508a9..396fe7d952 100644
--- a/frontend/src/Editor/Inspector/Elements/Color.jsx
+++ b/frontend/src/Editor/Inspector/Elements/Color.jsx
@@ -34,7 +34,15 @@ export const Color = ({ param, definition, onChange, paramType, componentMeta })
       <div className="row mx-0 form-control color-picker-input" onClick={() => setShowPicker(true)}>
         <div
           className="col-auto"
-          style={{ float: 'right', width: '20px', height: '20px', backgroundColor: definition.value }}
+          style={
+            {
+              float: 'right',
+              width: '20px',
+              height: '20px',
+              backgroundColor: definition.value,
+              border: `0.25px solid ${['#ffffff', '#fff', '#1f2936'].includes(definition.value) && '#c5c8c9'}`
+            }
+          }
         ></div>
         <div className="col">{definition.value}</div>
       </div>