src/app/molecules/room-members/RoomMembers.scss

@@ -17,6 +17,7 @@
     }
     & .segmented-controls {
       margin: var(--sp-extra-tight);
+      flex-grow: 1;
       & > button {
         padding: var(--sp-ultra-tight) 0;
       }

src/app/molecules/room-profile/RoomProfile.scss

@@ -2,15 +2,16 @@
 @use '../../partials/dir';
 
 .room-profile {
+  
   &__content {
     @extend .cp-fx__row;
-    align-items: center;
     & .avatar-container {
       min-width: var(--av-large);
     }
   }
 
   &__display {
+    align-self: flex-end;
     @include dir.side(margin, var(--sp-loose), 0);
 
     & > div:first-child {

src/app/organisms/navigation/DrawerHeader.jsx

@@ -132,13 +132,13 @@ function DrawerHeader({ selectedTab, spaceId }) {
           onMouseUp={(e) => blurOnBubbling(e, '.drawer-header__btn')}
         >
           <TitleWrapper>
-            <Text primary>{twemojify(spaceName)}</Text>
+            <Text variant="s1" weight="medium" primary>{twemojify(spaceName)}</Text>
           </TitleWrapper>
           <RawIcon size="small" src={ChevronBottomIC} />
         </button>
       ) : (
         <TitleWrapper>
-          <Text primary>{tabName}</Text>
+          <Text variant="s1" weight="medium" primary>{tabName}</Text>
         </TitleWrapper>
       )}
 

src/app/organisms/navigation/RoomsCategory.scss

@@ -48,8 +48,6 @@
   }
   
   & .room-selector {
-    margin: var(--sp-extra-tight);
+    margin: var(--sp-ultra-tight);
-    margin-top: var(--sp-ultra-tight);
-    margin-bottom: var(--sp-ultra-tight);
   }
 }

src/app/organisms/profile-viewer/ProfileViewer.scss

@@ -15,10 +15,10 @@
 .profile-viewer {
   &__user {
     display: flex;
-    align-items: center;
     padding-bottom: var(--sp-normal);
 
     &__info {
+      align-self: flex-end;
       flex: 1;
       min-width: 0;
 

src/app/organisms/room/PeopleDrawer.jsx

@@ -128,7 +128,7 @@ function PeopleDrawer({ roomId }) {
     <div className="people-drawer">
       <Header>
         <TitleWrapper>
-          <Text primary>
+          <Text variant="s1" primary>
             People
             <Text className="people-drawer__member-count" variant="b3">{`${room.getJoinedMemberCount()} members`}</Text>
           </Text>

src/app/organisms/room/RoomViewHeader.jsx

@@ -90,9 +90,9 @@ function RoomViewHeader({ roomId }) {
       >
         <Avatar imageSrc={avatarSrc} text={roomName} bgColor={colorMXID(roomId)} size="small" />
         <TitleWrapper>
-          <Text weight="bold" primary>{twemojify(roomName)}</Text>
+          <Text variant="h2" weight="medium" primary>{twemojify(roomName)}</Text>
         </TitleWrapper>
-        <RawIcon size="extra-small" src={ChevronBottomIC} />
+        <RawIcon src={ChevronBottomIC} />
       </button>
       {mx.isRoomEncrypted(roomId) === false && <IconButton onClick={() => toggleRoomSettings(tabText.SEARCH)} tooltip="Search" src={SearchIC} />}
       <IconButton className="room-header__drawer-btn" onClick={togglePeopleDrawer} tooltip="People" src={UserIC} />