Merge branch 'develop' into AccessSecretStorageDialog

Author: luixxiul

res/css/_common.scss

@@ -386,15 +386,22 @@ legend {
     color: $alert;
 }
 
-.mx_Dialog_cancelButton {
+@define-mixin customisedCancelButton {
     mask: url('$(res)/img/feather-customised/cancel.svg');
     mask-repeat: no-repeat;
     mask-position: center;
     mask-size: cover;
-    width: 14px;
-    height: 14px;
     background-color: $dialog-close-fg-color;
     cursor: pointer;
+    position: unset;
+    width: unset;
+    height: unset;
+}
+
+.mx_Dialog_cancelButton {
+    @mixin customisedCancelButton;
+    width: 14px;
+    height: 14px;
     position: absolute;
     top: 10px;
     right: 0;

res/css/structures/auth/_CompleteSecurity.scss

@@ -34,14 +34,9 @@ limitations under the License.
 }
 
 .mx_CompleteSecurity_skip {
-    mask: url('$(res)/img/feather-customised/cancel.svg');
-    mask-repeat: no-repeat;
-    mask-position: center;
-    mask-size: cover;
+    @mixin customisedCancelButton;
     width: 18px;
     height: 18px;
-    background-color: $dialog-close-fg-color;
-    cursor: pointer;
     position: absolute;
     right: 24px;
 }

res/css/views/dialogs/_CompoundDialog.scss

@@ -38,14 +38,9 @@ limitations under the License.
         }
 
         .mx_CompoundDialog_cancelButton {
-            mask: url('$(res)/img/feather-customised/cancel.svg');
-            mask-repeat: no-repeat;
-            mask-position: center;
-            mask-size: cover;
+            @mixin customisedCancelButton;
             width: 20px;
             height: 20px;
-            background-color: $dialog-close-fg-color;
-            cursor: pointer;
 
             // Align with middle of title, 34px from right edge
             position: absolute;

res/css/views/elements/_EditableItemList.scss

@@ -25,14 +25,12 @@ limitations under the License.
 }
 
 .mx_EditableItem_delete {
+    @mixin customisedCancelButton;
     order: 3;
     margin-right: 5px;
-    cursor: pointer;
     vertical-align: middle;
     width: 14px;
     height: 14px;
-    mask-image: url('$(res)/img/feather-customised/cancel.svg');
-    mask-repeat: no-repeat;
     background-color: $alert;
     mask-size: 100%;
 }

res/css/views/right_panel/_VerificationPanel.scss

@@ -25,14 +25,10 @@ limitations under the License.
 
 .mx_UserInfo {
     .mx_EncryptionPanel_cancel {
-        mask: url('$(res)/img/feather-customised/cancel.svg');
-        mask-repeat: no-repeat;
-        mask-position: center;
-        mask-size: cover;
+        @mixin customisedCancelButton;
         width: 14px;
         height: 14px;
         background-color: $settings-subsection-fg-color;
-        cursor: pointer;
         position: absolute;
         z-index: 100;
         top: 14px;

res/css/views/rooms/_MessageComposer.scss

@@ -178,12 +178,6 @@ limitations under the License.
     }
 }
 
