Iterate design and fix post-merge conflict

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

res/css/views/right_panel/_BaseCard.scss

@@ -129,6 +129,13 @@ limitations under the License.
                 mask-size: 20px;
                 mask-image: url('$(res)/img/feather-customised/chevron-down.svg');
             }
+
+            &.mx_AccessibleButton_disabled {
+                padding: 10px 12px;
+                &::after {
+                    content: unset;
+                }
+            }
         }
     }
 

res/css/views/right_panel/_RoomSummaryCard.scss

@@ -116,9 +116,9 @@ limitations under the License.
             .mx_RoomSummaryCard_app_pinToggle,
             .mx_RoomSummaryCard_app_options {
                 position: relative;
-                height: 20px;
-                width: 20px;
-                padding: 10px;
+                height: 16px;
+                width: 16px;
+                padding: 8px;
                 border-radius: 8px;
 
                 &:hover {
@@ -128,8 +128,8 @@ limitations under the License.
                 &::before {
                     content: '';
                     position: absolute;
-                    height: 20px;
-                    width: 20px;
+                    height: 16px;
+                    width: 16px;
                     mask-repeat: no-repeat;
                     mask-position: center;
                     mask-size: 16px;
@@ -158,6 +158,8 @@ limitations under the License.
 
         .mx_RoomSummaryCard_Button {
             padding-left: 12px;
+            padding-top: 6px;
+            padding-bottom: 6px;
             color: $tertiary-fg-color;
             flex: 1;
 
@@ -174,6 +176,10 @@ limitations under the License.
             &::before {
                 content: unset;
             }
+
+            &::after {
+                top: 6px; // re-align based on the height change
+            }
         }
     }
 

src/components/views/context_menus/RoomWidgetContextMenu.tsx

@@ -15,6 +15,7 @@ limitations under the License.
 */
 
 import React, {useContext} from "react";
+import {MatrixCapabilities} from "matrix-widget-api";
 
 import IconizedContextMenu, {IconizedContextMenuOption, IconizedContextMenuOptionList} from "./IconizedContextMenu";
 import {ChevronFace} from "../../structures/ContextMenu";
@@ -23,9 +24,8 @@ import {IApp} from "../../../stores/WidgetStore";
 import defaultDispatcher from "../../../dispatcher/dispatcher";
 import {AppTileActionPayload} from "../../../dispatcher/payloads/AppTileActionPayload";
 import {Action} from "../../../dispatcher/actions";
-import {Capability} from "../../../widgets/WidgetApi";
 import WidgetUtils from "../../../utils/WidgetUtils";
-import ActiveWidgetStore from "../../../stores/ActiveWidgetStore";
+import {WidgetMessagingStore} from "../../../stores/widgets/WidgetMessagingStore";
 import RoomContext from "../../../contexts/RoomContext";
 
 interface IProps extends React.ComponentProps<typeof IconizedContextMenu> {
@@ -35,8 +35,10 @@ interface IProps extends React.ComponentProps<typeof IconizedContextMenu> {
 const RoomWidgetContextMenu: React.FC<IProps> = ({ onFinished, app, ...props}) => {
     const {roomId} = useContext(RoomContext);
 
+    const widgetMessaging = WidgetMessagingStore.instance.getMessagingForId(app.id);
+
     let snapshotButton;
-    if (ActiveWidgetStore.widgetHasCapability(app.id, Capability.Screenshot)) {
+    if (widgetMessaging?.hasCapability(MatrixCapabilities.Screenshots)) {
         const onSnapshotClick = () => {
             WidgetUtils.snapshotWidget(app);
             onFinished();

src/components/views/right_panel/RoomSummaryCard.tsx

@@ -143,7 +143,7 @@ const AppRow: React.FC<IAppRowProps> = ({ app }) => {
             className="mx_BaseCard_Button mx_RoomSummaryCard_Button mx_RoomSummaryCard_icon_app"
             onClick={onOpenWidgetClick}
             // only show a tooltip if the widget is pinned
-            title={isPinned ? _t("You can't view pinned widgets in the right panel") : ""}
+            title={isPinned ? _t("Unpin a widget to view it in this panel") : ""}
             forceHide={!isPinned}
             disabled={isPinned}
         >

src/i18n/strings/en_EN.json

@@ -1273,7 +1273,7 @@
     "Yours, or the other users’ session": "Yours, or the other users’ session",
     "Members": "Members",
     "Room Info": "Room Info",
-    "You can't view pinned widgets in the right panel": "You can't view pinned widgets in the right panel",
+    "Unpin a widget to view it in this panel": "Unpin a widget to view it in this panel",
     "Unpin": "Unpin",
     "Options": "Options",
     "Widgets": "Widgets",