Improve "Send Code" button style.

web/src/ResetModal.js

@@ -85,7 +85,7 @@ export const ResetModal = (props) => {
           </Row>
           <Row style={{width: "100%", marginBottom: "20px"}}>
             <CountDownInput
-              defaultButtonText={i18next.t("code:Send code")}
+              defaultButtonText={i18next.t("code:Send Code")}
               textBefore={i18next.t("code:Code You Received")}
               placeHolder={i18next.t("code:Enter your code")}
               onChange={setCode}

web/src/auth/ForgetPage.js

@@ -318,7 +318,7 @@ class ForgetPage extends React.Component {
                   <CountDownInput
                       disabled={this.state.username === "" || this.state.verifyType === ""}
                       placeHolder={i18next.t("code:Verify code")}
-                      defaultButtonText={i18next.t("code:Send code")}
+                      defaultButtonText={i18next.t("code:Send Code")}
                       onButtonClick={UserBackend.sendCode}
                       onButtonClickArgs={[
                         this.state.email,
@@ -333,7 +333,7 @@ class ForgetPage extends React.Component {
                   <CountDownInput
                       disabled={this.state.username === "" || this.state.verifyType === ""}
                       placeHolder={i18next.t("code:Verify code")}
-                      defaultButtonText={i18next.t("code:Send code")}
+                      defaultButtonText={i18next.t("code:Send Code")}
                       onButtonClick={UserBackend.sendCode}
                       onButtonClickArgs={[
                         this.state.phone,

web/src/auth/SignupPage.js

@@ -241,7 +241,7 @@ class SignupPage extends React.Component {
           >
             <CountDownInput
               disabled={!this.state.validEmail}
-              defaultButtonText={i18next.t("code:Send code")}
+              defaultButtonText={i18next.t("code:Send Code")}
               onButtonClick={UserBackend.sendCode}
               onButtonClickArgs={[this.state.email, "email", application?.organizationObj.owner + "/" + application?.organizationObj.name]}
               coolDownTime={60}
@@ -335,7 +335,7 @@ class SignupPage extends React.Component {
           >
             <CountDownInput
               disabled={!this.state.validPhone}
-              defaultButtonText={i18next.t("code:Send code")}
+              defaultButtonText={i18next.t("code:Send Code")}
               onButtonClick={UserBackend.sendCode}
               onButtonClickArgs={[this.state.phone, "phone", application.organizationObj.owner + "/" + application.organizationObj.name]}
               coolDownTime={60}

web/src/component/CountDownInput.js

@@ -12,13 +12,15 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import {Col, Input, Modal, Row} from "antd";
+import {Button, Col, Input, Modal, Row} from "antd";
 import React from "react";
 import * as Setting from "../Setting";
 import i18next from "i18next";
 import * as UserBackend from "../backend/UserBackend";
 import { AuditOutlined, VerifiedOutlined } from "@ant-design/icons";
 
+const { Search } = Input;
+
 export const CountDownInput = (props) => {
   const {defaultButtonText, disabled, prefix, textBefore, placeHolder, onChange, coolDownTime, onButtonClick, onButtonClickArgs} = props;
   const [buttonText, setButtonText] = React.useState(defaultButtonText);
@@ -112,28 +114,29 @@ export const CountDownInput = (props) => {
   };
 
   return (
-    <Input
-      addonBefore={textBefore}
-      disabled={disabled}
-      prefix={prefix !== null ? getIcon(prefix) : null}
-      placeholder={placeHolder}
-      onChange={e => onChange(e.target.value)}
-      addonAfter={
-        <div>
-          <button
-            disabled={disabled}
-            onClick={clickButton}
-            style={{backgroundColor: "#fafafa", border: "none"}}>
-            {buttonText}
-          </button>
-          <Modal
-            visible={visible}
-            onCancel={handleCancel}
-            onOk={handleOk}
-          >
-            {renderCheck()}
-          </Modal>
-        </div>
-      }/>
+    <div>
+      <Search
+        addonBefore={textBefore}
+        disabled={disabled}
+        prefix={prefix !== null ? getIcon(prefix) : null}
+        placeholder={placeHolder}
+        onChange={e => onChange(e.target.value)}
+        enterButton={
+          <Button type={"primary"} disabled={disabled}>
+            <div style={{fontSize: 14}}>
+              {buttonText}
+            </div>
+          </Button>
+        }
+        onSearch={clickButton}
+      />
+      <Modal
+        visible={visible}
+        onCancel={handleCancel}
+        onOk={handleOk}
+      >
+        {renderCheck()}
+      </Modal>
+    </div>
   );
 }

web/src/locales/en.json

@@ -69,7 +69,7 @@
   {
     "Verify code": "Verify code",
     "Please input your verification code!": "Please input your verification code!",
-    "Send code": "Send code",
+    "Send Code": "Send Code",
     "Empty Code": "Empty Code",
     "Code Sent": "Code Sent",
     "Code You Received": "Code You Received",

web/src/locales/zh.json

@@ -76,7 +76,7 @@
     "Wrong code!": "验证码错误！",
     "Code You Received": "验证码",
     "Empty Code": "验证码为空",
-    "Send code": "发送验证码",
+    "Send Code": "发送验证码",
     "code sent": "验证码已发送",
     "Email code": "邮箱验证码",
     "Phone code": "手机验证码",