Update feedback prompt to match designs

res/css/structures/_SpaceRoomView.scss

@@ -340,18 +340,12 @@ $SpaceRoomViewInnerWidth: 428px;
             flex: 0;
         }
 
-        .mx_SpaceFeedbackPrompt_topRight {
+        .mx_SpaceFeedbackPrompt {
             padding: 7px; // 8px - 1px border
             border: 1px solid $menu-border-color;
             border-radius: 8px;
-            color: $secondary-fg-color;
+            width: max-content;
-            font-size: $font-15px;
+            margin: 0 0 -40px auto; // collapse its own height to not push other components down
-            line-height: $font-24px;
-            float: right;
-
-            & + .mx_BaseAvatar {
-                clear: both;
-            }
         }
 
         .mx_SpaceRoomDirectory_list {

res/css/views/spaces/_SpaceCreateMenu.scss

@@ -104,61 +104,23 @@ $spacePanelWidth: 71px;
     margin-top: 18px;
     margin-bottom: 12px;
 
-    > hr {
-        border: none;
-        border-top: 1px solid $input-border-color;
-        margin-bottom: 12px;
-    }
-
-    > div {
-        display: flex;
-        flex-direction: row;
     font-size: $font-15px;
     line-height: $font-24px;
 
     > span {
         color: $secondary-fg-color;
         position: relative;
-            padding-left: 32px;
         font-size: inherit;
         line-height: inherit;
         margin-right: auto;
-
-            &::before {
-                content: '';
-                position: absolute;
-                left: 0;
-                top: 2px;
-                height: 20px;
-                width: 20px;
-                background-color: $secondary-fg-color;
-                mask-repeat: no-repeat;
-                mask-size: contain;
-                mask-image: url('$(res)/img/element-icons/room/room-summary.svg');
-                mask-position: center;
-            }
     }
 
     .mx_AccessibleButton_kind_link {
         color: $accent-color;
         position: relative;
-            padding: 0 0 0 24px;
+        padding: 0;
         margin-left: 8px;
         font-size: inherit;
         line-height: inherit;
-
-            &::before {
-                content: '';
-                position: absolute;
-                left: 0;
-                height: 16px;
-                width: 16px;
-                background-color: $accent-color;
-                mask-repeat: no-repeat;
-                mask-size: contain;
-                mask-image: url('$(res)/img/element-icons/chat-bubbles.svg');
-                mask-position: center;
-            }
-        }
     }
 }

src/components/structures/SpaceRoomView.tsx

@@ -62,9 +62,8 @@ import IconizedContextMenu, {
 import AccessibleTooltipButton from "../views/elements/AccessibleTooltipButton";
 import { BetaPill } from "../views/beta/BetaCard";
 import { UserTab } from "../views/dialogs/UserSettingsDialog";
-import Modal from "../../Modal";
-import BetaFeedbackDialog from "../views/dialogs/BetaFeedbackDialog";
 import { EffectiveMembership, getEffectiveMembership } from "../../utils/membership";
+import { SpaceFeedbackPrompt } from "../views/spaces/SpaceCreateMenu";
 
 interface IProps {
     space: Room;
@@ -393,19 +392,7 @@ const SpaceLanding = ({ space }) => {
     };
 
     return <div className="mx_SpaceRoomView_landing">
-        <div className="mx_SpaceFeedbackPrompt_topRight">
+        <SpaceFeedbackPrompt />
-            { _t("Spaces are a new feature.") }&nbsp;
-            <AccessibleButton
-                kind="link"
-                onClick={() => {
-                    Modal.createTrackedDialog("Beta Feedback", "feature_spaces", BetaFeedbackDialog, {
-                        featureId: "feature_spaces",
-                    });
-                }}
-            >
-                { _t("Give feedback.") }
-            </AccessibleButton>
-        </div>
         <RoomAvatar room={space} height={80} width={80} viewAvatarOnClick={true} />
         <div className="mx_SpaceRoomView_landing_name">
             <RoomName room={space}>

src/components/views/spaces/SpaceCreateMenu.tsx

@@ -66,12 +66,10 @@ const nameToAlias = (name: string, domain: string): string => {
 };
 
 // XXX: Temporary for the Spaces release only
-const SpaceFeedbackPrompt = ({ onClick }: { onClick?: () => void }) => {
+export const SpaceFeedbackPrompt = ({ onClick }: { onClick?: () => void }) => {
     if (!SdkConfig.get().bug_report_endpoint_url) return null;
 
     return <div className="mx_SpaceFeedbackPrompt">
-        <hr />
-        <div>
         <span className="mx_SpaceFeedbackPrompt_text">{ _t("Spaces are a new feature.") }</span>
         <AccessibleButton
             kind="link"
@@ -92,7 +90,6 @@ const SpaceFeedbackPrompt = ({ onClick }: { onClick?: () => void }) => {
         >
             { _t("Give feedback.") }
         </AccessibleButton>
-        </div>
     </div>;
 };