From a69e844178d36d756879347572356518eb6e62d4 Mon Sep 17 00:00:00 2001
From: Red J Adaya <red.adaya@gmail.com>
Date: Sat, 4 Nov 2023 04:11:49 +0800
Subject: [PATCH] init (#61)

---
 src/app/common/modals/modals.less | 30 ++++++++++++-------------
 src/app/common/modals/modals.tsx  | 37 ++++++++++++++++++-------------
 2 files changed, 36 insertions(+), 31 deletions(-)

diff --git a/src/app/common/modals/modals.less b/src/app/common/modals/modals.less
index decc6530..6e7ae4f4 100644
--- a/src/app/common/modals/modals.less
+++ b/src/app/common/modals/modals.less
@@ -330,7 +330,7 @@
         .about-content {
             margin-bottom: 0;
 
-            section {
+            .wave-section {
                 .logo-wrapper {
                     width: 72px;
                     height: 72px;
@@ -403,12 +403,12 @@
                 }
             }
 
-            section:nth-child(3) {
+            .wave-section:nth-child(3) {
                 display: flex;
                 align-items: flex-start;
                 gap: 10px;
 
-                .button-link {
+                .wave-button-link {
                     display: flex;
                     align-items: center;
 
@@ -418,7 +418,7 @@
                 }
             }
 
-            section:last-child {
+            .wave-section:last-child {
                 margin-bottom: 24px;
                 color: @term-white;
             }
@@ -426,7 +426,7 @@
     }
 }
 
-.button {
+.wave-button {
     display: flex;
     padding: 6px 16px;
     align-items: center;
@@ -435,7 +435,7 @@
     height: auto;
 }
 
-.button.color-green {
+.wave-button.color-green {
     color: @term-bright-white;
     background: @term-green !important; // !important is needed to override the default button color
     box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.4), 0px 0px 0.5px 0px rgba(0, 0, 0, 0.5),
@@ -446,7 +446,7 @@
     }
 }
 
-.button.color-standard {
+.wave-button.color-standard {
     color: @term-white;
     background: var(--overlays-white-6, rgba(255, 255, 255, 0.12));
 
@@ -455,7 +455,7 @@
     }
 }
 
-.button-link {
+.wave-button-link {
     display: flex;
     padding: 6px 16px;
     align-items: center;
@@ -465,14 +465,12 @@
     cursor: pointer;
 }
 
-.modal-content {
-    section {
-        display: flex;
-        align-items: center;
-        gap: 16px;
-        align-self: stretch;
-        width: 100%;
-    }
+.wave-section {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+    align-self: stretch;
+    width: 100%;
 }
 
 .modal.welcome-modal {
diff --git a/src/app/common/modals/modals.tsx b/src/app/common/modals/modals.tsx
index 3625be57..1b8f09bf 100644
--- a/src/app/common/modals/modals.tsx
+++ b/src/app/common/modals/modals.tsx
@@ -268,15 +268,17 @@ class TosModal extends React.Component<{}, {}> {
                                 <div className="item-inner">
                                     <div className="item-title">Telemetry</div>
                                     <div className="item-text">
-                                        We only collect minimal <i>anonymous</i> telemetry data to help us
-                                        understand how many people are using Wave.
+                                        We only collect minimal <i>anonymous</i> telemetry data to help us understand
+                                        how many people are using Wave.
                                     </div>
-                                    <div className="item-field" style={{marginTop: 2}}>
+                                    <div className="item-field" style={{ marginTop: 2 }}>
                                         <Toggle
                                             checked={!cdata.clientopts.notelemetry}
                                             onChange={this.handleChangeTelemetry}
                                         />
-                                        <div className="item-label">Telemetry {cdata.clientopts.notelemetry ? "Disabled" : "Enabled"}</div>
+                                        <div className="item-label">
+                                            Telemetry {cdata.clientopts.notelemetry ? "Disabled" : "Enabled"}
+                                        </div>
                                     </div>
                                 </div>
                             </div>
@@ -287,8 +289,9 @@ class TosModal extends React.Component<{}, {}> {
                                 <div className="item-inner">
                                     <div className="item-title">Join our Community</div>
                                     <div className="item-text">
-                                        Get help, submit feature requests, report bugs,
-                                        or just chat with fellow terminal enthusiasts.<br/>
+                                        Get help, submit feature requests, report bugs, or just chat with fellow
+                                        terminal enthusiasts.
+                                        <br />
                                         <a target="_blank" href={util.makeExternLink("https://discord.gg/XfvZ334gwU")}>
                                             Join the Wave&nbsp;Discord&nbsp;Channel
                                         </a>
@@ -305,8 +308,8 @@ class TosModal extends React.Component<{}, {}> {
                                 <div className="item-inner">
                                     <div className="item-title">Support us on GitHub</div>
                                     <div className="item-text">
-                                        We're <i>open source</i> and committed to providing a free terminal for individual
-                                        users.  Please show your support us by giving us a star on{" "}
+                                        We're <i>open source</i> and committed to providing a free terminal for
+                                        individual users. Please show your support us by giving us a star on{" "}
                                         <a
                                             target="_blank"
                                             href={util.makeExternLink("https://github.com/wavetermdev/waveterm")}
@@ -406,7 +409,7 @@ class AboutModal extends React.Component<{}, {}> {
                             </div>
                         </header>
                         <div className="content about-content">
-                            <section>
+                            <section className="wave-section about-section">
                                 <div className="logo-wrapper">
                                     <img src={logo} alt="logo" />
                                 </div>
@@ -415,10 +418,12 @@ class AboutModal extends React.Component<{}, {}> {
                                     <div className="text-standard">Modern Terminal for Seamless Workflow</div>
                                 </div>
                             </section>
-                            <section className="text-standard">{this.getStatus(this.isUpToDate())}</section>
-                            <section>
+                            <section className="wave-section about-section text-standard">
+                                {this.getStatus(this.isUpToDate())}
+                            </section>
+                            <section className="wave-section about-section">
                                 <a
-                                    className="button button-link color-standard"
+                                    className="wave-button wave-button-link color-standard"
                                     href={util.makeExternLink("https://github.com/wavetermdev/waveterm")}
                                     target="_blank"
                                 >
@@ -426,7 +431,7 @@ class AboutModal extends React.Component<{}, {}> {
                                     Github
                                 </a>
                                 <a
-                                    className="button button-link color-standard"
+                                    className="wave-button wave-button-link color-standard"
                                     href={util.makeExternLink("https://www.commandline.dev/")}
                                     target="_blank"
                                 >
@@ -434,7 +439,7 @@ class AboutModal extends React.Component<{}, {}> {
                                     Website
                                 </a>
                                 <a
-                                    className="button button-link color-standard"
+                                    className="wave-button wave-button-link color-standard"
                                     href={util.makeExternLink(
                                         "https://github.com/wavetermdev/waveterm/blob/main/LICENSE"
                                     )}
@@ -444,7 +449,9 @@ class AboutModal extends React.Component<{}, {}> {
                                     License
                                 </a>
                             </section>
-                            <section className="text-standard">Copyright © 2023 Command Line Inc.</section>
+                            <section className="wave-section about-section text-standard">
+                                Copyright © 2023 Command Line Inc.
+                            </section>
                         </div>
                     </div>
                 </div>