TOS Modal (#123)

* register tos modal and fix its styles

* hard-code render TOS modal in ModalsProvider

* cleanup

* remove tos const

src/app/app.tsx

@@ -22,7 +22,6 @@ import {
     LineSettingsModal,
     ClientSettingsModal,
 } from "./common/modals/settings";
-import { TosModal } from "./common/modals/modals";
 import { MainSideBar } from "./sidebar/sidebar";
 import { DisconnectedModal, ClientStopModal, ModalsProvider } from "./common/modals/modals";
 import { ErrorBoundary } from "./common/error/errorboundary";
@@ -121,9 +120,6 @@ class App extends React.Component<{}, {}> {
                         <ConnectionsView model={remotesModel} />
                     </ErrorBoundary>
                 </div>
-                <If condition={GlobalModel.needsTos()}>
-                    <TosModal />
-                </If>
                 <ModalsProvider />
                 <If condition={screenSettingsModal != null}>
                     <ScreenSettingsModal

src/app/common/modals/modals.less

@@ -165,89 +165,101 @@
     }
 }
 
-.modal.tos-modal {
+.tos-modal {
-    .modal-content.wave-modal-content {
+    width: 640px;
+
+    .wave-modal-content .wave-modal-body {
         padding: 32px 48px;
         gap: 8px;
 
-        header.tos-header {
+        .wave-modal-body-inner {
-            flex-direction: column;
+            gap: 24px;
-            gap: var(--sizing-sm, 12px);
-            border-bottom: none;
-            padding: 0;
-
-            .modal-title {
-                text-align: center;
-                font-size: 20px;
-                font-weight: 300;
-            }
-
-            .modal-subtitle {
-                color: @term-white;
-                text-align: center;
-
-                font-style: normal;
-                font-weight: 300;
-                line-height: 20px;
-            }
-        }
-
-        .content.tos-content {
             display: flex;
             flex-direction: column;
-            align-items: flex-start;
-            gap: 32px;
-            width: 100%;
-            margin-bottom: 0;
 
-            .item {
+            header.tos-header {
+                flex-direction: column;
+                gap: var(--sizing-sm, 12px);
+                border-bottom: none;
+                padding: 0;
+
+                .modal-title {
+                    text-align: center;
+                    font-size: 20px;
+                    font-weight: 300;
+                }
+
+                .modal-subtitle {
+                    color: @term-white;
+                    text-align: center;
+
+                    font-style: normal;
+                    font-weight: 300;
+                    line-height: 20px;
+                }
+            }
+
+            .content.tos-content {
                 display: flex;
+                flex-direction: column;
+                align-items: flex-start;
+                gap: 32px;
                 width: 100%;
-                align-items: center;
+                margin-bottom: 0;
-                gap: 16px;
 
-                .item-inner {
+                .item {
                     display: flex;
-                    flex-direction: column;
+                    width: 100%;
-                    align-items: flex-start;
+                    align-items: center;
-                    gap: 4px;
+                    gap: 16px;
-                    flex: 1 0 0;
 
-                    .item-title {
+                    .item-inner {
-                        color: @term-bright-white;
-                        font-style: normal;
-                        line-height: 20px;
-                    }
-
-                    .item-text {
-                        color: @term-white;
-                        font-style: normal;
-                        line-height: 20px;
-                    }
-
-                    .item-field {
                         display: flex;
-                        align-items: center;
+                        flex-direction: column;
-                        gap: 8px;
+                        align-items: flex-start;
+                        gap: 4px;
+                        flex: 1 0 0;
+
+                        .item-title {
+                            color: @term-bright-white;
+                            font-style: normal;
+                            line-height: 20px;
+                        }
+
+                        .item-text {
+                            color: @term-white;
+                            font-style: normal;
+                            line-height: 20px;
+                        }
+
+                        .item-field {
+                            display: flex;
+                            align-items: center;
+                            gap: 8px;
+                        }
                     }
                 }
             }
-        }
 
-        footer {
+            footer {
-            .button-wrapper {
+                .item-text {
-                display: flex;
+                    text-align: center;
-                flex-direction: row;
-                align-items: center;
-                justify-content: center;
-
-                button {
-                    font-size: 12.5px !important;
-                    margin-top: 16px;
                 }
 
-                button.disabled-button {
+                .button-wrapper {
-                    cursor: default;
+                    display: flex;
+                    flex-direction: row;
+                    align-items: center;
+                    justify-content: center;
+
+                    button {
+                        font-size: 12.5px !important;
+                        margin-top: 16px;
+                    }
+
+                    button.disabled-button {
+                        cursor: default;
+                    }
                 }
             }
         }

src/app/common/modals/modals.tsx

@@ -42,6 +42,10 @@ class ModalsProvider extends React.Component {
     renderModals() {
         const modals = GlobalModel.modalsModel.activeModals;
 
+        if (GlobalModel.needsTos()) {
+            return <TosModal />;
+        }
+
         return modals.map((ModalComponent, index) => <ModalComponent key={index} />);
     }
 
@@ -231,6 +235,7 @@ class TosModal extends React.Component<{}, {}> {
     @boundMethod
     acceptTos(): void {
         GlobalCommandRunner.clientAcceptTos();
+        GlobalModel.modalsModel.popModal();
     }
 
     @boundMethod
@@ -246,10 +251,9 @@ class TosModal extends React.Component<{}, {}> {
         let cdata: ClientDataType = GlobalModel.clientData.get();
 
         return (
-            <div className={cn("modal tos-modal wave-modal is-active")}>
+            <Modal className="tos-modal">
-                <div className="modal-background wave-modal-background" />
+                <div className="wave-modal-body">
-                <div className="modal-content wave-modal-content tos-wave-modal-content">
+                    <div className="wave-modal-body-inner">
-                    <div className="modal-content-inner wave-modal-content-inner tos-wave-modal-content-inner">
                         <header className="tos-header unselectable">
                             <div className="modal-title">Welcome to Wave Terminal!</div>
                             <div className="modal-subtitle">Lets set everything for you</div>
@@ -323,7 +327,7 @@ class TosModal extends React.Component<{}, {}> {
                         </footer>
                     </div>
                 </div>
-            </div>
+            </Modal>
         );
     }
 }