Move new search experience to a Beta (#7718)

res/css/structures/_RoomSearch.scss

@@ -35,6 +35,7 @@ limitations under the License.
         mask-repeat: no-repeat;
         background-color: $secondary-content;
         margin-left: 7px;
+        margin-bottom: 2px;
     }
 
     .mx_RoomSearch_input {
@@ -44,14 +45,18 @@ limitations under the License.
         padding: 0;
         height: 100%;
         width: 100%;
-        font-size: $font-12px;
-        line-height: $font-16px;
 
         &:not(.mx_RoomSearch_inputExpanded)::placeholder {
             color: $tertiary-content !important; // !important to override default app-wide styles
         }
     }
 
+    .mx_RoomSearch_input,
+    .mx_RoomSearch_spotlightTriggerText {
+        font-size: $font-12px;
+        line-height: $font-16px;
+    }
+
     &.mx_RoomSearch_hasQuery {
         border-color: $secondary-content;
     }
@@ -108,4 +113,36 @@ limitations under the License.
             }
         }
     }
+
+    &.mx_RoomSearch_spotlightTrigger {
+        cursor: pointer;
+        min-width: 0;
+
+        .mx_RoomSearch_spotlightTriggerText {
+            color: $tertiary-content;
+            flex: 1;
+            min-width: 0;
+            // the following rules are to match that of a real input field
+            overflow: hidden;
+            margin: 9px;
+            font-weight: $font-semi-bold;
+        }
+
+        &:hover {
+            background-color: $tertiary-content;
+
+            .mx_RoomSearch_spotlightTriggerText {
+                color: $background;
+            }
+
+            .mx_RoomSearch_shortcutPrompt {
+                background-color: $background;
+                color: $secondary-content;
+            }
+
+            .mx_RoomSearch_icon {
+                background-color: $background;
+            }
+        }
+    }
 }

res/css/views/beta/_BetaCard.scss

@@ -56,6 +56,14 @@ limitations under the License.
                 line-height: $font-15px;
                 color: $secondary-content;
                 margin-top: 20px;
+
+                > h4 {
+                    margin: 0;
+                }
+
+                > p {
+                    margin-top: 0;
+                }
             }
         }
 
@@ -64,6 +72,7 @@ limitations under the License.
             width: 300px;
             object-fit: contain;
             height: 100%;
+            border-radius: 4px;
         }
     }
 
@@ -90,6 +99,7 @@ limitations under the License.
     border-radius: 8px;
     text-transform: uppercase;
     font-size: 12px;
+    font-weight: $font-semi-bold;
     line-height: 15px;
     color: #FFFFFF;
     display: inline-block;

res/css/views/dialogs/_SpotlightDialog.scss

@@ -223,18 +223,13 @@ limitations under the License.
             text-overflow: ellipsis;
         }
 
-        .mx_SpotlightDialog_recentSearches {
-            overflow-y: hidden;
-            height: calc(100% - 190px);
-
-            > h4 > .mx_AccessibleButton_kind_link {
-                padding: 0;
-                float: right;
-                font-weight: normal;
-                font-size: $font-12px;
-                line-height: $font-15px;
-                color: $secondary-content;
-            }
+        .mx_SpotlightDialog_recentSearches > h4 > .mx_AccessibleButton_kind_link {
+            padding: 0;
+            float: right;
+            font-weight: normal;
+            font-size: $font-12px;
+            line-height: $font-15px;
+            color: $secondary-content;
         }
 
         .mx_SpotlightDialog_enterPrompt {
@@ -253,28 +248,21 @@ limitations under the License.
         font-size: $font-12px;
         line-height: $font-15px;
         color: $secondary-content;
-        padding: 16px 16px 20px;
+        padding: 12px 16px 16px;
         display: flex;
         border-top: 1px solid $quinary-content;
 
+        .mx_BetaCard_betaPill {
+            margin-right: 12px;
+            height: min-content;
+            align-self: center;
+        }
+
         > span {
-            position: relative;
-            padding-left: 20px;
             align-self: center;
 
-            &::before {
-                background-color: $secondary-content;
-                content: "";
-                mask-repeat: no-repeat;
-                mask-position: center;
-                mask-size: contain;
-                mask-image: url('$(res)/img/element-icons/room/room-summary.svg');
-                width: 16px;
-                height: 16px;
-                position: absolute;
-                left: 0;
-                top: 50%;
-                transform: translateY(-50%);
+            .mx_AccessibleButton_kind_link_inline {
+                padding: 0;
             }
         }
 

res/css/views/dialogs/_UserSettingsDialog.scss

@@ -54,7 +54,7 @@ limitations under the License.
 }
 
 .mx_UserSettingsDialog_labsIcon::before {
-    mask-image: url('$(res)/img/element-icons/settings/lab-flags.svg');
+    mask-image: url('$(res)/img/element-icons/settings/flask.svg');
 }
 
 .mx_UserSettingsDialog_mjolnirIcon::before {