Use icon component instead of mask-image for formatting buttons (matrix-org#9732)

Use icon component instead of mask-image for formatting buttons

Author: florianduros

res/css/views/rooms/wysiwyg_composer/components/_FormattingButtons.pcss

@@ -21,80 +21,40 @@ limitations under the License.
 
     .mx_FormattingButtons_Button {
         --size: 28px;
-        position: relative;
         cursor: pointer;
         height: var(--size);
-        line-height: var(--size);
-        width: auto;
-        padding-left: 22px;
+        width: var(--size);
         background-color: transparent;
         border: none;
-
-        &::before {
-            content: '';
-            position: absolute;
-            top: 6px;
-            left: 6px;
-            height: 16px;
-            width: 16px;
-            background-color: $tertiary-content;
-            mask-repeat: no-repeat;
-            mask-size: contain;
-            mask-position: center;
-        }
-
-        &::after {
-            content: '';
-            position: absolute;
-            left: 0;
-            top: 0;
-            z-index: 0;
-            width: var(--size);
-            height: var(--size);
-            border-radius: 5px;
-        }
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border-radius: 5px;
     }
 
     .mx_FormattingButtons_Button_hover {
         &:hover {
-            &::after {
-                background: rgba($secondary-content, 0.1);
-            }
+            background: rgba($secondary-content, 0.1);
 
-            &::before {
-                background-color: $secondary-content;
+            .mx_FormattingButtons_Icon {
+                color: $secondary-content;
             }
         }
     }
 
     .mx_FormattingButtons_active {
-        &::after {
-            background: rgba($accent, 0.1);
-        }
+        background: rgba($accent, 0.1);
 
-        &::before {
-            background-color: $accent;
+        .mx_FormattingButtons_Icon {
+            color: $accent;
         }
     }
 
-    .mx_FormattingButtons_Button_bold::before {
-        mask-image: url('$(res)/img/element-icons/room/composer/bold.svg');
-    }
-
-    .mx_FormattingButtons_Button_italic::before {
-        mask-image: url('$(res)/img/element-icons/room/composer/italic.svg');
-    }
-
-    .mx_FormattingButtons_Button_underline::before {
-        mask-image: url('$(res)/img/element-icons/room/composer/underline.svg');
-    }
-
-    .mx_FormattingButtons_Button_strikethrough::before {
-        mask-image: url('$(res)/img/element-icons/room/composer/strikethrough.svg');
-    }
-
-    .mx_FormattingButtons_Button_inline_code::before {
-        mask-image: url('$(res)/img/element-icons/room/composer/inline_code.svg');
+    .mx_FormattingButtons_Icon {
+        --size: 16px;
+        height: var(--size);
+        width: var(--size);
+        color: $tertiary-content;
     }
 }
 

res/img/element-icons/room/composer/bold.svg

@@ -14,10 +14,15 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, { MouseEventHandler } from "react";
+import React, { MouseEventHandler, ReactNode } from "react";
 import { FormattingFunctions, AllActionStates } from "@matrix-org/matrix-wysiwyg";
 import classNames from "classnames";
 
+import { Icon as BoldIcon } from '../../../../../../res/img/element-icons/room/composer/bold.svg';
+import { Icon as ItalicIcon } from '../../../../../../res/img/element-icons/room/composer/italic.svg';
+import { Icon as UnderlineIcon } from '../../../../../../res/img/element-icons/room/composer/underline.svg';
+import { Icon as StrikeThroughIcon } from '../../../../../../res/img/element-icons/room/composer/strikethrough.svg';
+import { Icon as InlineCodeIcon } from '../../../../../../res/img/element-icons/room/composer/inline_code.svg';
 import AccessibleTooltipButton from "../../../elements/AccessibleTooltipButton";
 import { Alignment } from "../../../elements/Tooltip";
 import { KeyboardShortcut } from "../../../settings/KeyboardShortcut";
@@ -38,24 +43,26 @@ function Tooltip({ label, keyCombo }: TooltipProps) {
 }
 
 interface ButtonProps extends TooltipProps {
-    className: string;
+    icon: ReactNode;
     isActive: boolean;
     onClick: MouseEventHandler<HTMLButtonElement>;
 }
 
-function Button({ label, keyCombo, onClick, isActive, className }: ButtonProps) {
+function Button({ label, keyCombo, onClick, isActive, icon }: ButtonProps) {
     return <AccessibleTooltipButton
         element="button"
         onClick={onClick as (e: ButtonEvent) => void}
         title={label}
         className={
-            classNames('mx_FormattingButtons_Button', className, {
+            classNames('mx_FormattingButtons_Button', {
                 'mx_FormattingButtons_active': isActive,
                 'mx_FormattingButtons_Button_hover': !isActive,
             })}
         tooltip={keyCombo && <Tooltip label={label} keyCombo={keyCombo} />}
         alignment={Alignment.Top}
-    />;
+    >
+        { icon }
+    </AccessibleTooltipButton>;
 }
 
 interface FormattingButtonsProps {
@@ -65,10 +72,10 @@ interface FormattingButtonsProps {
 
 export function FormattingButtons({ composer, actionStates }: FormattingButtonsProps) {
     return <div className="mx_FormattingButtons">
-        <Button isActive={actionStates.bold === 'reversed'} label={_td("Bold")} keyCombo={{ ctrlOrCmdKey: true, key: 'b' }} onClick={() => composer.bold()} className="mx_FormattingButtons_Button_bold" />
-        <Button isActive={actionStates.italic === 'reversed'} label={_td('Italic')} keyCombo={{ ctrlOrCmdKey: true, key: 'i' }} onClick={() => composer.italic()} className="mx_FormattingButtons_Button_italic" />
-        <Button isActive={actionStates.underline === 'reversed'} label={_td('Underline')} keyCombo={{ ctrlOrCmdKey: true, key: 'u' }} onClick={() => composer.underline()} className="mx_FormattingButtons_Button_underline" />
-        <Button isActive={actionStates.strikeThrough === 'reversed'} label={_td('Strikethrough')} onClick={() => composer.strikeThrough()} className="mx_FormattingButtons_Button_strikethrough" />
-        <Button isActive={actionStates.inlineCode === 'reversed'} label={_td('Code')} keyCombo={{ ctrlOrCmdKey: true, key: 'e' }} onClick={() => composer.inlineCode()} className="mx_FormattingButtons_Button_inline_code" />
+        <Button isActive={actionStates.bold === 'reversed'} label={_td("Bold")} keyCombo={{ ctrlOrCmdKey: true, key: 'b' }} onClick={() => composer.bold()} icon={<BoldIcon className="mx_FormattingButtons_Icon" />} />
+        <Button isActive={actionStates.italic === 'reversed'} label={_td('Italic')} keyCombo={{ ctrlOrCmdKey: true, key: 'i' }} onClick={() => composer.italic()} icon={<ItalicIcon className="mx_FormattingButtons_Icon" />} />
+        <Button isActive={actionStates.underline === 'reversed'} label={_td('Underline')} keyCombo={{ ctrlOrCmdKey: true, key: 'u' }} onClick={() => composer.underline()} icon={<UnderlineIcon className="mx_FormattingButtons_Icon" />} />
+        <Button isActive={actionStates.strikeThrough === 'reversed'} label={_td('Strikethrough')} onClick={() => composer.strikeThrough()} icon={<StrikeThroughIcon className="mx_FormattingButtons_Icon" />} />
+        <Button isActive={actionStates.inlineCode === 'reversed'} label={_td('Code')} keyCombo={{ ctrlOrCmdKey: true, key: 'e' }} onClick={() => composer.inlineCode()} icon={<InlineCodeIcon className="mx_FormattingButtons_Icon" />} />
     </div>;
 }