-.mx_ContextualMenu {
-    .mx_MessageComposer_button {
-        padding-left: calc(var(--size) + 6px);
-    }
-}
-
 .mx_MessageComposer_button {
     --size: 26px;
     position: relative;
@@ -192,20 +186,16 @@ limitations under the License.
     line-height: var(--size);
     width: auto;
     padding-left: var(--size);
+    border-radius: 50%;
+    margin-right: 6px;
 
-    &:not(.mx_CallContextMenu_item) {
-        border-radius: 50%;
-        margin-right: 6px;
-
-        &:last-child {
-            margin-right: auto;
-        }
+    &:last-child {
+        margin-right: auto;
     }
 
     &::before {
         content: '';
         position: absolute;
-
         top: 3px;
         left: 3px;
         height: 20px;
@@ -399,18 +389,3 @@ limitations under the License.
         left: 0;
     }
 }
-
-.mx_MessageComposer_Menu .mx_CallContextMenu_item {
-    display: flex;
-    align-items: center;
-    max-width: unset;
-    margin: 7px 7px 7px 16px; // space out the buttons
-}
-
-.mx_MessageComposer_Menu .mx_ContextualMenu {
-    min-width: 150px;
-    width: max-content;
-    padding: 5px 10px 5px 0;
-    box-shadow: 0px 2px 9px rgba(0, 0, 0, 0.25);
-    border-radius: 8px;
-}

res/css/views/voip/_DialPadContextMenu.scss

@@ -35,15 +35,10 @@ limitations under the License.
 }
 
 .mx_DialPadContextMenu_cancel {
+    @mixin customisedCancelButton;
     float: right;
-    mask: url('$(res)/img/feather-customised/cancel.svg');
-    mask-repeat: no-repeat;
-    mask-position: center;
-    mask-size: cover;
     width: 14px;
     height: 14px;
-    background-color: $dialog-close-fg-color;
-    cursor: pointer;
 }
 
 .mx_DialPadContextMenu_header:focus-within {

res/css/views/voip/_DialPadModal.scss

@@ -45,15 +45,10 @@ limitations under the License.
 }
 
 .mx_DialPadModal_cancel {
+    @mixin customisedCancelButton;
     float: right;
-    mask: url('$(res)/img/feather-customised/cancel.svg');
-    mask-repeat: no-repeat;
-    mask-position: center;
-    mask-size: cover;
     width: 14px;
     height: 14px;
-    background-color: $dialog-close-fg-color;
-    cursor: pointer;
     margin-right: 16px;
 }
 

src/components/views/location/LocationButton.tsx

@@ -58,7 +58,6 @@ export const LocationButton: React.FC<IProps> = ({ roomId, sender, menuPosition,
 
     const className = classNames(
         "mx_MessageComposer_button",
-        "mx_MessageComposer_location",
         {
             "mx_MessageComposer_button_highlight": menuDisplayed,
         },
@@ -67,6 +66,7 @@ export const LocationButton: React.FC<IProps> = ({ roomId, sender, menuPosition,
     return <React.Fragment>
         <CollapsibleButton
             className={className}
+            iconClassName="mx_MessageComposer_location"
             onClick={openMenu}
             title={_t("Location")}
         />

src/components/views/rooms/CollapsibleButton.tsx

@@ -20,27 +20,27 @@ import classNames from 'classnames';
 import AccessibleTooltipButton from "../elements/AccessibleTooltipButton";
 import { MenuItem } from "../../structures/ContextMenu";
 import { OverflowMenuContext } from './MessageComposerButtons';
+import { IconizedContextMenuOption } from '../context_menus/IconizedContextMenu';
 
 interface ICollapsibleButtonProps extends ComponentProps<typeof MenuItem> {
     title: string;
+    iconClassName: string;
 }
 
-export const CollapsibleButton = ({ title, children, className, ...props }: ICollapsibleButtonProps) => {
+export const CollapsibleButton = ({ title, children, className, iconClassName, ...props }: ICollapsibleButtonProps) => {
     const inOverflowMenu = !!useContext(OverflowMenuContext);
     if (inOverflowMenu) {
-        return <MenuItem
+        return <IconizedContextMenuOption
             {...props}
-            className={classNames("mx_CallContextMenu_item", className)}
-        >
-            { title }
-            { children }
-        </MenuItem>;
+            iconClassName={iconClassName}
+            label={title}
+        />;
     }
 
     return <AccessibleTooltipButton
         {...props}
         title={title}
-        className={className}
+        className={classNames(className, iconClassName)}
     >
         { children }
     </AccessibleTooltipButton>;