From 085f0ca239949d1bc973366106b33a45fa40d482 Mon Sep 17 00:00:00 2001
From: Yang Luo <hsluoyz@qq.com>
Date: Mon, 26 Apr 2021 18:21:28 +0800
Subject: [PATCH] Improve avatar upload UI.

---
 web/src/CropperDiv.js   | 10 +++++-----
 web/src/UserEditPage.js | 10 +++++-----
 2 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/web/src/CropperDiv.js b/web/src/CropperDiv.js
index 3f1108be..0e90a10b 100644
--- a/web/src/CropperDiv.js
+++ b/web/src/CropperDiv.js
@@ -87,20 +87,20 @@ export const CropperDiv = (props) => {
                 okText={"Crop and Upload Avatar"}
                 confirmLoading={confirmLoading}
                 onCancel={handleCancel}
-                width={1000}
+                width={600}
                 footer={
-                    [<Button block type="primary" onClick={handleOk}>Crop and Submit</Button>]
+                    [<Button block type="primary" onClick={handleOk}>Set new profile picture</Button>]
                 }
             >
                 <Col>
                     <Row>
-                        <Col style={{margin: "20px auto 100px auto", width: 1000}}>
+                        <Col style={{margin: "0px auto 40px auto", width: 1000, height: 300}}>
                             <Row style={{width: "100%", marginBottom: "20px"}}>
                                 <input style={{display: "none"}} name="fileupload" type="file" onChange={onChange}/>
-                                <Button block onClick={selectFile}>Select File</Button>
+                                <Button block onClick={selectFile}>Select a phone...</Button>
                             </Row>
                             <Cropper
-                                style={{height: 400}}
+                                style={{height: "100%"}}
                                 initialAspectRatio={1}
                                 preview=".img-preview"
                                 src={image}
diff --git a/web/src/UserEditPage.js b/web/src/UserEditPage.js
index 00afeebd..9d4c0352 100644
--- a/web/src/UserEditPage.js
+++ b/web/src/UserEditPage.js
@@ -224,27 +224,27 @@ class UserEditPage extends React.Component {
           </Col>
           <Col span={22} >
             <Row style={{marginTop: '20px'}} >
-              <Col style={{marginTop: '5px'}} span={1}>
+              <Col style={{marginTop: '5px'}} span={2}>
                 URL:
               </Col>
-              <Col span={23} >
+              <Col span={22} >
                 <Input prefix={<LinkOutlined/>} value={this.state.user.avatar} onChange={e => {
                   this.updateUserField('avatar', e.target.value);
                 }} />
               </Col>
             </Row>
             <Row style={{marginTop: '20px'}} >
-              <Col style={{marginTop: '5px'}} span={1}>
+              <Col style={{marginTop: '5px'}} span={2}>
                 {i18next.t("general:Preview")}:
               </Col>
-              <Col span={23} >
+              <Col span={22} >
                 <a target="_blank" rel="noreferrer" href={this.state.user.avatar}>
                   <img src={this.state.user.avatar} alt={this.state.user.avatar} height={90} style={{marginBottom: '20px'}}/>
                 </a>
               </Col>
             </Row>
             <Row style={{marginTop: '20px'}}>
-              <CropperDiv buttonText={"Upload Avatar"} title={"Upload Avatar"} targetFunction={UserBackend.uploadAvatar} />
+              <CropperDiv buttonText={"Upload a phone..."} title={"Crop your new profile picture"} targetFunction={UserBackend.uploadAvatar} />
             </Row>
           </Col>
         </Row>