fix(welcome-header) Fix and improve welcome page header (#13056)

- small refactor

css/_responsive.scss

@@ -3,30 +3,33 @@
         display: block;
 
         #enter_room {
-            position: relative;
-            height: 42px;
-
             .welcome-page-button {
-            font-size: 16px;
-            left: 0;
-            position: absolute;
-            top: 68px;
-            text-align: center;
-            width: 100%;
+                font-size: 16px;
+                left: 0;
+                text-align: center;
+                width: 100%;
             }
         }
 
         .header {
             background-color: #002637;
 
+            .insecure-room-name-warning {
+                width: 100%;
+            }
+
             #enter_room {
-                .enter-room-input-container {
-                    padding-right: 0;
+                width: 100%;
+
+                .join-meeting-container {
+                    padding: 0;
+                    flex-direction: column;
+                    background: transparent;
                 }
 
-                .warning-without-link,
-                .warning-with-link {
-                    top: 120px;
+                .enter-room-input-container {
+                    padding-right: 0;
+                    margin-bottom: 10px;
                 }
             }
         }

css/_variables.scss

@@ -161,7 +161,7 @@ $welcomePageHeaderBackground: linear-gradient(0deg, rgba(0, 0, 0, 0.2), rgba(0,
 $welcomePageHeaderBackgroundPosition: center;
 $welcomePageHeaderBackgroundRepeat: none;
 $welcomePageHeaderBackgroundSize: cover;
-$welcomePageHeaderPaddingBottom: 0px;
+$welcomePageHeaderPaddingBottom: 15px;
 $welcomePageHeaderTitleMaxWidth: initial;
 $welcomePageHeaderTextAlign: center;
 

css/_welcome_page.scss

@@ -20,7 +20,6 @@ body.welcome-page {
         background-size: $welcomePageHeaderBackgroundSize;
         padding-bottom: $welcomePageHeaderPaddingBottom;
         background-color: #131519;
-        height: 400px;
         overflow: hidden;
         position: relative;
 
@@ -62,26 +61,58 @@ body.welcome-page {
 
         }
 
+        .insecure-room-name-warning {
+            align-items: center;
+            color: $defaultWarningColor;
+            font-weight: 600;
+            display: flex;
+            flex-direction: row;
+            margin-top: 15px;
+            max-width: 480px;
+            width: $welcomePageEnterRoomWidth;
+
+            .jitsi-icon {
+                margin-right: 15px;
+
+                svg {
+                    fill: $defaultWarningColor;
+
+                    & > *:first-child {
+                        fill: none !important;
+                    }
+                }
+            }
+        }
+
+        ::placeholder {
+            color: #253858;
+        }
+
         #enter_room {
             display: $welcomePageEnterRoomDisplay;
             align-items: center;
             max-width: 480px;
             width: $welcomePageEnterRoomWidth;
             z-index: $zindex2;
-            background-color: #fff;
-            padding: $welcomePageEnterRoomPadding;
-            border-radius: 4px;
-            margin: $welcomePageEnterRoomMargin;
-
-            .enter-room-input-container {
+            height: fit-content;
+
+            .join-meeting-container {
+                margin: $welcomePageEnterRoomMargin;
+                padding: $welcomePageEnterRoomPadding;
+                border-radius: 4px;
+                background-color: #fff;
+                display: flex;
+                width: 100%;
                 text-align: left;
                 color: #253858;
+            }
+
+            .enter-room-input-container {
                 flex-grow: 1;
-                height: fit-content;
                 padding-right: 4px;
-                position: relative;
 
                 .enter-room-input {
+                    border-radius: 4px;
                     border: 0;
                     background: #fff;
                     display: inline-block;
@@ -94,44 +125,13 @@ body.welcome-page {
                         outline: auto 2px #005fcc;
                     }
                 }
-
-                .insecure-room-name-warning {
-                    align-items: center;
-                    color: $defaultWarningColor;
-                    display: flex;
-                    flex-direction: row;
-                    margin-top: 15px;
-
-                    .jitsi-icon {
-                        margin-right: 15px;
-
-                        svg {
-                            fill: $defaultWarningColor
-                        }
-                    }
-                }
-
-                ::placeholder {
-                    color: #253858;
-                }
-            }
-
-            .warning-without-link {
-                position: absolute;
-                top: 44px;
-                left: -10px;
-            }
-
-            .warning-with-link {
-                position: absolute;
-                top: 84px;
             }
 
         }
 
         #moderated-meetings {
             max-width: calc(100% - 40px);
-            padding: 16px 0 39px 0;
+            padding: 16px 0 0;
             width: $welcomePageEnterRoomWidth;
             text-align: center;
 

react/features/welcome/components/WelcomePage.web.js

@@ -210,40 +210,37 @@ class WelcomePage extends AbstractWelcomePage {
                             { t('welcomepage.headerSubtitle')}
                         </span>
                         <div id = 'enter_room'>
-                            <div className = 'enter-room-input-container'>
-                                <form onSubmit = { this._onFormSubmit }>
-                                    <input
-                                        aria-disabled = 'false'
-                                        aria-label = 'Meeting name input'
-                                        autoFocus = { true }
-                                        className = 'enter-room-input'
-                                        id = 'enter_room_field'
-                                        onChange = { this._onRoomChange }
-                                        pattern = { ROOM_NAME_VALIDATE_PATTERN_STR }
-                                        placeholder = { this.state.roomPlaceholder }
-                                        ref = { this._setRoomInputRef }
-                                        title = { t('welcomepage.roomNameAllowedChars') }
-                                        type = 'text'
-                                        value = { this.state.room } />
-                                    <div
-                                        className = { _moderatedRoomServiceUrl
-                                            ? 'warning-with-link'
-                                            : 'warning-without-link' }>
-                                        { this._renderInsecureRoomNameWarning() }
-                                    </div>
-                                </form>
+                            <div className = 'join-meeting-container'>
+                                <div className = 'enter-room-input-container'>
+                                    <form onSubmit = { this._onFormSubmit }>
+                                        <input
+                                            aria-disabled = 'false'
+                                            aria-label = 'Meeting name input'
+                                            autoFocus = { true }
+                                            className = 'enter-room-input'
+                                            id = 'enter_room_field'
+                                            onChange = { this._onRoomChange }
+                                            pattern = { ROOM_NAME_VALIDATE_PATTERN_STR }
+                                            placeholder = { this.state.roomPlaceholder }
+                                            ref = { this._setRoomInputRef }
+                                            title = { t('welcomepage.roomNameAllowedChars') }
+                                            type = 'text'
+                                            value = { this.state.room } />
+                                    </form>
+                                </div>
+                                <button
+                                    aria-disabled = 'false'
+                                    aria-label = 'Start meeting'
+                                    className = 'welcome-page-button'
+                                    id = 'enter_room_button'
+                                    onClick = { this._onFormSubmit }
+                                    tabIndex = '0'
+                                    type = 'button'>
+                                    { t('welcomepage.startMeeting') }
+                                </button>
                             </div>
-                            <button
-                                aria-disabled = 'false'
-                                aria-label = 'Start meeting'
-                                className = 'welcome-page-button'
-                                id = 'enter_room_button'
-                                onClick = { this._onFormSubmit }
-                                tabIndex = '0'
-                                type = 'button'>
-                                { t('welcomepage.startMeeting') }
-                            </button>
                         </div>
+                        { this._renderInsecureRoomNameWarning() }
 
                         { _moderatedRoomServiceUrl && (
                             <div id = 'moderated-meetings'>