Use Compound close icon in favour of mishmash of x/close icons (#108)
* Use Compound close icon in favour of mishmash of x/close icons Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Update snapshots Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Remove stale CSS Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Iterate Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Update snapshot Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> --------- Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
This commit is contained in:
Michael Telatynski
GitHub
parent
c2c316831a
commit
5d9996c281
26 changed files with 143 additions and 225 deletions
|
|
@ -8,8 +8,8 @@ Please see LICENSE files in the repository root for full details.
|
|||
|
||||
import React from "react";
|
||||
import { Beacon } from "matrix-js-sdk/src/matrix";
|
||||
import CloseIcon from "@vector-im/compound-design-tokens/assets/web/icons/close";
|
||||
|
||||
import { Icon as CloseIcon } from "../../../../res/img/image-view/close.svg";
|
||||
import { _t } from "../../../languageHandler";
|
||||
import AccessibleButton from "../elements/AccessibleButton";
|
||||
import Heading from "../typography/Heading";
|
||||
|
|
@ -32,7 +32,7 @@ const DialogSidebar: React.FC<Props> = ({ beacons, onBeaconClick, requestClose }
|
|||
title={_t("location_sharing|close_sidebar")}
|
||||
data-testid="dialog-sidebar-close"
|
||||
>
|
||||
<CloseIcon className="mx_DialogSidebar_closeButtonIcon" />
|
||||
<CloseIcon className="mx_DialogSidebar_closeButtonIcon" height="24px" width="24px" />
|
||||
</AccessibleButton>
|
||||
</div>
|
||||
{beacons?.length ? (
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@ Please see LICENSE files in the repository root for full details.
|
|||
|
||||
import React from "react";
|
||||
import { Room } from "matrix-js-sdk/src/matrix";
|
||||
import CloseIcon from "@vector-im/compound-design-tokens/assets/web/icons/close";
|
||||
|
||||
import { _t } from "../../../languageHandler";
|
||||
import { useEventEmitterState } from "../../../hooks/useEventEmitter";
|
||||
|
|
@ -16,7 +17,6 @@ import { useOwnLiveBeacons } from "../../../utils/beacon";
|
|||
import AccessibleButton, { ButtonEvent } from "../elements/AccessibleButton";
|
||||
import Spinner from "../elements/Spinner";
|
||||
import StyledLiveBeaconIcon from "./StyledLiveBeaconIcon";
|
||||
import { Icon as CloseIcon } from "../../../../res/img/image-view/close.svg";
|
||||
import LiveTimeRemaining from "./LiveTimeRemaining";
|
||||
import dispatcher from "../../../dispatcher/dispatcher";
|
||||
import { ViewRoomPayload } from "../../../dispatcher/payloads/ViewRoomPayload";
|
||||
|
|
|
|||
|
|
@ -9,9 +9,9 @@ Please see LICENSE files in the repository root for full details.
|
|||
import { EventTimeline, JoinRule, MatrixError, Room, RoomStateEvent } from "matrix-js-sdk/src/matrix";
|
||||
import { KnownMembership } from "matrix-js-sdk/src/types";
|
||||
import React, { ReactElement, ReactNode, useCallback, useState, VFC } from "react";
|
||||
import CloseIcon from "@vector-im/compound-design-tokens/assets/web/icons/close";
|
||||
|
||||
import { Icon as CheckIcon } from "../../../../res/img/feather-customised/check.svg";
|
||||
import { Icon as XIcon } from "../../../../res/img/feather-customised/x.svg";
|
||||
import dis from "../../../dispatcher/dispatcher";
|
||||
import { useTypedEventEmitterState } from "../../../hooks/useEventEmitter";
|
||||
import { _t } from "../../../languageHandler";
|
||||
|
|
@ -92,7 +92,7 @@ export const RoomKnocksBar: VFC<{ room: Room }> = ({ room }) => {
|
|||
onClick={() => handleDeny(knockMembers[0].userId)}
|
||||
title={_t("action|deny")}
|
||||
>
|
||||
<XIcon width={18} height={18} />
|
||||
<CloseIcon width={18} height={18} />
|
||||
</AccessibleButton>
|
||||
<AccessibleButton
|
||||
className="mx_RoomKnocksBar_action"
|
||||
|
|
|
|||
|
|
@ -9,9 +9,9 @@ Please see LICENSE files in the repository root for full details.
|
|||
import { EventTimeline, MatrixError, Room, RoomMember, RoomStateEvent } from "matrix-js-sdk/src/matrix";
|
||||
import { KnownMembership } from "matrix-js-sdk/src/types";
|
||||
import React, { useCallback, useState, VFC } from "react";
|
||||
import CloseIcon from "@vector-im/compound-design-tokens/assets/web/icons/close";
|
||||
|
||||
import { Icon as CheckIcon } from "../../../../../../res/img/feather-customised/check.svg";
|
||||
import { Icon as XIcon } from "../../../../../../res/img/feather-customised/x.svg";
|
||||
import { formatRelativeTime } from "../../../../../DateUtils";
|
||||
import { useTypedEventEmitterState } from "../../../../../hooks/useEventEmitter";
|
||||
import { _t } from "../../../../../languageHandler";
|
||||
|
|
@ -89,7 +89,7 @@ const Knock: VFC<{
|
|||
onClick={() => handleDeny(roomMember.userId)}
|
||||
title={_t("action|deny")}
|
||||
>
|
||||
<XIcon width={18} height={18} />
|
||||
<CloseIcon width={18} height={18} />
|
||||
</AccessibleButton>
|
||||
<AccessibleButton
|
||||
className="mx_PeopleRoomSettingsTab_action"
|
||||
|
|
|
|||
|
|
@ -9,12 +9,12 @@ Please see LICENSE files in the repository root for full details.
|
|||
import React from "react";
|
||||
import { Room } from "matrix-js-sdk/src/matrix";
|
||||
import classNames from "classnames";
|
||||
import CloseIcon from "@vector-im/compound-design-tokens/assets/web/icons/close";
|
||||
|
||||
import { LiveBadge, VoiceBroadcastLiveness } from "../..";
|
||||
import { Icon as LiveIcon } from "../../../../res/img/compound/live-16px.svg";
|
||||
import { Icon as MicrophoneIcon } from "../../../../res/img/compound/mic-16px.svg";
|
||||
import { Icon as TimerIcon } from "../../../../res/img/compound/timer-16px.svg";
|
||||
import { Icon as XIcon } from "../../../../res/img/compound/close-16px.svg";
|
||||
import { _t } from "../../../languageHandler";
|
||||
import RoomAvatar from "../../../components/views/avatars/RoomAvatar";
|
||||
import AccessibleButton, { ButtonEvent } from "../../../components/views/elements/AccessibleButton";
|
||||
|
|
@ -65,7 +65,7 @@ export const VoiceBroadcastHeader: React.FC<VoiceBroadcastHeaderProps> = ({
|
|||
|
||||
const closeButton = showClose && (
|
||||
<AccessibleButton onClick={onCloseClick}>
|
||||
<XIcon className="mx_Icon mx_Icon_16" />
|
||||
<CloseIcon className="mx_Icon mx_Icon_16" />
|
||||
</AccessibleButton>
|
||||
);
|
||||
|
||||
|
|
|
|||
|
|
@ -7,6 +7,7 @@ Please see LICENSE files in the repository root for full details.
|
|||
*/
|
||||
|
||||
import React from "react";
|
||||
import CloseIcon from "@vector-im/compound-design-tokens/assets/web/icons/close";
|
||||
|
||||
import {
|
||||
VoiceBroadcastHeader,
|
||||
|
|
@ -16,7 +17,6 @@ import {
|
|||
} from "../..";
|
||||
import AccessibleButton from "../../../components/views/elements/AccessibleButton";
|
||||
import { useVoiceBroadcastPlayback } from "../../hooks/useVoiceBroadcastPlayback";
|
||||
import { Icon as XIcon } from "../../../../res/img/compound/close-8px.svg";
|
||||
|
||||
interface VoiceBroadcastSmallPlaybackBodyProps {
|
||||
playback: VoiceBroadcastPlayback;
|
||||
|
|
@ -37,7 +37,7 @@ export const VoiceBroadcastSmallPlaybackBody: React.FC<VoiceBroadcastSmallPlayba
|
|||
/>
|
||||
<VoiceBroadcastPlaybackControl state={playbackState} onClick={toggle} />
|
||||
<AccessibleButton onClick={() => playback.stop()}>
|
||||
<XIcon className="mx_Icon mx_Icon_8 mx_VoiceBroadcastBody__small-close" />
|
||||
<CloseIcon className="mx_Icon mx_Icon_8 mx_VoiceBroadcastBody__small-close" />
|
||||
</AccessibleButton>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue