From 5dd6ee70423b1c6caac0cdd5abb7b25cda142043 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Fri, 4 Mar 2022 13:32:04 +0000
Subject: [PATCH 1/2] Tweak search dialog based on new designs

---
 res/css/views/dialogs/_SpotlightDialog.scss   | 21 ++++++++++---------
 .../views/dialogs/SpotlightDialog.tsx         | 15 +++++++------
 2 files changed, 20 insertions(+), 16 deletions(-)

diff --git a/res/css/views/dialogs/_SpotlightDialog.scss b/res/css/views/dialogs/_SpotlightDialog.scss
index 31358ad8a3b..d4f4a1497e7 100644
--- a/res/css/views/dialogs/_SpotlightDialog.scss
+++ b/res/css/views/dialogs/_SpotlightDialog.scss
@@ -104,20 +104,21 @@ limitations under the License.
 
             .mx_AccessibleButton {
                 border-radius: 8px;
-                padding: 4px;
+                padding: 6px 4px 4px;
                 color: $primary-content;
                 font-size: $font-12px;
                 line-height: $font-15px;
                 display: inline-block;
-                width: 50px;
-                min-width: 50px;
+                width: 60px;
+                height: 60px;
+                min-width: 60px;
                 box-sizing: border-box;
                 text-align: center;
                 overflow: hidden;
                 text-overflow: ellipsis;
 
                 .mx_DecoratedRoomAvatar {
-                    margin: 0 5px 4px; // maintain centering
+                    margin: 0 10px 4px; // maintain centering
                 }
 
                 & + .mx_AccessibleButton {
@@ -150,8 +151,8 @@ limitations under the License.
                 > .mx_DecoratedRoomAvatar,
                 > .mx_BaseAvatar {
                     margin-right: 8px;
-                    width: 20px;
-                    height: 20px;
+                    width: 24px;
+                    height: 24px;
 
                     .mx_BaseAvatar {
                         width: inherit;
@@ -186,8 +187,8 @@ limitations under the License.
                     mask-repeat: no-repeat;
                     mask-position: center;
                     mask-size: contain;
-                    width: 20px;
-                    height: 20px;
+                    width: 24px;
+                    height: 24px;
                     position: absolute;
                     left: 4px;
                     top: 50%;
@@ -215,8 +216,8 @@ limitations under the License.
             .mx_SpotlightDialog_otherSearches_messageSearchIcon {
                 display: inline-block;
                 margin-left: 8px;
-                width: 20px;
-                height: 20px;
+                width: 24px;
+                height: 24px;
                 background-color: $secondary-content;
                 vertical-align: text-bottom;
                 mask-repeat: no-repeat;
diff --git a/src/components/views/dialogs/SpotlightDialog.tsx b/src/components/views/dialogs/SpotlightDialog.tsx
index 21501f8e36f..7568e45f0fb 100644
--- a/src/components/views/dialogs/SpotlightDialog.tsx
+++ b/src/components/views/dialogs/SpotlightDialog.tsx
@@ -77,6 +77,7 @@ import { getCachedRoomIDForAlias } from "../../../RoomAliasCache";
 
 const MAX_RECENT_SEARCHES = 10;
 const SECTION_LIMIT = 50; // only show 50 results per section for performance reasons
+const AVATAR_SIZE = 24;
 
 const Option: React.FC<ComponentProps<typeof RovingAccessibleButton>> = ({ inputRef, children, ...props }) => {
     const [onFocus, isActive, ref] = useRovingTabIndex(inputRef);
@@ -358,7 +359,7 @@ const SpotlightDialog: React.FC<IProps> = ({ initialText = "", onFinished }) =>
                             viewRoom(result.room.roomId, true, ev.type !== "click");
                         }}
                     >
-                        <DecoratedRoomAvatar room={result.room} avatarSize={20} tooltipProps={{ tabIndex: -1 }} />
+                        <DecoratedRoomAvatar room={result.room} avatarSize={AVATAR_SIZE} tooltipProps={{ tabIndex: -1 }} />
                         { result.room.name }
                         <NotificationBadge notification={RoomNotificationStateStore.instance.getRoomState(result.room)} />
                         <ResultDetails room={result.room} />
@@ -426,9 +427,12 @@ const SpotlightDialog: React.FC<IProps> = ({ initialText = "", onFinished }) =>
                             <BaseAvatar
                                 name={room.name}
                                 idName={room.room_id}
-                                url={room.avatar_url ? mediaFromMxc(room.avatar_url).getSquareThumbnailHttp(20) : null}
-                                width={20}
-                                height={20}
+                                url={room.avatar_url
+                                    ? mediaFromMxc(room.avatar_url).getSquareThumbnailHttp(AVATAR_SIZE)
+                                    : null
+                                }
+                                width={AVATAR_SIZE}
+                                height={AVATAR_SIZE}
                             />
                             { room.name || room.canonical_alias }
                             { room.name && room.canonical_alias && <div className="mx_SpotlightDialog_result_details">
@@ -539,7 +543,7 @@ const SpotlightDialog: React.FC<IProps> = ({ initialText = "", onFinished }) =>
                                     viewRoom(room.roomId, true, ev.type !== "click");
                                 }}
                             >
-                                <DecoratedRoomAvatar room={room} avatarSize={20} tooltipProps={{ tabIndex: -1 }} />
+                                <DecoratedRoomAvatar room={room} avatarSize={AVATAR_SIZE} tooltipProps={{ tabIndex: -1 }} />
                                 { room.name }
                                 <NotificationBadge notification={RoomNotificationStateStore.instance.getRoomState(room)} />
                                 <ResultDetails room={room} />
@@ -556,7 +560,6 @@ const SpotlightDialog: React.FC<IProps> = ({ initialText = "", onFinished }) =>
                 <div>
                     { BreadcrumbsStore.instance.rooms
                         .filter(r => r.roomId !== RoomViewStore.getRoomId())
-                        .slice(0, 10)
                         .map(room => (
                             <TooltipOption
                                 id={`mx_SpotlightDialog_button_recentlyViewed_${room.roomId}`}

From 2d30a4391defe9a550db6304766cf84d69d15433 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Thu, 10 Mar 2022 11:33:07 +0000
Subject: [PATCH 2/2] Iterate PR

---
 res/css/views/dialogs/_SpotlightDialog.scss | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/res/css/views/dialogs/_SpotlightDialog.scss b/res/css/views/dialogs/_SpotlightDialog.scss
index 5e53d9846f4..3041c860424 100644
--- a/res/css/views/dialogs/_SpotlightDialog.scss
+++ b/res/css/views/dialogs/_SpotlightDialog.scss
@@ -100,25 +100,26 @@ limitations under the License.
                 display: flex;
                 white-space: nowrap;
                 overflow-x: hidden;
+                margin-right: 1px; // occlude the 1px visible of the very next tile to prevent it looking broken
             }
 
             .mx_AccessibleButton {
                 border-radius: 8px;
-                padding: 6px 4px 4px;
+                padding: 4px;
                 color: $primary-content;
                 font-size: $font-12px;
                 line-height: $font-15px;
                 display: inline-block;
-                width: 60px;
-                height: 60px;
-                min-width: 60px;
+                width: 58px;
+                height: 58px;
+                min-width: 58px;
                 box-sizing: border-box;
                 text-align: center;
                 overflow: hidden;
                 text-overflow: ellipsis;
 
                 .mx_DecoratedRoomAvatar {
-                    margin: 0 10px 4px; // maintain centering
+                    margin: 0 9px 4px; // maintain centering
                 }
 
                 & + .mx_AccessibleButton {