Added edit color and text options

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: 4px;
-                padding-bottom: 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 {

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>