diff --git a/res/css/views/rooms/wysiwyg_composer/components/_FormattingButtons.pcss b/res/css/views/rooms/wysiwyg_composer/components/_FormattingButtons.pcss
index 02f875d24a5..fa8078279f5 100644
--- a/res/css/views/rooms/wysiwyg_composer/components/_FormattingButtons.pcss
+++ b/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;
}
}
diff --git a/res/img/element-icons/room/composer/bold.svg b/res/img/element-icons/room/composer/bold.svg
index 4a5cb184cfb..043f9c064cf 100644
--- a/res/img/element-icons/room/composer/bold.svg
+++ b/res/img/element-icons/room/composer/bold.svg
@@ -1,3 +1,3 @@
diff --git a/res/img/element-icons/room/composer/inline_code.svg b/res/img/element-icons/room/composer/inline_code.svg
index a4392d9bce5..d9f75fde0c7 100644
--- a/res/img/element-icons/room/composer/inline_code.svg
+++ b/res/img/element-icons/room/composer/inline_code.svg
@@ -1,5 +1,5 @@
diff --git a/res/img/element-icons/room/composer/italic.svg b/res/img/element-icons/room/composer/italic.svg
index 2299fc1fa29..c6cd755d947 100644
--- a/res/img/element-icons/room/composer/italic.svg
+++ b/res/img/element-icons/room/composer/italic.svg
@@ -1,3 +1,3 @@
diff --git a/res/img/element-icons/room/composer/strikethrough.svg b/res/img/element-icons/room/composer/strikethrough.svg
index 0ed63b21393..9a9761729b9 100644
--- a/res/img/element-icons/room/composer/strikethrough.svg
+++ b/res/img/element-icons/room/composer/strikethrough.svg
@@ -1,4 +1,4 @@
diff --git a/res/img/element-icons/room/composer/underline.svg b/res/img/element-icons/room/composer/underline.svg
index b74e562ec8a..f253c874ea8 100644
--- a/res/img/element-icons/room/composer/underline.svg
+++ b/res/img/element-icons/room/composer/underline.svg
@@ -1,3 +1,3 @@
diff --git a/src/components/views/rooms/wysiwyg_composer/components/FormattingButtons.tsx b/src/components/views/rooms/wysiwyg_composer/components/FormattingButtons.tsx
index 98c13cfa43b..b7d8c325988 100644
--- a/src/components/views/rooms/wysiwyg_composer/components/FormattingButtons.tsx
+++ b/src/components/views/rooms/wysiwyg_composer/components/FormattingButtons.tsx
@@ -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;
}
-function Button({ label, keyCombo, onClick, isActive, className }: ButtonProps) {
+function Button({ label, keyCombo, onClick, isActive, icon }: ButtonProps) {
return void}
title={label}
className={
- classNames('mx_FormattingButtons_Button', className, {
+ classNames('mx_FormattingButtons_Button', {
'mx_FormattingButtons_active': isActive,
'mx_FormattingButtons_Button_hover': !isActive,
})}
tooltip={keyCombo && }
alignment={Alignment.Top}
- />;
+ >
+ { icon }
+ ;
}
interface FormattingButtonsProps {
@@ -65,10 +72,10 @@ interface FormattingButtonsProps {
export function FormattingButtons({ composer, actionStates }: FormattingButtonsProps) {
return
-
;
}