diff options
| author | crupest <crupest@outlook.com> | 2021-07-01 17:54:04 +0800 |
|---|---|---|
| committer | crupest <crupest@outlook.com> | 2021-07-01 17:54:04 +0800 |
| commit | 88851e84f070207581f5dfa78a94e52194a2281b (patch) | |
| tree | f9a0c2be1df48d7be842a8db66fb44b24d570bd7 /FrontEnd/src/views/settings/ChangeAvatarDialog.tsx | |
| parent | 672778ca5d9de5513c86d70394b2dd048639cdea (diff) | |
| download | timeline-88851e84f070207581f5dfa78a94e52194a2281b.tar.gz timeline-88851e84f070207581f5dfa78a94e52194a2281b.tar.bz2 timeline-88851e84f070207581f5dfa78a94e52194a2281b.zip | |
...
Diffstat (limited to 'FrontEnd/src/views/settings/ChangeAvatarDialog.tsx')
| -rw-r--r-- | FrontEnd/src/views/settings/ChangeAvatarDialog.tsx | 35 |
1 files changed, 27 insertions, 8 deletions
diff --git a/FrontEnd/src/views/settings/ChangeAvatarDialog.tsx b/FrontEnd/src/views/settings/ChangeAvatarDialog.tsx index 0bf51c21..784da2d7 100644 --- a/FrontEnd/src/views/settings/ChangeAvatarDialog.tsx +++ b/FrontEnd/src/views/settings/ChangeAvatarDialog.tsx @@ -161,7 +161,10 @@ const ChangeAvatarDialog: React.FC<ChangeAvatarDialogProps> = (props) => { return ( <Dialog open={props.open} onClose={close}> - <h3>{t("settings.dialogChangeAvatar.title")}</h3> + <h3 className="cru-color-primary"> + {t("settings.dialogChangeAvatar.title")} + </h3> + <hr /> {(() => { if (state === "select") { return ( @@ -171,10 +174,16 @@ const ChangeAvatarDialog: React.FC<ChangeAvatarDialogProps> = (props) => { {t("settings.dialogChangeAvatar.prompt.select")} </div> <div className="row"> - <input type="file" accept="image/*" onChange={onSelectFile} /> + <input + className="px-0" + type="file" + accept="image/*" + onChange={onSelectFile} + /> </div> </div> - <div> + <hr /> + <div className="cru-dialog-bottom-area"> <Button text="operationDialog.cancel" color="secondary" @@ -202,15 +211,18 @@ const ChangeAvatarDialog: React.FC<ChangeAvatarDialogProps> = (props) => { {t("settings.dialogChangeAvatar.prompt.crop")} </div> </div> - <div> + <hr /> + <div className="cru-dialog-bottom-area"> <Button text="operationDialog.cancel" color="secondary" + outline onClick={close} /> <Button text="operationDialog.previousStep" color="secondary" + outline onClick={onCropPrevious} /> <Button @@ -232,16 +244,19 @@ const ChangeAvatarDialog: React.FC<ChangeAvatarDialogProps> = (props) => { {t("settings.dialogChangeAvatar.prompt.processingCrop")} </div> </div> - <div> + <hr /> + <div className="cru-dialog-bottom-area"> <Button text="operationDialog.cancel" color="secondary" onClick={close} + outline /> <Button text="operationDialog.previousStep" color="secondary" onClick={onPreviewPrevious} + outline /> </div> </> @@ -255,15 +270,18 @@ const ChangeAvatarDialog: React.FC<ChangeAvatarDialogProps> = (props) => { {t("settings.dialogChangeAvatar.prompt.preview")} </div> </div> - <div> + <hr /> + <div className="cru-dialog-bottom-area"> <Button text="operationDialog.cancel" color="secondary" + outline onClick={close} /> <Button text="operationDialog.previousStep" color="secondary" + outline onClick={onPreviewPrevious} /> <Button @@ -283,7 +301,6 @@ const ChangeAvatarDialog: React.FC<ChangeAvatarDialogProps> = (props) => { {t("settings.dialogChangeAvatar.prompt.uploading")} </div> </div> - <div></div> </> ); } else if (state === "success") { @@ -294,7 +311,8 @@ const ChangeAvatarDialog: React.FC<ChangeAvatarDialogProps> = (props) => { {t("operationDialog.success")} </div> </div> - <div> + <hr /> + <div className="cru-dialog-bottom-area"> <Button text="operationDialog.ok" color="success" @@ -310,6 +328,7 @@ const ChangeAvatarDialog: React.FC<ChangeAvatarDialogProps> = (props) => { {createPreviewRow()} <div className="row text-danger">{trueMessage}</div> </div> + <hr /> <div> <Button text="operationDialog.cancel" |