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,11 +165,18 @@
     }
 }
 
-.modal.tos-modal {
-    .modal-content.wave-modal-content {
+.tos-modal {
+    width: 640px;
+
+    .wave-modal-content .wave-modal-body {
         padding: 32px 48px;
         gap: 8px;
 
+        .wave-modal-body-inner {
+            gap: 24px;
+            display: flex;
+            flex-direction: column;
+
             header.tos-header {
                 flex-direction: column;
                 gap: var(--sizing-sm, 12px);
@@ -235,6 +242,10 @@
             }
 
             footer {
+                .item-text {
+                    text-align: center;
+                }
+
                 .button-wrapper {
                     display: flex;
                     flex-direction: row;
@@ -252,6 +263,7 @@
                 }
             }
         }
+    }
 }
 
 .about-modal {

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")}>
-                <div className="modal-background wave-modal-background" />
-                <div className="modal-content wave-modal-content tos-wave-modal-content">
-                    <div className="modal-content-inner wave-modal-content-inner tos-wave-modal-content-inner">
+            <Modal className="tos-modal">
+                <div className="wave-modal-body">
+                    <div className="wave-modal-body-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>
         );
     }
 }