Align RoomSummaryCard styles with Figma (matrix-org#12793)

* Extract useIsVideoRoom hook Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Align RoomSummaryCard styles with Figma Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * 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>

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