From ff0e2627dcc3730180063aa026dfe54286745f39 Mon Sep 17 00:00:00 2001
From: HFO4 <912394456@qq.com>
Date: Tue, 9 Mar 2021 14:56:16 +0800
Subject: [PATCH] Feat: icon transition in switch buttons

---
 src/component/Modals/CreateShare.js | 14 +++++++-----
 src/component/Navbar/StorageBar.js  | 10 +++------
 src/component/Share/MyShare.js      | 35 ++++++++++++++++++++---------
 3 files changed, 37 insertions(+), 22 deletions(-)

diff --git a/src/component/Modals/CreateShare.js b/src/component/Modals/CreateShare.js
index f0b7158..850620e 100644
--- a/src/component/Modals/CreateShare.js
+++ b/src/component/Modals/CreateShare.js
@@ -38,6 +38,8 @@ import OutlinedInput from "@material-ui/core/OutlinedInput";
 import Tooltip from "@material-ui/core/Tooltip";
 import MenuItem from "@material-ui/core/MenuItem";
 import Select from "@material-ui/core/Select";
+import EyeIcon from "@material-ui/icons/RemoveRedEye";
+import ToggleIcon from "material-ui-toggle-icon";
 
 const useStyles = makeStyles(theme => ({
     widthAnimation: {},
@@ -296,11 +298,13 @@ export default function CreatShare(props) {
                                                     }
                                                     edge="end"
                                                 >
-                                                    {values.showPassword ? (
-                                                        <Visibility />
-                                                    ) : (
-                                                        <VisibilityOff />
-                                                    )}
+                                                    <ToggleIcon
+                                                        on={values.showPassword}
+                                                        onIcon={<Visibility />}
+                                                        offIcon={
+                                                            <VisibilityOff />
+                                                        }
+                                                    />
                                                 </IconButton>
                                             </InputAdornment>
                                         }
diff --git a/src/component/Navbar/StorageBar.js b/src/component/Navbar/StorageBar.js
index 86374ec..c201e1a 100644
--- a/src/component/Navbar/StorageBar.js
+++ b/src/component/Navbar/StorageBar.js
@@ -146,11 +146,11 @@ class StorageBarCompoment extends Component {
                             <div className={classes.info}>
                                 <Tooltip
                                     title={
-                                        "已使用" +
+                                        "已使用 " +
                                         (this.state.used === null
                                             ? " -- "
                                             : this.state.used) +
-                                        "，共" +
+                                        ", 共 " +
                                         (this.state.total === null
                                             ? " -- "
                                             : this.state.total)
@@ -162,14 +162,10 @@ class StorageBarCompoment extends Component {
                                         noWrap
                                         color="textSecondary"
                                     >
-                                        已使用
+                                        已使用{" "}
                                         {this.state.used === null
                                             ? " -- "
                                             : this.state.used}
-                                        ，共
-                                        {this.state.total === null
-                                            ? " -- "
-                                            : this.state.total}
                                     </Typography>
                                 </Tooltip>
                             </div>
diff --git a/src/component/Share/MyShare.js b/src/component/Share/MyShare.js
index 595755f..a961a42 100644
--- a/src/component/Share/MyShare.js
+++ b/src/component/Share/MyShare.js
@@ -35,6 +35,7 @@ import Select from "@material-ui/core/Select";
 import MenuItem from "@material-ui/core/MenuItem";
 import FormControl from "@material-ui/core/FormControl";
 import { withRouter } from "react-router-dom";
+import ToggleIcon from "material-ui-toggle-icon";
 
 const styles = theme => ({
     cardContainer: {
@@ -376,7 +377,7 @@ class MyShareCompoment extends Component {
                                                 )
                                             }
                                         >
-                                            <OpenIcon />
+                                            <OpenIcon fontSize={"small"} />
                                         </IconButton>
                                     </Tooltip>{" "}
                                     {value.password !== "" && (
@@ -391,7 +392,9 @@ class MyShareCompoment extends Component {
                                                 }
                                             >
                                                 <IconButton>
-                                                    <LockIcon />
+                                                    <LockIcon
+                                                        fontSize={"small"}
+                                                    />
                                                 </IconButton>
                                             </Tooltip>
                                             <Tooltip
@@ -402,7 +405,9 @@ class MyShareCompoment extends Component {
                                                 }
                                             >
                                                 <IconButton>
-                                                    <VpnKey />
+                                                    <VpnKey
+                                                        fontSize={"small"}
+                                                    />
                                                 </IconButton>
                                             </Tooltip>
                                         </>
@@ -416,7 +421,9 @@ class MyShareCompoment extends Component {
                                             }
                                         >
                                             <IconButton>
-                                                <UnlockIcon />
+                                                <UnlockIcon
+                                                    fontSize={"small"}
+                                                />
                                             </IconButton>
                                         </Tooltip>
                                     )}
@@ -432,11 +439,19 @@ class MyShareCompoment extends Component {
                                         }
                                     >
                                         <IconButton>
-                                            {!value.preview ? (
-                                                <VisibilityOff />
-                                            ) : (
-                                                <EyeIcon />
-                                            )}
+                                            <ToggleIcon
+                                                on={value.preview}
+                                                onIcon={
+                                                    <EyeIcon
+                                                        fontSize={"small"}
+                                                    />
+                                                }
+                                                offIcon={
+                                                    <VisibilityOff
+                                                        fontSize={"small"}
+                                                    />
+                                                }
+                                            />
                                         </IconButton>
                                     </Tooltip>
                                     <Tooltip
@@ -447,7 +462,7 @@ class MyShareCompoment extends Component {
                                         }
                                     >
                                         <IconButton>
-                                            <DeleteIcon />
+                                            <DeleteIcon fontSize={"small"} />
                                         </IconButton>
                                     </Tooltip>
                                 </CardActions>