Resize avatar in accountvisual component

LiskHQ · Feb 9, 2018 · a60791f · a60791f
1 parent 25b14b4
commit a60791f
Show file tree

Hide file tree

Showing 4 changed files with 55 additions and 62 deletions.
diff --git a/src/components/accountVisual/index.js b/src/components/accountVisual/index.js
@@ -160,28 +160,54 @@ const pickTwo = (chunk, options) => ([
   ) % options.length],
 ]);
 
-const AccountVisual = ({ address, size = 200, className }) => {
-  const addressChunks = address.padStart(21, '0').match(/\d{5}/g);
-  const gradientScheme = gradientSchemes[addressChunks[0].substr(1, 2) % gradientSchemes.length];
-  const primaryGradients = pickTwo(addressChunks[1], gradientScheme.primary);
-  const secondaryGradients = pickTwo(addressChunks[2], gradientScheme.secondary);
-  const shapes = [
-    getBackgroundCircle(size, primaryGradients[0]),
-    getShape(addressChunks[1], size, primaryGradients[1], 1),
-    getShape(addressChunks[2], size, secondaryGradients[0], 0.23),
-    getShape(addressChunks[3], size, secondaryGradients[1], 0.18),
-  ];
+class AccountVisual extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = { isMobile: window.innerWidth < 1024 };
+  }
 
-  return (
-    <div style={{ height: size, width: size }} className={`${styles.wrapper} ${className}`}>
-      <svg height={size} width={size} className={styles.accountVisual}>
-        <Gradients scheme={gradientScheme}/>
-        {shapes.map((shape, i) => (
-          <shape.component {...shape.props} key={i} />
-        ))}
-      </svg>
-    </div>
-  );
-};
+  shouldComponentUpdate(nextProps, state) {
+    return this.state.isMobile !== state.isMobile;
+  }
+
+  resizeWindow() {
+    this.setState({ isMobile: window.innerWidth < 1024 });
+  }
+
+  componentDidMount() {
+    window.addEventListener('resize', this.resizeWindow.bind(this));
+  }
+
+  componentWillUnmount() {
+    window.removeEventListener('resize', this.resizeWindow.bind(this));
+  }
+
+  render() {
+    const { address, size, mobileSize, className } = this.props;
+    const desktopSize = size || 200;
+    const newSize = this.state.isMobile && mobileSize ? mobileSize : desktopSize;
+
+    const addressChunks = address.padStart(21, '0').match(/\d{5}/g);
+    const gradientScheme = gradientSchemes[addressChunks[0].substr(1, 2) % gradientSchemes.length];
+    const primaryGradients = pickTwo(addressChunks[1], gradientScheme.primary);
+    const secondaryGradients = pickTwo(addressChunks[2], gradientScheme.secondary);
+    const shapes = [
+      getBackgroundCircle(newSize, primaryGradients[0]),
+      getShape(addressChunks[1], newSize, primaryGradients[1], 1),
+      getShape(addressChunks[2], newSize, secondaryGradients[0], 0.23),
+      getShape(addressChunks[3], newSize, secondaryGradients[1], 0.18),
+    ];
+    return (
+      <div style={{ height: newSize, width: newSize }} className={`${styles.wrapper} ${className}`}>
+        <svg height={newSize} width={newSize} className={styles.accountVisual}>
+          <Gradients scheme={gradientScheme}/>
+          {shapes.map((shape, i) => (
+            <shape.component {...shape.props} key={i}/>
+          ))}
+        </svg>
+      </div>
+    );
+  }
+}
 
 export default AccountVisual;
diff --git a/src/components/header/header.js b/src/components/header/header.js
@@ -15,11 +15,6 @@ import RelativeLink from '../relativeLink';
 import routes from './../../constants/routes';
 
 class Header extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = { isMobile: window.innerWidth < 1024 };
-  }
-
   shouldShowActionButton() {
     return !this.props.isAuthenticated &&
       this.props.location.pathname !== routes.login.url &&
@@ -32,18 +27,6 @@ class Header extends React.Component {
     return this.props.location.pathname.includes('explorer') && !this.props.location.pathname.includes(routes.search.long);
   }
 
-  resizeWindow() {
-    this.setState({ isMobile: window.innerWidth < 1024 });
-  }
-
-  componentDidMount() {
-    window.addEventListener('resize', this.resizeWindow.bind(this));
-  }
-
-  componentWillUnmount() {
-    window.removeEventListener('resize', this.resizeWindow.bind(this));
-  }
-
   render() {
     return (
       <header className={`${styles.wrapper} mainHeader`}>
@@ -84,7 +67,7 @@ class Header extends React.Component {
                   <RelativeLink to='saved-accounts' className={styles.avatar}>
                     <AccountVisual
                       address={this.props.account.address}
-                      size={this.state.isMobile ? 40 : 69}
+                      size={69} mobileSize={40}
                     />
                   </RelativeLink>
                   <div className={styles.menu}>

diff --git a/src/components/sendTo/index.js b/src/components/sendTo/index.js
@@ -11,26 +11,10 @@ import routes from './../../constants/routes';
 import styles from './sendTo.css';
 
 class SendTo extends React.Component {
-  constructor() {
-    super();
-    this.state = { isMobile: window.innerWidth < 1024 };
+  shouldComponentUpdate(nextProps) {
+    return nextProps.address !== this.props.address;
   }
 
-  shouldComponentUpdate(nextProps, state) {
-    return nextProps.address !== this.props.address || this.state.isMobile !== state.isMobile;
-  }
-
-  resizeWindow() {
-    this.setState({ isMobile: window.innerWidth < 1024 });
-  }
-
-  componentDidMount() {
-    window.addEventListener('resize', this.resizeWindow.bind(this));
-  }
-
-  componentWillUnmount() {
-    window.removeEventListener('resize', this.resizeWindow.bind(this));
-  }
   render() {
     return (<Box className={`${styles.wrapper} ${grid.row}`}>
       <section className={styles.content}>
@@ -51,7 +35,7 @@ class SendTo extends React.Component {
           ${grid['col-lg-12']}
           ${grid['middle-sm']}
           `}
-            size={this.state.isMobile ? 90 : 144} />
+            size={144} mobileSize={90}/>
           <div className={`${styles.account}
         ${grid['col-xs-8']}
         ${grid['col-sm-8']}

diff --git a/src/components/sendTo/sendTo.css b/src/components/sendTo/sendTo.css
@@ -14,7 +14,7 @@
 }
 
 .wrapper {
-  padding: 0px 42px; /* stylelint-disable-line */
+  padding: 9.2vh 42px; /* stylelint-disable-line */
   text-align: center;
   line-height: 36px;
   height: 100%;
@@ -100,7 +100,7 @@
 
     & .content {
       display: flex;
-      width: 100%
+      width: 100%;
     }
 
     & .account {
@@ -120,7 +120,7 @@
 
 @media (--small-viewport) {
   .wrapper {
-    padding: 3.3vh 24px; /* stylelint-disable-line */
+    padding: 5.3vh 24px; /* stylelint-disable-line */
 
     & .content {
       display: block;