Iterate

Signed-off-by: Michael Telatynski <[email protected]>
element-hq · Oct 17, 2024 · 5e8e6df · 5e8e6df
1 parent 825d3f4
commit 5e8e6df
Show file tree

Hide file tree

Showing 16 changed files with 41 additions and 12 deletions.
diff --git a/playwright/snapshots/permalinks/permalinks.spec.ts/permalink-rendering-linux.png b/playwright/snapshots/permalinks/permalinks.spec.ts/permalink-rendering-linux.png
diff --git a/...user-settings-tab/appearance-user-settings-tab.spec.ts/appearance-tab-linux.png b/...user-settings-tab/appearance-user-settings-tab.spec.ts/appearance-tab-linux.png
diff --git a/...s/timeline/timeline.spec.ts/event-line-inline-start-margin-irc-layout-linux.png b/...s/timeline/timeline.spec.ts/event-line-inline-start-margin-irc-layout-linux.png
diff --git a/...shots/timeline/timeline.spec.ts/expanded-gels-and-messages-irc-layout-linux.png b/...shots/timeline/timeline.spec.ts/expanded-gels-and-messages-irc-layout-linux.png
diff --git a/...right/snapshots/timeline/timeline.spec.ts/expanded-gels-bubble-layout-linux.png b/...right/snapshots/timeline/timeline.spec.ts/expanded-gels-bubble-layout-linux.png
diff --git a/...ht/snapshots/timeline/timeline.spec.ts/expanded-gels-emote-irc-layout-linux.png b/...ht/snapshots/timeline/timeline.spec.ts/expanded-gels-emote-irc-layout-linux.png
diff --git a/playwright/snapshots/timeline/timeline.spec.ts/expanded-gels-irc-layout-linux.png b/playwright/snapshots/timeline/timeline.spec.ts/expanded-gels-irc-layout-linux.png
diff --git a/...right/snapshots/timeline/timeline.spec.ts/expanded-gels-modern-layout-linux.png b/...right/snapshots/timeline/timeline.spec.ts/expanded-gels-modern-layout-linux.png
diff --git a/...apshots/timeline/timeline.spec.ts/expanded-gels-redaction-placeholder-linux.png b/...apshots/timeline/timeline.spec.ts/expanded-gels-redaction-placeholder-linux.png
diff --git a/res/css/structures/_GenericDropdownMenu.pcss b/res/css/structures/_GenericDropdownMenu.pcss
@@ -99,10 +99,10 @@ Please see LICENSE files in the repository root for full details.
 
             &[aria-checked="true"]::before {
                 content: "";
-                width: 12px;
-                height: 12px;
-                margin-left: -20px;
-                margin-right: 8px;
+                width: 16px;
+                height: 16px;
+                margin-left: -22px;
+                margin-right: 6px;
                 mask-image: url("@vector-im/compound-design-tokens/icons/check.svg");
                 mask-size: 100%;
                 mask-repeat: no-repeat;

diff --git a/res/css/views/elements/_ImageView.pcss b/res/css/views/elements/_ImageView.pcss
@@ -130,6 +130,7 @@ $button-gap: 24px;
 
 .mx_ImageView_button_more::before {
     mask-image: url("@vector-im/compound-design-tokens/icons/overflow-horizontal.svg");
+    mask-size: 28px;
 }
 
 .mx_ImageView_button_close {

diff --git a/res/css/views/messages/_MessageActionBar.pcss b/res/css/views/messages/_MessageActionBar.pcss
@@ -122,4 +122,8 @@ Please see LICENSE files in the repository root for full details.
             --MessageActionBar-icon-size: 12px;
         }
     }
+
+    .mx_MessageActionBar_optionsButton {
+        --MessageActionBar-icon-size: 22px;
+    }
 }
