add title for joining default rooms

_locales/en/messages.json

@@ -2239,5 +2239,8 @@
   },
   "errorHappenedWhileRemovingModeratorDesc": {
     "message": "An error happened while removing this user from the moderator list."
+  },
+  "orJoinOneOfThese": {
+    "message": "Or join one of these..."
   }
 }

ts/components/basic/Flex.tsx

@@ -49,7 +49,7 @@ export const Flex = styled.div<FlexProps>`
   align-items: ${props => props.alignItems || 'stretch'};
   margin: ${props => props.margin || '0'};
   padding: ${props => props.padding || '0'};
-  width: ${props => props.justifyContent || 'auto'};
+  width: ${props => props.width || 'auto'};
   height: ${props => props.height || 'auto'};
   max-width: ${props => props.maxWidth || 'none'};
 `;

ts/components/basic/Text.tsx

@@ -21,3 +21,19 @@ const StyledDefaultText = styled.div<TextProps>`
 export const Text = (props: TextProps) => {
   return <StyledDefaultText {...props}>{props.text}</StyledDefaultText>;
 };
+
+type H3Props = {
+  text: string;
+  opposite?: boolean;
+};
+
+const StyledH3 = styled.div<H3Props>`
+  transition: ${props => props.theme.common.animations.defaultDuration};
+  font-family: ${props => props.theme.common.fonts.sessionFontDefault};
+  color: ${props =>
+    props.opposite ? props.theme.colors.textColorOpposite : props.theme.colors.textColor};
+  font-size: ${props => props.theme.common.fonts.md};
+  font-weight: 700;
+`;
+
+export const H3 = (props: H3Props) => <StyledH3 {...props}>{props.text}</StyledH3>;

ts/components/session/SessionJoinableDefaultRooms.tsx

@@ -5,6 +5,7 @@ import { StateType } from '../../state/reducer';
 import { Avatar, AvatarSize } from '../Avatar';
 import { Flex } from '../basic/Flex';
 import { PillContainer } from '../basic/PillContainer';
+import { H3 } from '../basic/Text';
 // tslint:disable: no-void-expression
 
 export type JoinableRoomProps = {
@@ -52,19 +53,22 @@ export const SessionJoinableRooms = () => {
   }
 
   return (
-    <Flex container={true} flexGrow={1} flexWrap="wrap">
-      {joinableRooms.map(r => {
-        return (
-          <SessionJoinableRoomRow
-            key={r.id}
-            completeUrl={r.completeUrl}
-            name={r.name}
-            onClick={completeUrl => {
-              void joinOpenGroupV2WithUIEvents(completeUrl, true);
-            }}
-          />
-        );
-      })}
+    <Flex container={true} flexGrow={1} flexDirection="column" width="93%">
+      <H3 text={window.i18n('orJoinOneOfThese')} />
+      <Flex container={true} flexGrow={1} flexWrap="wrap">
+        {joinableRooms.map(r => {
+          return (
+            <SessionJoinableRoomRow
+              key={r.id}
+              completeUrl={r.completeUrl}
+              name={r.name}
+              onClick={completeUrl => {
+                void joinOpenGroupV2WithUIEvents(completeUrl, true);
+              }}
+            />
+          );
+        })}
+      </Flex>
     </Flex>
   );
 };