MM-55050 - Updating Terms of Service page (#25163)

* MM-55050 - Updating Terms of Service page

* Updating button group

* Updating button style

* Updating bsstyle

---------

Co-authored-by: Mattermost Build <build@mattermost.com>

webapp/channels/src/components/terms_of_service/terms_of_service.tsx

@@ -2,7 +2,7 @@
 // See LICENSE.txt for license information.
 
 import React from 'react';
-import {Button, ButtonGroup} from 'react-bootstrap';
+import {Button} from 'react-bootstrap';
 import {FormattedMessage} from 'react-intl';
 
 import type {TermsOfService as ReduxTermsOfService} from '@mattermost/types/terms_of_service';
@@ -169,7 +169,7 @@ export default class TermsOfService extends React.PureComponent<TermsOfServicePr
             termsMarkdownClasses += ' terms-of-service__height--fill';
         }
         return (
-            <div>
+            <div className='signup-page-container'>
                 <AnnouncementBar/>
                 <div className='signup-header'>
                     <a
@@ -183,53 +183,52 @@ export default class TermsOfService extends React.PureComponent<TermsOfServicePr
                         />
                     </a>
                 </div>
-                <div>
+                <div className='signup-team__container terms-of-service__container'>
-                    <div className='signup-team__container terms-of-service__container'>
+                    <div className={termsMarkdownClasses}>
-                        <div className={termsMarkdownClasses}>
+                        <div
-                            <div
+                            className='medium-center'
-                                className='medium-center'
+                            data-testid='termsOfService'
-                                data-testid='termsOfService'
+                        >
+                            {messageHtmlToComponent(this.formattedText(this.state.customTermsOfServiceText), {mentions: false})}
+                        </div>
+                    </div>
+                    <div className='terms-of-service__footer medium-center'>
+                        <div className='terms-of-service__button-group'>
+                            <Button
+                                bsStyle={'primary'}
+                                disabled={this.state.loadingAgree || this.state.loadingDisagree}
+                                id='acceptTerms'
+                                onClick={this.handleAcceptTerms}
+                                type='submit'
                             >
-                                {messageHtmlToComponent(this.formattedText(this.state.customTermsOfServiceText), {mentions: false})}
+                                {this.state.loadingAgree && <LoadingSpinner/>}
+                                <FormattedMessage
+                                    id='terms_of_service.agreeButton'
+                                    defaultMessage={'I Agree'}
+                                />
+                            </Button>
+                            <Button
+                                bsStyle={'default'}
+                                className='btn-quaternary'
+                                disabled={this.state.loadingAgree || this.state.loadingDisagree}
+                                id='rejectTerms'
+                                onClick={this.handleRejectTerms}
+                                type='reset'
+                            >
+                                {this.state.loadingDisagree && <LoadingSpinner/>}
+                                <FormattedMessage
+                                    id='terms_of_service.disagreeButton'
+                                    defaultMessage={'I Disagree'}
+                                />
+                            </Button>
+                        </div>
+                        {Boolean(this.state.serverError) && (
+                            <div className='terms-of-service__server-error alert alert-warning'>
+                                <WarningIcon/>
+                                {' '}
+                                {this.state.serverError}
                             </div>
-                        </div>
+                        )}
-                        <div className='terms-of-service__footer medium-center'>
-                            <ButtonGroup className='terms-of-service__button-group'>
-                                <Button
-                                    bsStyle={'primary'}
-                                    disabled={this.state.loadingAgree || this.state.loadingDisagree}
-                                    id='acceptTerms'
-                                    onClick={this.handleAcceptTerms}
-                                    type='submit'
-                                >
-                                    {this.state.loadingAgree && <LoadingSpinner/>}
-                                    <FormattedMessage
-                                        id='terms_of_service.agreeButton'
-                                        defaultMessage={'I Agree'}
-                                    />
-                                </Button>
-                                <Button
-                                    bsStyle={'link'}
-                                    disabled={this.state.loadingAgree || this.state.loadingDisagree}
-                                    id='rejectTerms'
-                                    onClick={this.handleRejectTerms}
-                                    type='reset'
-                                >
-                                    {this.state.loadingDisagree && <LoadingSpinner/>}
-                                    <FormattedMessage
-                                        id='terms_of_service.disagreeButton'
-                                        defaultMessage={'I Disagree'}
-                                    />
-                                </Button>
-                            </ButtonGroup>
-                            {Boolean(this.state.serverError) && (
-                                <div className='terms-of-service__server-error alert alert-warning'>
-                                    <WarningIcon/>
-                                    {' '}
-                                    {this.state.serverError}
-                                </div>
-                            )}
-                        </div>
                     </div>
                 </div>
             </div>

webapp/channels/src/sass/routes/_signup.scss

@@ -8,6 +8,12 @@ body {
     }
 }
 
+.signup-page-container {
+    display: flex;
+    height: 100vh;
+    flex-direction: column;
+}
+
 .signup-header {
     position: fixed;
     z-index: 5;
@@ -25,8 +31,12 @@ body {
 
 .signup-team__container {
     position: relative;
+    display: flex;
+    overflow: hidden;
     max-width: 400px;
-    padding: 100px 0 50px;
+    flex: 1;
+    flex-direction: column;
+    padding: 40px 0 0;
     margin: 0 auto;
 
     .medium-center {
@@ -37,6 +47,7 @@ body {
 
     .terms-of-service__markdown {
         min-width: 100vw;
+        flex: 1;
         padding-top: 3em;
         padding-bottom: 3em;
         background-color: #fff;
@@ -87,7 +98,6 @@ body {
 
     &.terms-of-service__container {
         max-width: 100%;
-        padding-top: 33px;
     }
 
     .terms-of-service__footer {
@@ -112,16 +122,6 @@ body {
         box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
     }
 
-    .terms-of-service-error__height--fill {
-        height: calc(100vh - 107px - 4em);
-        min-height: calc(100vh - 107px - 4em);
-    }
-
-    .terms-of-service__height--fill {
-        height: calc(100vh - 69px - 3em);
-        min-height: calc(100vh - 69px - 3em);
-    }
-
     h1,
     h2,
     h3,

webapp/channels/src/sass/utils/_flex.scss

@@ -4,6 +4,14 @@
     display: flex !important;
 }
 
+.flex-col {
+    flex-direction: column;
+}
+
+.flex-1 {
+    flex: 1;
+}
+
 .align-items-center {
     align-items: center !important;
     -webkit-box-align: center !important;