diff --git a/res/css/views/rooms/_MessageComposer.pcss b/res/css/views/rooms/_MessageComposer.pcss
@@ -278,6 +278,7 @@ Please see LICENSE files in the repository root for full details.
 
 .mx_MessageComposer_buttonMenu::before {
     mask-image: url("@vector-im/compound-design-tokens/icons/overflow-horizontal.svg");
+    mask-size: 24px;
 }
 
 .mx_MessageComposer_sendMessage {

diff --git a/src/components/views/elements/Pill.tsx b/src/components/views/elements/Pill.tsx
@@ -10,7 +10,7 @@ import React, { ReactElement } from "react";
 import classNames from "classnames";
 import { Room, RoomMember } from "matrix-js-sdk/src/matrix";
 import { Tooltip } from "@vector-im/compound-web";
-import { LinkIcon, UserIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
+import { LinkIcon, UserSolidIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
 
 import { MatrixClientPeg } from "../../../MatrixClientPeg";
 import MatrixClientContext from "../../../contexts/MatrixClientContext";
@@ -62,7 +62,7 @@ const PillMemberAvatar: React.FC<{
     if (member) {
         return <MemberAvatar member={member} size="16px" aria-hidden="true" hideTitle />;
     }
-    return <UserIcon className="mx_Pill_UserIcon mx_BaseAvatar" />;
+    return <UserSolidIcon className="mx_Pill_UserIcon mx_BaseAvatar" />;
 };
 
 export interface PillProps {

diff --git a/test/unit-tests/components/views/elements/__snapshots__/Pill-test.tsx.snap b/test/unit-tests/components/views/elements/__snapshots__/Pill-test.tsx.snap
@@ -219,9 +219,18 @@ exports[`<Pill> should render the expected pill for an uknown user not in the ro
         class="mx_Pill mx_UserPill"
         href="https://matrix.to/#/@user3:example.com"
       >
-        <div
+        <svg
           class="mx_Pill_UserIcon mx_BaseAvatar"
-        />
+          fill="currentColor"
+          height="1em"
+          viewBox="0 0 24 24"
+          width="1em"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M12 12c-1.1 0-2.042-.392-2.825-1.175C8.392 10.042 8 9.1 8 8s.392-2.042 1.175-2.825C9.958 4.392 10.9 4 12 4s2.042.392 2.825 1.175C15.608 5.958 16 6.9 16 8s-.392 2.042-1.175 2.825C14.042 11.608 13.1 12 12 12Zm-8 6v-.8c0-.567.146-1.087.438-1.563A2.911 2.911 0 0 1 5.6 14.55a14.843 14.843 0 0 1 3.15-1.163A13.76 13.76 0 0 1 12 13c1.1 0 2.183.13 3.25.387 1.067.259 2.117.646 3.15 1.163.483.25.87.612 1.163 1.087.291.476.437.996.437 1.563v.8c0 .55-.196 1.02-.587 1.413A1.926 1.926 0 0 1 18 20H6c-.55 0-1.02-.196-1.412-.587A1.926 1.926 0 0 1 4 18Z"
+          />
+        </svg>
         <span
           class="mx_Pill_text"
         >

diff --git a/...sts/components/views/settings/tabs/room/__snapshots__/PeopleRoomSettingsTab-test.tsx.snap b/...sts/components/views/settings/tabs/room/__snapshots__/PeopleRoomSettingsTab-test.tsx.snap
@@ -90,10 +90,17 @@ exports[`PeopleRoomSettingsTab with requests to join renders requests fully 1`]
         role="button"
         tabindex="0"
       >
-        <div
+        <svg
+          fill="currentColor"
           height="18"
+          viewBox="0 0 24 24"
           width="18"
-        />
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M9.55 17.575c-.133 0-.258-.02-.375-.063a.876.876 0 0 1-.325-.212L4.55 13c-.183-.183-.27-.42-.263-.713.009-.291.105-.529.288-.712a.948.948 0 0 1 .7-.275.95.95 0 0 1 .7.275L9.55 15.15l8.475-8.475c.183-.183.42-.275.713-.275.291 0 .529.092.712.275.183.183.275.42.275.713 0 .291-.092.529-.275.712l-9.2 9.2c-.1.1-.208.17-.325.212a1.106 1.106 0 0 1-.375.063Z"
+          />
+        </svg>
       </div>
     </div>
   </div>
@@ -164,10 +171,17 @@ exports[`PeopleRoomSettingsTab with requests to join renders requests reduced 1`
         role="button"
         tabindex="0"
       >
-        <div
+        <svg
+          fill="currentColor"
           height="18"
+          viewBox="0 0 24 24"
           width="18"
-        />
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M9.55 17.575c-.133 0-.258-.02-.375-.063a.876.876 0 0 1-.325-.212L4.55 13c-.183-.183-.27-.42-.263-.713.009-.291.105-.529.288-.712a.948.948 0 0 1 .7-.275.95.95 0 0 1 .7.275L9.55 15.15l8.475-8.475c.183-.183.42-.275.713-.275.291 0 .529.092.712.275.183.183.275.42.275.713 0 .291-.092.529-.275.712l-9.2 9.2c-.1.1-.208.17-.325.212a1.106 1.106 0 0 1-.375.063Z"
+          />
+        </svg>
       </div>
     </div>
   </div>