Merge branch 'main' into GH2520

mattermost-plugin/product/boards_product.go

@@ -70,7 +70,7 @@ type boardsProduct struct {
 	boardsApp *boards.BoardsApp
 }
 
-//nolint:gocyclo
+//nolint:gocyclo,exhaustive
 func newBoardsProduct(_ *app.Server, services map[app.ServiceKey]interface{}) (app.Product, error) {
 	boards := &boardsProduct{}
 

mattermost-plugin/server/boards/notifications.go

@@ -12,17 +12,9 @@ import (
 	"github.com/mattermost/focalboard/server/services/permissions"
 	"github.com/mattermost/focalboard/server/services/store"
 
-	mm_model "github.com/mattermost/mattermost-server/v6/model"
-
 	"github.com/mattermost/mattermost-server/v6/shared/mlog"
 )
 
-const (
-	botUsername    = "boards"
-	botDisplayname = "Boards"
-	botDescription = "Created by Boards plugin."
-)
-
 type notifyBackendParams struct {
 	cfg         *config.Configuration
 	servicesAPI model.ServicesAPI
@@ -71,15 +63,11 @@ func createSubscriptionsNotifyBackend(params notifyBackendParams) (*notifysubscr
 }
 
 func createDelivery(servicesAPI model.ServicesAPI, serverRoot string) (*plugindelivery.PluginDelivery, error) {
-	bot := &mm_model.Bot{
-		Username:    botUsername,
-		DisplayName: botDisplayname,
-		Description: botDescription,
-		OwnerId:     model.SystemUserID,
-	}
+	bot := model.FocalboardBot
+
 	botID, err := servicesAPI.EnsureBot(bot)
 	if err != nil {
-		return nil, fmt.Errorf("failed to ensure %s bot: %w", botDisplayname, err)
+		return nil, fmt.Errorf("failed to ensure %s bot: %w", bot.DisplayName, err)
 	}
 
 	return plugindelivery.New(botID, serverRoot, servicesAPI), nil

mattermost-plugin/webapp/src/components/__snapshots__/rhsChannelBoardItem.test.tsx.snap

@@ -69,7 +69,7 @@ exports[`components/rhsChannelBoardItem render board with menu open 1`] = `
           />
         </button>
         <div
-          class="Menu noselect left  fixed"
+          class="Menu noselect left "
         >
           <div
             class="menu-contents"
@@ -91,15 +91,20 @@ exports[`components/rhsChannelBoardItem render board with menu open 1`] = `
                     />
                   </div>
                   <div
-                    class="menu-name"
+                    class="menu-option__content"
                   >
-                    Unlink board
+                    <div
+                      class="menu-name"
+                    >
+                      Unlink board
+                    </div>
                   </div>
                   <div
                     class="noicon"
                   />
                 </div>
               </div>
+              <div />
             </div>
             <div
               class="menu-spacer hideOnWidescreen"
@@ -120,9 +125,13 @@ exports[`components/rhsChannelBoardItem render board with menu open 1`] = `
                   />
                 </div>
                 <div
-                  class="menu-name"
+                  class="menu-option__content"
                 >
-                  Cancel
+                  <div
+                    class="menu-name"
+                  >
+                    Cancel
+                  </div>
                 </div>
                 <div
                   class="noicon"

mattermost-plugin/webapp/src/components/rhsChannelBoardItem.scss

@@ -1,13 +1,15 @@
 .RHSChannelBoardItem {
     padding: 15px;
     text-align: left;
-    border: 1px solid #cccccc;
+    border: 1px solid rgba(var(--center-channel-color-rgb), 0.16);
+    box-shadow: var(--elevation-1);
     border-radius: 5px;
     cursor: pointer;
     color: rgb(var(--center-channel-color-rgb));
 
     .date {
-        color: #cccccc;
+        font-size: 12px;
+        opacity: 0.64;
     }
 
     .board-info {
@@ -19,6 +21,7 @@
         }
 
         .title {
+            font-size: 14px;
             font-weight: 600;
             flex-grow: 1;
             white-space: nowrap;
@@ -28,6 +31,9 @@
     }
 
     .description {
+        margin: 4px 0;
+        font-size: 12px;
+        line-height: 16px;
         display: -webkit-box;
         -webkit-line-clamp: 3;
         -webkit-box-orient: vertical;

mattermost-plugin/webapp/src/components/rhsChannelBoardItem.test.tsx

@@ -14,6 +14,7 @@ import RHSChannelBoardItem from './rhsChannelBoardItem'
 
 describe('components/rhsChannelBoardItem', () => {
     it('render board', async () => {
+        const board = createBoard()
         const state = {
             teams: {
                 current: {
@@ -22,8 +23,12 @@ describe('components/rhsChannelBoardItem', () => {
                     display_name: 'Team name',
                 },
             },
+            boards: {
+                myBoardMemberships: {
+                    [board.id]: {userId: 'user_id_1', schemeAdmin: true},
+                },
+            }
         }
-        const board = createBoard()
         board.updateAt = 1657311058157
         board.title = 'Test board'
 
@@ -37,6 +42,7 @@ describe('components/rhsChannelBoardItem', () => {
     })
 
     it('render board with menu open', async () => {
+        const board = createBoard()
         const state = {
             teams: {
                 current: {
@@ -45,8 +51,12 @@ describe('components/rhsChannelBoardItem', () => {
                     display_name: 'Team name',
                 },
             },
+            boards: {
+                myBoardMemberships: {
+                    [board.id]: {userId: 'user_id_1', schemeAdmin: true},
+                },
+            }
         }
-        const board = createBoard()
         board.updateAt = 1657311058157
         board.title = 'Test board'
 

mattermost-plugin/webapp/src/components/rhsChannelBoardItem.tsx

@@ -15,7 +15,10 @@ import Menu from '../../../../webapp/src/widgets/menu'
 import MenuWrapper from '../../../../webapp/src/widgets/menuWrapper'
 import {SuiteWindow} from '../../../../webapp/src/types/index'
 
+import {Permission} from '../../../../webapp/src/constants'
+
 import './rhsChannelBoardItem.scss'
+import BoardPermissionGate from '../../../../webapp/src/components/permissions/boardPermissionGate'
 
 const windowAny = (window as SuiteWindow)
 
@@ -55,18 +58,41 @@ const RHSChannelBoardItem = (props: Props) => {
                 <MenuWrapper stopPropagationOnToggle={true}>
                     <IconButton icon={<OptionsIcon/>}/>
                     <Menu
-                        fixed={true}
                         position='left'
                     >
-                        <Menu.Text
-                            key={`unlinkBoard-${board.id}`}
-                            id='unlinkBoard'
-                            name={intl.formatMessage({id: 'rhs-boards.unlink-board', defaultMessage: 'Unlink board'})}
-                            icon={<DeleteIcon/>}
-                            onClick={() => {
-                                onUnlinkBoard(board)
-                            }}
-                        />
+                        <BoardPermissionGate
+                            boardId={board.id}
+                            teamId={team.id}
+                            permissions={[Permission.ManageBoardRoles]}
+                        >
+                            <Menu.Text
+                                key={`unlinkBoard-${board.id}`}
+                                id='unlinkBoard'
+                                name={intl.formatMessage({id: 'rhs-boards.unlink-board', defaultMessage: 'Unlink board'})}
+                                icon={<DeleteIcon/>}
+                                onClick={() => {
+                                    onUnlinkBoard(board)
+                                }}
+                            />
+                        </BoardPermissionGate>
+                        <BoardPermissionGate
+                            boardId={board.id}
+                            teamId={team.id}
+                            permissions={[Permission.ManageBoardRoles]}
+                            invert={true}
+                        >
+                            <Menu.Text
+                                key={`unlinkBoard-${board.id}`}
+                                id='unlinkBoard'
+                                disabled={true}
+                                name={intl.formatMessage({id: 'rhs-boards.unlink-board1', defaultMessage: 'Unlink board Hello'})}
+                                icon={<DeleteIcon/>}
+                                onClick={() => {
+                                    onUnlinkBoard(board)
+                                }}
+                                subText={intl.formatMessage({id: 'rhs-board-non-admin-msg', defaultMessage:'You are not an admin of the board'})}
+                            />
+                        </BoardPermissionGate>
                     </Menu>
                 </MenuWrapper>
             </div>

mattermost-plugin/webapp/src/components/rhsChannelBoards.scss

@@ -1,9 +1,9 @@
 .RHSChannelBoards {
-    padding: 20px;
+    padding: 16px 24px;
     height: 100%;
     display: flex;
     flex-direction: column;
-    gap: 10px;
+    gap: 16px;
 
     &.empty {
         display: flex;
@@ -45,7 +45,8 @@
         overflow-y: auto;
         display: flex;
         flex-direction: column;
-        gap: 10px;
+        gap: 16px;
+        min-height: 100%;
     }
 
     .Button {

server/api/blocks.go

@@ -190,7 +190,7 @@ func (a *API) handlePostBlocks(w http.ResponseWriter, r *http.Request) {
 	//   type: string
 	// - name: disable_notify
 	//   in: query
-	//   description: Disables notifications (for bulk data inserting)
+	//   description: Disables notifications (for bulk inserting)
 	//   required: false
 	//   type: bool
 	// - name: Body
@@ -289,7 +289,7 @@ func (a *API) handlePostBlocks(w http.ResponseWriter, r *http.Request) {
 		}
 	}
 
-	newBlocks, err := a.app.InsertBlocks(blocks, session.UserID, !disableNotify)
+	newBlocks, err := a.app.InsertBlocksAndNotify(blocks, session.UserID, disableNotify)
 	if err != nil {
 		if errors.Is(err, app.ErrViewsLimitReached) {
 			a.errorResponse(w, r.URL.Path, http.StatusBadRequest, err.Error(), err)
@@ -336,6 +336,11 @@ func (a *API) handleDeleteBlock(w http.ResponseWriter, r *http.Request) {
 	//   description: ID of block to delete
 	//   required: true
 	//   type: string
+	// - name: disable_notify
+	//   in: query
+	//   description: Disables notifications (for bulk deletion)
+	//   required: false
+	//   type: bool
 	// security:
 	// - BearerAuth: []
 	// responses:
@@ -353,6 +358,9 @@ func (a *API) handleDeleteBlock(w http.ResponseWriter, r *http.Request) {
 	boardID := vars["boardID"]
 	blockID := vars["blockID"]
 
+	val := r.URL.Query().Get("disable_notify")
+	disableNotify := val == True
+
 	if !a.permissions.HasPermissionToBoard(userID, boardID, model.PermissionManageBoardCards) {
 		a.errorResponse(w, r.URL.Path, http.StatusForbidden, "", PermissionError{"access denied to make board changes"})
 		return
@@ -373,7 +381,7 @@ func (a *API) handleDeleteBlock(w http.ResponseWriter, r *http.Request) {
 	auditRec.AddMeta("boardID", boardID)
 	auditRec.AddMeta("blockID", blockID)
 
-	err = a.app.DeleteBlock(blockID, userID)
+	err = a.app.DeleteBlockAndNotify(blockID, userID, disableNotify)
 	if err != nil {
 		a.errorResponse(w, r.URL.Path, http.StatusInternalServerError, "", err)
 		return
@@ -497,6 +505,11 @@ func (a *API) handlePatchBlock(w http.ResponseWriter, r *http.Request) {
 	//   description: ID of block to patch
 	//   required: true
 	//   type: string
+	// - name: disable_notify
+	//   in: query
+	//   description: Disables notifications (for bulk patching)
+	//   required: false
+	//   type: bool
 	// - name: Body
 	//   in: body
 	//   description: block patch to apply
@@ -520,6 +533,9 @@ func (a *API) handlePatchBlock(w http.ResponseWriter, r *http.Request) {
 	boardID := vars["boardID"]
 	blockID := vars["blockID"]
 
+	val := r.URL.Query().Get("disable_notify")
+	disableNotify := val == True
+
 	if !a.permissions.HasPermissionToBoard(userID, boardID, model.PermissionManageBoardCards) {
 		a.errorResponse(w, r.URL.Path, http.StatusForbidden, "", PermissionError{"access denied to make board changes"})
 		return
@@ -553,7 +569,7 @@ func (a *API) handlePatchBlock(w http.ResponseWriter, r *http.Request) {
 	auditRec.AddMeta("boardID", boardID)
 	auditRec.AddMeta("blockID", blockID)
 
-	err = a.app.PatchBlock(blockID, patch, userID)
+	err = a.app.PatchBlockAndNotify(blockID, patch, userID, disableNotify)
 	if errors.Is(err, app.ErrPatchUpdatesLimitedCards) {
 		a.errorResponse(w, r.URL.Path, http.StatusForbidden, "", err)
 		return
@@ -583,6 +599,11 @@ func (a *API) handlePatchBlocks(w http.ResponseWriter, r *http.Request) {
 	//   description: Workspace ID
 	//   required: true
 	//   type: string
+	// - name: disable_notify
+	//   in: query
+	//   description: Disables notifications (for bulk patching)
+	//   required: false
+	//   type: bool
 	// - name: Body
 	//   in: body
 	//   description: block Ids and block patches to apply
@@ -606,6 +627,9 @@ func (a *API) handlePatchBlocks(w http.ResponseWriter, r *http.Request) {
 	vars := mux.Vars(r)
 	teamID := vars["teamID"]
 
+	val := r.URL.Query().Get("disable_notify")
+	disableNotify := val == True
+
 	requestBody, err := ioutil.ReadAll(r.Body)
 	if err != nil {
 		a.errorResponse(w, r.URL.Path, http.StatusInternalServerError, "", err)
@@ -638,7 +662,7 @@ func (a *API) handlePatchBlocks(w http.ResponseWriter, r *http.Request) {
 		}
 	}
 
-	err = a.app.PatchBlocks(teamID, patches, userID)
+	err = a.app.PatchBlocksAndNotify(teamID, patches, userID, disableNotify)
 	if errors.Is(err, app.ErrPatchUpdatesLimitedCards) {
 		a.errorResponse(w, r.URL.Path, http.StatusForbidden, "", err)
 		return

server/app/blocks.go

@@ -66,6 +66,10 @@ func (a *App) DuplicateBlock(boardID string, blockID string, userID string, asTe
 }
 
 func (a *App) PatchBlock(blockID string, blockPatch *model.BlockPatch, modifiedByID string) error {
+	return a.PatchBlockAndNotify(blockID, blockPatch, modifiedByID, false)
+}
+
+func (a *App) PatchBlockAndNotify(blockID string, blockPatch *model.BlockPatch, modifiedByID string, disableNotify bool) error {
 	oldBlock, err := a.store.GetBlock(blockID)
 	if err != nil {
 		return err
@@ -104,13 +108,19 @@ func (a *App) PatchBlock(blockID string, blockPatch *model.BlockPatch, modifiedB
 		a.webhook.NotifyUpdate(*block)
 
 		// send notifications
-		a.notifyBlockChanged(notify.Update, block, oldBlock, modifiedByID)
+		if !disableNotify {
+			a.notifyBlockChanged(notify.Update, block, oldBlock, modifiedByID)
+		}
 		return nil
 	})
 	return nil
 }
 
 func (a *App) PatchBlocks(teamID string, blockPatches *model.BlockPatchBatch, modifiedByID string) error {
+	return a.PatchBlocksAndNotify(teamID, blockPatches, modifiedByID, false)
+}
+
+func (a *App) PatchBlocksAndNotify(teamID string, blockPatches *model.BlockPatchBatch, modifiedByID string, disableNotify bool) error {
 	oldBlocks, err := a.store.GetBlocksByIDs(blockPatches.BlockIDs)
 	if err != nil {
 		return err
@@ -139,7 +149,9 @@ func (a *App) PatchBlocks(teamID string, blockPatches *model.BlockPatchBatch, mo
 			}
 			a.wsAdapter.BroadcastBlockChange(teamID, *newBlock)
 			a.webhook.NotifyUpdate(*newBlock)
-			a.notifyBlockChanged(notify.Update, newBlock, &oldBlocks[i], modifiedByID)
+			if !disableNotify {
+				a.notifyBlockChanged(notify.Update, newBlock, &oldBlocks[i], modifiedByID)
+			}
 		}
 		return nil
 	})
@@ -147,6 +159,10 @@ func (a *App) PatchBlocks(teamID string, blockPatches *model.BlockPatchBatch, mo
 }
 
 func (a *App) InsertBlock(block model.Block, modifiedByID string) error {
+	return a.InsertBlockAndNotify(block, modifiedByID, false)
+}
+
+func (a *App) InsertBlockAndNotify(block model.Block, modifiedByID string, disableNotify bool) error {
 	board, bErr := a.store.GetBoard(block.BoardID)
 	if bErr != nil {
 		return bErr
@@ -158,8 +174,9 @@ func (a *App) InsertBlock(block model.Block, modifiedByID string) error {
 			a.wsAdapter.BroadcastBlockChange(board.TeamID, block)
 			a.metrics.IncrementBlocksInserted(1)
 			a.webhook.NotifyUpdate(block)
-			a.notifyBlockChanged(notify.Add, &block, nil, modifiedByID)
-
+			if !disableNotify {
+				a.notifyBlockChanged(notify.Add, &block, nil, modifiedByID)
+			}
 			return nil
 		})
 	}
@@ -198,7 +215,11 @@ func (a *App) isWithinViewsLimit(boardID string, block model.Block) (bool, error
 	return len(views) < limits.Views, nil
 }
 
-func (a *App) InsertBlocks(blocks []model.Block, modifiedByID string, allowNotifications bool) ([]model.Block, error) {
+func (a *App) InsertBlocks(blocks []model.Block, modifiedByID string) ([]model.Block, error) {
+	return a.InsertBlocksAndNotify(blocks, modifiedByID, false)
+}
+
+func (a *App) InsertBlocksAndNotify(blocks []model.Block, modifiedByID string, disableNotify bool) ([]model.Block, error) {
 	if len(blocks) == 0 {
 		return []model.Block{}, nil
 	}
@@ -246,11 +267,10 @@ func (a *App) InsertBlocks(blocks []model.Block, modifiedByID string, allowNotif
 		for _, b := range needsNotify {
 			block := b
 			a.webhook.NotifyUpdate(block)
-			if allowNotifications {
+			if !disableNotify {
 				a.notifyBlockChanged(notify.Add, &block, nil, modifiedByID)
 			}
 		}
-
 		return nil
 	})
 
@@ -331,6 +351,10 @@ func (a *App) GetBlockByID(blockID string) (*model.Block, error) {
 }
 
 func (a *App) DeleteBlock(blockID string, modifiedBy string) error {
+	return a.DeleteBlockAndNotify(blockID, modifiedBy, false)
+}
+
+func (a *App) DeleteBlockAndNotify(blockID string, modifiedBy string, disableNotify bool) error {
 	block, err := a.store.GetBlock(blockID)
 	if err != nil {
 		return err
@@ -368,8 +392,9 @@ func (a *App) DeleteBlock(blockID string, modifiedBy string) error {
 	a.blockChangeNotifier.Enqueue(func() error {
 		a.wsAdapter.BroadcastBlockDelete(board.TeamID, blockID, block.BoardID)
 		a.metrics.IncrementBlocksDeleted(1)
-		a.notifyBlockChanged(notify.Delete, block, block, modifiedBy)
-
+		if !disableNotify {
+			a.notifyBlockChanged(notify.Delete, block, block, modifiedBy)
+		}
 		return nil
 	})
 

server/app/blocks_test.go

@@ -287,7 +287,7 @@ func TestInsertBlocks(t *testing.T) {
 		th.Store.EXPECT().GetBoard(boardID).Return(board, nil)
 		th.Store.EXPECT().InsertBlock(&block, "user-id-1").Return(nil)
 		th.Store.EXPECT().GetMembersForBoard(boardID).Return([]*model.BoardMember{}, nil)
-		_, err := th.App.InsertBlocks([]model.Block{block}, "user-id-1", false)
+		_, err := th.App.InsertBlocks([]model.Block{block}, "user-id-1")
 		require.NoError(t, err)
 	})
 
@@ -297,7 +297,7 @@ func TestInsertBlocks(t *testing.T) {
 		board := &model.Board{ID: boardID}
 		th.Store.EXPECT().GetBoard(boardID).Return(board, nil)
 		th.Store.EXPECT().InsertBlock(&block, "user-id-1").Return(blockError{"error"})
-		_, err := th.App.InsertBlocks([]model.Block{block}, "user-id-1", false)
+		_, err := th.App.InsertBlocks([]model.Block{block}, "user-id-1")
 		require.Error(t, err, "error")
 	})
 
@@ -329,7 +329,7 @@ func TestInsertBlocks(t *testing.T) {
 		th.Store.EXPECT().GetCardLimitTimestamp().Return(int64(1), nil)
 		th.Store.EXPECT().GetBlocksWithParentAndType("test-board-id", "parent_id", "view").Return([]model.Block{{}}, nil)
 
-		_, err := th.App.InsertBlocks([]model.Block{block}, "user-id-1", false)
+		_, err := th.App.InsertBlocks([]model.Block{block}, "user-id-1")
 		require.NoError(t, err)
 	})
 
@@ -359,7 +359,7 @@ func TestInsertBlocks(t *testing.T) {
 		th.Store.EXPECT().GetCardLimitTimestamp().Return(int64(1), nil)
 		th.Store.EXPECT().GetBlocksWithParentAndType("test-board-id", "parent_id", "view").Return([]model.Block{{}, {}}, nil)
 
-		_, err := th.App.InsertBlocks([]model.Block{block}, "user-id-1", false)
+		_, err := th.App.InsertBlocks([]model.Block{block}, "user-id-1")
 		require.Error(t, err)
 	})
 
@@ -400,7 +400,7 @@ func TestInsertBlocks(t *testing.T) {
 		th.Store.EXPECT().GetCardLimitTimestamp().Return(int64(1), nil).Times(2)
 		th.Store.EXPECT().GetBlocksWithParentAndType("test-board-id", "parent_id", "view").Return([]model.Block{{}}, nil).Times(2)
 
-		_, err := th.App.InsertBlocks([]model.Block{view1, view2}, "user-id-1", false)
+		_, err := th.App.InsertBlocks([]model.Block{view1, view2}, "user-id-1")
 		require.Error(t, err)
 	})
 }

server/app/boards.go

@@ -20,6 +20,9 @@ var (
 	ErrInsufficientLicense    = errors.New("appropriate license required")
 )
 
+const linkBoardMessage = "@%s linked Board [%s](%s) with this channel"
+const unlinkBoardMessage = "@%s unlinked Board [%s](%s) with this channel"
+
 func (a *App) GetBoard(boardID string) (*model.Board, error) {
 	board, err := a.store.GetBoard(boardID)
 	if model.IsErrNotFound(err) {
@@ -302,18 +305,54 @@ func (a *App) CreateBoard(board *model.Board, userID string, addMember bool) (*m
 
 func (a *App) PatchBoard(patch *model.BoardPatch, boardID, userID string) (*model.Board, error) {
 	var oldMembers []*model.BoardMember
+	var oldChannelID string
 	if patch.ChannelID != nil && *patch.ChannelID == "" {
 		var err error
 		oldMembers, err = a.GetMembersForBoard(boardID)
 		if err != nil {
 			a.logger.Error("Unable to get the board members", mlog.Err(err))
 		}
+		board, err := a.store.GetBoard(boardID)
+		if model.IsErrNotFound(err) {
+			return nil, model.NewErrNotFound(boardID)
+		}
+		if err != nil {
+			return nil, err
+		}
+		oldChannelID = board.ChannelID
 	}
 	updatedBoard, err := a.store.PatchBoard(boardID, patch, userID)
 	if err != nil {
 		return nil, err
 	}
 
+	if patch.ChannelID != nil {
+		var username string
+		user, err := a.store.GetUserByID(userID)
+		if err != nil {
+			a.logger.Error("Unable to get the board updater", mlog.Err(err))
+			username = "unknown"
+		} else {
+			username = user.Username
+		}
+
+		boardLink := utils.MakeBoardLink(a.config.ServerRoot, updatedBoard.TeamID, updatedBoard.ID)
+		if *patch.ChannelID != "" {
+			// TODO: this needs translated when available on the server
+			message := fmt.Sprintf(linkBoardMessage, username, updatedBoard.Title, boardLink)
+			err := a.store.PostMessage(message, "", *patch.ChannelID)
+			if err != nil {
+				a.logger.Error("Unable to post the link message to channel", mlog.Err(err))
+			}
+		} else if *patch.ChannelID == "" {
+			message := fmt.Sprintf(unlinkBoardMessage, username, updatedBoard.Title, boardLink)
+			err := a.store.PostMessage(message, "", oldChannelID)
+			if err != nil {
+				a.logger.Error("Unable to post the link message to channel", mlog.Err(err))
+			}
+		}
+	}
+
 	a.blockChangeNotifier.Enqueue(func() error {
 		a.wsAdapter.BroadcastBoardChange(updatedBoard.TeamID, updatedBoard)
 		if patch.ChannelID != nil && *patch.ChannelID != "" {

server/client/client.go

@@ -256,8 +256,14 @@ func (c *Client) GetAllBlocksForBoard(boardID string) ([]model.Block, *Response)
 	return model.BlocksFromJSON(r.Body), BuildResponse(r)
 }
 
-func (c *Client) PatchBlock(boardID, blockID string, blockPatch *model.BlockPatch) (bool, *Response) {
-	r, err := c.DoAPIPatch(c.GetBlockRoute(boardID, blockID), toJSON(blockPatch))
+const disableNotifyQueryParam = "disable_notify=true"
+
+func (c *Client) PatchBlock(boardID, blockID string, blockPatch *model.BlockPatch, disableNotify bool) (bool, *Response) {
+	var queryParams string
+	if disableNotify {
+		queryParams = "?" + disableNotifyQueryParam
+	}
+	r, err := c.DoAPIPatch(c.GetBlockRoute(boardID, blockID)+queryParams, toJSON(blockPatch))
 	if err != nil {
 		return false, BuildErrorResponse(r, err)
 	}
@@ -307,8 +313,12 @@ func (c *Client) UndeleteBlock(boardID, blockID string) (bool, *Response) {
 	return true, BuildResponse(r)
 }
 
-func (c *Client) InsertBlocks(boardID string, blocks []model.Block) ([]model.Block, *Response) {
-	r, err := c.DoAPIPost(c.GetBlocksRoute(boardID), toJSON(blocks))
+func (c *Client) InsertBlocks(boardID string, blocks []model.Block, disableNotify bool) ([]model.Block, *Response) {
+	var queryParams string
+	if disableNotify {
+		queryParams = "?" + disableNotifyQueryParam
+	}
+	r, err := c.DoAPIPost(c.GetBlocksRoute(boardID)+queryParams, toJSON(blocks))
 	if err != nil {
 		return nil, BuildErrorResponse(r, err)
 	}
@@ -317,18 +327,12 @@ func (c *Client) InsertBlocks(boardID string, blocks []model.Block) ([]model.Blo
 	return model.BlocksFromJSON(r.Body), BuildResponse(r)
 }
 
-func (c *Client) InsertBlocksDisableNotify(boardID string, blocks []model.Block) ([]model.Block, *Response) {
-	r, err := c.DoAPIPost(c.GetBlocksRoute(boardID)+"?disable_notify=true", toJSON(blocks))
-	if err != nil {
-		return nil, BuildErrorResponse(r, err)
+func (c *Client) DeleteBlock(boardID, blockID string, disableNotify bool) (bool, *Response) {
+	var queryParams string
+	if disableNotify {
+		queryParams = "?" + disableNotifyQueryParam
 	}
-	defer closeBody(r)
-
-	return model.BlocksFromJSON(r.Body), BuildResponse(r)
-}
-
-func (c *Client) DeleteBlock(boardID, blockID string) (bool, *Response) {
-	r, err := c.DoAPIDelete(c.GetBlockRoute(boardID, blockID), "")
+	r, err := c.DoAPIDelete(c.GetBlockRoute(boardID, blockID)+queryParams, "")
 	if err != nil {
 		return false, BuildErrorResponse(r, err)
 	}

server/integrationtests/blocks_test.go

@@ -34,7 +34,7 @@ func TestGetBlocks(t *testing.T) {
 			Type:     model.TypeCard,
 		},
 	}
-	newBlocks, resp := th.Client.InsertBlocks(board.ID, newBlocks)
+	newBlocks, resp := th.Client.InsertBlocks(board.ID, newBlocks, false)
 	require.NoError(t, resp.Error)
 	require.Len(t, newBlocks, 2)
 	blockID1 := newBlocks[0].ID
@@ -73,7 +73,7 @@ func TestPostBlock(t *testing.T) {
 			Title:    "New title",
 		}
 
-		newBlocks, resp := th.Client.InsertBlocks(board.ID, []model.Block{block})
+		newBlocks, resp := th.Client.InsertBlocks(board.ID, []model.Block{block}, false)
 		require.NoError(t, resp.Error)
 		require.Len(t, newBlocks, 1)
 		blockID1 = newBlocks[0].ID
@@ -109,7 +109,7 @@ func TestPostBlock(t *testing.T) {
 			},
 		}
 
-		newBlocks, resp := th.Client.InsertBlocks(board.ID, newBlocks)
+		newBlocks, resp := th.Client.InsertBlocks(board.ID, newBlocks, false)
 		require.NoError(t, resp.Error)
 		require.Len(t, newBlocks, 2)
 		blockID2 = newBlocks[0].ID
@@ -140,7 +140,7 @@ func TestPostBlock(t *testing.T) {
 			Title:    "Updated title",
 		}
 
-		newBlocks, resp := th.Client.InsertBlocks(board.ID, []model.Block{block})
+		newBlocks, resp := th.Client.InsertBlocks(board.ID, []model.Block{block}, false)
 		require.NoError(t, resp.Error)
 		require.Len(t, newBlocks, 1)
 		blockID4 := newBlocks[0].ID
@@ -180,7 +180,7 @@ func TestPatchBlock(t *testing.T) {
 		Fields:   map[string]interface{}{"test": "test value", "test2": "test value 2"},
 	}
 
-	newBlocks, resp := th.Client.InsertBlocks(board.ID, []model.Block{block})
+	newBlocks, resp := th.Client.InsertBlocks(board.ID, []model.Block{block}, false)
 	th.CheckOK(resp)
 	require.Len(t, newBlocks, 1)
 	blockID := newBlocks[0].ID
@@ -191,7 +191,7 @@ func TestPatchBlock(t *testing.T) {
 			Title: &newTitle,
 		}
 
-		_, resp := th.Client.PatchBlock(board.ID, blockID, blockPatch)
+		_, resp := th.Client.PatchBlock(board.ID, blockID, blockPatch, false)
 		require.NoError(t, resp.Error)
 
 		blocks, resp := th.Client.GetBlocksForBoard(board.ID)
@@ -216,7 +216,7 @@ func TestPatchBlock(t *testing.T) {
 			},
 		}
 
-		_, resp := th.Client.PatchBlock(board.ID, blockID, blockPatch)
+		_, resp := th.Client.PatchBlock(board.ID, blockID, blockPatch, false)
 		require.NoError(t, resp.Error)
 
 		blocks, resp := th.Client.GetBlocksForBoard(board.ID)
@@ -239,7 +239,7 @@ func TestPatchBlock(t *testing.T) {
 			DeletedFields: []string{"test", "test3", "test100"},
 		}
 
-		_, resp := th.Client.PatchBlock(board.ID, blockID, blockPatch)
+		_, resp := th.Client.PatchBlock(board.ID, blockID, blockPatch, false)
 		require.NoError(t, resp.Error)
 
 		blocks, resp := th.Client.GetBlocksForBoard(board.ID)
@@ -278,7 +278,7 @@ func TestDeleteBlock(t *testing.T) {
 			Title:    "New title",
 		}
 
-		newBlocks, resp := th.Client.InsertBlocks(board.ID, []model.Block{block})
+		newBlocks, resp := th.Client.InsertBlocks(board.ID, []model.Block{block}, false)
 		require.NoError(t, resp.Error)
 		require.Len(t, newBlocks, 1)
 		require.NotZero(t, newBlocks[0].ID)
@@ -301,7 +301,7 @@ func TestDeleteBlock(t *testing.T) {
 		// id,insert_at on block history
 		time.Sleep(10 * time.Millisecond)
 
-		_, resp := th.Client.DeleteBlock(board.ID, blockID)
+		_, resp := th.Client.DeleteBlock(board.ID, blockID, false)
 		require.NoError(t, resp.Error)
 
 		blocks, resp := th.Client.GetBlocksForBoard(board.ID)
@@ -332,7 +332,7 @@ func TestUndeleteBlock(t *testing.T) {
 			Title:    "New title",
 		}
 
-		newBlocks, resp := th.Client.InsertBlocks(board.ID, []model.Block{block})
+		newBlocks, resp := th.Client.InsertBlocks(board.ID, []model.Block{block}, false)
 		require.NoError(t, resp.Error)
 		require.Len(t, newBlocks, 1)
 		require.NotZero(t, newBlocks[0].ID)
@@ -355,7 +355,7 @@ func TestUndeleteBlock(t *testing.T) {
 		// id,insert_at on block history
 		time.Sleep(10 * time.Millisecond)
 
-		_, resp := th.Client.DeleteBlock(board.ID, blockID)
+		_, resp := th.Client.DeleteBlock(board.ID, blockID, false)
 		require.NoError(t, resp.Error)
 
 		blocks, resp := th.Client.GetBlocksForBoard(board.ID)
@@ -381,7 +381,7 @@ func TestUndeleteBlock(t *testing.T) {
 		// id,insert_at on block history
 		time.Sleep(10 * time.Millisecond)
 
-		_, resp := th.Client.DeleteBlock(board.ID, blockID)
+		_, resp := th.Client.DeleteBlock(board.ID, blockID, false)
 		require.NoError(t, resp.Error)
 
 		_, resp = th.Client2.UndeleteBlock(board.ID, blockID)

server/integrationtests/board_test.go

@@ -450,7 +450,7 @@ func TestGetAllBlocksForBoard(t *testing.T) {
 			},
 		}
 
-		insertedBlocks, resp := th.Client.InsertBlocks(board.ID, newBlocks)
+		insertedBlocks, resp := th.Client.InsertBlocks(board.ID, newBlocks, false)
 		require.NoError(t, resp.Error)
 		require.Len(t, insertedBlocks, len(newBlocks))
 
@@ -1905,7 +1905,7 @@ func TestDuplicateBoard(t *testing.T) {
 			},
 		}
 
-		newBlocks, resp = th.Client.InsertBlocks(board.ID, newBlocks)
+		newBlocks, resp = th.Client.InsertBlocks(board.ID, newBlocks, false)
 		require.NoError(t, resp.Error)
 		require.Len(t, newBlocks, 1)
 
@@ -1990,7 +1990,7 @@ func TestDuplicateBoard(t *testing.T) {
 			},
 		}
 
-		newBlocks, resp = th.Client.InsertBlocks(board.ID, newBlocks)
+		newBlocks, resp = th.Client.InsertBlocks(board.ID, newBlocks, false)
 		require.NoError(t, resp.Error)
 		require.Len(t, newBlocks, 1)
 

server/integrationtests/subscriptions_test.go

@@ -39,7 +39,7 @@ func createTestSubscriptions(client *client.Client, num int) ([]*model.Subscript
 			Type:     model.TypeCard,
 		}
 
-		newBlocks, resp := client.InsertBlocks(board.ID, []model.Block{newBlock})
+		newBlocks, resp := client.InsertBlocks(board.ID, []model.Block{newBlock}, false)
 		if resp.Error != nil {
 			return nil, "", fmt.Errorf("cannot insert test card block: %w", resp.Error)
 		}

server/model/services_api.go

@@ -14,6 +14,19 @@ import (
 	"github.com/mattermost/mattermost-server/v6/shared/mlog"
 )
 
+const (
+	botUsername    = "boards"
+	botDisplayname = "Boards"
+	botDescription = "Created by Boards plugin."
+)
+
+var FocalboardBot = &mm_model.Bot{
+	Username:    botUsername,
+	DisplayName: botDisplayname,
+	Description: botDescription,
+	OwnerId:     SystemUserID,
+}
+
 type ServicesAPI interface {
 	// Channels service
 	GetDirectChannel(userID1, userID2 string) (*mm_model.Channel, error)

server/services/store/mattermostauthlayer/mattermostauthlayer.go

@@ -18,10 +18,7 @@ import (
 	"github.com/mattermost/mattermost-server/v6/shared/mlog"
 )
 
-var systemsBot = &mmModel.Bot{
-	Username:    mmModel.BotSystemBotUsername,
-	DisplayName: "System",
-}
+var boardsBotID string
 
 // servicesAPI is the interface required my the MattermostAuthLayer to interact with
 // the mattermost-server. You can use plugin-api or product-api adapter implementations.
@@ -852,18 +849,18 @@ func (s *MattermostAuthLayer) GetChannel(teamID, channelID string) (*mmModel.Cha
 	return channel, nil
 }
 
-func (s *MattermostAuthLayer) getSystemBotID() (string, error) {
-	botID, err := s.servicesAPI.EnsureBot(systemsBot)
-	if err != nil {
-		s.logger.Error("failed to ensure system bot", mlog.String("username", systemsBot.Username), mlog.Err(err))
+func (s *MattermostAuthLayer) getBoardsBotID() (string, error) {
+	if boardsBotID == "" {
+		var err error
+		boardsBotID, err = s.servicesAPI.EnsureBot(model.FocalboardBot)
+		s.logger.Error("failed to ensure boards bot", mlog.Err(err))
 		return "", err
 	}
-
-	return botID, nil
+	return boardsBotID, nil
 }
 
 func (s *MattermostAuthLayer) SendMessage(message, postType string, receipts []string) error {
-	botID, err := s.getSystemBotID()
+	botID, err := s.getBoardsBotID()
 	if err != nil {
 		return err
 	}
@@ -880,14 +877,7 @@ func (s *MattermostAuthLayer) SendMessage(message, postType string, receipts []s
 			continue
 		}
 
-		post := &mmModel.Post{
-			Message:   message,
-			UserId:    botID,
-			ChannelId: channel.Id,
-			Type:      postType,
-		}
-
-		if _, err := s.servicesAPI.CreatePost(post); err != nil {
+		if err := s.PostMessage(message, postType, channel.Id); err != nil {
 			s.logger.Error(
 				"failed to send message to receipt from SendMessage",
 				mlog.String("receipt", receipt),
@@ -896,7 +886,28 @@ func (s *MattermostAuthLayer) SendMessage(message, postType string, receipts []s
 			continue
 		}
 	}
+	return nil
+}
 
+func (s *MattermostAuthLayer) PostMessage(message, postType, channelID string) error {
+	botID, err := s.getBoardsBotID()
+	if err != nil {
+		return err
+	}
+
+	post := &mmModel.Post{
+		Message:   message,
+		UserId:    botID,
+		ChannelId: channelID,
+		Type:      postType,
+	}
+
+	if _, err := s.servicesAPI.CreatePost(post); err != nil {
+		s.logger.Error(
+			"failed to send message to receipt from PostMessage",
+			mlog.Err(err),
+		)
+	}
 	return nil
 }
 

server/services/store/mockstore/mockstore.go

@@ -1251,6 +1251,20 @@ func (mr *MockStoreMockRecorder) PatchUserProps(arg0, arg1 interface{}) *gomock.
 	return mr.mock.ctrl.RecordCallWithMethodType(mr.mock, "PatchUserProps", reflect.TypeOf((*MockStore)(nil).PatchUserProps), arg0, arg1)
 }
 
+// PostMessage mocks base method.
+func (m *MockStore) PostMessage(arg0, arg1, arg2 string) error {
+	m.ctrl.T.Helper()
+	ret := m.ctrl.Call(m, "PostMessage", arg0, arg1, arg2)
+	ret0, _ := ret[0].(error)
+	return ret0
+}
+
+// PostMessage indicates an expected call of PostMessage.
+func (mr *MockStoreMockRecorder) PostMessage(arg0, arg1, arg2 interface{}) *gomock.Call {
+	mr.mock.ctrl.T.Helper()
+	return mr.mock.ctrl.RecordCallWithMethodType(mr.mock, "PostMessage", reflect.TypeOf((*MockStore)(nil).PostMessage), arg0, arg1, arg2)
+}
+
 // RefreshSession mocks base method.
 func (m *MockStore) RefreshSession(arg0 *model.Session) error {
 	m.ctrl.T.Helper()

server/services/store/sqlstore/public_methods.go

@@ -707,6 +707,11 @@ func (s *SQLStore) PatchUserProps(userID string, patch model.UserPropPatch) erro
 
 }
 
+func (s *SQLStore) PostMessage(message string, postType string, channelID string) error {
+	return s.postMessage(s.db, message, postType, channelID)
+
+}
+
 func (s *SQLStore) RefreshSession(session *model.Session) error {
 	return s.refreshSession(s.db, session)
 

server/services/store/sqlstore/user.go

@@ -279,6 +279,10 @@ func (s *SQLStore) sendMessage(db sq.BaseRunner, message, postType string, recei
 	return errUnsupportedOperation
 }
 
+func (s *SQLStore) postMessage(db sq.BaseRunner, message, postType string, channel string) error {
+	return errUnsupportedOperation
+}
+
 func (s *SQLStore) getUserTimezone(_ sq.BaseRunner, _ string) (string, error) {
 	return "", errUnsupportedOperation
 }

server/services/store/store.go

@@ -154,6 +154,7 @@ type Store interface {
 	GetCloudLimits() (*mmModel.ProductLimits, error)
 	SearchUserChannels(teamID, userID, query string) ([]*mmModel.Channel, error)
 	GetChannel(teamID, channelID string) (*mmModel.Channel, error)
+	PostMessage(message, postType, channelID string) error
 	SendMessage(message, postType string, receipts []string) error
 
 	// Insights

webapp/src/components/__snapshots__/addContentMenuItem.test.tsx.snap

@@ -21,9 +21,13 @@ exports[`components/addContentMenuItem return a checkbox menu item 1`] = `
       </svg>
     </div>
     <div
-      class="menu-name"
+      class="menu-option__content"
     >
-      checkbox
+      <div
+        class="menu-name"
+      >
+        checkbox
+      </div>
     </div>
     <div
       class="noicon"
@@ -53,9 +57,13 @@ exports[`components/addContentMenuItem return a divider menu item 1`] = `
       </svg>
     </div>
     <div
-      class="menu-name"
+      class="menu-option__content"
     >
-      divider
+      <div
+        class="menu-name"
+      >
+        divider
+      </div>
     </div>
     <div
       class="noicon"
@@ -85,9 +93,13 @@ exports[`components/addContentMenuItem return a text menu item 1`] = `
       </svg>
     </div>
     <div
-      class="menu-name"
+      class="menu-option__content"
     >
-      text
+      <div
+        class="menu-name"
+      >
+        text
+      </div>
     </div>
     <div
       class="noicon"
@@ -119,9 +131,13 @@ exports[`components/addContentMenuItem return an image menu item 1`] = `
       </svg>
     </div>
     <div
-      class="menu-name"
+      class="menu-option__content"
     >
-      image
+      <div
+        class="menu-name"
+      >
+        image
+      </div>
     </div>
     <div
       class="noicon"

webapp/src/components/__snapshots__/blockIconSelector.test.tsx.snap

@@ -68,9 +68,13 @@ exports[`components/blockIconSelector return menu on click 1`] = `
                   </svg>
                 </div>
                 <div
-                  class="menu-name"
+                  class="menu-option__content"
                 >
-                  Random
+                  <div
+                    class="menu-name"
+                  >
+                    Random
+                  </div>
                 </div>
                 <div
                   class="noicon"
@@ -121,9 +125,13 @@ exports[`components/blockIconSelector return menu on click 1`] = `
                   />
                 </div>
                 <div
-                  class="menu-name"
+                  class="menu-option__content"
                 >
-                  Remove icon
+                  <div
+                    class="menu-name"
+                  >
+                    Remove icon
+                  </div>
                 </div>
                 <div
                   class="noicon"
@@ -150,9 +158,13 @@ exports[`components/blockIconSelector return menu on click 1`] = `
                 />
               </div>
               <div
-                class="menu-name"
+                class="menu-option__content"
               >
-                Cancel
+                <div
+                  class="menu-name"
+                >
+                  Cancel
+                </div>
               </div>
               <div
                 class="noicon"

webapp/src/components/__snapshots__/cardDialog.test.tsx.snap

@@ -603,9 +603,13 @@ exports[`components/cardDialog return cardDialog menu content 1`] = `
                           />
                         </div>
                         <div
-                          class="menu-name"
+                          class="menu-option__content"
                         >
-                          Delete
+                          <div
+                            class="menu-name"
+                          >
+                            Delete
+                          </div>
                         </div>
                         <div
                           class="noicon"
@@ -626,9 +630,13 @@ exports[`components/cardDialog return cardDialog menu content 1`] = `
                           />
                         </div>
                         <div
-                          class="menu-name"
+                          class="menu-option__content"
                         >
-                          Copy link
+                          <div
+                            class="menu-name"
+                          >
+                            Copy link
+                          </div>
                         </div>
                         <div
                           class="noicon"
@@ -649,9 +657,13 @@ exports[`components/cardDialog return cardDialog menu content 1`] = `
                           />
                         </div>
                         <div
-                          class="menu-name"
+                          class="menu-option__content"
                         >
-                          New template from card
+                          <div
+                            class="menu-name"
+                          >
+                            New template from card
+                          </div>
                         </div>
                         <div
                           class="noicon"
@@ -678,9 +690,13 @@ exports[`components/cardDialog return cardDialog menu content 1`] = `
                         />
                       </div>
                       <div
-                        class="menu-name"
+                        class="menu-option__content"
                       >
-                        Cancel
+                        <div
+                          class="menu-name"
+                        >
+                          Cancel
+                        </div>
                       </div>
                       <div
                         class="noicon"

webapp/src/components/__snapshots__/contentBlock.test.tsx.snap

@@ -55,9 +55,13 @@ exports[`components/contentBlock return commentBlock and click on menuwrapper 1`
                       </svg>
                     </div>
                     <div
-                      class="menu-name"
+                      class="menu-option__content"
                     >
-                      Move up
+                      <div
+                        class="menu-name"
+                      >
+                        Move up
+                      </div>
                     </div>
                     <div
                       class="noicon"
@@ -87,9 +91,13 @@ exports[`components/contentBlock return commentBlock and click on menuwrapper 1`
                       </svg>
                     </div>
                     <div
-                      class="menu-name"
+                      class="menu-option__content"
                     >
-                      Move down
+                      <div
+                        class="menu-name"
+                      >
+                        Move down
+                      </div>
                     </div>
                     <div
                       class="noicon"
@@ -134,9 +142,13 @@ exports[`components/contentBlock return commentBlock and click on menuwrapper 1`
                       />
                     </div>
                     <div
-                      class="menu-name"
+                      class="menu-option__content"
                     >
-                      Delete
+                      <div
+                        class="menu-name"
+                      >
+                        Delete
+                      </div>
                     </div>
                     <div
                       class="noicon"
@@ -163,9 +175,13 @@ exports[`components/contentBlock return commentBlock and click on menuwrapper 1`
                     />
                   </div>
                   <div
-                    class="menu-name"
+                    class="menu-option__content"
                   >
-                    Cancel
+                    <div
+                      class="menu-name"
+                    >
+                      Cancel
+                    </div>
                   </div>
                   <div
                     class="noicon"

webapp/src/components/__snapshots__/viewMenu.test.tsx.snap

@@ -50,9 +50,13 @@ Object {
                       </svg>
                     </div>
                     <div
-                      class="menu-name"
+                      class="menu-option__content"
                     >
-                      view title
+                      <div
+                        class="menu-name"
+                      >
+                        view title
+                      </div>
                     </div>
                     <div
                       class="noicon"
@@ -87,9 +91,13 @@ Object {
                       </svg>
                     </div>
                     <div
-                      class="menu-name"
+                      class="menu-option__content"
                     >
-                      view title
+                      <div
+                        class="menu-name"
+                      >
+                        view title
+                      </div>
                     </div>
                     <div
                       class="noicon"
@@ -116,9 +124,13 @@ Object {
                     />
                   </div>
                   <div
-                    class="menu-name"
+                    class="menu-option__content"
                   >
-                    Duplicate view
+                    <div
+                      class="menu-name"
+                    >
+                      Duplicate view
+                    </div>
                   </div>
                   <div
                     class="noicon"
@@ -139,9 +151,13 @@ Object {
                     />
                   </div>
                   <div
-                    class="menu-name"
+                    class="menu-option__content"
                   >
-                    Delete view
+                    <div
+                      class="menu-name"
+                    >
+                      Delete view
+                    </div>
                   </div>
                   <div
                     class="noicon"
@@ -192,9 +208,13 @@ Object {
                   />
                 </div>
                 <div
-                  class="menu-name"
+                  class="menu-option__content"
                 >
-                  Cancel
+                  <div
+                    class="menu-name"
+                  >
+                    Cancel
+                  </div>
                 </div>
                 <div
                   class="noicon"
@@ -252,9 +272,13 @@ Object {
                     </svg>
                   </div>
                   <div
-                    class="menu-name"
+                    class="menu-option__content"
                   >
-                    view title
+                    <div
+                      class="menu-name"
+                    >
+                      view title
+                    </div>
                   </div>
                   <div
                     class="noicon"
@@ -289,9 +313,13 @@ Object {
                     </svg>
                   </div>
                   <div
-                    class="menu-name"
+                    class="menu-option__content"
                   >
-                    view title
+                    <div
+                      class="menu-name"
+                    >
+                      view title
+                    </div>
                   </div>
                   <div
                     class="noicon"
@@ -318,9 +346,13 @@ Object {
                   />
                 </div>
                 <div
-                  class="menu-name"
+                  class="menu-option__content"
                 >
-                  Duplicate view
+                  <div
+                    class="menu-name"
+                  >
+                    Duplicate view
+                  </div>
                 </div>
                 <div
                   class="noicon"
@@ -341,9 +373,13 @@ Object {
                   />
                 </div>
                 <div
-                  class="menu-name"
+                  class="menu-option__content"
                 >
-                  Delete view
+                  <div
+                    class="menu-name"
+                  >
+                    Delete view
+                  </div>
                 </div>
                 <div
                   class="noicon"
@@ -394,9 +430,13 @@ Object {
                 />
               </div>
               <div
-                class="menu-name"
+                class="menu-option__content"
               >
-                Cancel
+                <div
+                  class="menu-name"
+                >
+                  Cancel
+                </div>
               </div>
               <div
                 class="noicon"
@@ -511,9 +551,13 @@ Object {
                       </svg>
                     </div>
                     <div
-                      class="menu-name"
+                      class="menu-option__content"
                     >
-                      view title
+                      <div
+                        class="menu-name"
+                      >
+                        view title
+                      </div>
                     </div>
                     <div
                       class="noicon"
@@ -548,9 +592,13 @@ Object {
                       </svg>
                     </div>
                     <div
-                      class="menu-name"
+                      class="menu-option__content"
                     >
-                      view title
+                      <div
+                        class="menu-name"
+                      >
+                        view title
+                      </div>
                     </div>
                     <div
                       class="noicon"
@@ -586,9 +634,13 @@ Object {
                   />
                 </div>
                 <div
-                  class="menu-name"
+                  class="menu-option__content"
                 >
-                  Cancel
+                  <div
+                    class="menu-name"
+                  >
+                    Cancel
+                  </div>
                 </div>
                 <div
                   class="noicon"
@@ -646,9 +698,13 @@ Object {
                     </svg>
                   </div>
                   <div
-                    class="menu-name"
+                    class="menu-option__content"
                   >
-                    view title
+                    <div
+                      class="menu-name"
+                    >
+                      view title
+                    </div>
                   </div>
                   <div
                     class="noicon"
@@ -683,9 +739,13 @@ Object {
                     </svg>
                   </div>
                   <div
-                    class="menu-name"
+                    class="menu-option__content"
                   >
-                    view title
+                    <div
+                      class="menu-name"
+                    >
+                      view title
+                    </div>
                   </div>
                   <div
                     class="noicon"
@@ -721,9 +781,13 @@ Object {
                 />
               </div>
               <div
-                class="menu-name"
+                class="menu-option__content"
               >
-                Cancel
+                <div
+                  class="menu-name"
+                >
+                  Cancel
+                </div>
               </div>
               <div
                 class="noicon"

webapp/src/components/boardTemplateSelector/boardTemplateSelectorPreview.test.tsx

@@ -9,6 +9,8 @@ import {Provider as ReduxProvider} from 'react-redux'
 import {IPropertyTemplate} from '../../blocks/board'
 import {mockDOM, mockStateStore, wrapDNDIntl} from '../../testUtils'
 
+import {TestBlockFactory} from '../../test/testBlockFactory'
+
 import BoardTemplateSelectorPreview from './boardTemplateSelectorPreview'
 
 jest.mock('react-router-dom', () => {
@@ -94,14 +96,15 @@ describe('components/boardTemplateSelector/boardTemplateSelectorPreview', () =>
     beforeAll(mockDOM)
     beforeEach(() => {
         jest.clearAllMocks()
-        const board = {
-            id: '2',
-            title: boardTitle,
-            teamId: 'team-id',
-            icon: '🚴🏻‍♂️',
-            cardProperties: [groupProperty],
-            dateDisplayPropertyId: 'id-6',
-        }
+
+        const board = TestBlockFactory.createBoard()
+        board.id = '2'
+        board.title = boardTitle
+        board.teamId = 'team-id'
+        board.icon =  '🚴🏻‍♂️'
+        board.cardProperties = [groupProperty]
+        const activeView = TestBlockFactory.createBoardView(board)
+        activeView.fields.defaultTemplateId = 'defaultTemplateId'
 
         const state = {
             searchText: {value: ''},
@@ -120,7 +123,12 @@ describe('components/boardTemplateSelector/boardTemplateSelectorPreview', () =>
                 },
                 current: 'card_id_1',
             },
-            views: {views: []},
+            views: {
+                views: {
+                    boardView: activeView
+                },
+                current: 'boardView'
+            },
             contents: {contents: []},
             comments: {comments: []},
             teams: {

webapp/src/components/cardActionsMenu/__snapshots__/cardActionsMenu.test.tsx.snap

@@ -25,9 +25,13 @@ exports[`components/cardActionsMenu should match snapshot 1`] = `
               />
             </div>
             <div
-              class="menu-name"
+              class="menu-option__content"
             >
-              Delete
+              <div
+                class="menu-name"
+              >
+                Delete
+              </div>
             </div>
             <div
               class="noicon"
@@ -48,9 +52,13 @@ exports[`components/cardActionsMenu should match snapshot 1`] = `
               />
             </div>
             <div
-              class="menu-name"
+              class="menu-option__content"
             >
-              Copy link
+              <div
+                class="menu-name"
+              >
+                Copy link
+              </div>
             </div>
             <div
               class="noicon"
@@ -78,9 +86,13 @@ exports[`components/cardActionsMenu should match snapshot 1`] = `
             />
           </div>
           <div
-            class="menu-name"
+            class="menu-option__content"
           >
-            Cancel
+            <div
+              class="menu-name"
+            >
+              Cancel
+            </div>
           </div>
           <div
             class="noicon"
@@ -117,9 +129,13 @@ exports[`components/cardActionsMenu should match snapshot w/ children prop 1`] =
               />
             </div>
             <div
-              class="menu-name"
+              class="menu-option__content"
             >
-              Delete
+              <div
+                class="menu-name"
+              >
+                Delete
+              </div>
             </div>
             <div
               class="noicon"
@@ -140,9 +156,13 @@ exports[`components/cardActionsMenu should match snapshot w/ children prop 1`] =
               />
             </div>
             <div
-              class="menu-name"
+              class="menu-option__content"
             >
-              Copy link
+              <div
+                class="menu-name"
+              >
+                Copy link
+              </div>
             </div>
             <div
               class="noicon"
@@ -172,9 +192,13 @@ exports[`components/cardActionsMenu should match snapshot w/ children prop 1`] =
             />
           </div>
           <div
-            class="menu-name"
+            class="menu-option__content"
           >
-            Cancel
+            <div
+              class="menu-name"
+            >
+              Cancel
+            </div>
           </div>
           <div
             class="noicon"
@@ -211,9 +235,13 @@ exports[`components/cardActionsMenu should match snapshot w/ onClickDuplicate pr
               />
             </div>
             <div
-              class="menu-name"
+              class="menu-option__content"
             >
-              Delete
+              <div
+                class="menu-name"
+              >
+                Delete
+              </div>
             </div>
             <div
               class="noicon"
@@ -232,9 +260,13 @@ exports[`components/cardActionsMenu should match snapshot w/ onClickDuplicate pr
               />
             </div>
             <div
-              class="menu-name"
+              class="menu-option__content"
             >
-              Duplicate
+              <div
+                class="menu-name"
+              >
+                Duplicate
+              </div>
             </div>
             <div
               class="noicon"
@@ -255,9 +287,13 @@ exports[`components/cardActionsMenu should match snapshot w/ onClickDuplicate pr
               />
             </div>
             <div
-              class="menu-name"
+              class="menu-option__content"
             >
-              Copy link
+              <div
+                class="menu-name"
+              >
+                Copy link
+              </div>
             </div>
             <div
               class="noicon"
@@ -285,9 +321,13 @@ exports[`components/cardActionsMenu should match snapshot w/ onClickDuplicate pr
             />
           </div>
           <div
-            class="menu-name"
+            class="menu-option__content"
           >
-            Cancel
+            <div
+              class="menu-name"
+            >
+              Cancel
+            </div>
           </div>
           <div
             class="noicon"

webapp/src/components/cardDetail/__snapshots__/cardDetailContentsMenu.test.tsx.snap

@@ -47,9 +47,13 @@ exports[`components/cardDetail/cardDetailContentsMenu return cardDetailContentsM
                   </svg>
                 </div>
                 <div
-                  class="menu-name"
+                  class="menu-option__content"
                 >
-                  text
+                  <div
+                    class="menu-name"
+                  >
+                    text
+                  </div>
                 </div>
                 <div
                   class="noicon"
@@ -76,9 +80,13 @@ exports[`components/cardDetail/cardDetailContentsMenu return cardDetailContentsM
                   </svg>
                 </div>
                 <div
-                  class="menu-name"
+                  class="menu-option__content"
                 >
-                  image
+                  <div
+                    class="menu-name"
+                  >
+                    image
+                  </div>
                 </div>
                 <div
                   class="noicon"
@@ -105,9 +113,13 @@ exports[`components/cardDetail/cardDetailContentsMenu return cardDetailContentsM
                   </svg>
                 </div>
                 <div
-                  class="menu-name"
+                  class="menu-option__content"
                 >
-                  divider
+                  <div
+                    class="menu-name"
+                  >
+                    divider
+                  </div>
                 </div>
                 <div
                   class="noicon"
@@ -134,9 +146,13 @@ exports[`components/cardDetail/cardDetailContentsMenu return cardDetailContentsM
                   </svg>
                 </div>
                 <div
-                  class="menu-name"
+                  class="menu-option__content"
                 >
-                  checkbox
+                  <div
+                    class="menu-name"
+                  >
+                    checkbox
+                  </div>
                 </div>
                 <div
                   class="noicon"
@@ -163,9 +179,13 @@ exports[`components/cardDetail/cardDetailContentsMenu return cardDetailContentsM
                 />
               </div>
               <div
-                class="menu-name"
+                class="menu-option__content"
               >
-                Cancel
+                <div
+                  class="menu-name"
+                >
+                  Cancel
+                </div>
               </div>
               <div
                 class="noicon"
@@ -226,9 +246,13 @@ exports[`components/cardDetail/cardDetailContentsMenu return cardDetailContentsM
                   </svg>
                 </div>
                 <div
-                  class="menu-name"
+                  class="menu-option__content"
                 >
-                  text
+                  <div
+                    class="menu-name"
+                  >
+                    text
+                  </div>
                 </div>
                 <div
                   class="noicon"
@@ -255,9 +279,13 @@ exports[`components/cardDetail/cardDetailContentsMenu return cardDetailContentsM
                   </svg>
                 </div>
                 <div
-                  class="menu-name"
+                  class="menu-option__content"
                 >
-                  image
+                  <div
+                    class="menu-name"
+                  >
+                    image
+                  </div>
                 </div>
                 <div
                   class="noicon"
@@ -284,9 +312,13 @@ exports[`components/cardDetail/cardDetailContentsMenu return cardDetailContentsM
                   </svg>
                 </div>
                 <div
-                  class="menu-name"
+                  class="menu-option__content"
                 >
-                  divider
+                  <div
+                    class="menu-name"
+                  >
+                    divider
+                  </div>
                 </div>
                 <div
                   class="noicon"
@@ -313,9 +345,13 @@ exports[`components/cardDetail/cardDetailContentsMenu return cardDetailContentsM
                   </svg>
                 </div>
                 <div
-                  class="menu-name"
+                  class="menu-option__content"
                 >
-                  checkbox
+                  <div
+                    class="menu-name"
+                  >
+                    checkbox
+                  </div>
                 </div>
                 <div
                   class="noicon"
@@ -342,9 +378,13 @@ exports[`components/cardDetail/cardDetailContentsMenu return cardDetailContentsM
                 />
               </div>
               <div
-                class="menu-name"
+                class="menu-option__content"
               >
-                Cancel
+                <div
+                  class="menu-name"
+                >
+                  Cancel
+                </div>
               </div>
               <div
                 class="noicon"
@@ -405,9 +445,13 @@ exports[`components/cardDetail/cardDetailContentsMenu return cardDetailContentsM
                   </svg>
                 </div>
                 <div
-                  class="menu-name"
+                  class="menu-option__content"
                 >
-                  text
+                  <div
+                    class="menu-name"
+                  >
+                    text
+                  </div>
                 </div>
                 <div
                   class="noicon"
@@ -434,9 +478,13 @@ exports[`components/cardDetail/cardDetailContentsMenu return cardDetailContentsM
                   </svg>
                 </div>
                 <div
-                  class="menu-name"
+                  class="menu-option__content"
                 >
-                  image
+                  <div
+                    class="menu-name"
+                  >
+                    image
+                  </div>
                 </div>
                 <div
                   class="noicon"
@@ -463,9 +511,13 @@ exports[`components/cardDetail/cardDetailContentsMenu return cardDetailContentsM
                   </svg>
                 </div>
                 <div
-                  class="menu-name"
+                  class="menu-option__content"
                 >
-                  divider
+                  <div
+                    class="menu-name"
+                  >
+                    divider
+                  </div>
                 </div>
                 <div
                   class="noicon"
@@ -492,9 +544,13 @@ exports[`components/cardDetail/cardDetailContentsMenu return cardDetailContentsM
                   </svg>
                 </div>
                 <div
-                  class="menu-name"
+                  class="menu-option__content"
                 >
-                  checkbox
+                  <div
+                    class="menu-name"
+                  >
+                    checkbox
+                  </div>
                 </div>
                 <div
                   class="noicon"
@@ -521,9 +577,13 @@ exports[`components/cardDetail/cardDetailContentsMenu return cardDetailContentsM
                 />
               </div>
               <div
-                class="menu-name"
+                class="menu-option__content"
               >
-                Cancel
+                <div
+                  class="menu-name"
+                >
+                  Cancel
+                </div>
               </div>
               <div
                 class="noicon"

webapp/src/components/cardDetail/__snapshots__/cardDetailProperties.test.tsx.snap

@@ -316,9 +316,13 @@ exports[`components/cardDetail/CardDetailProperties should show property types m
                     />
                   </div>
                   <div
-                    class="menu-name"
+                    class="menu-option__content"
                   >
-                    Text
+                    <div
+                      class="menu-name"
+                    >
+                      Text
+                    </div>
                   </div>
                   <div
                     class="noicon"
@@ -337,9 +341,13 @@ exports[`components/cardDetail/CardDetailProperties should show property types m
                     />
                   </div>
                   <div
-                    class="menu-name"
+                    class="menu-option__content"
                   >
-                    Number
+                    <div
+                      class="menu-name"
+                    >
+                      Number
+                    </div>
                   </div>
                   <div
                     class="noicon"
@@ -358,9 +366,13 @@ exports[`components/cardDetail/CardDetailProperties should show property types m
                     />
                   </div>
                   <div
-                    class="menu-name"
+                    class="menu-option__content"
                   >
-                    Email
+                    <div
+                      class="menu-name"
+                    >
+                      Email
+                    </div>
                   </div>
                   <div
                     class="noicon"
@@ -379,9 +391,13 @@ exports[`components/cardDetail/CardDetailProperties should show property types m
                     />
                   </div>
                   <div
-                    class="menu-name"
+                    class="menu-option__content"
                   >
-                    Phone
+                    <div
+                      class="menu-name"
+                    >
+                      Phone
+                    </div>
                   </div>
                   <div
                     class="noicon"
@@ -400,9 +416,13 @@ exports[`components/cardDetail/CardDetailProperties should show property types m
                     />
                   </div>
                   <div
-                    class="menu-name"
+                    class="menu-option__content"
                   >
-                    URL
+                    <div
+                      class="menu-name"
+                    >
+                      URL
+                    </div>
                   </div>
                   <div
                     class="noicon"
@@ -421,9 +441,13 @@ exports[`components/cardDetail/CardDetailProperties should show property types m
                     />
                   </div>
                   <div
-                    class="menu-name"
+                    class="menu-option__content"
                   >
-                    Select
+                    <div
+                      class="menu-name"
+                    >
+                      Select
+                    </div>
                   </div>
                   <div
                     class="noicon"
@@ -442,9 +466,13 @@ exports[`components/cardDetail/CardDetailProperties should show property types m
                     />
                   </div>
                   <div
-                    class="menu-name"
+                    class="menu-option__content"
                   >
-                    Multi select
+                    <div
+                      class="menu-name"
+                    >
+                      Multi select
+                    </div>
                   </div>
                   <div
                     class="noicon"
@@ -463,9 +491,13 @@ exports[`components/cardDetail/CardDetailProperties should show property types m
                     />
                   </div>
                   <div
-                    class="menu-name"
+                    class="menu-option__content"
                   >
-                    Date
+                    <div
+                      class="menu-name"
+                    >
+                      Date
+                    </div>
                   </div>
                   <div
                     class="noicon"
@@ -484,9 +516,13 @@ exports[`components/cardDetail/CardDetailProperties should show property types m
                     />
                   </div>
                   <div
-                    class="menu-name"
+                    class="menu-option__content"
                   >
-                    Person
+                    <div
+                      class="menu-name"
+                    >
+                      Person
+                    </div>
                   </div>
                   <div
                     class="noicon"
@@ -505,9 +541,13 @@ exports[`components/cardDetail/CardDetailProperties should show property types m
                     />
                   </div>
                   <div
-                    class="menu-name"
+                    class="menu-option__content"
                   >
-                    Checkbox
+                    <div
+                      class="menu-name"
+                    >
+                      Checkbox
+                    </div>
                   </div>
                   <div
                     class="noicon"
@@ -526,9 +566,13 @@ exports[`components/cardDetail/CardDetailProperties should show property types m
                     />
                   </div>
                   <div
-                    class="menu-name"
+                    class="menu-option__content"
                   >
-                    Created time
+                    <div
+                      class="menu-name"
+                    >
+                      Created time
+                    </div>
                   </div>
                   <div
                     class="noicon"
@@ -547,9 +591,13 @@ exports[`components/cardDetail/CardDetailProperties should show property types m
                     />
                   </div>
                   <div
-                    class="menu-name"
+                    class="menu-option__content"
                   >
-                    Created by
+                    <div
+                      class="menu-name"
+                    >
+                      Created by
+                    </div>
                   </div>
                   <div
                     class="noicon"
@@ -568,9 +616,13 @@ exports[`components/cardDetail/CardDetailProperties should show property types m
                     />
                   </div>
                   <div
-                    class="menu-name"
+                    class="menu-option__content"
                   >
-                    Last updated time
+                    <div
+                      class="menu-name"
+                    >
+                      Last updated time
+                    </div>
                   </div>
                   <div
                     class="noicon"
@@ -589,9 +641,13 @@ exports[`components/cardDetail/CardDetailProperties should show property types m
                     />
                   </div>
                   <div
-                    class="menu-name"
+                    class="menu-option__content"
                   >
-                    Last updated by
+                    <div
+                      class="menu-name"
+                    >
+                      Last updated by
+                    </div>
                   </div>
                   <div
                     class="noicon"
@@ -618,9 +674,13 @@ exports[`components/cardDetail/CardDetailProperties should show property types m
                   />
                 </div>
                 <div
-                  class="menu-name"
+                  class="menu-option__content"
                 >
-                  Cancel
+                  <div
+                    class="menu-name"
+                  >
+                    Cancel
+                  </div>
                 </div>
                 <div
                   class="noicon"

webapp/src/components/cardDetail/__snapshots__/comment.test.tsx.snap

@@ -61,9 +61,13 @@ exports[`components/cardDetail/comment return comment 1`] = `
                     />
                   </div>
                   <div
-                    class="menu-name"
+                    class="menu-option__content"
                   >
-                    Delete
+                    <div
+                      class="menu-name"
+                    >
+                      Delete
+                    </div>
                   </div>
                   <div
                     class="noicon"
@@ -90,9 +94,13 @@ exports[`components/cardDetail/comment return comment 1`] = `
                   />
                 </div>
                 <div
-                  class="menu-name"
+                  class="menu-option__content"
                 >
-                  Cancel
+                  <div
+                    class="menu-name"
+                  >
+                    Cancel
+                  </div>
                 </div>
                 <div
                   class="noicon"
@@ -175,9 +183,13 @@ exports[`components/cardDetail/comment return comment and delete comment 1`] = `
                     />
                   </div>
                   <div
-                    class="menu-name"
+                    class="menu-option__content"
                   >
-                    Delete
+                    <div
+                      class="menu-name"
+                    >
+                      Delete
+                    </div>
                   </div>
                   <div
                     class="noicon"
@@ -204,9 +216,13 @@ exports[`components/cardDetail/comment return comment and delete comment 1`] = `
                   />
                 </div>
                 <div
-                  class="menu-name"
+                  class="menu-option__content"
                 >
-                  Cancel
+                  <div
+                    class="menu-name"
+                  >
+                    Cancel
+                  </div>
                 </div>
                 <div
                   class="noicon"

webapp/src/components/gallery/__snapshots__/gallery.test.tsx.snap

@@ -229,9 +229,13 @@ exports[`src/components/gallery/Gallery should match snapshot 1`] = `
                     />
                   </div>
                   <div
-                    class="menu-name"
+                    class="menu-option__content"
                   >
-                    Delete
+                    <div
+                      class="menu-name"
+                    >
+                      Delete
+                    </div>
                   </div>
                   <div
                     class="noicon"
@@ -250,9 +254,13 @@ exports[`src/components/gallery/Gallery should match snapshot 1`] = `
                     />
                   </div>
                   <div
-                    class="menu-name"
+                    class="menu-option__content"
                   >
-                    Duplicate
+                    <div
+                      class="menu-name"
+                    >
+                      Duplicate
+                    </div>
                   </div>
                   <div
                     class="noicon"
@@ -273,9 +281,13 @@ exports[`src/components/gallery/Gallery should match snapshot 1`] = `
                     />
                   </div>
                   <div
-                    class="menu-name"
+                    class="menu-option__content"
                   >
-                    Copy link
+                    <div
+                      class="menu-name"
+                    >
+                      Copy link
+                    </div>
                   </div>
                   <div
                     class="noicon"
@@ -303,9 +315,13 @@ exports[`src/components/gallery/Gallery should match snapshot 1`] = `
                   />
                 </div>
                 <div
-                  class="menu-name"
+                  class="menu-option__content"
                 >
-                  Cancel
+                  <div
+                    class="menu-name"
+                  >
+                    Cancel
+                  </div>
                 </div>
                 <div
                   class="noicon"
@@ -405,9 +421,13 @@ exports[`src/components/gallery/Gallery should match snapshot without permission
                     />
                   </div>
                   <div
-                    class="menu-name"
+                    class="menu-option__content"
                   >
-                    Copy link
+                    <div
+                      class="menu-name"
+                    >
+                      Copy link
+                    </div>
                   </div>
                   <div
                     class="noicon"
@@ -435,9 +455,13 @@ exports[`src/components/gallery/Gallery should match snapshot without permission
                   />
                 </div>
                 <div
-                  class="menu-name"
+                  class="menu-option__content"
                 >
-                  Cancel
+                  <div
+                    class="menu-name"
+                  >
+                    Cancel
+                  </div>
                 </div>
                 <div
                   class="noicon"

webapp/src/components/gallery/__snapshots__/galleryCard.test.tsx.snap

@@ -70,9 +70,13 @@ exports[`src/components/gallery/GalleryCard with a comment content should match
                   />
                 </div>
                 <div
-                  class="menu-name"
+                  class="menu-option__content"
                 >
-                  Delete
+                  <div
+                    class="menu-name"
+                  >
+                    Delete
+                  </div>
                 </div>
                 <div
                   class="noicon"
@@ -91,9 +95,13 @@ exports[`src/components/gallery/GalleryCard with a comment content should match
                   />
                 </div>
                 <div
-                  class="menu-name"
+                  class="menu-option__content"
                 >
-                  Duplicate
+                  <div
+                    class="menu-name"
+                  >
+                    Duplicate
+                  </div>
                 </div>
                 <div
                   class="noicon"
@@ -114,9 +122,13 @@ exports[`src/components/gallery/GalleryCard with a comment content should match
                   />
                 </div>
                 <div
-                  class="menu-name"
+                  class="menu-option__content"
                 >
-                  Copy link
+                  <div
+                    class="menu-name"
+                  >
+                    Copy link
+                  </div>
                 </div>
                 <div
                   class="noicon"
@@ -144,9 +156,13 @@ exports[`src/components/gallery/GalleryCard with a comment content should match
                 />
               </div>
               <div
-                class="menu-name"
+                class="menu-option__content"
               >
-                Cancel
+                <div
+                  class="menu-name"
+                >
+                  Cancel
+                </div>
               </div>
               <div
                 class="noicon"
@@ -219,9 +235,13 @@ exports[`src/components/gallery/GalleryCard with an image content should match s
                   />
                 </div>
                 <div
-                  class="menu-name"
+                  class="menu-option__content"
                 >
-                  Delete
+                  <div
+                    class="menu-name"
+                  >
+                    Delete
+                  </div>
                 </div>
                 <div
                   class="noicon"
@@ -240,9 +260,13 @@ exports[`src/components/gallery/GalleryCard with an image content should match s
                   />
                 </div>
                 <div
-                  class="menu-name"
+                  class="menu-option__content"
                 >
-                  Duplicate
+                  <div
+                    class="menu-name"
+                  >
+                    Duplicate
+                  </div>
                 </div>
                 <div
                   class="noicon"
@@ -263,9 +287,13 @@ exports[`src/components/gallery/GalleryCard with an image content should match s
                   />
                 </div>
                 <div
-                  class="menu-name"
+                  class="menu-option__content"
                 >
-                  Copy link
+                  <div
+                    class="menu-name"
+                  >
+                    Copy link
+                  </div>
                 </div>
                 <div
                   class="noicon"
@@ -293,9 +321,13 @@ exports[`src/components/gallery/GalleryCard with an image content should match s
                 />
               </div>
               <div
-                class="menu-name"
+                class="menu-option__content"
               >
-                Cancel
+                <div
+                  class="menu-name"
+                >
+                  Cancel
+                </div>
               </div>
               <div
                 class="noicon"
@@ -406,9 +438,13 @@ exports[`src/components/gallery/GalleryCard with many contents should match snap
                   />
                 </div>
                 <div
-                  class="menu-name"
+                  class="menu-option__content"
                 >
-                  Delete
+                  <div
+                    class="menu-name"
+                  >
+                    Delete
+                  </div>
                 </div>
                 <div
                   class="noicon"
@@ -427,9 +463,13 @@ exports[`src/components/gallery/GalleryCard with many contents should match snap
                   />
                 </div>
                 <div
-                  class="menu-name"
+                  class="menu-option__content"
                 >
-                  Duplicate
+                  <div
+                    class="menu-name"
+                  >
+                    Duplicate
+                  </div>
                 </div>
                 <div
                   class="noicon"
@@ -450,9 +490,13 @@ exports[`src/components/gallery/GalleryCard with many contents should match snap
                   />
                 </div>
                 <div
-                  class="menu-name"
+                  class="menu-option__content"
                 >
-                  Copy link
+                  <div
+                    class="menu-name"
+                  >
+                    Copy link
+                  </div>
                 </div>
                 <div
                   class="noicon"
@@ -480,9 +524,13 @@ exports[`src/components/gallery/GalleryCard with many contents should match snap
                 />
               </div>
               <div
-                class="menu-name"
+                class="menu-option__content"
               >
-                Cancel
+                <div
+                  class="menu-name"
+                >
+                  Cancel
+                </div>
               </div>
               <div
                 class="noicon"
@@ -559,9 +607,13 @@ exports[`src/components/gallery/GalleryCard with many images content should matc
                   />
                 </div>
                 <div
-                  class="menu-name"
+                  class="menu-option__content"
                 >
-                  Delete
+                  <div
+                    class="menu-name"
+                  >
+                    Delete
+                  </div>
                 </div>
                 <div
                   class="noicon"
@@ -580,9 +632,13 @@ exports[`src/components/gallery/GalleryCard with many images content should matc
                   />
                 </div>
                 <div
-                  class="menu-name"
+                  class="menu-option__content"
                 >
-                  Duplicate
+                  <div
+                    class="menu-name"
+                  >
+                    Duplicate
+                  </div>
                 </div>
                 <div
                   class="noicon"
@@ -603,9 +659,13 @@ exports[`src/components/gallery/GalleryCard with many images content should matc
                   />
                 </div>
                 <div
-                  class="menu-name"
+                  class="menu-option__content"
                 >
-                  Copy link
+                  <div
+                    class="menu-name"
+                  >
+                    Copy link
+                  </div>
                 </div>
                 <div
                   class="noicon"
@@ -633,9 +693,13 @@ exports[`src/components/gallery/GalleryCard with many images content should matc
                 />
               </div>
               <div
-                class="menu-name"
+                class="menu-option__content"
               >
-                Cancel
+                <div
+                  class="menu-name"
+                >
+                  Cancel
+                </div>
               </div>
               <div
                 class="noicon"
@@ -878,9 +942,13 @@ exports[`src/components/gallery/GalleryCard without block content should match s
                   />
                 </div>
                 <div
-                  class="menu-name"
+                  class="menu-option__content"
                 >
-                  Delete
+                  <div
+                    class="menu-name"
+                  >
+                    Delete
+                  </div>
                 </div>
                 <div
                   class="noicon"
@@ -899,9 +967,13 @@ exports[`src/components/gallery/GalleryCard without block content should match s
                   />
                 </div>
                 <div
-                  class="menu-name"
+                  class="menu-option__content"
                 >
-                  Duplicate
+                  <div
+                    class="menu-name"
+                  >
+                    Duplicate
+                  </div>
                 </div>
                 <div
                   class="noicon"
@@ -922,9 +994,13 @@ exports[`src/components/gallery/GalleryCard without block content should match s
                   />
                 </div>
                 <div
-                  class="menu-name"
+                  class="menu-option__content"
                 >
-                  Copy link
+                  <div
+                    class="menu-name"
+                  >
+                    Copy link
+                  </div>
                 </div>
                 <div
                   class="noicon"
@@ -952,9 +1028,13 @@ exports[`src/components/gallery/GalleryCard without block content should match s
                 />
               </div>
               <div
-                class="menu-name"
+                class="menu-option__content"
               >
-                Cancel
+                <div
+                  class="menu-name"
+                >
+                  Cancel
+                </div>
               </div>
               <div
                 class="noicon"

webapp/src/components/globalHeader/__snapshots__/globalHeaderSettingsMenu.test.tsx.snap

@@ -70,9 +70,13 @@ exports[`components/sidebar/GlobalHeaderSettingsMenu imports menu open should ma
                           />
                         </div>
                         <div
-                          class="menu-name"
+                          class="menu-option__content"
                         >
-                          Import archive
+                          <div
+                            class="menu-name"
+                          >
+                            Import archive
+                          </div>
                         </div>
                         <div
                           class="noicon"
@@ -91,9 +95,13 @@ exports[`components/sidebar/GlobalHeaderSettingsMenu imports menu open should ma
                           />
                         </div>
                         <div
-                          class="menu-name"
+                          class="menu-option__content"
                         >
-                          Trello
+                          <div
+                            class="menu-name"
+                          >
+                            Trello
+                          </div>
                         </div>
                         <div
                           class="noicon"
@@ -112,9 +120,13 @@ exports[`components/sidebar/GlobalHeaderSettingsMenu imports menu open should ma
                           />
                         </div>
                         <div
-                          class="menu-name"
+                          class="menu-option__content"
                         >
-                          Asana
+                          <div
+                            class="menu-name"
+                          >
+                            Asana
+                          </div>
                         </div>
                         <div
                           class="noicon"
@@ -133,9 +145,13 @@ exports[`components/sidebar/GlobalHeaderSettingsMenu imports menu open should ma
                           />
                         </div>
                         <div
-                          class="menu-name"
+                          class="menu-option__content"
                         >
-                          Notion
+                          <div
+                            class="menu-name"
+                          >
+                            Notion
+                          </div>
                         </div>
                         <div
                           class="noicon"
@@ -154,9 +170,13 @@ exports[`components/sidebar/GlobalHeaderSettingsMenu imports menu open should ma
                           />
                         </div>
                         <div
-                          class="menu-name"
+                          class="menu-option__content"
                         >
-                          Jira
+                          <div
+                            class="menu-name"
+                          >
+                            Jira
+                          </div>
                         </div>
                         <div
                           class="noicon"
@@ -175,9 +195,13 @@ exports[`components/sidebar/GlobalHeaderSettingsMenu imports menu open should ma
                           />
                         </div>
                         <div
-                          class="menu-name"
+                          class="menu-option__content"
                         >
-                          Todoist
+                          <div
+                            class="menu-name"
+                          >
+                            Todoist
+                          </div>
                         </div>
                         <div
                           class="noicon"
@@ -203,9 +227,13 @@ exports[`components/sidebar/GlobalHeaderSettingsMenu imports menu open should ma
                           />
                         </div>
                         <div
-                          class="menu-name"
+                          class="menu-option__content"
                         >
-                          Cancel
+                          <div
+                            class="menu-name"
+                          >
+                            Cancel
+                          </div>
                         </div>
                         <div
                           class="noicon"
@@ -277,9 +305,13 @@ exports[`components/sidebar/GlobalHeaderSettingsMenu imports menu open should ma
                   />
                 </div>
                 <div
-                  class="menu-name"
+                  class="menu-option__content"
                 >
-                  Product tour
+                  <div
+                    class="menu-name"
+                  >
+                    Product tour
+                  </div>
                 </div>
                 <div
                   class="noicon"
@@ -306,9 +338,13 @@ exports[`components/sidebar/GlobalHeaderSettingsMenu imports menu open should ma
                 />
               </div>
               <div
-                class="menu-name"
+                class="menu-option__content"
               >
-                Cancel
+                <div
+                  class="menu-name"
+                >
+                  Cancel
+                </div>
               </div>
               <div
                 class="noicon"
@@ -416,9 +452,13 @@ exports[`components/sidebar/GlobalHeaderSettingsMenu languages menu open should
                           />
                         </div>
                         <div
-                          class="menu-name"
+                          class="menu-option__content"
                         >
-                          English
+                          <div
+                            class="menu-name"
+                          >
+                            English
+                          </div>
                         </div>
                         <svg
                           class="CheckIcon Icon"
@@ -443,9 +483,13 @@ exports[`components/sidebar/GlobalHeaderSettingsMenu languages menu open should
                           />
                         </div>
                         <div
-                          class="menu-name"
+                          class="menu-option__content"
                         >
-                          Español
+                          <div
+                            class="menu-name"
+                          >
+                            Español
+                          </div>
                         </div>
                         <div
                           class="noicon"
@@ -464,9 +508,13 @@ exports[`components/sidebar/GlobalHeaderSettingsMenu languages menu open should
                           />
                         </div>
                         <div
-                          class="menu-name"
+                          class="menu-option__content"
                         >
-                          Deutsch
+                          <div
+                            class="menu-name"
+                          >
+                            Deutsch
+                          </div>
                         </div>
                         <div
                           class="noicon"
@@ -485,9 +533,13 @@ exports[`components/sidebar/GlobalHeaderSettingsMenu languages menu open should
                           />
                         </div>
                         <div
-                          class="menu-name"
+                          class="menu-option__content"
                         >
-                          日本語
+                          <div
+                            class="menu-name"
+                          >
+                            日本語
+                          </div>
                         </div>
                         <div
                           class="noicon"
@@ -506,9 +558,13 @@ exports[`components/sidebar/GlobalHeaderSettingsMenu languages menu open should
                           />
                         </div>
                         <div
-                          class="menu-name"
+                          class="menu-option__content"
                         >
-                          Français
+                          <div
+                            class="menu-name"
+                          >
+                            Français
+                          </div>
                         </div>
                         <div
                           class="noicon"
@@ -527,9 +583,13 @@ exports[`components/sidebar/GlobalHeaderSettingsMenu languages menu open should
                           />
                         </div>
                         <div
-                          class="menu-name"
+                          class="menu-option__content"
                         >
-                          Nederlands
+                          <div
+                            class="menu-name"
+                          >
+                            Nederlands
+                          </div>
                         </div>
                         <div
                           class="noicon"
@@ -548,9 +608,13 @@ exports[`components/sidebar/GlobalHeaderSettingsMenu languages menu open should
                           />
                         </div>
                         <div
-                          class="menu-name"
+                          class="menu-option__content"
                         >
-                          Pусский
+                          <div
+                            class="menu-name"
+                          >
+                            Pусский
+                          </div>
                         </div>
                         <div
                           class="noicon"
@@ -569,9 +633,13 @@ exports[`components/sidebar/GlobalHeaderSettingsMenu languages menu open should
                           />
                         </div>
                         <div
-                          class="menu-name"
+                          class="menu-option__content"
                         >
-                          中文 (繁體)
+                          <div
+                            class="menu-name"
+                          >
+                            中文 (繁體)
+                          </div>
                         </div>
                         <div
                           class="noicon"
@@ -590,9 +658,13 @@ exports[`components/sidebar/GlobalHeaderSettingsMenu languages menu open should
                           />
                         </div>
                         <div
-                          class="menu-name"
+                          class="menu-option__content"
                         >
-                          中文 (简体)
+                          <div
+                            class="menu-name"
+                          >
+                            中文 (简体)
+                          </div>
                         </div>
                         <div
                           class="noicon"
@@ -611,9 +683,13 @@ exports[`components/sidebar/GlobalHeaderSettingsMenu languages menu open should
                           />
                         </div>
                         <div
-                          class="menu-name"
+                          class="menu-option__content"
                         >
-                          Türkçe
+                          <div
+                            class="menu-name"
+                          >
+                            Türkçe
+                          </div>
                         </div>
                         <div
                           class="noicon"
@@ -632,9 +708,13 @@ exports[`components/sidebar/GlobalHeaderSettingsMenu languages menu open should
                           />
                         </div>
                         <div
-                          class="menu-name"
+                          class="menu-option__content"
                         >
-                          Occitan
+                          <div
+                            class="menu-name"
+                          >
+                            Occitan
+                          </div>
                         </div>
                         <div
                           class="noicon"
@@ -653,9 +733,13 @@ exports[`components/sidebar/GlobalHeaderSettingsMenu languages menu open should
                           />
                         </div>
                         <div
-                          class="menu-name"
+                          class="menu-option__content"
                         >
-                          Português (Brasil)
+                          <div
+                            class="menu-name"
+                          >
+                            Português (Brasil)
+                          </div>
                         </div>
                         <div
                           class="noicon"
@@ -674,9 +758,13 @@ exports[`components/sidebar/GlobalHeaderSettingsMenu languages menu open should
                           />
                         </div>
                         <div
-                          class="menu-name"
+                          class="menu-option__content"
                         >
-                          Català
+                          <div
+                            class="menu-name"
+                          >
+                            Català
+                          </div>
                         </div>
                         <div
                           class="noicon"
@@ -695,9 +783,13 @@ exports[`components/sidebar/GlobalHeaderSettingsMenu languages menu open should
                           />
                         </div>
                         <div
-                          class="menu-name"
+                          class="menu-option__content"
                         >
-                          Ελληνικά
+                          <div
+                            class="menu-name"
+                          >
+                            Ελληνικά
+                          </div>
                         </div>
                         <div
                           class="noicon"
@@ -716,9 +808,13 @@ exports[`components/sidebar/GlobalHeaderSettingsMenu languages menu open should
                           />
                         </div>
                         <div
-                          class="menu-name"
+                          class="menu-option__content"
                         >
-                          bahasa Indonesia
+                          <div
+                            class="menu-name"
+                          >
+                            bahasa Indonesia
+                          </div>
                         </div>
                         <div
                           class="noicon"
@@ -737,9 +833,13 @@ exports[`components/sidebar/GlobalHeaderSettingsMenu languages menu open should
                           />
                         </div>
                         <div
-                          class="menu-name"
+                          class="menu-option__content"
                         >
-                          Italiano
+                          <div
+                            class="menu-name"
+                          >
+                            Italiano
+                          </div>
                         </div>
                         <div
                           class="noicon"
@@ -758,9 +858,13 @@ exports[`components/sidebar/GlobalHeaderSettingsMenu languages menu open should
                           />
                         </div>
                         <div
-                          class="menu-name"
+                          class="menu-option__content"
                         >
-                          Svenska
+                          <div
+                            class="menu-name"
+                          >
+                            Svenska
+                          </div>
                         </div>
                         <div
                           class="noicon"
@@ -786,9 +890,13 @@ exports[`components/sidebar/GlobalHeaderSettingsMenu languages menu open should
                           />
                         </div>
                         <div
-                          class="menu-name"
+                          class="menu-option__content"
                         >
-                          Cancel
+                          <div
+                            class="menu-name"
+                          >
+                            Cancel
+                          </div>
                         </div>
                         <div
                           class="noicon"
@@ -836,9 +944,13 @@ exports[`components/sidebar/GlobalHeaderSettingsMenu languages menu open should
                   />
                 </div>
                 <div
-                  class="menu-name"
+                  class="menu-option__content"
                 >
-                  Product tour
+                  <div
+                    class="menu-name"
+                  >
+                    Product tour
+                  </div>
                 </div>
                 <div
                   class="noicon"
@@ -865,9 +977,13 @@ exports[`components/sidebar/GlobalHeaderSettingsMenu languages menu open should
                 />
               </div>
               <div
-                class="menu-name"
+                class="menu-option__content"
               >
-                Cancel
+                <div
+                  class="menu-name"
+                >
+                  Cancel
+                </div>
               </div>
               <div
                 class="noicon"
@@ -1014,9 +1130,13 @@ exports[`components/sidebar/GlobalHeaderSettingsMenu settings menu open should m
                   />
                 </div>
                 <div
-                  class="menu-name"
+                  class="menu-option__content"
                 >
-                  Product tour
+                  <div
+                    class="menu-name"
+                  >
+                    Product tour
+                  </div>
                 </div>
                 <div
                   class="noicon"
@@ -1043,9 +1163,13 @@ exports[`components/sidebar/GlobalHeaderSettingsMenu settings menu open should m
                 />
               </div>
               <div
-                class="menu-name"
+                class="menu-option__content"
               >
-                Cancel
+                <div
+                  class="menu-name"
+                >
+                  Cancel
+                </div>
               </div>
               <div
                 class="noicon"

webapp/src/components/kanban/__snapshots__/kanbanCard.test.tsx.snap

@@ -42,9 +42,13 @@ exports[`src/components/kanban/kanbanCard return kanbanCard and click on copy li
                   />
                 </div>
                 <div
-                  class="menu-name"
+                  class="menu-option__content"
                 >
-                  Delete
+                  <div
+                    class="menu-name"
+                  >
+                    Delete
+                  </div>
                 </div>
                 <div
                   class="noicon"
@@ -63,9 +67,13 @@ exports[`src/components/kanban/kanbanCard return kanbanCard and click on copy li
                   />
                 </div>
                 <div
-                  class="menu-name"
+                  class="menu-option__content"
                 >
-                  Duplicate
+                  <div
+                    class="menu-name"
+                  >
+                    Duplicate
+                  </div>
                 </div>
                 <div
                   class="noicon"
@@ -86,9 +94,13 @@ exports[`src/components/kanban/kanbanCard return kanbanCard and click on copy li
                   />
                 </div>
                 <div
-                  class="menu-name"
+                  class="menu-option__content"
                 >
-                  Copy link
+                  <div
+                    class="menu-name"
+                  >
+                    Copy link
+                  </div>
                 </div>
                 <div
                   class="noicon"
@@ -116,9 +128,13 @@ exports[`src/components/kanban/kanbanCard return kanbanCard and click on copy li
                 />
               </div>
               <div
-                class="menu-name"
+                class="menu-option__content"
               >
-                Cancel
+                <div
+                  class="menu-name"
+                >
+                  Cancel
+                </div>
               </div>
               <div
                 class="noicon"
@@ -196,9 +212,13 @@ exports[`src/components/kanban/kanbanCard return kanbanCard and click on delete
                   />
                 </div>
                 <div
-                  class="menu-name"
+                  class="menu-option__content"
                 >
-                  Delete
+                  <div
+                    class="menu-name"
+                  >
+                    Delete
+                  </div>
                 </div>
                 <div
                   class="noicon"
@@ -217,9 +237,13 @@ exports[`src/components/kanban/kanbanCard return kanbanCard and click on delete
                   />
                 </div>
                 <div
-                  class="menu-name"
+                  class="menu-option__content"
                 >
-                  Duplicate
+                  <div
+                    class="menu-name"
+                  >
+                    Duplicate
+                  </div>
                 </div>
                 <div
                   class="noicon"
@@ -240,9 +264,13 @@ exports[`src/components/kanban/kanbanCard return kanbanCard and click on delete
                   />
                 </div>
                 <div
-                  class="menu-name"
+                  class="menu-option__content"
                 >
-                  Copy link
+                  <div
+                    class="menu-name"
+                  >
+                    Copy link
+                  </div>
                 </div>
                 <div
                   class="noicon"
@@ -270,9 +298,13 @@ exports[`src/components/kanban/kanbanCard return kanbanCard and click on delete
                 />
               </div>
               <div
-                class="menu-name"
+                class="menu-option__content"
               >
-                Cancel
+                <div
+                  class="menu-name"
+                >
+                  Cancel
+                </div>
               </div>
               <div
                 class="noicon"
@@ -350,9 +382,13 @@ exports[`src/components/kanban/kanbanCard return kanbanCard and click on duplica
                   />
                 </div>
                 <div
-                  class="menu-name"
+                  class="menu-option__content"
                 >
-                  Delete
+                  <div
+                    class="menu-name"
+                  >
+                    Delete
+                  </div>
                 </div>
                 <div
                   class="noicon"
@@ -371,9 +407,13 @@ exports[`src/components/kanban/kanbanCard return kanbanCard and click on duplica
                   />
                 </div>
                 <div
-                  class="menu-name"
+                  class="menu-option__content"
                 >
-                  Duplicate
+                  <div
+                    class="menu-name"
+                  >
+                    Duplicate
+                  </div>
                 </div>
                 <div
                   class="noicon"
@@ -394,9 +434,13 @@ exports[`src/components/kanban/kanbanCard return kanbanCard and click on duplica
                   />
                 </div>
                 <div
-                  class="menu-name"
+                  class="menu-option__content"
                 >
-                  Copy link
+                  <div
+                    class="menu-name"
+                  >
+                    Copy link
+                  </div>
                 </div>
                 <div
                   class="noicon"
@@ -424,9 +468,13 @@ exports[`src/components/kanban/kanbanCard return kanbanCard and click on duplica
                 />
               </div>
               <div
-                class="menu-name"
+                class="menu-option__content"
               >
-                Cancel
+                <div
+                  class="menu-name"
+                >
+                  Cancel
+                </div>
               </div>
               <div
                 class="noicon"

webapp/src/components/kanban/__snapshots__/kanbanColumnHeader.test.tsx.snap

@@ -76,9 +76,13 @@ exports[`src/components/kanban/kanbanColumnHeader return kanbanColumnHeader and
                   </svg>
                 </div>
                 <div
-                  class="menu-name"
+                  class="menu-option__content"
                 >
-                  Hide
+                  <div
+                    class="menu-name"
+                  >
+                    Hide
+                  </div>
                 </div>
                 <div
                   class="noicon"
@@ -99,9 +103,13 @@ exports[`src/components/kanban/kanbanColumnHeader return kanbanColumnHeader and
                   />
                 </div>
                 <div
-                  class="menu-name"
+                  class="menu-option__content"
                 >
-                  Delete
+                  <div
+                    class="menu-name"
+                  >
+                    Delete
+                  </div>
                 </div>
                 <div
                   class="noicon"
@@ -301,9 +309,13 @@ exports[`src/components/kanban/kanbanColumnHeader return kanbanColumnHeader and
                 />
               </div>
               <div
-                class="menu-name"
+                class="menu-option__content"
               >
-                Cancel
+                <div
+                  class="menu-name"
+                >
+                  Cancel
+                </div>
               </div>
               <div
                 class="noicon"

webapp/src/components/kanban/__snapshots__/kanbanHiddenColumnItem.test.tsx.snap

@@ -73,9 +73,13 @@ exports[`src/components/kanban/kanbanHiddenColumnItem return kanbanHiddenColumnI
                   </svg>
                 </div>
                 <div
-                  class="menu-name"
+                  class="menu-option__content"
                 >
-                  Show
+                  <div
+                    class="menu-name"
+                  >
+                    Show
+                  </div>
                 </div>
                 <div
                   class="noicon"
@@ -102,9 +106,13 @@ exports[`src/components/kanban/kanbanHiddenColumnItem return kanbanHiddenColumnI
                 />
               </div>
               <div
-                class="menu-name"
+                class="menu-option__content"
               >
-                Cancel
+                <div
+                  class="menu-name"
+                >
+                  Cancel
+                </div>
               </div>
               <div
                 class="noicon"
@@ -170,9 +178,13 @@ exports[`src/components/kanban/kanbanHiddenColumnItem return kanbanHiddenColumnI
                   </svg>
                 </div>
                 <div
-                  class="menu-name"
+                  class="menu-option__content"
                 >
-                  Show
+                  <div
+                    class="menu-name"
+                  >
+                    Show
+                  </div>
                 </div>
                 <div
                   class="noicon"
@@ -199,9 +211,13 @@ exports[`src/components/kanban/kanbanHiddenColumnItem return kanbanHiddenColumnI
                 />
               </div>
               <div
-                class="menu-name"
+                class="menu-option__content"
               >
-                Cancel
+                <div
+                  class="menu-name"
+                >
+                  Cancel
+                </div>
               </div>
               <div
                 class="noicon"

webapp/src/components/kanban/kanban.test.tsx

@@ -75,6 +75,7 @@ describe('src/component/kanban/kanban', () => {
         },
         cards: {
             cards: [card1, card2, card3],
+            templates: [],
         },
         teams: {
             current: {id: 'team-id'},
@@ -542,6 +543,7 @@ describe('src/component/kanban/kanban', () => {
     card2.fields.properties = {id: 'property_value_id_1'}
     const card3 = TestBlockFactory.createCard(board)
     card3.id = 'id3'
+    card3.boardId = 'board_id_1'
     card3.fields.properties = {id: 'property_value_id_2'}
     activeView.fields.kanbanCalculations = {
         id1: {
@@ -550,7 +552,7 @@ describe('src/component/kanban/kanban', () => {
 
         },
     }
-    activeView.fields.defaultTemplateId = "defaultTemplateId"
+    activeView.fields.defaultTemplateId = card3.id
     const optionQ1:IPropertyOption = {
         color: 'propColorOrange',
         id: 'property_value_id_1',
@@ -582,7 +584,8 @@ describe('src/component/kanban/kanban', () => {
             },
         },
         cards: {
-            cards: [card1, card2, card3],
+            cards: [card1, card2],
+            templates: [card3],
         },
         teams: {
             current: {id: 'team-id'},

webapp/src/components/kanban/kanban.tsx

@@ -1,13 +1,12 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 /* eslint-disable max-lines */
-import React, {useCallback, useState, useMemo} from 'react'
+import React, { useCallback, useState, useMemo, useEffect } from 'react'
 import {FormattedMessage, injectIntl, IntlShape} from 'react-intl'
 
 import withScrolling, {createHorizontalStrength, createVerticalStrength} from 'react-dnd-scrolling'
 
 import {useAppSelector} from '../../store/hooks'
-import {getCurrentView} from '../../store/views'
 
 import {Position} from '../cardDetail/cardDetailContents'
 
@@ -21,6 +20,7 @@ import {Constants, Permission} from '../../constants'
 
 import {dragAndDropRearrange} from '../cardDetail/cardDetailContentsUtility'
 
+import {getCurrentBoardTemplates} from '../../store/cards'
 import BoardPermissionGate from '../permissions/boardPermissionGate'
 import HiddenCardCount from '../../components/hiddenCardCount/hiddenCardCount'
 
@@ -54,8 +54,17 @@ const hStrength = createHorizontalStrength(Utils.isMobile() ? 60 : 250)
 const vStrength = createVerticalStrength(Utils.isMobile() ? 60 : 250)
 
 const Kanban = (props: Props) => {
-    const currentView = useAppSelector(getCurrentView)
+    const cardTemplates: Card[] = useAppSelector(getCurrentBoardTemplates)
     const {board, activeView, cards, groupByProperty, visibleGroups, hiddenGroups, hiddenCardsCount} = props
+    const [defaultTemplateID, setDefaultTemplateID] = useState<string>()
+
+    useEffect(() => {
+        if(activeView.fields.defaultTemplateId) {
+            if(cardTemplates.find(ct => ct.id === activeView.fields.defaultTemplateId)) {
+                setDefaultTemplateID(activeView.fields.defaultTemplateId)
+            }
+        }
+    }, [activeView.fields.defaultTemplateId])
 
     if (!groupByProperty) {
         Utils.assertFailure('Board views must have groupByProperty set')
@@ -297,8 +306,8 @@ const Kanban = (props: Props) => {
                             <BoardPermissionGate permissions={[Permission.ManageBoardCards]}>
                                 <Button
                                     onClick={() => {
-                                        if(currentView.fields.defaultTemplateId) {
-                                            props.addCardFromTemplate(currentView.fields.defaultTemplateId, group.option.id)
+                                        if(defaultTemplateID) {
+                                            props.addCardFromTemplate(defaultTemplateID, group.option.id)
                                         } else {
                                             props.addCard(group.option.id, true)
                                         }

webapp/src/components/shareBoard/__snapshots__/teamPermissionsRow.test.tsx.snap

@@ -53,9 +53,13 @@ exports[`src/components/shareBoard/teamPermissionsRow should match snapshot 1`]
                     />
                   </div>
                   <div
-                    class="menu-name"
+                    class="menu-option__content"
                   >
-                    Editor
+                    <div
+                      class="menu-name"
+                    >
+                      Editor
+                    </div>
                   </div>
                   <div
                     class="noicon"
@@ -76,9 +80,13 @@ exports[`src/components/shareBoard/teamPermissionsRow should match snapshot 1`]
                     />
                   </div>
                   <div
-                    class="menu-name"
+                    class="menu-option__content"
                   >
-                    Commenter
+                    <div
+                      class="menu-name"
+                    >
+                      Commenter
+                    </div>
                   </div>
                   <div
                     class="noicon"
@@ -99,9 +107,13 @@ exports[`src/components/shareBoard/teamPermissionsRow should match snapshot 1`]
                     />
                   </div>
                   <div
-                    class="menu-name"
+                    class="menu-option__content"
                   >
-                    Viewer
+                    <div
+                      class="menu-name"
+                    >
+                      Viewer
+                    </div>
                   </div>
                   <div
                     class="noicon"
@@ -128,9 +140,13 @@ exports[`src/components/shareBoard/teamPermissionsRow should match snapshot 1`]
                     </svg>
                   </div>
                   <div
-                    class="menu-name"
+                    class="menu-option__content"
                   >
-                    None
+                    <div
+                      class="menu-name"
+                    >
+                      None
+                    </div>
                   </div>
                   <div
                     class="noicon"
@@ -157,9 +173,13 @@ exports[`src/components/shareBoard/teamPermissionsRow should match snapshot 1`]
                   />
                 </div>
                 <div
-                  class="menu-name"
+                  class="menu-option__content"
                 >
-                  Cancel
+                  <div
+                    class="menu-name"
+                  >
+                    Cancel
+                  </div>
                 </div>
                 <div
                   class="noicon"
@@ -230,9 +250,13 @@ exports[`src/components/shareBoard/teamPermissionsRow should match snapshot in p
                     />
                   </div>
                   <div
-                    class="menu-name"
+                    class="menu-option__content"
                   >
-                    Editor
+                    <div
+                      class="menu-name"
+                    >
+                      Editor
+                    </div>
                   </div>
                   <div
                     class="noicon"
@@ -253,9 +277,13 @@ exports[`src/components/shareBoard/teamPermissionsRow should match snapshot in p
                     />
                   </div>
                   <div
-                    class="menu-name"
+                    class="menu-option__content"
                   >
-                    Commenter
+                    <div
+                      class="menu-name"
+                    >
+                      Commenter
+                    </div>
                   </div>
                   <div
                     class="noicon"
@@ -276,9 +304,13 @@ exports[`src/components/shareBoard/teamPermissionsRow should match snapshot in p
                     />
                   </div>
                   <div
-                    class="menu-name"
+                    class="menu-option__content"
                   >
-                    Viewer
+                    <div
+                      class="menu-name"
+                    >
+                      Viewer
+                    </div>
                   </div>
                   <div
                     class="noicon"
@@ -305,9 +337,13 @@ exports[`src/components/shareBoard/teamPermissionsRow should match snapshot in p
                     </svg>
                   </div>
                   <div
-                    class="menu-name"
+                    class="menu-option__content"
                   >
-                    None
+                    <div
+                      class="menu-name"
+                    >
+                      None
+                    </div>
                   </div>
                   <div
                     class="noicon"
@@ -334,9 +370,13 @@ exports[`src/components/shareBoard/teamPermissionsRow should match snapshot in p
                   />
                 </div>
                 <div
-                  class="menu-name"
+                  class="menu-option__content"
                 >
-                  Cancel
+                  <div
+                    class="menu-name"
+                  >
+                    Cancel
+                  </div>
                 </div>
                 <div
                   class="noicon"
@@ -409,9 +449,13 @@ exports[`src/components/shareBoard/teamPermissionsRow should match snapshot in t
                     />
                   </div>
                   <div
-                    class="menu-name"
+                    class="menu-option__content"
                   >
-                    Viewer
+                    <div
+                      class="menu-name"
+                    >
+                      Viewer
+                    </div>
                   </div>
                   <div
                     class="noicon"
@@ -438,9 +482,13 @@ exports[`src/components/shareBoard/teamPermissionsRow should match snapshot in t
                     </svg>
                   </div>
                   <div
-                    class="menu-name"
+                    class="menu-option__content"
                   >
-                    None
+                    <div
+                      class="menu-name"
+                    >
+                      None
+                    </div>
                   </div>
                   <div
                     class="noicon"
@@ -467,9 +515,13 @@ exports[`src/components/shareBoard/teamPermissionsRow should match snapshot in t
                   />
                 </div>
                 <div
-                  class="menu-name"
+                  class="menu-option__content"
                 >
-                  Cancel
+                  <div
+                    class="menu-name"
+                  >
+                    Cancel
+                  </div>
                 </div>
                 <div
                   class="noicon"

webapp/src/components/sidebar/__snapshots__/sidebarSettingsMenu.test.tsx.snap

@@ -68,9 +68,13 @@ exports[`components/sidebar/SidebarSettingsMenu imports menu open should match s
                           />
                         </div>
                         <div
-                          class="menu-name"
+                          class="menu-option__content"
                         >
-                          Import archive
+                          <div
+                            class="menu-name"
+                          >
+                            Import archive
+                          </div>
                         </div>
                         <div
                           class="noicon"
@@ -89,9 +93,13 @@ exports[`components/sidebar/SidebarSettingsMenu imports menu open should match s
                           />
                         </div>
                         <div
-                          class="menu-name"
+                          class="menu-option__content"
                         >
-                          Trello
+                          <div
+                            class="menu-name"
+                          >
+                            Trello
+                          </div>
                         </div>
                         <div
                           class="noicon"
@@ -110,9 +118,13 @@ exports[`components/sidebar/SidebarSettingsMenu imports menu open should match s
                           />
                         </div>
                         <div
-                          class="menu-name"
+                          class="menu-option__content"
                         >
-                          Asana
+                          <div
+                            class="menu-name"
+                          >
+                            Asana
+                          </div>
                         </div>
                         <div
                           class="noicon"
@@ -131,9 +143,13 @@ exports[`components/sidebar/SidebarSettingsMenu imports menu open should match s
                           />
                         </div>
                         <div
-                          class="menu-name"
+                          class="menu-option__content"
                         >
-                          Notion
+                          <div
+                            class="menu-name"
+                          >
+                            Notion
+                          </div>
                         </div>
                         <div
                           class="noicon"
@@ -152,9 +168,13 @@ exports[`components/sidebar/SidebarSettingsMenu imports menu open should match s
                           />
                         </div>
                         <div
-                          class="menu-name"
+                          class="menu-option__content"
                         >
-                          Jira
+                          <div
+                            class="menu-name"
+                          >
+                            Jira
+                          </div>
                         </div>
                         <div
                           class="noicon"
@@ -173,9 +193,13 @@ exports[`components/sidebar/SidebarSettingsMenu imports menu open should match s
                           />
                         </div>
                         <div
-                          class="menu-name"
+                          class="menu-option__content"
                         >
-                          Todoist
+                          <div
+                            class="menu-name"
+                          >
+                            Todoist
+                          </div>
                         </div>
                         <div
                           class="noicon"
@@ -201,9 +225,13 @@ exports[`components/sidebar/SidebarSettingsMenu imports menu open should match s
                           />
                         </div>
                         <div
-                          class="menu-name"
+                          class="menu-option__content"
                         >
-                          Cancel
+                          <div
+                            class="menu-name"
+                          >
+                            Cancel
+                          </div>
                         </div>
                         <div
                           class="noicon"
@@ -228,9 +256,13 @@ exports[`components/sidebar/SidebarSettingsMenu imports menu open should match s
                   />
                 </div>
                 <div
-                  class="menu-name"
+                  class="menu-option__content"
                 >
-                  Export archive
+                  <div
+                    class="menu-name"
+                  >
+                    Export archive
+                  </div>
                 </div>
                 <div
                   class="noicon"
@@ -328,9 +360,13 @@ exports[`components/sidebar/SidebarSettingsMenu imports menu open should match s
                 />
               </div>
               <div
-                class="menu-name"
+                class="menu-option__content"
               >
-                Cancel
+                <div
+                  class="menu-name"
+                >
+                  Cancel
+                </div>
               </div>
               <div
                 class="noicon"
@@ -406,9 +442,13 @@ exports[`components/sidebar/SidebarSettingsMenu languages menu open should match
                   />
                 </div>
                 <div
-                  class="menu-name"
+                  class="menu-option__content"
                 >
-                  Export archive
+                  <div
+                    class="menu-name"
+                  >
+                    Export archive
+                  </div>
                 </div>
                 <div
                   class="noicon"
@@ -459,9 +499,13 @@ exports[`components/sidebar/SidebarSettingsMenu languages menu open should match
                           />
                         </div>
                         <div
-                          class="menu-name"
+                          class="menu-option__content"
                         >
-                          English
+                          <div
+                            class="menu-name"
+                          >
+                            English
+                          </div>
                         </div>
                         <svg
                           class="CheckIcon Icon"
@@ -486,9 +530,13 @@ exports[`components/sidebar/SidebarSettingsMenu languages menu open should match
                           />
                         </div>
                         <div
-                          class="menu-name"
+                          class="menu-option__content"
                         >
-                          Español
+                          <div
+                            class="menu-name"
+                          >
+                            Español
+                          </div>
                         </div>
                         <div
                           class="noicon"
@@ -507,9 +555,13 @@ exports[`components/sidebar/SidebarSettingsMenu languages menu open should match
                           />
                         </div>
                         <div
-                          class="menu-name"
+                          class="menu-option__content"
                         >
-                          Deutsch
+                          <div
+                            class="menu-name"
+                          >
+                            Deutsch
+                          </div>
                         </div>
                         <div
                           class="noicon"
@@ -528,9 +580,13 @@ exports[`components/sidebar/SidebarSettingsMenu languages menu open should match
                           />
                         </div>
                         <div
-                          class="menu-name"
+                          class="menu-option__content"
                         >
-                          日本語
+                          <div
+                            class="menu-name"
+                          >
+                            日本語
+                          </div>
                         </div>
                         <div
                           class="noicon"
@@ -549,9 +605,13 @@ exports[`components/sidebar/SidebarSettingsMenu languages menu open should match
                           />
                         </div>
                         <div
-                          class="menu-name"
+                          class="menu-option__content"
                         >
-                          Français
+                          <div
+                            class="menu-name"
+                          >
+                            Français
+                          </div>
                         </div>
                         <div
                           class="noicon"
@@ -570,9 +630,13 @@ exports[`components/sidebar/SidebarSettingsMenu languages menu open should match
                           />
                         </div>
                         <div
-                          class="menu-name"
+                          class="menu-option__content"
                         >
-                          Nederlands
+                          <div
+                            class="menu-name"
+                          >
+                            Nederlands
+                          </div>
                         </div>
                         <div
                           class="noicon"
@@ -591,9 +655,13 @@ exports[`components/sidebar/SidebarSettingsMenu languages menu open should match
                           />
                         </div>
                         <div
-                          class="menu-name"
+                          class="menu-option__content"
                         >
-                          Pусский
+                          <div
+                            class="menu-name"
+                          >
+                            Pусский
+                          </div>
                         </div>
                         <div
                           class="noicon"
@@ -612,9 +680,13 @@ exports[`components/sidebar/SidebarSettingsMenu languages menu open should match
                           />
                         </div>
                         <div
-                          class="menu-name"
+                          class="menu-option__content"
                         >
-                          中文 (繁體)
+                          <div
+                            class="menu-name"
+                          >
+                            中文 (繁體)
+                          </div>
                         </div>
                         <div
                           class="noicon"
@@ -633,9 +705,13 @@ exports[`components/sidebar/SidebarSettingsMenu languages menu open should match
                           />
                         </div>
                         <div
-                          class="menu-name"
+                          class="menu-option__content"
                         >
-                          中文 (简体)
+                          <div
+                            class="menu-name"
+                          >
+                            中文 (简体)
+                          </div>
                         </div>
                         <div
                           class="noicon"
@@ -654,9 +730,13 @@ exports[`components/sidebar/SidebarSettingsMenu languages menu open should match
                           />
                         </div>
                         <div
-                          class="menu-name"
+                          class="menu-option__content"
                         >
-                          Türkçe
+                          <div
+                            class="menu-name"
+                          >
+                            Türkçe
+                          </div>
                         </div>
                         <div
                           class="noicon"
@@ -675,9 +755,13 @@ exports[`components/sidebar/SidebarSettingsMenu languages menu open should match
                           />
                         </div>
                         <div
-                          class="menu-name"
+                          class="menu-option__content"
                         >
-                          Occitan
+                          <div
+                            class="menu-name"
+                          >
+                            Occitan
+                          </div>
                         </div>
                         <div
                           class="noicon"
@@ -696,9 +780,13 @@ exports[`components/sidebar/SidebarSettingsMenu languages menu open should match
                           />
                         </div>
                         <div
-                          class="menu-name"
+                          class="menu-option__content"
                         >
-                          Português (Brasil)
+                          <div
+                            class="menu-name"
+                          >
+                            Português (Brasil)
+                          </div>
                         </div>
                         <div
                           class="noicon"
@@ -717,9 +805,13 @@ exports[`components/sidebar/SidebarSettingsMenu languages menu open should match
                           />
                         </div>
                         <div
-                          class="menu-name"
+                          class="menu-option__content"
                         >
-                          Català
+                          <div
+                            class="menu-name"
+                          >
+                            Català
+                          </div>
                         </div>
                         <div
                           class="noicon"
@@ -738,9 +830,13 @@ exports[`components/sidebar/SidebarSettingsMenu languages menu open should match
                           />
                         </div>
                         <div
-                          class="menu-name"
+                          class="menu-option__content"
                         >
-                          Ελληνικά
+                          <div
+                            class="menu-name"
+                          >
+                            Ελληνικά
+                          </div>
                         </div>
                         <div
                           class="noicon"
@@ -759,9 +855,13 @@ exports[`components/sidebar/SidebarSettingsMenu languages menu open should match
                           />
                         </div>
                         <div
-                          class="menu-name"
+                          class="menu-option__content"
                         >
-                          bahasa Indonesia
+                          <div
+                            class="menu-name"
+                          >
+                            bahasa Indonesia
+                          </div>
                         </div>
                         <div
                           class="noicon"
@@ -780,9 +880,13 @@ exports[`components/sidebar/SidebarSettingsMenu languages menu open should match
                           />
                         </div>
                         <div
-                          class="menu-name"
+                          class="menu-option__content"
                         >
-                          Italiano
+                          <div
+                            class="menu-name"
+                          >
+                            Italiano
+                          </div>
                         </div>
                         <div
                           class="noicon"
@@ -801,9 +905,13 @@ exports[`components/sidebar/SidebarSettingsMenu languages menu open should match
                           />
                         </div>
                         <div
-                          class="menu-name"
+                          class="menu-option__content"
                         >
-                          Svenska
+                          <div
+                            class="menu-name"
+                          >
+                            Svenska
+                          </div>
                         </div>
                         <div
                           class="noicon"
@@ -829,9 +937,13 @@ exports[`components/sidebar/SidebarSettingsMenu languages menu open should match
                           />
                         </div>
                         <div
-                          class="menu-name"
+                          class="menu-option__content"
                         >
-                          Cancel
+                          <div
+                            class="menu-name"
+                          >
+                            Cancel
+                          </div>
                         </div>
                         <div
                           class="noicon"
@@ -909,9 +1021,13 @@ exports[`components/sidebar/SidebarSettingsMenu languages menu open should match
                 />
               </div>
               <div
-                class="menu-name"
+                class="menu-option__content"
               >
-                Cancel
+                <div
+                  class="menu-name"
+                >
+                  Cancel
+                </div>
               </div>
               <div
                 class="noicon"
@@ -1007,9 +1123,13 @@ exports[`components/sidebar/SidebarSettingsMenu settings menu open should match
                   />
                 </div>
                 <div
-                  class="menu-name"
+                  class="menu-option__content"
                 >
-                  Export archive
+                  <div
+                    class="menu-name"
+                  >
+                    Export archive
+                  </div>
                 </div>
                 <div
                   class="noicon"
@@ -1107,9 +1227,13 @@ exports[`components/sidebar/SidebarSettingsMenu settings menu open should match
                 />
               </div>
               <div
-                class="menu-name"
+                class="menu-option__content"
               >
-                Cancel
+                <div
+                  class="menu-name"
+                >
+                  Cancel
+                </div>
               </div>
               <div
                 class="noicon"
@@ -1185,9 +1309,13 @@ exports[`components/sidebar/SidebarSettingsMenu theme menu open should match sna
                   />
                 </div>
                 <div
-                  class="menu-name"
+                  class="menu-option__content"
                 >
-                  Export archive
+                  <div
+                    class="menu-name"
+                  >
+                    Export archive
+                  </div>
                 </div>
                 <div
                   class="noicon"
@@ -1262,9 +1390,13 @@ exports[`components/sidebar/SidebarSettingsMenu theme menu open should match sna
                           />
                         </div>
                         <div
-                          class="menu-name"
+                          class="menu-option__content"
                         >
-                          Default theme
+                          <div
+                            class="menu-name"
+                          >
+                            Default theme
+                          </div>
                         </div>
                         <svg
                           class="CheckIcon Icon"
@@ -1289,9 +1421,13 @@ exports[`components/sidebar/SidebarSettingsMenu theme menu open should match sna
                           />
                         </div>
                         <div
-                          class="menu-name"
+                          class="menu-option__content"
                         >
-                          Dark theme
+                          <div
+                            class="menu-name"
+                          >
+                            Dark theme
+                          </div>
                         </div>
                         <div
                           class="noicon"
@@ -1310,9 +1446,13 @@ exports[`components/sidebar/SidebarSettingsMenu theme menu open should match sna
                           />
                         </div>
                         <div
-                          class="menu-name"
+                          class="menu-option__content"
                         >
-                          Light theme
+                          <div
+                            class="menu-name"
+                          >
+                            Light theme
+                          </div>
                         </div>
                         <div
                           class="noicon"
@@ -1331,9 +1471,13 @@ exports[`components/sidebar/SidebarSettingsMenu theme menu open should match sna
                           />
                         </div>
                         <div
-                          class="menu-name"
+                          class="menu-option__content"
                         >
-                          System theme
+                          <div
+                            class="menu-name"
+                          >
+                            System theme
+                          </div>
                         </div>
                         <div
                           class="noicon"
@@ -1359,9 +1503,13 @@ exports[`components/sidebar/SidebarSettingsMenu theme menu open should match sna
                           />
                         </div>
                         <div
-                          class="menu-name"
+                          class="menu-option__content"
                         >
-                          Cancel
+                          <div
+                            class="menu-name"
+                          >
+                            Cancel
+                          </div>
                         </div>
                         <div
                           class="noicon"
@@ -1415,9 +1563,13 @@ exports[`components/sidebar/SidebarSettingsMenu theme menu open should match sna
                 />
               </div>
               <div
-                class="menu-name"
+                class="menu-option__content"
               >
-                Cancel
+                <div
+                  class="menu-name"
+                >
+                  Cancel
+                </div>
               </div>
               <div
                 class="noicon"

webapp/src/components/table/__snapshots__/tableHeaderMenu.test.tsx.snap

@@ -25,9 +25,13 @@ exports[`components/table/TableHeaderMenu should match snapshot, other column 1`
               />
             </div>
             <div
-              class="menu-name"
+              class="menu-option__content"
             >
-              Sort ascending
+              <div
+                class="menu-name"
+              >
+                Sort ascending
+              </div>
             </div>
             <div
               class="noicon"
@@ -48,9 +52,13 @@ exports[`components/table/TableHeaderMenu should match snapshot, other column 1`
               />
             </div>
             <div
-              class="menu-name"
+              class="menu-option__content"
             >
-              Sort descending
+              <div
+                class="menu-name"
+              >
+                Sort descending
+              </div>
             </div>
             <div
               class="noicon"
@@ -71,9 +79,13 @@ exports[`components/table/TableHeaderMenu should match snapshot, other column 1`
               />
             </div>
             <div
-              class="menu-name"
+              class="menu-option__content"
             >
-              Insert left
+              <div
+                class="menu-name"
+              >
+                Insert left
+              </div>
             </div>
             <div
               class="noicon"
@@ -94,9 +106,13 @@ exports[`components/table/TableHeaderMenu should match snapshot, other column 1`
               />
             </div>
             <div
-              class="menu-name"
+              class="menu-option__content"
             >
-              Insert right
+              <div
+                class="menu-name"
+              >
+                Insert right
+              </div>
             </div>
             <div
               class="noicon"
@@ -117,9 +133,13 @@ exports[`components/table/TableHeaderMenu should match snapshot, other column 1`
               />
             </div>
             <div
-              class="menu-name"
+              class="menu-option__content"
             >
-              Hide
+              <div
+                class="menu-name"
+              >
+                Hide
+              </div>
             </div>
             <div
               class="noicon"
@@ -138,9 +158,13 @@ exports[`components/table/TableHeaderMenu should match snapshot, other column 1`
               />
             </div>
             <div
-              class="menu-name"
+              class="menu-option__content"
             >
-              Duplicate
+              <div
+                class="menu-name"
+              >
+                Duplicate
+              </div>
             </div>
             <div
               class="noicon"
@@ -159,9 +183,13 @@ exports[`components/table/TableHeaderMenu should match snapshot, other column 1`
               />
             </div>
             <div
-              class="menu-name"
+              class="menu-option__content"
             >
-              Delete
+              <div
+                class="menu-name"
+              >
+                Delete
+              </div>
             </div>
             <div
               class="noicon"
@@ -188,9 +216,13 @@ exports[`components/table/TableHeaderMenu should match snapshot, other column 1`
             />
           </div>
           <div
-            class="menu-name"
+            class="menu-option__content"
           >
-            Cancel
+            <div
+              class="menu-name"
+            >
+              Cancel
+            </div>
           </div>
           <div
             class="noicon"
@@ -227,9 +259,13 @@ exports[`components/table/TableHeaderMenu should match snapshot, title column 1`
               />
             </div>
             <div
-              class="menu-name"
+              class="menu-option__content"
             >
-              Sort ascending
+              <div
+                class="menu-name"
+              >
+                Sort ascending
+              </div>
             </div>
             <div
               class="noicon"
@@ -250,9 +286,13 @@ exports[`components/table/TableHeaderMenu should match snapshot, title column 1`
               />
             </div>
             <div
-              class="menu-name"
+              class="menu-option__content"
             >
-              Sort descending
+              <div
+                class="menu-name"
+              >
+                Sort descending
+              </div>
             </div>
             <div
               class="noicon"
@@ -273,9 +313,13 @@ exports[`components/table/TableHeaderMenu should match snapshot, title column 1`
               />
             </div>
             <div
-              class="menu-name"
+              class="menu-option__content"
             >
-              Insert left
+              <div
+                class="menu-name"
+              >
+                Insert left
+              </div>
             </div>
             <div
               class="noicon"
@@ -296,9 +340,13 @@ exports[`components/table/TableHeaderMenu should match snapshot, title column 1`
               />
             </div>
             <div
-              class="menu-name"
+              class="menu-option__content"
             >
-              Insert right
+              <div
+                class="menu-name"
+              >
+                Insert right
+              </div>
             </div>
             <div
               class="noicon"
@@ -326,9 +374,13 @@ exports[`components/table/TableHeaderMenu should match snapshot, title column 1`
             />
           </div>
           <div
-            class="menu-name"
+            class="menu-option__content"
           >
-            Cancel
+            <div
+              class="menu-name"
+            >
+              Cancel
+            </div>
           </div>
           <div
             class="noicon"

webapp/src/components/viewHeader/__snapshots__/emptyCardButton.test.tsx.snap

@@ -26,9 +26,13 @@ exports[`components/viewHeader/emptyCardButton return EmptyCardButton 1`] = `
       </svg>
     </div>
     <div
-      class="menu-name"
+      class="menu-option__content"
     >
-      Empty card
+      <div
+        class="menu-name"
+      >
+        Empty card
+      </div>
     </div>
     <div
       aria-label="menuwrapper"
@@ -74,9 +78,13 @@ exports[`components/viewHeader/emptyCardButton return EmptyCardButton and Set Te
       </svg>
     </div>
     <div
-      class="menu-name"
+      class="menu-option__content"
     >
-      Empty card
+      <div
+        class="menu-name"
+      >
+        Empty card
+      </div>
     </div>
     <div
       aria-label="menuwrapper"
@@ -120,9 +128,13 @@ exports[`components/viewHeader/emptyCardButton return EmptyCardButton and Set Te
                   </svg>
                 </div>
                 <div
-                  class="menu-name"
+                  class="menu-option__content"
                 >
-                  Set as default
+                  <div
+                    class="menu-name"
+                  >
+                    Set as default
+                  </div>
                 </div>
                 <div
                   class="noicon"
@@ -149,9 +161,13 @@ exports[`components/viewHeader/emptyCardButton return EmptyCardButton and Set Te
                 />
               </div>
               <div
-                class="menu-name"
+                class="menu-option__content"
               >
-                Cancel
+                <div
+                  class="menu-name"
+                >
+                  Cancel
+                </div>
               </div>
               <div
                 class="noicon"
@@ -191,9 +207,13 @@ exports[`components/viewHeader/emptyCardButton return EmptyCardButton and addCar
       </svg>
     </div>
     <div
-      class="menu-name"
+      class="menu-option__content"
     >
-      Empty card
+      <div
+        class="menu-name"
+      >
+        Empty card
+      </div>
     </div>
     <div
       aria-label="menuwrapper"

webapp/src/components/viewHeader/__snapshots__/filterComponent.test.tsx.snap

@@ -61,9 +61,13 @@ exports[`components/viewHeader/filterComponent return filterComponent 1`] = `
                       />
                     </div>
                     <div
-                      class="menu-name"
+                      class="menu-option__content"
                     >
-                      Title
+                      <div
+                        class="menu-name"
+                      >
+                        Title
+                      </div>
                     </div>
                     <div
                       class="noicon"
@@ -84,9 +88,13 @@ exports[`components/viewHeader/filterComponent return filterComponent 1`] = `
                       />
                     </div>
                     <div
-                      class="menu-name"
+                      class="menu-option__content"
                     >
-                      Status
+                      <div
+                        class="menu-name"
+                      >
+                        Status
+                      </div>
                     </div>
                     <div
                       class="noicon"
@@ -107,9 +115,13 @@ exports[`components/viewHeader/filterComponent return filterComponent 1`] = `
                       />
                     </div>
                     <div
-                      class="menu-name"
+                      class="menu-option__content"
                     >
-                      Property 1
+                      <div
+                        class="menu-name"
+                      >
+                        Property 1
+                      </div>
                     </div>
                     <div
                       class="noicon"
@@ -130,9 +142,13 @@ exports[`components/viewHeader/filterComponent return filterComponent 1`] = `
                       />
                     </div>
                     <div
-                      class="menu-name"
+                      class="menu-option__content"
                     >
-                      Property 2
+                      <div
+                        class="menu-name"
+                      >
+                        Property 2
+                      </div>
                     </div>
                     <div
                       class="noicon"
@@ -153,9 +169,13 @@ exports[`components/viewHeader/filterComponent return filterComponent 1`] = `
                       />
                     </div>
                     <div
-                      class="menu-name"
+                      class="menu-option__content"
                     >
-                      Property 3
+                      <div
+                        class="menu-name"
+                      >
+                        Property 3
+                      </div>
                     </div>
                     <div
                       class="noicon"
@@ -182,9 +202,13 @@ exports[`components/viewHeader/filterComponent return filterComponent 1`] = `
                     />
                   </div>
                   <div
-                    class="menu-name"
+                    class="menu-option__content"
                   >
-                    Cancel
+                    <div
+                      class="menu-name"
+                    >
+                      Cancel
+                    </div>
                   </div>
                   <div
                     class="noicon"
@@ -309,9 +333,13 @@ exports[`components/viewHeader/filterComponent return filterComponent and add Fi
                       />
                     </div>
                     <div
-                      class="menu-name"
+                      class="menu-option__content"
                     >
-                      Title
+                      <div
+                        class="menu-name"
+                      >
+                        Title
+                      </div>
                     </div>
                     <div
                       class="noicon"
@@ -332,9 +360,13 @@ exports[`components/viewHeader/filterComponent return filterComponent and add Fi
                       />
                     </div>
                     <div
-                      class="menu-name"
+                      class="menu-option__content"
                     >
-                      Status
+                      <div
+                        class="menu-name"
+                      >
+                        Status
+                      </div>
                     </div>
                     <div
                       class="noicon"
@@ -355,9 +387,13 @@ exports[`components/viewHeader/filterComponent return filterComponent and add Fi
                       />
                     </div>
                     <div
-                      class="menu-name"
+                      class="menu-option__content"
                     >
-                      Property 1
+                      <div
+                        class="menu-name"
+                      >
+                        Property 1
+                      </div>
                     </div>
                     <div
                       class="noicon"
@@ -378,9 +414,13 @@ exports[`components/viewHeader/filterComponent return filterComponent and add Fi
                       />
                     </div>
                     <div
-                      class="menu-name"
+                      class="menu-option__content"
                     >
-                      Property 2
+                      <div
+                        class="menu-name"
+                      >
+                        Property 2
+                      </div>
                     </div>
                     <div
                       class="noicon"
@@ -401,9 +441,13 @@ exports[`components/viewHeader/filterComponent return filterComponent and add Fi
                       />
                     </div>
                     <div
-                      class="menu-name"
+                      class="menu-option__content"
                     >
-                      Property 3
+                      <div
+                        class="menu-name"
+                      >
+                        Property 3
+                      </div>
                     </div>
                     <div
                       class="noicon"
@@ -430,9 +474,13 @@ exports[`components/viewHeader/filterComponent return filterComponent and add Fi
                     />
                   </div>
                   <div
-                    class="menu-name"
+                    class="menu-option__content"
                   >
-                    Cancel
+                    <div
+                      class="menu-name"
+                    >
+                      Cancel
+                    </div>
                   </div>
                   <div
                     class="noicon"
@@ -571,9 +619,13 @@ exports[`components/viewHeader/filterComponent return filterComponent and click
                       />
                     </div>
                     <div
-                      class="menu-name"
+                      class="menu-option__content"
                     >
-                      includes
+                      <div
+                        class="menu-name"
+                      >
+                        includes
+                      </div>
                     </div>
                     <div
                       class="noicon"
@@ -592,9 +644,13 @@ exports[`components/viewHeader/filterComponent return filterComponent and click
                       />
                     </div>
                     <div
-                      class="menu-name"
+                      class="menu-option__content"
                     >
-                      doesn't include
+                      <div
+                        class="menu-name"
+                      >
+                        doesn't include
+                      </div>
                     </div>
                     <div
                       class="noicon"
@@ -613,9 +669,13 @@ exports[`components/viewHeader/filterComponent return filterComponent and click
                       />
                     </div>
                     <div
-                      class="menu-name"
+                      class="menu-option__content"
                     >
-                      is empty
+                      <div
+                        class="menu-name"
+                      >
+                        is empty
+                      </div>
                     </div>
                     <div
                       class="noicon"
@@ -634,9 +694,13 @@ exports[`components/viewHeader/filterComponent return filterComponent and click
                       />
                     </div>
                     <div
-                      class="menu-name"
+                      class="menu-option__content"
                     >
-                      is not empty
+                      <div
+                        class="menu-name"
+                      >
+                        is not empty
+                      </div>
                     </div>
                     <div
                       class="noicon"
@@ -665,9 +729,13 @@ exports[`components/viewHeader/filterComponent return filterComponent and click
                     />
                   </div>
                   <div
-                    class="menu-name"
+                    class="menu-option__content"
                   >
-                    Cancel
+                    <div
+                      class="menu-name"
+                    >
+                      Cancel
+                    </div>
                   </div>
                   <div
                     class="noicon"
@@ -778,9 +846,13 @@ exports[`components/viewHeader/filterComponent return filterComponent and filter
                       />
                     </div>
                     <div
-                      class="menu-name"
+                      class="menu-option__content"
                     >
-                      Title
+                      <div
+                        class="menu-name"
+                      >
+                        Title
+                      </div>
                     </div>
                     <div
                       class="noicon"
@@ -801,9 +873,13 @@ exports[`components/viewHeader/filterComponent return filterComponent and filter
                       />
                     </div>
                     <div
-                      class="menu-name"
+                      class="menu-option__content"
                     >
-                      Status
+                      <div
+                        class="menu-name"
+                      >
+                        Status
+                      </div>
                     </div>
                     <div
                       class="noicon"
@@ -824,9 +900,13 @@ exports[`components/viewHeader/filterComponent return filterComponent and filter
                       />
                     </div>
                     <div
-                      class="menu-name"
+                      class="menu-option__content"
                     >
-                      Property 1
+                      <div
+                        class="menu-name"
+                      >
+                        Property 1
+                      </div>
                     </div>
                     <div
                       class="noicon"
@@ -847,9 +927,13 @@ exports[`components/viewHeader/filterComponent return filterComponent and filter
                       />
                     </div>
                     <div
-                      class="menu-name"
+                      class="menu-option__content"
                     >
-                      Property 2
+                      <div
+                        class="menu-name"
+                      >
+                        Property 2
+                      </div>
                     </div>
                     <div
                       class="noicon"
@@ -870,9 +954,13 @@ exports[`components/viewHeader/filterComponent return filterComponent and filter
                       />
                     </div>
                     <div
-                      class="menu-name"
+                      class="menu-option__content"
                     >
-                      Property 3
+                      <div
+                        class="menu-name"
+                      >
+                        Property 3
+                      </div>
                     </div>
                     <div
                       class="noicon"
@@ -899,9 +987,13 @@ exports[`components/viewHeader/filterComponent return filterComponent and filter
                     />
                   </div>
                   <div
-                    class="menu-name"
+                    class="menu-option__content"
                   >
-                    Cancel
+                    <div
+                      class="menu-name"
+                    >
+                      Cancel
+                    </div>
                   </div>
                   <div
                     class="noicon"

webapp/src/components/viewHeader/__snapshots__/filterEntry.test.tsx.snap

@@ -41,9 +41,13 @@ exports[`components/viewHeader/filterEntry return filterEntry 1`] = `
                   />
                 </div>
                 <div
-                  class="menu-name"
+                  class="menu-option__content"
                 >
-                  Title
+                  <div
+                    class="menu-name"
+                  >
+                    Title
+                  </div>
                 </div>
                 <div
                   class="noicon"
@@ -64,9 +68,13 @@ exports[`components/viewHeader/filterEntry return filterEntry 1`] = `
                   />
                 </div>
                 <div
-                  class="menu-name"
+                  class="menu-option__content"
                 >
-                  Status
+                  <div
+                    class="menu-name"
+                  >
+                    Status
+                  </div>
                 </div>
                 <div
                   class="noicon"
@@ -87,9 +95,13 @@ exports[`components/viewHeader/filterEntry return filterEntry 1`] = `
                   />
                 </div>
                 <div
-                  class="menu-name"
+                  class="menu-option__content"
                 >
-                  Property 1
+                  <div
+                    class="menu-name"
+                  >
+                    Property 1
+                  </div>
                 </div>
                 <div
                   class="noicon"
@@ -110,9 +122,13 @@ exports[`components/viewHeader/filterEntry return filterEntry 1`] = `
                   />
                 </div>
                 <div
-                  class="menu-name"
+                  class="menu-option__content"
                 >
-                  Property 2
+                  <div
+                    class="menu-name"
+                  >
+                    Property 2
+                  </div>
                 </div>
                 <div
                   class="noicon"
@@ -133,9 +149,13 @@ exports[`components/viewHeader/filterEntry return filterEntry 1`] = `
                   />
                 </div>
                 <div
-                  class="menu-name"
+                  class="menu-option__content"
                 >
-                  Property 3
+                  <div
+                    class="menu-name"
+                  >
+                    Property 3
+                  </div>
                 </div>
                 <div
                   class="noicon"
@@ -162,9 +182,13 @@ exports[`components/viewHeader/filterEntry return filterEntry 1`] = `
                 />
               </div>
               <div
-                class="menu-name"
+                class="menu-option__content"
               >
-                Cancel
+                <div
+                  class="menu-name"
+                >
+                  Cancel
+                </div>
               </div>
               <div
                 class="noicon"
@@ -272,9 +296,13 @@ exports[`components/viewHeader/filterEntry return filterEntry and click on delet
                   />
                 </div>
                 <div
-                  class="menu-name"
+                  class="menu-option__content"
                 >
-                  includes
+                  <div
+                    class="menu-name"
+                  >
+                    includes
+                  </div>
                 </div>
                 <div
                   class="noicon"
@@ -293,9 +321,13 @@ exports[`components/viewHeader/filterEntry return filterEntry and click on delet
                   />
                 </div>
                 <div
-                  class="menu-name"
+                  class="menu-option__content"
                 >
-                  doesn't include
+                  <div
+                    class="menu-name"
+                  >
+                    doesn't include
+                  </div>
                 </div>
                 <div
                   class="noicon"
@@ -314,9 +346,13 @@ exports[`components/viewHeader/filterEntry return filterEntry and click on delet
                   />
                 </div>
                 <div
-                  class="menu-name"
+                  class="menu-option__content"
                 >
-                  is empty
+                  <div
+                    class="menu-name"
+                  >
+                    is empty
+                  </div>
                 </div>
                 <div
                   class="noicon"
@@ -335,9 +371,13 @@ exports[`components/viewHeader/filterEntry return filterEntry and click on delet
                   />
                 </div>
                 <div
-                  class="menu-name"
+                  class="menu-option__content"
                 >
-                  is not empty
+                  <div
+                    class="menu-name"
+                  >
+                    is not empty
+                  </div>
                 </div>
                 <div
                   class="noicon"
@@ -366,9 +406,13 @@ exports[`components/viewHeader/filterEntry return filterEntry and click on delet
                 />
               </div>
               <div
-                class="menu-name"
+                class="menu-option__content"
               >
-                Cancel
+                <div
+                  class="menu-name"
+                >
+                  Cancel
+                </div>
               </div>
               <div
                 class="noicon"
@@ -462,9 +506,13 @@ exports[`components/viewHeader/filterEntry return filterEntry and click on doesn
                   />
                 </div>
                 <div
-                  class="menu-name"
+                  class="menu-option__content"
                 >
-                  includes
+                  <div
+                    class="menu-name"
+                  >
+                    includes
+                  </div>
                 </div>
                 <div
                   class="noicon"
@@ -483,9 +531,13 @@ exports[`components/viewHeader/filterEntry return filterEntry and click on doesn
                   />
                 </div>
                 <div
-                  class="menu-name"
+                  class="menu-option__content"
                 >
-                  doesn't include
+                  <div
+                    class="menu-name"
+                  >
+                    doesn't include
+                  </div>
                 </div>
                 <div
                   class="noicon"
@@ -504,9 +556,13 @@ exports[`components/viewHeader/filterEntry return filterEntry and click on doesn
                   />
                 </div>
                 <div
-                  class="menu-name"
+                  class="menu-option__content"
                 >
-                  is empty
+                  <div
+                    class="menu-name"
+                  >
+                    is empty
+                  </div>
                 </div>
                 <div
                   class="noicon"
@@ -525,9 +581,13 @@ exports[`components/viewHeader/filterEntry return filterEntry and click on doesn
                   />
                 </div>
                 <div
-                  class="menu-name"
+                  class="menu-option__content"
                 >
-                  is not empty
+                  <div
+                    class="menu-name"
+                  >
+                    is not empty
+                  </div>
                 </div>
                 <div
                   class="noicon"
@@ -556,9 +616,13 @@ exports[`components/viewHeader/filterEntry return filterEntry and click on doesn
                 />
               </div>
               <div
-                class="menu-name"
+                class="menu-option__content"
               >
-                Cancel
+                <div
+                  class="menu-name"
+                >
+                  Cancel
+                </div>
               </div>
               <div
                 class="noicon"
@@ -652,9 +716,13 @@ exports[`components/viewHeader/filterEntry return filterEntry and click on inclu
                   />
                 </div>
                 <div
-                  class="menu-name"
+                  class="menu-option__content"
                 >
-                  includes
+                  <div
+                    class="menu-name"
+                  >
+                    includes
+                  </div>
                 </div>
                 <div
                   class="noicon"
@@ -673,9 +741,13 @@ exports[`components/viewHeader/filterEntry return filterEntry and click on inclu
                   />
                 </div>
                 <div
-                  class="menu-name"
+                  class="menu-option__content"
                 >
-                  doesn't include
+                  <div
+                    class="menu-name"
+                  >
+                    doesn't include
+                  </div>
                 </div>
                 <div
                   class="noicon"
@@ -694,9 +766,13 @@ exports[`components/viewHeader/filterEntry return filterEntry and click on inclu
                   />
                 </div>
                 <div
-                  class="menu-name"
+                  class="menu-option__content"
                 >
-                  is empty
+                  <div
+                    class="menu-name"
+                  >
+                    is empty
+                  </div>
                 </div>
                 <div
                   class="noicon"
@@ -715,9 +791,13 @@ exports[`components/viewHeader/filterEntry return filterEntry and click on inclu
                   />
                 </div>
                 <div
-                  class="menu-name"
+                  class="menu-option__content"
                 >
-                  is not empty
+                  <div
+                    class="menu-name"
+                  >
+                    is not empty
+                  </div>
                 </div>
                 <div
                   class="noicon"
@@ -746,9 +826,13 @@ exports[`components/viewHeader/filterEntry return filterEntry and click on inclu
                 />
               </div>
               <div
-                class="menu-name"
+                class="menu-option__content"
               >
-                Cancel
+                <div
+                  class="menu-name"
+                >
+                  Cancel
+                </div>
               </div>
               <div
                 class="noicon"
@@ -842,9 +926,13 @@ exports[`components/viewHeader/filterEntry return filterEntry and click on is em
                   />
                 </div>
                 <div
-                  class="menu-name"
+                  class="menu-option__content"
                 >
-                  includes
+                  <div
+                    class="menu-name"
+                  >
+                    includes
+                  </div>
                 </div>
                 <div
                   class="noicon"
@@ -863,9 +951,13 @@ exports[`components/viewHeader/filterEntry return filterEntry and click on is em
                   />
                 </div>
                 <div
-                  class="menu-name"
+                  class="menu-option__content"
                 >
-                  doesn't include
+                  <div
+                    class="menu-name"
+                  >
+                    doesn't include
+                  </div>
                 </div>
                 <div
                   class="noicon"
@@ -884,9 +976,13 @@ exports[`components/viewHeader/filterEntry return filterEntry and click on is em
                   />
                 </div>
                 <div
-                  class="menu-name"
+                  class="menu-option__content"
                 >
-                  is empty
+                  <div
+                    class="menu-name"
+                  >
+                    is empty
+                  </div>
                 </div>
                 <div
                   class="noicon"
@@ -905,9 +1001,13 @@ exports[`components/viewHeader/filterEntry return filterEntry and click on is em
                   />
                 </div>
                 <div
-                  class="menu-name"
+                  class="menu-option__content"
                 >
-                  is not empty
+                  <div
+                    class="menu-name"
+                  >
+                    is not empty
+                  </div>
                 </div>
                 <div
                   class="noicon"
@@ -936,9 +1036,13 @@ exports[`components/viewHeader/filterEntry return filterEntry and click on is em
                 />
               </div>
               <div
-                class="menu-name"
+                class="menu-option__content"
               >
-                Cancel
+                <div
+                  class="menu-name"
+                >
+                  Cancel
+                </div>
               </div>
               <div
                 class="noicon"
@@ -1032,9 +1136,13 @@ exports[`components/viewHeader/filterEntry return filterEntry and click on is no
                   />
                 </div>
                 <div
-                  class="menu-name"
+                  class="menu-option__content"
                 >
-                  includes
+                  <div
+                    class="menu-name"
+                  >
+                    includes
+                  </div>
                 </div>
                 <div
                   class="noicon"
@@ -1053,9 +1161,13 @@ exports[`components/viewHeader/filterEntry return filterEntry and click on is no
                   />
                 </div>
                 <div
-                  class="menu-name"
+                  class="menu-option__content"
                 >
-                  doesn't include
+                  <div
+                    class="menu-name"
+                  >
+                    doesn't include
+                  </div>
                 </div>
                 <div
                   class="noicon"
@@ -1074,9 +1186,13 @@ exports[`components/viewHeader/filterEntry return filterEntry and click on is no
                   />
                 </div>
                 <div
-                  class="menu-name"
+                  class="menu-option__content"
                 >
-                  is empty
+                  <div
+                    class="menu-name"
+                  >
+                    is empty
+                  </div>
                 </div>
                 <div
                   class="noicon"
@@ -1095,9 +1211,13 @@ exports[`components/viewHeader/filterEntry return filterEntry and click on is no
                   />
                 </div>
                 <div
-                  class="menu-name"
+                  class="menu-option__content"
                 >
-                  is not empty
+                  <div
+                    class="menu-name"
+                  >
+                    is not empty
+                  </div>
                 </div>
                 <div
                   class="noicon"
@@ -1126,9 +1246,13 @@ exports[`components/viewHeader/filterEntry return filterEntry and click on is no
                 />
               </div>
               <div
-                class="menu-name"
+                class="menu-option__content"
               >
-                Cancel
+                <div
+                  class="menu-name"
+                >
+                  Cancel
+                </div>
               </div>
               <div
                 class="noicon"
@@ -1208,9 +1332,13 @@ exports[`components/viewHeader/filterEntry return filterEntry and click on statu
                   />
                 </div>
                 <div
-                  class="menu-name"
+                  class="menu-option__content"
                 >
-                  Title
+                  <div
+                    class="menu-name"
+                  >
+                    Title
+                  </div>
                 </div>
                 <div
                   class="noicon"
@@ -1231,9 +1359,13 @@ exports[`components/viewHeader/filterEntry return filterEntry and click on statu
                   />
                 </div>
                 <div
-                  class="menu-name"
+                  class="menu-option__content"
                 >
-                  Status
+                  <div
+                    class="menu-name"
+                  >
+                    Status
+                  </div>
                 </div>
                 <div
                   class="noicon"
@@ -1254,9 +1386,13 @@ exports[`components/viewHeader/filterEntry return filterEntry and click on statu
                   />
                 </div>
                 <div
-                  class="menu-name"
+                  class="menu-option__content"
                 >
-                  Property 1
+                  <div
+                    class="menu-name"
+                  >
+                    Property 1
+                  </div>
                 </div>
                 <div
                   class="noicon"
@@ -1277,9 +1413,13 @@ exports[`components/viewHeader/filterEntry return filterEntry and click on statu
                   />
                 </div>
                 <div
-                  class="menu-name"
+                  class="menu-option__content"
                 >
-                  Property 2
+                  <div
+                    class="menu-name"
+                  >
+                    Property 2
+                  </div>
                 </div>
                 <div
                   class="noicon"
@@ -1300,9 +1440,13 @@ exports[`components/viewHeader/filterEntry return filterEntry and click on statu
                   />
                 </div>
                 <div
-                  class="menu-name"
+                  class="menu-option__content"
                 >
-                  Property 3
+                  <div
+                    class="menu-name"
+                  >
+                    Property 3
+                  </div>
                 </div>
                 <div
                   class="noicon"
@@ -1329,9 +1473,13 @@ exports[`components/viewHeader/filterEntry return filterEntry and click on statu
                 />
               </div>
               <div
-                class="menu-name"
+                class="menu-option__content"
               >
-                Cancel
+                <div
+                  class="menu-name"
+                >
+                  Cancel
+                </div>
               </div>
               <div
                 class="noicon"
@@ -1474,9 +1622,13 @@ exports[`components/viewHeader/filterEntry return filterEntry for boolean field
                   />
                 </div>
                 <div
-                  class="menu-name"
+                  class="menu-option__content"
                 >
-                  is set
+                  <div
+                    class="menu-name"
+                  >
+                    is set
+                  </div>
                 </div>
                 <div
                   class="noicon"
@@ -1495,9 +1647,13 @@ exports[`components/viewHeader/filterEntry return filterEntry for boolean field
                   />
                 </div>
                 <div
-                  class="menu-name"
+                  class="menu-option__content"
                 >
-                  is not set
+                  <div
+                    class="menu-name"
+                  >
+                    is not set
+                  </div>
                 </div>
                 <div
                   class="noicon"
@@ -1525,9 +1681,13 @@ exports[`components/viewHeader/filterEntry return filterEntry for boolean field
                 />
               </div>
               <div
-                class="menu-name"
+                class="menu-option__content"
               >
-                Cancel
+                <div
+                  class="menu-name"
+                >
+                  Cancel
+                </div>
               </div>
               <div
                 class="noicon"
@@ -1663,9 +1823,13 @@ exports[`components/viewHeader/filterEntry return filterEntry for text field 2`]
                   />
                 </div>
                 <div
-                  class="menu-name"
+                  class="menu-option__content"
                 >
-                  is
+                  <div
+                    class="menu-name"
+                  >
+                    is
+                  </div>
                 </div>
                 <div
                   class="noicon"
@@ -1684,9 +1848,13 @@ exports[`components/viewHeader/filterEntry return filterEntry for text field 2`]
                   />
                 </div>
                 <div
-                  class="menu-name"
+                  class="menu-option__content"
                 >
-                  contains
+                  <div
+                    class="menu-name"
+                  >
+                    contains
+                  </div>
                 </div>
                 <div
                   class="noicon"
@@ -1705,9 +1873,13 @@ exports[`components/viewHeader/filterEntry return filterEntry for text field 2`]
                   />
                 </div>
                 <div
-                  class="menu-name"
+                  class="menu-option__content"
                 >
-                  doesn't contain
+                  <div
+                    class="menu-name"
+                  >
+                    doesn't contain
+                  </div>
                 </div>
                 <div
                   class="noicon"
@@ -1726,9 +1898,13 @@ exports[`components/viewHeader/filterEntry return filterEntry for text field 2`]
                   />
                 </div>
                 <div
-                  class="menu-name"
+                  class="menu-option__content"
                 >
-                  starts with
+                  <div
+                    class="menu-name"
+                  >
+                    starts with
+                  </div>
                 </div>
                 <div
                   class="noicon"
@@ -1747,9 +1923,13 @@ exports[`components/viewHeader/filterEntry return filterEntry for text field 2`]
                   />
                 </div>
                 <div
-                  class="menu-name"
+                  class="menu-option__content"
                 >
-                  doesn't start with
+                  <div
+                    class="menu-name"
+                  >
+                    doesn't start with
+                  </div>
                 </div>
                 <div
                   class="noicon"
@@ -1768,9 +1948,13 @@ exports[`components/viewHeader/filterEntry return filterEntry for text field 2`]
                   />
                 </div>
                 <div
-                  class="menu-name"
+                  class="menu-option__content"
                 >
-                  ends with
+                  <div
+                    class="menu-name"
+                  >
+                    ends with
+                  </div>
                 </div>
                 <div
                   class="noicon"
@@ -1789,9 +1973,13 @@ exports[`components/viewHeader/filterEntry return filterEntry for text field 2`]
                   />
                 </div>
                 <div
-                  class="menu-name"
+                  class="menu-option__content"
                 >
-                  doesn't end with
+                  <div
+                    class="menu-name"
+                  >
+                    doesn't end with
+                  </div>
                 </div>
                 <div
                   class="noicon"
@@ -1818,9 +2006,13 @@ exports[`components/viewHeader/filterEntry return filterEntry for text field 2`]
                 />
               </div>
               <div
-                class="menu-name"
+                class="menu-option__content"
               >
-                Cancel
+                <div
+                  class="menu-name"
+                >
+                  Cancel
+                </div>
               </div>
               <div
                 class="noicon"

webapp/src/components/viewHeader/__snapshots__/filterValue.test.tsx.snap

@@ -67,9 +67,13 @@ exports[`components/viewHeader/filterValue return filterValue 1`] = `
               />
             </div>
             <div
-              class="menu-name"
+              class="menu-option__content"
             >
-              Cancel
+              <div
+                class="menu-name"
+              >
+                Cancel
+              </div>
             </div>
             <div
               class="noicon"
@@ -149,9 +153,13 @@ exports[`components/viewHeader/filterValue return filterValue and click Status 1
               />
             </div>
             <div
-              class="menu-name"
+              class="menu-option__content"
             >
-              Cancel
+              <div
+                class="menu-name"
+              >
+                Cancel
+              </div>
             </div>
             <div
               class="noicon"
@@ -231,9 +239,13 @@ exports[`components/viewHeader/filterValue return filterValue and click Status w
               />
             </div>
             <div
-              class="menu-name"
+              class="menu-option__content"
             >
-              Cancel
+              <div
+                class="menu-name"
+              >
+                Cancel
+              </div>
             </div>
             <div
               class="noicon"

webapp/src/components/viewHeader/__snapshots__/newCardButton.test.tsx.snap

@@ -57,9 +57,13 @@ exports[`components/viewHeader/newCardButton return NewCardButton 1`] = `
                   </svg>
                 </div>
                 <div
-                  class="menu-name"
+                  class="menu-option__content"
                 >
-                  Empty card
+                  <div
+                    class="menu-name"
+                  >
+                    Empty card
+                  </div>
                 </div>
                 <div
                   aria-label="menuwrapper"
@@ -91,9 +95,13 @@ exports[`components/viewHeader/newCardButton return NewCardButton 1`] = `
                   />
                 </div>
                 <div
-                  class="menu-name"
+                  class="menu-option__content"
                 >
-                  New template
+                  <div
+                    class="menu-name"
+                  >
+                    New template
+                  </div>
                 </div>
                 <div
                   class="noicon"
@@ -120,9 +128,13 @@ exports[`components/viewHeader/newCardButton return NewCardButton 1`] = `
                 />
               </div>
               <div
-                class="menu-name"
+                class="menu-option__content"
               >
-                Cancel
+                <div
+                  class="menu-name"
+                >
+                  Cancel
+                </div>
               </div>
               <div
                 class="noicon"
@@ -193,9 +205,13 @@ exports[`components/viewHeader/newCardButton return NewCardButton and addCard 1`
                   </svg>
                 </div>
                 <div
-                  class="menu-name"
+                  class="menu-option__content"
                 >
-                  Empty card
+                  <div
+                    class="menu-name"
+                  >
+                    Empty card
+                  </div>
                 </div>
                 <div
                   aria-label="menuwrapper"
@@ -227,9 +243,13 @@ exports[`components/viewHeader/newCardButton return NewCardButton and addCard 1`
                   />
                 </div>
                 <div
-                  class="menu-name"
+                  class="menu-option__content"
                 >
-                  New template
+                  <div
+                    class="menu-name"
+                  >
+                    New template
+                  </div>
                 </div>
                 <div
                   class="noicon"
@@ -256,9 +276,13 @@ exports[`components/viewHeader/newCardButton return NewCardButton and addCard 1`
                 />
               </div>
               <div
-                class="menu-name"
+                class="menu-option__content"
               >
-                Cancel
+                <div
+                  class="menu-name"
+                >
+                  Cancel
+                </div>
               </div>
               <div
                 class="noicon"
@@ -329,9 +353,13 @@ exports[`components/viewHeader/newCardButton return NewCardButton and addCardTem
                   </svg>
                 </div>
                 <div
-                  class="menu-name"
+                  class="menu-option__content"
                 >
-                  Empty card
+                  <div
+                    class="menu-name"
+                  >
+                    Empty card
+                  </div>
                 </div>
                 <div
                   aria-label="menuwrapper"
@@ -363,9 +391,13 @@ exports[`components/viewHeader/newCardButton return NewCardButton and addCardTem
                   />
                 </div>
                 <div
-                  class="menu-name"
+                  class="menu-option__content"
                 >
-                  New template
+                  <div
+                    class="menu-name"
+                  >
+                    New template
+                  </div>
                 </div>
                 <div
                   class="noicon"
@@ -392,9 +424,13 @@ exports[`components/viewHeader/newCardButton return NewCardButton and addCardTem
                 />
               </div>
               <div
-                class="menu-name"
+                class="menu-option__content"
               >
-                Cancel
+                <div
+                  class="menu-name"
+                >
+                  Cancel
+                </div>
               </div>
               <div
                 class="noicon"

webapp/src/components/viewHeader/__snapshots__/newCardButtonTemplateItem.test.tsx.snap

@@ -17,9 +17,13 @@ exports[`components/viewHeader/newCardButtonTemplateItem return NewCardButtonTem
       </div>
     </div>
     <div
-      class="menu-name"
+      class="menu-option__content"
     >
-      title
+      <div
+        class="menu-name"
+      >
+        title
+      </div>
     </div>
     <div
       aria-label="menuwrapper"
@@ -63,9 +67,13 @@ exports[`components/viewHeader/newCardButtonTemplateItem return NewCardButtonTem
                   </svg>
                 </div>
                 <div
-                  class="menu-name"
+                  class="menu-option__content"
                 >
-                  Set as default
+                  <div
+                    class="menu-name"
+                  >
+                    Set as default
+                  </div>
                 </div>
                 <div
                   class="noicon"
@@ -86,9 +94,13 @@ exports[`components/viewHeader/newCardButtonTemplateItem return NewCardButtonTem
                   />
                 </div>
                 <div
-                  class="menu-name"
+                  class="menu-option__content"
                 >
-                  Edit
+                  <div
+                    class="menu-name"
+                  >
+                    Edit
+                  </div>
                 </div>
                 <div
                   class="noicon"
@@ -109,9 +121,13 @@ exports[`components/viewHeader/newCardButtonTemplateItem return NewCardButtonTem
                   />
                 </div>
                 <div
-                  class="menu-name"
+                  class="menu-option__content"
                 >
-                  Delete
+                  <div
+                    class="menu-name"
+                  >
+                    Delete
+                  </div>
                 </div>
                 <div
                   class="noicon"
@@ -138,9 +154,13 @@ exports[`components/viewHeader/newCardButtonTemplateItem return NewCardButtonTem
                 />
               </div>
               <div
-                class="menu-name"
+                class="menu-option__content"
               >
-                Cancel
+                <div
+                  class="menu-name"
+                >
+                  Cancel
+                </div>
               </div>
               <div
                 class="noicon"
@@ -171,9 +191,13 @@ exports[`components/viewHeader/newCardButtonTemplateItem return NewCardButtonTem
       </div>
     </div>
     <div
-      class="menu-name"
+      class="menu-option__content"
     >
-      title
+      <div
+        class="menu-name"
+      >
+        title
+      </div>
     </div>
     <div
       aria-label="menuwrapper"
@@ -217,9 +241,13 @@ exports[`components/viewHeader/newCardButtonTemplateItem return NewCardButtonTem
                   </svg>
                 </div>
                 <div
-                  class="menu-name"
+                  class="menu-option__content"
                 >
-                  Set as default
+                  <div
+                    class="menu-name"
+                  >
+                    Set as default
+                  </div>
                 </div>
                 <div
                   class="noicon"
@@ -240,9 +268,13 @@ exports[`components/viewHeader/newCardButtonTemplateItem return NewCardButtonTem
                   />
                 </div>
                 <div
-                  class="menu-name"
+                  class="menu-option__content"
                 >
-                  Edit
+                  <div
+                    class="menu-name"
+                  >
+                    Edit
+                  </div>
                 </div>
                 <div
                   class="noicon"
@@ -263,9 +295,13 @@ exports[`components/viewHeader/newCardButtonTemplateItem return NewCardButtonTem
                   />
                 </div>
                 <div
-                  class="menu-name"
+                  class="menu-option__content"
                 >
-                  Delete
+                  <div
+                    class="menu-name"
+                  >
+                    Delete
+                  </div>
                 </div>
                 <div
                   class="noicon"
@@ -292,9 +328,13 @@ exports[`components/viewHeader/newCardButtonTemplateItem return NewCardButtonTem
                 />
               </div>
               <div
-                class="menu-name"
+                class="menu-option__content"
               >
-                Cancel
+                <div
+                  class="menu-name"
+                >
+                  Cancel
+                </div>
               </div>
               <div
                 class="noicon"
@@ -325,9 +365,13 @@ exports[`components/viewHeader/newCardButtonTemplateItem return NewCardButtonTem
       </div>
     </div>
     <div
-      class="menu-name"
+      class="menu-option__content"
     >
-      title
+      <div
+        class="menu-name"
+      >
+        title
+      </div>
     </div>
     <div
       aria-label="menuwrapper"
@@ -364,9 +408,13 @@ exports[`components/viewHeader/newCardButtonTemplateItem return NewCardButtonTem
       </div>
     </div>
     <div
-      class="menu-name"
+      class="menu-option__content"
     >
-      title
+      <div
+        class="menu-name"
+      >
+        title
+      </div>
     </div>
     <div
       aria-label="menuwrapper"
@@ -410,9 +458,13 @@ exports[`components/viewHeader/newCardButtonTemplateItem return NewCardButtonTem
                   </svg>
                 </div>
                 <div
-                  class="menu-name"
+                  class="menu-option__content"
                 >
-                  Set as default
+                  <div
+                    class="menu-name"
+                  >
+                    Set as default
+                  </div>
                 </div>
                 <div
                   class="noicon"
@@ -433,9 +485,13 @@ exports[`components/viewHeader/newCardButtonTemplateItem return NewCardButtonTem
                   />
                 </div>
                 <div
-                  class="menu-name"
+                  class="menu-option__content"
                 >
-                  Edit
+                  <div
+                    class="menu-name"
+                  >
+                    Edit
+                  </div>
                 </div>
                 <div
                   class="noicon"
@@ -456,9 +512,13 @@ exports[`components/viewHeader/newCardButtonTemplateItem return NewCardButtonTem
                   />
                 </div>
                 <div
-                  class="menu-name"
+                  class="menu-option__content"
                 >
-                  Delete
+                  <div
+                    class="menu-name"
+                  >
+                    Delete
+                  </div>
                 </div>
                 <div
                   class="noicon"
@@ -485,9 +545,13 @@ exports[`components/viewHeader/newCardButtonTemplateItem return NewCardButtonTem
                 />
               </div>
               <div
-                class="menu-name"
+                class="menu-option__content"
               >
-                Cancel
+                <div
+                  class="menu-name"
+                >
+                  Cancel
+                </div>
               </div>
               <div
                 class="noicon"
@@ -518,9 +582,13 @@ exports[`components/viewHeader/newCardButtonTemplateItem return NewCardButtonTem
       </div>
     </div>
     <div
-      class="menu-name"
+      class="menu-option__content"
     >
-      title
+      <div
+        class="menu-name"
+      >
+        title
+      </div>
     </div>
     <div
       aria-label="menuwrapper"
@@ -564,9 +632,13 @@ exports[`components/viewHeader/newCardButtonTemplateItem return NewCardButtonTem
                   </svg>
                 </div>
                 <div
-                  class="menu-name"
+                  class="menu-option__content"
                 >
-                  Set as default
+                  <div
+                    class="menu-name"
+                  >
+                    Set as default
+                  </div>
                 </div>
                 <div
                   class="noicon"
@@ -587,9 +659,13 @@ exports[`components/viewHeader/newCardButtonTemplateItem return NewCardButtonTem
                   />
                 </div>
                 <div
-                  class="menu-name"
+                  class="menu-option__content"
                 >
-                  Edit
+                  <div
+                    class="menu-name"
+                  >
+                    Edit
+                  </div>
                 </div>
                 <div
                   class="noicon"
@@ -610,9 +686,13 @@ exports[`components/viewHeader/newCardButtonTemplateItem return NewCardButtonTem
                   />
                 </div>
                 <div
-                  class="menu-name"
+                  class="menu-option__content"
                 >
-                  Delete
+                  <div
+                    class="menu-name"
+                  >
+                    Delete
+                  </div>
                 </div>
                 <div
                   class="noicon"
@@ -639,9 +719,13 @@ exports[`components/viewHeader/newCardButtonTemplateItem return NewCardButtonTem
                 />
               </div>
               <div
-                class="menu-name"
+                class="menu-option__content"
               >
-                Cancel
+                <div
+                  class="menu-name"
+                >
+                  Cancel
+                </div>
               </div>
               <div
                 class="noicon"

webapp/src/components/viewHeader/__snapshots__/viewHeaderActionsMenu.test.tsx.snap

@@ -41,9 +41,13 @@ exports[`components/viewHeader/viewHeaderActionsMenu return menu 1`] = `
                   />
                 </div>
                 <div
-                  class="menu-name"
+                  class="menu-option__content"
                 >
-                  Export to CSV
+                  <div
+                    class="menu-name"
+                  >
+                    Export to CSV
+                  </div>
                 </div>
                 <div
                   class="noicon"
@@ -64,9 +68,13 @@ exports[`components/viewHeader/viewHeaderActionsMenu return menu 1`] = `
                   />
                 </div>
                 <div
-                  class="menu-name"
+                  class="menu-option__content"
                 >
-                  Export board archive
+                  <div
+                    class="menu-name"
+                  >
+                    Export board archive
+                  </div>
                 </div>
                 <div
                   class="noicon"
@@ -93,9 +101,13 @@ exports[`components/viewHeader/viewHeaderActionsMenu return menu 1`] = `
                 />
               </div>
               <div
-                class="menu-name"
+                class="menu-option__content"
               >
-                Cancel
+                <div
+                  class="menu-name"
+                >
+                  Cancel
+                </div>
               </div>
               <div
                 class="noicon"
@@ -150,9 +162,13 @@ exports[`components/viewHeader/viewHeaderActionsMenu return menu and verify call
                   />
                 </div>
                 <div
-                  class="menu-name"
+                  class="menu-option__content"
                 >
-                  Export to CSV
+                  <div
+                    class="menu-name"
+                  >
+                    Export to CSV
+                  </div>
                 </div>
                 <div
                   class="noicon"
@@ -173,9 +189,13 @@ exports[`components/viewHeader/viewHeaderActionsMenu return menu and verify call
                   />
                 </div>
                 <div
-                  class="menu-name"
+                  class="menu-option__content"
                 >
-                  Export board archive
+                  <div
+                    class="menu-name"
+                  >
+                    Export board archive
+                  </div>
                 </div>
                 <div
                   class="noicon"
@@ -202,9 +222,13 @@ exports[`components/viewHeader/viewHeaderActionsMenu return menu and verify call
                 />
               </div>
               <div
-                class="menu-name"
+                class="menu-option__content"
               >
-                Cancel
+                <div
+                  class="menu-name"
+                >
+                  Cancel
+                </div>
               </div>
               <div
                 class="noicon"
@@ -259,9 +283,13 @@ exports[`components/viewHeader/viewHeaderActionsMenu return menu and verify call
                   />
                 </div>
                 <div
-                  class="menu-name"
+                  class="menu-option__content"
                 >
-                  Export to CSV
+                  <div
+                    class="menu-name"
+                  >
+                    Export to CSV
+                  </div>
                 </div>
                 <div
                   class="noicon"
@@ -282,9 +310,13 @@ exports[`components/viewHeader/viewHeaderActionsMenu return menu and verify call
                   />
                 </div>
                 <div
-                  class="menu-name"
+                  class="menu-option__content"
                 >
-                  Export board archive
+                  <div
+                    class="menu-name"
+                  >
+                    Export board archive
+                  </div>
                 </div>
                 <div
                   class="noicon"
@@ -311,9 +343,13 @@ exports[`components/viewHeader/viewHeaderActionsMenu return menu and verify call
                 />
               </div>
               <div
-                class="menu-name"
+                class="menu-option__content"
               >
-                Cancel
+                <div
+                  class="menu-name"
+                >
+                  Cancel
+                </div>
               </div>
               <div
                 class="noicon"

webapp/src/components/viewHeader/__snapshots__/viewHeaderGroupByMenu.test.tsx.snap

@@ -43,9 +43,13 @@ exports[`components/viewHeader/viewHeaderGroupByMenu For viewType table render o
                 />
               </div>
               <div
-                class="menu-name"
+                class="menu-option__content"
               >
-                Hide 1 empty groups
+                <div
+                  class="menu-name"
+                >
+                  Hide 1 empty groups
+                </div>
               </div>
               <svg
                 class="HideIcon Icon"
@@ -70,9 +74,13 @@ exports[`components/viewHeader/viewHeaderGroupByMenu For viewType table render o
                 />
               </div>
               <div
-                class="menu-name"
+                class="menu-option__content"
               >
-                Ungroup
+                <div
+                  class="menu-name"
+                >
+                  Ungroup
+                </div>
               </div>
               <div
                 class="noicon"
@@ -96,9 +104,13 @@ exports[`components/viewHeader/viewHeaderGroupByMenu For viewType table render o
                 />
               </div>
               <div
-                class="menu-name"
+                class="menu-option__content"
               >
-                Status
+                <div
+                  class="menu-name"
+                >
+                  Status
+                </div>
               </div>
               <svg
                 class="CheckIcon Icon"
@@ -125,9 +137,13 @@ exports[`components/viewHeader/viewHeaderGroupByMenu For viewType table render o
                 />
               </div>
               <div
-                class="menu-name"
+                class="menu-option__content"
               >
-                Property 1
+                <div
+                  class="menu-name"
+                >
+                  Property 1
+                </div>
               </div>
               <div
                 class="noicon"
@@ -148,9 +164,13 @@ exports[`components/viewHeader/viewHeaderGroupByMenu For viewType table render o
                 />
               </div>
               <div
-                class="menu-name"
+                class="menu-option__content"
               >
-                Property 2
+                <div
+                  class="menu-name"
+                >
+                  Property 2
+                </div>
               </div>
               <div
                 class="noicon"
@@ -171,9 +191,13 @@ exports[`components/viewHeader/viewHeaderGroupByMenu For viewType table render o
                 />
               </div>
               <div
-                class="menu-name"
+                class="menu-option__content"
               >
-                Property 3
+                <div
+                  class="menu-name"
+                >
+                  Property 3
+                </div>
               </div>
               <div
                 class="noicon"
@@ -200,9 +224,13 @@ exports[`components/viewHeader/viewHeaderGroupByMenu For viewType table render o
               />
             </div>
             <div
-              class="menu-name"
+              class="menu-option__content"
             >
-              Cancel
+              <div
+                class="menu-name"
+              >
+                Cancel
+              </div>
             </div>
             <div
               class="noicon"
@@ -258,9 +286,13 @@ exports[`components/viewHeader/viewHeaderGroupByMenu For viewType table render o
                 />
               </div>
               <div
-                class="menu-name"
+                class="menu-option__content"
               >
-                Show 1 hidden groups
+                <div
+                  class="menu-name"
+                >
+                  Show 1 hidden groups
+                </div>
               </div>
               <svg
                 class="ShowIcon Icon"
@@ -285,9 +317,13 @@ exports[`components/viewHeader/viewHeaderGroupByMenu For viewType table render o
                 />
               </div>
               <div
-                class="menu-name"
+                class="menu-option__content"
               >
-                Ungroup
+                <div
+                  class="menu-name"
+                >
+                  Ungroup
+                </div>
               </div>
               <div
                 class="noicon"
@@ -311,9 +347,13 @@ exports[`components/viewHeader/viewHeaderGroupByMenu For viewType table render o
                 />
               </div>
               <div
-                class="menu-name"
+                class="menu-option__content"
               >
-                Status
+                <div
+                  class="menu-name"
+                >
+                  Status
+                </div>
               </div>
               <svg
                 class="CheckIcon Icon"
@@ -340,9 +380,13 @@ exports[`components/viewHeader/viewHeaderGroupByMenu For viewType table render o
                 />
               </div>
               <div
-                class="menu-name"
+                class="menu-option__content"
               >
-                Property 1
+                <div
+                  class="menu-name"
+                >
+                  Property 1
+                </div>
               </div>
               <div
                 class="noicon"
@@ -363,9 +407,13 @@ exports[`components/viewHeader/viewHeaderGroupByMenu For viewType table render o
                 />
               </div>
               <div
-                class="menu-name"
+                class="menu-option__content"
               >
-                Property 2
+                <div
+                  class="menu-name"
+                >
+                  Property 2
+                </div>
               </div>
               <div
                 class="noicon"
@@ -386,9 +434,13 @@ exports[`components/viewHeader/viewHeaderGroupByMenu For viewType table render o
                 />
               </div>
               <div
-                class="menu-name"
+                class="menu-option__content"
               >
-                Property 3
+                <div
+                  class="menu-name"
+                >
+                  Property 3
+                </div>
               </div>
               <div
                 class="noicon"
@@ -415,9 +467,13 @@ exports[`components/viewHeader/viewHeaderGroupByMenu For viewType table render o
               />
             </div>
             <div
-              class="menu-name"
+              class="menu-option__content"
             >
-              Cancel
+              <div
+                class="menu-name"
+              >
+                Cancel
+              </div>
             </div>
             <div
               class="noicon"
@@ -474,9 +530,13 @@ exports[`components/viewHeader/viewHeaderGroupByMenu return groupBy menu 1`] = `
                 />
               </div>
               <div
-                class="menu-name"
+                class="menu-option__content"
               >
-                Status
+                <div
+                  class="menu-name"
+                >
+                  Status
+                </div>
               </div>
               <svg
                 class="CheckIcon Icon"
@@ -503,9 +563,13 @@ exports[`components/viewHeader/viewHeaderGroupByMenu return groupBy menu 1`] = `
                 />
               </div>
               <div
-                class="menu-name"
+                class="menu-option__content"
               >
-                Property 1
+                <div
+                  class="menu-name"
+                >
+                  Property 1
+                </div>
               </div>
               <div
                 class="noicon"
@@ -526,9 +590,13 @@ exports[`components/viewHeader/viewHeaderGroupByMenu return groupBy menu 1`] = `
                 />
               </div>
               <div
-                class="menu-name"
+                class="menu-option__content"
               >
-                Property 2
+                <div
+                  class="menu-name"
+                >
+                  Property 2
+                </div>
               </div>
               <div
                 class="noicon"
@@ -549,9 +617,13 @@ exports[`components/viewHeader/viewHeaderGroupByMenu return groupBy menu 1`] = `
                 />
               </div>
               <div
-                class="menu-name"
+                class="menu-option__content"
               >
-                Property 3
+                <div
+                  class="menu-name"
+                >
+                  Property 3
+                </div>
               </div>
               <div
                 class="noicon"
@@ -578,9 +650,13 @@ exports[`components/viewHeader/viewHeaderGroupByMenu return groupBy menu 1`] = `
               />
             </div>
             <div
-              class="menu-name"
+              class="menu-option__content"
             >
-              Cancel
+              <div
+                class="menu-name"
+              >
+                Cancel
+              </div>
             </div>
             <div
               class="noicon"
@@ -660,9 +736,13 @@ exports[`components/viewHeader/viewHeaderGroupByMenu return groupBy menu, hideEm
                 />
               </div>
               <div
-                class="menu-name"
+                class="menu-option__content"
               >
-                Hide 1 empty groups
+                <div
+                  class="menu-name"
+                >
+                  Hide 1 empty groups
+                </div>
               </div>
               <svg
                 class="HideIcon Icon"
@@ -687,9 +767,13 @@ exports[`components/viewHeader/viewHeaderGroupByMenu return groupBy menu, hideEm
                 />
               </div>
               <div
-                class="menu-name"
+                class="menu-option__content"
               >
-                Show 1 hidden groups
+                <div
+                  class="menu-name"
+                >
+                  Show 1 hidden groups
+                </div>
               </div>
               <svg
                 class="ShowIcon Icon"
@@ -714,9 +798,13 @@ exports[`components/viewHeader/viewHeaderGroupByMenu return groupBy menu, hideEm
                 />
               </div>
               <div
-                class="menu-name"
+                class="menu-option__content"
               >
-                Ungroup
+                <div
+                  class="menu-name"
+                >
+                  Ungroup
+                </div>
               </div>
               <div
                 class="noicon"
@@ -740,9 +828,13 @@ exports[`components/viewHeader/viewHeaderGroupByMenu return groupBy menu, hideEm
                 />
               </div>
               <div
-                class="menu-name"
+                class="menu-option__content"
               >
-                Status
+                <div
+                  class="menu-name"
+                >
+                  Status
+                </div>
               </div>
               <svg
                 class="CheckIcon Icon"
@@ -769,9 +861,13 @@ exports[`components/viewHeader/viewHeaderGroupByMenu return groupBy menu, hideEm
                 />
               </div>
               <div
-                class="menu-name"
+                class="menu-option__content"
               >
-                Property 1
+                <div
+                  class="menu-name"
+                >
+                  Property 1
+                </div>
               </div>
               <div
                 class="noicon"
@@ -792,9 +888,13 @@ exports[`components/viewHeader/viewHeaderGroupByMenu return groupBy menu, hideEm
                 />
               </div>
               <div
-                class="menu-name"
+                class="menu-option__content"
               >
-                Property 2
+                <div
+                  class="menu-name"
+                >
+                  Property 2
+                </div>
               </div>
               <div
                 class="noicon"
@@ -815,9 +915,13 @@ exports[`components/viewHeader/viewHeaderGroupByMenu return groupBy menu, hideEm
                 />
               </div>
               <div
-                class="menu-name"
+                class="menu-option__content"
               >
-                Property 3
+                <div
+                  class="menu-name"
+                >
+                  Property 3
+                </div>
               </div>
               <div
                 class="noicon"
@@ -844,9 +948,13 @@ exports[`components/viewHeader/viewHeaderGroupByMenu return groupBy menu, hideEm
               />
             </div>
             <div
-              class="menu-name"
+              class="menu-option__content"
             >
-              Cancel
+              <div
+                class="menu-name"
+              >
+                Cancel
+              </div>
             </div>
             <div
               class="noicon"

webapp/src/components/viewHeader/__snapshots__/viewHeaderPropertiesMenu.test.tsx.snap

@@ -160,9 +160,13 @@ exports[`components/viewHeader/viewHeaderPropertiesMenu return properties menu 1
               />
             </div>
             <div
-              class="menu-name"
+              class="menu-option__content"
             >
-              Cancel
+              <div
+                class="menu-name"
+              >
+                Cancel
+              </div>
             </div>
             <div
               class="noicon"
@@ -357,9 +361,13 @@ exports[`components/viewHeader/viewHeaderPropertiesMenu return properties menu w
               />
             </div>
             <div
-              class="menu-name"
+              class="menu-option__content"
             >
-              Cancel
+              <div
+                class="menu-name"
+              >
+                Cancel
+              </div>
             </div>
             <div
               class="noicon"

webapp/src/components/viewHeader/__snapshots__/viewHeaderSortMenu.test.tsx.snap

@@ -38,9 +38,13 @@ exports[`components/viewHeader/viewHeaderSortMenu return sort menu 1`] = `
                 />
               </div>
               <div
-                class="menu-name"
+                class="menu-option__content"
               >
-                Manual
+                <div
+                  class="menu-name"
+                >
+                  Manual
+                </div>
               </div>
               <div
                 class="noicon"
@@ -59,9 +63,13 @@ exports[`components/viewHeader/viewHeaderSortMenu return sort menu 1`] = `
                 />
               </div>
               <div
-                class="menu-name"
+                class="menu-option__content"
               >
-                Revert
+                <div
+                  class="menu-name"
+                >
+                  Revert
+                </div>
               </div>
               <div
                 class="noicon"
@@ -85,9 +93,13 @@ exports[`components/viewHeader/viewHeaderSortMenu return sort menu 1`] = `
                 />
               </div>
               <div
-                class="menu-name"
+                class="menu-option__content"
               >
-                Name
+                <div
+                  class="menu-name"
+                >
+                  Name
+                </div>
               </div>
               <div
                 class="noicon"
@@ -108,9 +120,13 @@ exports[`components/viewHeader/viewHeaderSortMenu return sort menu 1`] = `
                 />
               </div>
               <div
-                class="menu-name"
+                class="menu-option__content"
               >
-                Status
+                <div
+                  class="menu-name"
+                >
+                  Status
+                </div>
               </div>
               <div
                 class="noicon"
@@ -131,9 +147,13 @@ exports[`components/viewHeader/viewHeaderSortMenu return sort menu 1`] = `
                 />
               </div>
               <div
-                class="menu-name"
+                class="menu-option__content"
               >
-                Property 1
+                <div
+                  class="menu-name"
+                >
+                  Property 1
+                </div>
               </div>
               <svg
                 class="SortDownIcon Icon"
@@ -163,9 +183,13 @@ exports[`components/viewHeader/viewHeaderSortMenu return sort menu 1`] = `
                 />
               </div>
               <div
-                class="menu-name"
+                class="menu-option__content"
               >
-                Property 2
+                <div
+                  class="menu-name"
+                >
+                  Property 2
+                </div>
               </div>
               <div
                 class="noicon"
@@ -186,9 +210,13 @@ exports[`components/viewHeader/viewHeaderSortMenu return sort menu 1`] = `
                 />
               </div>
               <div
-                class="menu-name"
+                class="menu-option__content"
               >
-                Property 3
+                <div
+                  class="menu-name"
+                >
+                  Property 3
+                </div>
               </div>
               <div
                 class="noicon"
@@ -215,9 +243,13 @@ exports[`components/viewHeader/viewHeaderSortMenu return sort menu 1`] = `
               />
             </div>
             <div
-              class="menu-name"
+              class="menu-option__content"
             >
-              Cancel
+              <div
+                class="menu-name"
+              >
+                Cancel
+              </div>
             </div>
             <div
               class="noicon"

webapp/src/styles/_typography.scss

@@ -54,6 +54,11 @@ h3,
     font-size: 16px;
 }
 
+.text-75 {
+    font-size: 12px;
+    line-height: 16px;
+}
+
 .text-danger {
     color: var(--error-text);
 }

webapp/src/widgets/__snapshots__/propertyMenu.test.tsx.snap

@@ -84,9 +84,13 @@ exports[`widgets/PropertyMenu should match snapshot 1`] = `
                       />
                     </div>
                     <div
-                      class="menu-name"
+                      class="menu-option__content"
                     >
-                      Text
+                      <div
+                        class="menu-name"
+                      >
+                        Text
+                      </div>
                     </div>
                     <div
                       class="noicon"
@@ -105,9 +109,13 @@ exports[`widgets/PropertyMenu should match snapshot 1`] = `
                       />
                     </div>
                     <div
-                      class="menu-name"
+                      class="menu-option__content"
                     >
-                      Number
+                      <div
+                        class="menu-name"
+                      >
+                        Number
+                      </div>
                     </div>
                     <div
                       class="noicon"
@@ -126,9 +134,13 @@ exports[`widgets/PropertyMenu should match snapshot 1`] = `
                       />
                     </div>
                     <div
-                      class="menu-name"
+                      class="menu-option__content"
                     >
-                      Email
+                      <div
+                        class="menu-name"
+                      >
+                        Email
+                      </div>
                     </div>
                     <div
                       class="noicon"
@@ -147,9 +159,13 @@ exports[`widgets/PropertyMenu should match snapshot 1`] = `
                       />
                     </div>
                     <div
-                      class="menu-name"
+                      class="menu-option__content"
                     >
-                      Phone
+                      <div
+                        class="menu-name"
+                      >
+                        Phone
+                      </div>
                     </div>
                     <div
                       class="noicon"
@@ -168,9 +184,13 @@ exports[`widgets/PropertyMenu should match snapshot 1`] = `
                       />
                     </div>
                     <div
-                      class="menu-name"
+                      class="menu-option__content"
                     >
-                      URL
+                      <div
+                        class="menu-name"
+                      >
+                        URL
+                      </div>
                     </div>
                     <div
                       class="noicon"
@@ -189,9 +209,13 @@ exports[`widgets/PropertyMenu should match snapshot 1`] = `
                       />
                     </div>
                     <div
-                      class="menu-name"
+                      class="menu-option__content"
                     >
-                      Select
+                      <div
+                        class="menu-name"
+                      >
+                        Select
+                      </div>
                     </div>
                     <div
                       class="noicon"
@@ -210,9 +234,13 @@ exports[`widgets/PropertyMenu should match snapshot 1`] = `
                       />
                     </div>
                     <div
-                      class="menu-name"
+                      class="menu-option__content"
                     >
-                      Multi select
+                      <div
+                        class="menu-name"
+                      >
+                        Multi select
+                      </div>
                     </div>
                     <div
                       class="noicon"
@@ -231,9 +259,13 @@ exports[`widgets/PropertyMenu should match snapshot 1`] = `
                       />
                     </div>
                     <div
-                      class="menu-name"
+                      class="menu-option__content"
                     >
-                      Date
+                      <div
+                        class="menu-name"
+                      >
+                        Date
+                      </div>
                     </div>
                     <div
                       class="noicon"
@@ -252,9 +284,13 @@ exports[`widgets/PropertyMenu should match snapshot 1`] = `
                       />
                     </div>
                     <div
-                      class="menu-name"
+                      class="menu-option__content"
                     >
-                      Person
+                      <div
+                        class="menu-name"
+                      >
+                        Person
+                      </div>
                     </div>
                     <div
                       class="noicon"
@@ -273,9 +309,13 @@ exports[`widgets/PropertyMenu should match snapshot 1`] = `
                       />
                     </div>
                     <div
-                      class="menu-name"
+                      class="menu-option__content"
                     >
-                      Checkbox
+                      <div
+                        class="menu-name"
+                      >
+                        Checkbox
+                      </div>
                     </div>
                     <div
                       class="noicon"
@@ -294,9 +334,13 @@ exports[`widgets/PropertyMenu should match snapshot 1`] = `
                       />
                     </div>
                     <div
-                      class="menu-name"
+                      class="menu-option__content"
                     >
-                      Created time
+                      <div
+                        class="menu-name"
+                      >
+                        Created time
+                      </div>
                     </div>
                     <div
                       class="noicon"
@@ -315,9 +359,13 @@ exports[`widgets/PropertyMenu should match snapshot 1`] = `
                       />
                     </div>
                     <div
-                      class="menu-name"
+                      class="menu-option__content"
                     >
-                      Created by
+                      <div
+                        class="menu-name"
+                      >
+                        Created by
+                      </div>
                     </div>
                     <div
                       class="noicon"
@@ -336,9 +384,13 @@ exports[`widgets/PropertyMenu should match snapshot 1`] = `
                       />
                     </div>
                     <div
-                      class="menu-name"
+                      class="menu-option__content"
                     >
-                      Last updated time
+                      <div
+                        class="menu-name"
+                      >
+                        Last updated time
+                      </div>
                     </div>
                     <div
                       class="noicon"
@@ -357,9 +409,13 @@ exports[`widgets/PropertyMenu should match snapshot 1`] = `
                       />
                     </div>
                     <div
-                      class="menu-name"
+                      class="menu-option__content"
                     >
-                      Last updated by
+                      <div
+                        class="menu-name"
+                      >
+                        Last updated by
+                      </div>
                     </div>
                     <div
                       class="noicon"
@@ -385,9 +441,13 @@ exports[`widgets/PropertyMenu should match snapshot 1`] = `
                       />
                     </div>
                     <div
-                      class="menu-name"
+                      class="menu-option__content"
                     >
-                      Cancel
+                      <div
+                        class="menu-name"
+                      >
+                        Cancel
+                      </div>
                     </div>
                     <div
                       class="noicon"
@@ -412,9 +472,13 @@ exports[`widgets/PropertyMenu should match snapshot 1`] = `
               />
             </div>
             <div
-              class="menu-name"
+              class="menu-option__content"
             >
-              Delete
+              <div
+                class="menu-name"
+              >
+                Delete
+              </div>
             </div>
             <div
               class="noicon"
@@ -441,9 +505,13 @@ exports[`widgets/PropertyMenu should match snapshot 1`] = `
             />
           </div>
           <div
-            class="menu-name"
+            class="menu-option__content"
           >
-            Cancel
+            <div
+              class="menu-name"
+            >
+              Cancel
+            </div>
           </div>
           <div
             class="noicon"

webapp/src/widgets/menu/menu.scss

@@ -16,6 +16,7 @@
     border: 1px solid rgba(var(--center-channel-color-rgb), 0.16);
     border-radius: var(--default-rad);
     box-shadow: var(--elevation-4);
+    cursor: default;
 
     &.fixed {
         position: fixed;
@@ -68,6 +69,17 @@
             padding: 4px 20px;
             cursor: pointer;
 
+            &.menu-option--disabled {
+                cursor: not-allowed;
+                pointer-events: none;
+                opacity: 0.32;
+            }
+
+            &.menu-option--with-subtext {
+                height: auto;
+                align-items: initial;
+            }
+
             &:hover {
                 background: rgba(var(--button-bg-rgb), 0.08);
             }
@@ -90,6 +102,10 @@
                 margin-left: 0;
             }
 
+            > .menu-content {
+                display: block;
+            }
+
             > .menu-name {
                 overflow: hidden;
                 text-overflow: ellipsis;
@@ -98,6 +114,11 @@
                 text-align: left;
             }
 
+            > .menu-subtext {
+                font-size: 10px;
+                text-align: left;
+            }
+
             > .SubmenuTriangleIcon {
                 fill: rgba(var(--center-channel-color-rgb), 0.7);
             }

webapp/src/widgets/menu/textOption.tsx

@@ -9,14 +9,23 @@ type TextOptionProps = MenuOptionProps & {
     icon?: React.ReactNode,
     rightIcon?: React.ReactNode,
     className?: string
+    subText?: string
+    disabled?: boolean
 }
 
 function TextOption(props:TextOptionProps): JSX.Element {
-    const {name, icon, rightIcon, check} = props
+    const {name, icon, rightIcon, check, subText, disabled} = props
     let className = 'MenuOption TextOption menu-option'
     if (props.className) {
         className += ' ' + props.className
     }
+    if (subText) {
+        className += ' menu-option--with-subtext'
+    }
+    if (disabled) {
+        className += ' menu-option--disabled'
+    }
+
     return (
         <div
             role='button'
@@ -29,7 +38,10 @@ function TextOption(props:TextOptionProps): JSX.Element {
             }}
         >
             <div className={`${check ? 'd-flex menu-option__check' : 'd-flex'}`}>{icon ?? <div className='noicon'/>}</div>
-            <div className='menu-name'>{name}</div>
+            <div className='menu-option__content'>
+                <div className='menu-name'>{name}</div>
+                {subText && <div className='menu-subtext text-75 mt-1'>{subText}</div>}
+            </div>
             {rightIcon ?? <div className='noicon'/>}
         </div>
     )

webapp/src/widgets/menuWrapper.scss

@@ -1,12 +1,13 @@
 .MenuWrapper {
     position: relative;
-    
+    cursor: default;
+
     &.disabled {
         cursor: default;
     }
 
-    
-    *:first-child { 
+
+    *:first-child {
         /* stylelint-disable property-no-vendor-prefix*/
         -webkit-user-select: text; /* Chrome all / Safari all */
         -moz-user-select: text; /* Firefox all */