Align RoomSummaryCard styles with Figma (#12793)

* Extract useIsVideoRoom hook

Signed-off-by: Michael Telatynski <[email protected]>

* Align RoomSummaryCard styles with Figma

Signed-off-by: Michael Telatynski <[email protected]>

* Update screenshots

Signed-off-by: Michael Telatynski <[email protected]>

* Update screenshot

Signed-off-by: Michael Telatynski <[email protected]>

---------

Signed-off-by: Michael Telatynski <[email protected]>

Author: t3chguy

playwright/e2e/polls/pollHistory.spec.ts

@@ -69,7 +69,7 @@ test.describe("Poll history", () => {
     async function openPollHistory(app: ElementAppPage): Promise<void> {
         const { page } = app;
         await app.toggleRoomInfoPanel();
-        await page.locator(".mx_RoomSummaryCard").getByRole("menuitem", { name: "Poll history" }).click();
+        await page.locator(".mx_RoomSummaryCard").getByRole("menuitem", { name: "Polls" }).click();
     }
 
     test.use({

playwright/snapshots/crypto/crypto.spec.ts/RoomSummaryCard-with-verified-e2ee-linux.png

@@ -15,6 +15,9 @@ limitations under the License.
 */
 
 .mx_RoomSummaryCard {
+    --cpd-separator-inset: var(--cpd-space-4x);
+    --cpd-separator-spacing: var(--cpd-space-4x);
+
     .mx_RoomSummaryCard_container {
         text-align: center;
         margin: $spacing-20 var(--cpd-space-4x) 0;

playwright/snapshots/right-panel/right-panel.spec.ts/with-name-and-address-linux.png

@@ -385,18 +385,11 @@ const RoomSummaryCard: React.FC<IProps> = ({
                     disabled={!canInviteToState}
                     onSelect={() => inviteToRoom(room)}
                 />
-                <MenuItem Icon={LinkIcon} label={_t("action|copy_link")} onSelect={onShareRoomClick} />
-                <MenuItem Icon={SettingsIcon} label={_t("common|settings")} onSelect={onRoomSettingsClick} />
 
                 <Separator />
+
                 {!isVideoRoom && (
                     <>
-                        <MenuItem Icon={FilesIcon} label={_t("right_panel|files_button")} onSelect={onRoomFilesClick} />
-                        <MenuItem
-                            Icon={PollsIcon}
-                            label={_t("right_panel|polls_button")}
-                            onSelect={onRoomPollHistoryClick}
-                        />
                         {pinningEnabled && (
                             <MenuItem
                                 Icon={PinIcon}
@@ -408,6 +401,21 @@ const RoomSummaryCard: React.FC<IProps> = ({
                                 </Text>
                             </MenuItem>
                         )}
+                        <MenuItem Icon={FilesIcon} label={_t("right_panel|files_button")} onSelect={onRoomFilesClick} />
+                    </>
+                )}
+
+                <Separator />
+
+                <MenuItem Icon={LinkIcon} label={_t("action|copy_link")} onSelect={onShareRoomClick} />
+
+                {!isVideoRoom && (
+                    <>
+                        <MenuItem
+                            Icon={PollsIcon}
+                            label={_t("right_panel|polls_button")}
+                            onSelect={onRoomPollHistoryClick}
+                        />
                         <MenuItem
                             Icon={ExportArchiveIcon}
                             label={_t("export_chat|title")}
@@ -416,6 +424,8 @@ const RoomSummaryCard: React.FC<IProps> = ({
                     </>
                 )}
 
+                <MenuItem Icon={SettingsIcon} label={_t("common|settings")} onSelect={onRoomSettingsClick} />
+
                 <Separator />
 
                 <MenuItem

playwright/snapshots/settings/general-room-settings-tab.spec.ts/General-room-settings-tab-should-be-rendered-properly-1-linux.png

@@ -1846,7 +1846,7 @@
             },
             "title": "Pinned messages"
         },
-        "pinned_messages_button": "Pinned",
+        "pinned_messages_button": "Pinned messages",
         "poll": {
             "active_heading": "Active polls",
             "empty_active": "There are no active polls in this room",
@@ -1871,7 +1871,7 @@
             "view_in_timeline": "View poll in timeline",
             "view_poll": "View poll"
         },
-        "polls_button": "Poll history",
+        "polls_button": "Polls",
         "room_summary_card": {
             "title": "Room info"
         },

res/css/views/right_panel/_RoomSummaryCard.pcss

@@ -183,7 +183,7 @@ describe("<RoomSettingsDialog />", () => {
         it("displays poll history when tab clicked", () => {
             const { container } = getComponent();
 
-            fireEvent.click(screen.getByText("Poll history"));
+            fireEvent.click(screen.getByText("Polls"));
 
             expect(container.querySelector(".mx_SettingsTab")).toMatchSnapshot();
         });

src/components/views/right_panel/RoomSummaryCard.tsx

@@ -89,7 +89,7 @@ NodeList [
       class="mx_TabbedView_tabLabel_text"
       id="mx_tabpanel_ROOM_POLL_HISTORY_TAB_label"
     >
-      Poll history
+      Polls
     </span>
   </li>,
 ]
@@ -105,7 +105,7 @@ exports[`<RoomSettingsDialog /> poll history displays poll history when tab clic
     <h2
       class="mx_Heading_h2 mx_PollHistory_header"
     >
-      Poll history
+      Polls
     </h2>
     <div
       class="mx_PollHistoryList"

src/i18n/strings/en_EN.json

@@ -320,7 +320,7 @@ describe("<PollHistory />", () => {
 
             fireEvent.click(getByText("Question?"));
 
-            expect(queryByText("Poll history")).not.toBeInTheDocument();
+            expect(queryByText("Polls")).not.toBeInTheDocument();
             // elements from MPollBody
             expect(getByText("Question?")).toMatchSnapshot();
             expect(getByText("Socks")).toBeInTheDocument();
@@ -396,13 +396,13 @@ describe("<PollHistory />", () => {
             expect(getByText("Question?")).toBeInTheDocument();
 
             // header not shown
-            expect(queryByText("Poll history")).not.toBeInTheDocument();
+            expect(queryByText("Polls")).not.toBeInTheDocument();
 
             expect(getByText("Active polls")).toMatchSnapshot();
             fireEvent.click(getByText("Active polls"));
 
             // main list header displayed again
-            expect(getByText("Poll history")).toBeInTheDocument();
+            expect(getByText("Polls")).toBeInTheDocument();
             // active filter still active
             expect(getByTestId("filter-tab-PollHistory_filter-ACTIVE").firstElementChild).toBeChecked();
             // list displayed

test/components/views/dialogs/RoomSettingsDialog-test.tsx

@@ -37,7 +37,7 @@ exports[`<PollHistory /> renders a list of active polls when there are polls in
     <h2
       class="mx_Heading_h2 mx_PollHistory_header"
     >
-      Poll history
+      Polls
     </h2>
     <div
       class="mx_PollHistoryList"

test/components/views/dialogs/__snapshots__/RoomSettingsDialog-test.tsx.snap

@@ -271,22 +271,22 @@ describe("<RoomSummaryCard />", () => {
             mocked(settingsHooks.useFeatureEnabled).mockImplementation((feature) => feature === "feature_pinning");
             const { getByText } = getComponent();
 
-            expect(getByText("Pinned")).toBeInTheDocument();
+            expect(getByText("Pinned messages")).toBeInTheDocument();
         });
     });
 
     describe("poll history", () => {
         it("renders poll history option", () => {
             const { getByText } = getComponent();
 
-            expect(getByText("Poll history")).toBeInTheDocument();
+            expect(getByText("Polls")).toBeInTheDocument();
         });
 
         it("opens poll history dialog on button click", () => {
             const permalinkCreator = new RoomPermalinkCreator(room);
             const { getByText } = getComponent({ permalinkCreator });
 
-            fireEvent.click(getByText("Poll history"));
+            fireEvent.click(getByText("Polls"));
 
             expect(Modal.createDialog).toHaveBeenCalledWith(PollHistoryDialog, {
                 room,