enlarged avatar when clicked in showUserDetailsDialog

stylesheets/_modules.scss

@@ -2199,6 +2199,27 @@
   width: 42px;
 }
 
+.module-avatar--300 {
+  height: 300px;
+  width: 300px;
+
+  img {
+    height: 300px;
+    width: 300px;
+  }
+}
+
+.module-avatar__label--300 {
+  width: 300px;
+  font-size: 150px;
+  line-height: 302px;
+}
+
+.module-avatar__icon--300 {
+  height: 158px;
+  width: 158px;
+}
+
 .module-avatar__icon--note-to-self {
   width: 70%;
   height: 70%;

ts/components/Avatar.tsx

@@ -54,7 +54,12 @@ export class Avatar extends React.PureComponent<Props, State> {
       return this.renderNoImage();
     }
 
-    const borderStyle = this.getBorderStyle(borderColor, borderWidth);
+    const borderRadius = '50%';
+    const borderStyle = this.getBorderStyle(
+      borderColor,
+      borderWidth,
+      borderRadius
+    );
 
     // Generate the seed
     const hash = phoneNumber.substring(0, 12);
@@ -162,7 +167,13 @@ export class Avatar extends React.PureComponent<Props, State> {
     const hasAvatar = avatarPath || conversationType === 'direct';
     const hasImage = !noteToSelf && hasAvatar && !imageBroken;
 
-    if (size !== 28 && size !== 36 && size !== 48 && size !== 80) {
+    if (
+      size !== 28 &&
+      size !== 36 &&
+      size !== 48 &&
+      size !== 80 &&
+      size !== 300
+    ) {
       throw new Error(`Size ${size} is not supported!`);
     }
 
@@ -202,7 +213,7 @@ export class Avatar extends React.PureComponent<Props, State> {
       : this.renderIdenticon();
   }
 
-  private getBorderStyle(color?: string, width?: number) {
+  private getBorderStyle(color?: string, width?: number, radius?: string) {
     const borderWidth = typeof width === 'number' ? width : 3;
 
     return color
@@ -211,6 +222,10 @@ export class Avatar extends React.PureComponent<Props, State> {
           borderStyle: 'solid',
           borderWidth: borderWidth,
         }
-      : undefined;
+      : radius
+        ? {
+            borderRadius: radius,
+          }
+        : undefined;
   }
 }

ts/components/UserDetailsDialog.tsx

@@ -17,7 +17,11 @@ interface Props {
   onStartConversation: any;
 }
 
-export class UserDetailsDialog extends React.Component<Props> {
+interface State {
+  isEnlargeImageShown: boolean;
+}
+
+export class UserDetailsDialog extends React.Component<Props, State> {
   private modalRef: any;
 
   constructor(props: any) {
@@ -28,6 +32,7 @@ export class UserDetailsDialog extends React.Component<Props> {
     this.onClickStartConversation = this.onClickStartConversation.bind(this);
     window.addEventListener('keyup', this.onKeyUp);
     this.modalRef = React.createRef();
+    this.state = { isEnlargeImageShown: false };
   }
 
   public componentWillMount() {
@@ -74,6 +79,7 @@ export class UserDetailsDialog extends React.Component<Props> {
   private renderAvatar() {
     const avatarPath = this.props.avatarPath;
     const color = this.props.avatarColor;
+    const size = this.state.isEnlargeImageShown ? 300 : 80;
 
     return (
       <Avatar
@@ -84,11 +90,17 @@ export class UserDetailsDialog extends React.Component<Props> {
         name={this.props.profileName}
         phoneNumber={this.props.pubkey}
         profileName={this.props.profileName}
-        size={80}
+        size={size}
+        onAvatarClick={this.handleShowEnlargedDialog}
+        borderWidth={size / 2}
       />
     );
   }
 
+  private readonly handleShowEnlargedDialog = () => {
+    this.setState({ isEnlargeImageShown: !this.state.isEnlargeImageShown });
+  };
+
   private onKeyUp(event: any) {
     switch (event.key) {
       case 'Enter':