From a7b94e345e9f469f19ff1000bcd6b54ea0bd6b7e Mon Sep 17 00:00:00 2001
From: Harshil Sharma <harshilsharma63@gmail.com>
Date: Fri, 20 Jan 2023 19:15:43 +0530
Subject: [PATCH] Added edit color and text options

---
 .../statusProperty/editStatusDialog.scss      | 41 +++++++++++++++++--
 .../statusProperty/editStatusDialog.tsx       |  3 ++
 2 files changed, 40 insertions(+), 4 deletions(-)

diff --git a/webapp/src/components/standardProperties/statusProperty/editStatusDialog.scss b/webapp/src/components/standardProperties/statusProperty/editStatusDialog.scss
index c93c7100f..636488cce 100644
--- a/webapp/src/components/standardProperties/statusProperty/editStatusDialog.scss
+++ b/webapp/src/components/standardProperties/statusProperty/editStatusDialog.scss
@@ -65,6 +65,8 @@
             .Label {
                 width: max-content;
                 margin-top: 0;
+                margin-right: auto;
+                max-width: 150px;
 
                 span {
                     overflow: hidden;
@@ -75,20 +77,51 @@
             .categorySwimlane_Value {
                 display: flex;
                 cursor: pointer;
-                padding-top: 4px;
-                padding-bottom: 4px;
+                padding: 4px;
+
+                .colorEditor, .EditIcon {
+                    display: none;
+                }
+
+                .colorEditor {
+                    margin-right: 4px;
+                    margin-left: 4px;
+                }
+
+                .EditIcon {
+                    width: 24px;
+                    height: 24px;
+                    text-align: center;
+                    border-radius: 4px;
+
+                    &:hover {
+                        background: rgba(var(--center-channel-color-rgb), 0.1);
+                    }
+                }
 
                 &:hover {
                     background: rgba(var(--center-channel-color-rgb), 0.1);
                     border-radius: 4px;
+
+                    .colorEditor, .EditIcon {
+                        display: block;
+                    }
                 }
 
                 .dragHandleWrapper {
                     width: 24px;
                     height: 24px;
-                    margin-top: 3px;
                     text-align: center;
                 }
+                
+                .colorEditor {
+                    width: 24px;
+                    min-width: 24px;
+                    max-width: 24px;
+                    height: 24px;
+                    border: 1px solid #80808052;
+                    border-radius: 4px;
+                }
             }
 
             .emptyColumnPlaceholder {
@@ -116,4 +149,4 @@
             }
         }
     }
-}
\ No newline at end of file
+}
diff --git a/webapp/src/components/standardProperties/statusProperty/editStatusDialog.tsx b/webapp/src/components/standardProperties/statusProperty/editStatusDialog.tsx
index 6d65ae0d7..3fe9cfc55 100644
--- a/webapp/src/components/standardProperties/statusProperty/editStatusDialog.tsx
+++ b/webapp/src/components/standardProperties/statusProperty/editStatusDialog.tsx
@@ -17,6 +17,7 @@ import ActionDialog from '../../actionDialog/actionDialog'
 import Label from '../../../widgets/label'
 import {IPropertyOption} from '../../../blocks/board'
 import DragHandle from '../../../widgets/icons/dragHandle'
+import EditIcon from '../../../widgets/icons/edit'
 
 export type StatusCategoryEmptyState = {
     icon: JSX.Element
@@ -70,6 +71,8 @@ const EditStatusPropertyDialog = (props: Props): JSX.Element => {
                         >
                             <span>{option.value}</span>
                         </Label>
+                        <div className={`colorEditor ${option.color} withBorder`}/>
+                        <EditIcon/>
                     </div>
                 )}
             </Draggable>