mirror of
https://github.com/vector-im/element-web.git
synced 2026-05-05 04:06:44 +02:00
Replace icons with Compound alternatives (#31642)
* Replace icons with Compound alternatives Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Remove unused icon Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Replace more icons with Compound alternatives Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Swap for outline icons in spotlight & update screenshots Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Update screenshot 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
ddad82075a
commit
fea10b3c19
Binary file not shown.
|
Before Width: | Height: | Size: 41 KiB After Width: | Height: | Size: 41 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 25 KiB After Width: | Height: | Size: 25 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 75 KiB After Width: | Height: | Size: 75 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 71 KiB After Width: | Height: | Size: 71 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 29 KiB After Width: | Height: | Size: 29 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 35 KiB After Width: | Height: | Size: 35 KiB |
@ -84,7 +84,7 @@ Please see LICENSE files in the repository root for full details.
|
||||
}
|
||||
|
||||
&.mx_HomePage_button_sendDm::before {
|
||||
mask-image: url("$(res)/img/element-icons/feedback.svg");
|
||||
mask-image: url("@vector-im/compound-design-tokens/icons/chat-solid.svg");
|
||||
}
|
||||
|
||||
&.mx_HomePage_button_explore::before {
|
||||
|
||||
@ -94,7 +94,7 @@ Please see LICENSE files in the repository root for full details.
|
||||
}
|
||||
|
||||
&.mx_SpotlightDialog_filterPeople::before {
|
||||
mask-image: url("@vector-im/compound-design-tokens/icons/user-profile-solid.svg");
|
||||
mask-image: url("@vector-im/compound-design-tokens/icons/user-profile.svg");
|
||||
}
|
||||
|
||||
&.mx_SpotlightDialog_filterPublicRooms::before {
|
||||
@ -102,7 +102,7 @@ Please see LICENSE files in the repository root for full details.
|
||||
}
|
||||
|
||||
&.mx_SpotlightDialog_filterPublicSpaces::before {
|
||||
mask-image: url("$(res)/img/element-icons/spaces.svg");
|
||||
mask-image: url("@vector-im/compound-design-tokens/icons/space.svg");
|
||||
}
|
||||
|
||||
.mx_SpotlightDialog_filter--close {
|
||||
@ -435,7 +435,7 @@ Please see LICENSE files in the repository root for full details.
|
||||
}
|
||||
|
||||
.mx_SpotlightDialog_startChat::before {
|
||||
mask-image: url("@vector-im/compound-design-tokens/icons/user-profile-solid.svg");
|
||||
mask-image: url("@vector-im/compound-design-tokens/icons/user-profile.svg");
|
||||
}
|
||||
|
||||
.mx_SpotlightDialog_joinRoomAlias::before {
|
||||
@ -447,7 +447,7 @@ Please see LICENSE files in the repository root for full details.
|
||||
}
|
||||
|
||||
.mx_SpotlightDialog_explorePublicSpaces::before {
|
||||
mask-image: url("$(res)/img/element-icons/spaces.svg");
|
||||
mask-image: url("@vector-im/compound-design-tokens/icons/space.svg");
|
||||
}
|
||||
|
||||
.mx_SpotlightDialog_startGroupChat::before {
|
||||
@ -503,15 +503,15 @@ Please see LICENSE files in the repository root for full details.
|
||||
mask-size: contain;
|
||||
|
||||
&.mx_SpotlightDialog_metaspaceResult_home-space {
|
||||
mask-image: url("@vector-im/compound-design-tokens/icons/home-solid.svg");
|
||||
mask-image: url("@vector-im/compound-design-tokens/icons/home.svg");
|
||||
}
|
||||
|
||||
&.mx_SpotlightDialog_metaspaceResult_favourites-space {
|
||||
mask-image: url("@vector-im/compound-design-tokens/icons/favourite-solid.svg");
|
||||
mask-image: url("@vector-im/compound-design-tokens/icons/favourite.svg");
|
||||
}
|
||||
|
||||
&.mx_SpotlightDialog_metaspaceResult_people-space {
|
||||
mask-image: url("@vector-im/compound-design-tokens/icons/user-profile-solid.svg");
|
||||
mask-image: url("@vector-im/compound-design-tokens/icons/user-profile.svg");
|
||||
}
|
||||
|
||||
&.mx_SpotlightDialog_metaspaceResult_orphans-space {
|
||||
|
||||
@ -24,7 +24,7 @@ Please see LICENSE files in the repository root for full details.
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
|
||||
mask-image: url("$(res)/img/element-icons/call/delete.svg");
|
||||
mask-image: url("@vector-im/compound-design-tokens/icons/backspace-solid.svg");
|
||||
mask-position: 8px;
|
||||
mask-size: 20px;
|
||||
mask-repeat: no-repeat;
|
||||
|
||||
@ -66,9 +66,6 @@ Please see LICENSE files in the repository root for full details.
|
||||
.mx_EmojiPicker_anchor_activity::before {
|
||||
mask-image: url("$(res)/img/emojipicker/activity.svg");
|
||||
}
|
||||
.mx_EmojiPicker_anchor_custom::before {
|
||||
mask-image: url("$(res)/img/emojipicker/custom.svg");
|
||||
}
|
||||
.mx_EmojiPicker_anchor_flags::before {
|
||||
mask-image: url("$(res)/img/emojipicker/flags.svg");
|
||||
}
|
||||
@ -132,7 +129,7 @@ Please see LICENSE files in the repository root for full details.
|
||||
}
|
||||
|
||||
.mx_EmojiPicker_search_icon {
|
||||
width: 16px;
|
||||
width: 20px;
|
||||
margin: 8px;
|
||||
}
|
||||
|
||||
@ -141,7 +138,7 @@ Please see LICENSE files in the repository root for full details.
|
||||
}
|
||||
|
||||
.mx_EmojiPicker_search_icon::after {
|
||||
mask: url("$(res)/img/emojipicker/search.svg") no-repeat;
|
||||
mask: url("@vector-im/compound-design-tokens/icons/search.svg") no-repeat;
|
||||
mask-size: 100%;
|
||||
background-color: $primary-content;
|
||||
content: "";
|
||||
@ -151,7 +148,7 @@ Please see LICENSE files in the repository root for full details.
|
||||
}
|
||||
|
||||
.mx_EmojiPicker_search_clear::after {
|
||||
mask-image: url("$(res)/img/emojipicker/delete.svg");
|
||||
mask-image: url("@vector-im/compound-design-tokens/icons/close.svg");
|
||||
}
|
||||
|
||||
.mx_EmojiPicker_category {
|
||||
|
||||
@ -1,10 +0,0 @@
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0)">
|
||||
<path d="M18.3333 2.49951H5.83333C5.25833 2.49951 4.80833 2.79118 4.50833 3.23285L0 9.99951L4.50833 16.7578C4.80833 17.1995 5.25833 17.4995 5.83333 17.4995H18.3333C19.25 17.4995 20 16.7495 20 15.8328V4.16618C20 3.24951 19.25 2.49951 18.3333 2.49951ZM15.8333 12.9912L14.6583 14.1662L11.6667 11.1745L8.675 14.1662L7.5 12.9912L10.4917 9.99951L7.5 7.00784L8.675 5.83284L11.6667 8.82451L14.6583 5.83284L15.8333 7.00784L12.8417 9.99951L15.8333 12.9912Z" fill="white"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0">
|
||||
<rect width="20" height="20" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 692 B |
@ -1,3 +0,0 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.283 21.4392C17.649 21.4392 21.9991 17.0875 21.9991 11.7196C21.9991 6.3516 17.649 2 12.283 2C6.91698 2 2.56696 6.3516 2.56696 11.7196C2.56696 13.2233 2.90831 14.6472 3.51772 15.9181L2.04565 20.7041C1.80906 21.4733 2.53172 22.1926 3.29983 21.9525L8.04605 20.4688C9.32655 21.0905 10.7641 21.4392 12.283 21.4392Z" fill="black"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 481 B |
@ -1,5 +0,0 @@
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.393 1.00259C10.9421 1.06119 11.3398 1.55389 11.2812 2.10306L11.0245 4.50854H12.8482C13.4004 4.50854 13.8482 4.95625 13.8482 5.50854C13.8482 6.06082 13.4004 6.50854 12.8482 6.50854H10.811L10.7408 7.16666H8.72946L8.79969 6.50854H5.36671L5.01796 9.77648H6V11.7765H4.80452L4.55614 14.1039C4.49753 14.653 4.00484 15.0507 3.45567 14.9921C2.9065 14.9335 2.50883 14.4408 2.56743 13.8916L2.79316 11.7765H1.00049C0.448204 11.7765 0.000488281 11.3288 0.000488281 10.7765C0.000488281 10.2242 0.448204 9.77648 1.00049 9.77648H3.0066L3.35535 6.50854H1.64186C1.08958 6.50854 0.641865 6.06082 0.641865 5.50854C0.641865 4.95625 1.08958 4.50854 1.64186 4.50854H3.56879L3.84815 1.89082C3.90676 1.34166 4.39946 0.943979 4.94862 1.00259C5.49779 1.06119 5.89547 1.55389 5.83686 2.10306L5.58015 4.50854H9.01313L9.29249 1.89082C9.3511 1.34166 9.8438 0.943979 10.393 1.00259Z" fill="black"/>
|
||||
<path d="M7.82868 9.10489C7.37101 9.10489 7 9.4759 7 9.93357V12.6958C7 13.1535 7.37101 13.5245 7.82868 13.5245H10.8672C11.3248 13.5245 11.6959 13.1535 11.6959 12.6958V9.93357C11.6959 9.4759 11.3248 9.10489 10.8672 9.10489H7.82868Z" fill="#17191C"/>
|
||||
<path d="M13.1807 9.74015L12.2483 10.486V12.1434L13.1807 12.8893C13.3615 13.034 13.6294 12.9052 13.6294 12.6736V9.95584C13.6294 9.72423 13.3615 9.59546 13.1807 9.74015Z" fill="#17191C"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 1.4 KiB |
@ -1,3 +0,0 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M2 12.1638C2 6.64097 6.47715 2.16382 12 2.16382C17.5228 2.16382 22 6.64097 22 12.1638C22 17.6867 17.5228 22.1638 12 22.1638C6.47715 22.1638 2 17.6867 2 12.1638ZM10.2814 7.58052L7.41682 7.58052L7.41682 10.4451L10.2814 10.4451L10.2814 7.58052ZM7.41682 6.43469C6.784 6.43469 6.271 6.94769 6.271 7.58052V10.4451C6.271 11.0779 6.784 11.5909 7.41682 11.5909H10.2814C10.9142 11.5909 11.4272 11.0779 11.4272 10.4451V7.58052C11.4272 6.9477 10.9142 6.43469 10.2814 6.43469H7.41682ZM7.41682 13.9462L10.2814 13.9462L10.2814 16.8108L7.41682 16.8108L7.41682 13.9462ZM6.271 13.9462C6.271 13.3134 6.784 12.8004 7.41682 12.8004H10.2814C10.9142 12.8004 11.4272 13.3134 11.4272 13.9462V16.8108C11.4272 17.4436 10.9142 17.9566 10.2814 17.9566H7.41682C6.784 17.9566 6.271 17.4436 6.271 16.8108V13.9462ZM16.6471 7.58052L13.7825 7.58052L13.7825 10.4451L16.6471 10.4451L16.6471 7.58052ZM13.7825 6.43469C13.1497 6.43469 12.6367 6.94769 12.6367 7.58052V10.4451C12.6367 11.0779 13.1497 11.5909 13.7825 11.5909H16.6471C17.2799 11.5909 17.7929 11.0779 17.7929 10.4451V7.58052C17.7929 6.9477 17.2799 6.43469 16.6471 6.43469H13.7825ZM15.2148 16.8108C14.4238 16.8108 13.7825 16.1695 13.7825 15.3785C13.7825 14.5875 14.4238 13.9462 15.2148 13.9462C16.0058 13.9462 16.6471 14.5875 16.6471 15.3785C16.6471 16.1695 16.0058 16.8108 15.2148 16.8108ZM12.6367 15.3785C12.6367 13.9546 13.7909 12.8004 15.2148 12.8004C16.6386 12.8004 17.7929 13.9546 17.7929 15.3785C17.7929 16.8023 16.6386 17.9566 15.2148 17.9566C13.7909 17.9566 12.6367 16.8023 12.6367 15.3785Z" fill="currentColor"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 1.7 KiB |
@ -1,34 +0,0 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!--
|
||||
Copyright (c) 2016, Missive
|
||||
From https://github.com/missive/emoji-mart/blob/master/src/svgs/index.js
|
||||
Licensed under BSD-3-Clause: https://github.com/missive/emoji-mart/blob/master/LICENSE
|
||||
-->
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
width="24"
|
||||
height="24"
|
||||
>
|
||||
<g transform="translate(2.000000, 1.000000)">
|
||||
<rect id="Rectangle" x="8" y="0" width="3" height="21" rx="1.5" />
|
||||
<rect
|
||||
id="Rectangle"
|
||||
transform="translate(9.843, 10.549) rotate(60) translate(-9.843, -10.549) "
|
||||
x="8.343"
|
||||
y="0.049"
|
||||
width="3"
|
||||
height="21"
|
||||
rx="1.5"
|
||||
/>
|
||||
<rect
|
||||
id="Rectangle"
|
||||
transform="translate(9.843, 10.549) rotate(-60) translate(-9.843, -10.549) "
|
||||
x="8.343"
|
||||
y="0.049"
|
||||
width="3"
|
||||
height="21"
|
||||
rx="1.5"
|
||||
/>
|
||||
</g>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 997 B |
@ -1,15 +0,0 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!--
|
||||
Copyright (c) 2016, Missive
|
||||
From https://github.com/missive/emoji-mart/blob/master/src/svgs/index.js
|
||||
Licensed under BSD-3-Clause: https://github.com/missive/emoji-mart/blob/master/LICENSE
|
||||
-->
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="13"
|
||||
height="13"
|
||||
viewBox="0 0 20 20"
|
||||
opacity="0.5"
|
||||
>
|
||||
<path d="M10 8.586L2.929 1.515 1.515 2.929 8.586 10l-7.071 7.071 1.414 1.414L10 11.414l7.071 7.071 1.414-1.414L11.414 10l7.071-7.071-1.414-1.414L10 8.586z" />
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 541 B |
@ -1,15 +0,0 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!--
|
||||
Copyright (c) 2016, Missive
|
||||
From https://github.com/missive/emoji-mart/blob/master/src/svgs/index.js
|
||||
Licensed under BSD-3-Clause: https://github.com/missive/emoji-mart/blob/master/LICENSE
|
||||
-->
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="13"
|
||||
height="13"
|
||||
viewBox="0 0 20 20"
|
||||
opacity="0.5"
|
||||
>
|
||||
<path d="M12.9 14.32a8 8 0 1 1 1.41-1.41l5.35 5.33-1.42 1.42-5.33-5.34zM8 14A6 6 0 1 0 8 2a6 6 0 0 0 0 12z" />
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 493 B |
@ -15,6 +15,7 @@ import {
|
||||
PlusIcon,
|
||||
RoomIcon,
|
||||
UserProfileSolidIcon,
|
||||
VideoCallSolidIcon,
|
||||
} from "@vector-im/compound-design-tokens/assets/web/icons";
|
||||
|
||||
import MatrixClientContext from "../../contexts/MatrixClientContext";
|
||||
@ -72,7 +73,6 @@ import MainSplit from "./MainSplit";
|
||||
import RightPanel from "./RightPanel";
|
||||
import SpaceHierarchy, { showRoom } from "./SpaceHierarchy";
|
||||
import { type RoomPermalinkCreator } from "../../utils/permalinks/Permalinks";
|
||||
import { Icon as HashVideoIcon } from "../../../res/img/element-icons/roomlist/hash-video.svg";
|
||||
import SpacePillButton from "./SpacePillButton.tsx";
|
||||
|
||||
interface IProps {
|
||||
@ -140,7 +140,7 @@ const SpaceLandingAddButton: React.FC<{ space: Room }> = ({ space }) => {
|
||||
{videoRoomsEnabled && (
|
||||
<IconizedContextMenuOption
|
||||
label={_t("action|new_video_room")}
|
||||
icon={<HashVideoIcon />}
|
||||
icon={<VideoCallSolidIcon />}
|
||||
onClick={async (e): Promise<void> => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
|
||||
@ -14,6 +14,7 @@ import {
|
||||
RoomIcon,
|
||||
SearchIcon,
|
||||
ShareIcon,
|
||||
VideoCallSolidIcon,
|
||||
} from "@vector-im/compound-design-tokens/assets/web/icons";
|
||||
|
||||
import { type IState as IRovingTabIndexState, RovingTabIndexProvider } from "../../../accessibility/RovingTabIndex.tsx";
|
||||
@ -74,7 +75,6 @@ import { getKeyBindingsManager } from "../../../KeyBindingsManager.ts";
|
||||
import AccessibleButton from "../elements/AccessibleButton.tsx";
|
||||
import { Landmark, LandmarkNavigation } from "../../../accessibility/LandmarkNavigation.ts";
|
||||
import LegacyCallHandler, { LegacyCallHandlerEvent } from "../../../LegacyCallHandler.tsx";
|
||||
import { Icon as HashVideoIcon } from "../../../../res/img/element-icons/roomlist/hash-video.svg";
|
||||
|
||||
interface IProps {
|
||||
onKeyDown: (ev: React.KeyboardEvent, state: IRovingTabIndexState) => void;
|
||||
@ -269,7 +269,7 @@ const UntaggedAuxButton: React.FC<IAuxButtonProps> = ({ tabIndex }) => {
|
||||
{videoRoomsEnabled && (
|
||||
<IconizedContextMenuOption
|
||||
label={_t("action|new_video_room")}
|
||||
icon={<HashVideoIcon />}
|
||||
icon={<VideoCallSolidIcon />}
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
@ -320,7 +320,7 @@ const UntaggedAuxButton: React.FC<IAuxButtonProps> = ({ tabIndex }) => {
|
||||
{videoRoomsEnabled && (
|
||||
<IconizedContextMenuOption
|
||||
label={_t("action|new_video_room")}
|
||||
icon={<HashVideoIcon />}
|
||||
icon={<VideoCallSolidIcon />}
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
|
||||
@ -14,6 +14,7 @@ import {
|
||||
UserAddSolidIcon,
|
||||
SearchIcon,
|
||||
UserAddIcon,
|
||||
VideoCallSolidIcon,
|
||||
} from "@vector-im/compound-design-tokens/assets/web/icons";
|
||||
|
||||
import MatrixClientContext from "../../../contexts/MatrixClientContext";
|
||||
@ -57,7 +58,6 @@ import IconizedContextMenu, {
|
||||
import SpaceContextMenu from "../context_menus/SpaceContextMenu";
|
||||
import InlineSpinner from "../elements/InlineSpinner";
|
||||
import { HomeButtonContextMenu } from "../spaces/SpacePanel";
|
||||
import { Icon as HashVideoIcon } from "../../../../res/img/element-icons/roomlist/hash-video.svg";
|
||||
|
||||
const contextMenuBelow = (elementRect: DOMRect): MenuProps => {
|
||||
// align the context menu's icons with the icon which opened the context menu
|
||||
@ -213,7 +213,7 @@ const LegacyRoomListHeader: React.FC<IProps> = ({ onVisibilityChange }) => {
|
||||
/>
|
||||
{videoRoomsEnabled && (
|
||||
<IconizedContextMenuOption
|
||||
icon={<HashVideoIcon />}
|
||||
icon={<VideoCallSolidIcon />}
|
||||
label={_t("action|new_video_room")}
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
@ -319,7 +319,7 @@ const LegacyRoomListHeader: React.FC<IProps> = ({ onVisibilityChange }) => {
|
||||
{videoRoomsEnabled && (
|
||||
<IconizedContextMenuOption
|
||||
label={_t("action|new_video_room")}
|
||||
icon={<HashVideoIcon />}
|
||||
icon={<VideoCallSolidIcon />}
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user