From 08bf89bdd1dce1c1624193eadeaaeb9141b26121 Mon Sep 17 00:00:00 2001
From: Vincent <vincent@loki.network>
Date: Thu, 5 Dec 2019 17:18:20 +1100
Subject: [PATCH] Updated recommended changes and made simplifications

---
 stylesheets/_session.scss                   | 47 +++++++--------------
 ts/components/session/SessionIconButton.tsx | 16 +++++--
 2 files changed, 28 insertions(+), 35 deletions(-)

diff --git a/stylesheets/_session.scss b/stylesheets/_session.scss
index 782300a8c..fc84eb69b 100644
--- a/stylesheets/_session.scss
+++ b/stylesheets/_session.scss
@@ -25,12 +25,11 @@ $session-color-green: #00f782;
 $session-color-white: #fff;
 $session-color-black: #000;
 
-
 $session-transition-duration: 0.25s;
 
-$session-icon-size-sm: 16px;
+$session-icon-size-sm: 15px;
 $session-icon-size-md: 20px;
-$session-icon-size-lg: 28px;
+$session-icon-size-lg: 30px;
 
 .session-button {
   min-width: 165px;
@@ -38,7 +37,7 @@ $session-icon-size-lg: 28px;
   height: 45px;
   line-height: 45px;
   padding: 0 35px 0 35px;
-  font-size: 32px;
+  font-size: 15px;
   font-family: $session-font-family;
   font-weight: 700;
   cursor: pointer;
@@ -76,43 +75,29 @@ $session-icon-size-lg: 28px;
   display: inline-block;
   transition: opacity $session-transition-duration;
 
-  &.small {
-    line-height: $session-icon-size-sm;
-    height: $session-icon-size-sm;
-    width: $session-icon-size-sm;
+  @mixin adjust-icon-size($size) {
+    line-height: $size;
+    height: $size;
+    width: $size;
 
-    margin: $session-icon-size-sm / 3;
+    margin: $size / 3;
 
     img {
-      height: $session-icon-size-sm;
-      width: $session-icon-size-sm;
+      height: $size;
+      width: $size;
     }
   }
 
-  &.medium {
-    line-height: $session-icon-size-md;
-    height: $session-icon-size-md;
-    width: $session-icon-size-md;
-
-    margin: $session-icon-size-md / 3;
+  &.small {
+    @include adjust-icon-size($session-icon-size-sm);
+  }
 
-    img {
-      height: $session-icon-size-md;
-      width: $session-icon-size-md;
-    }
+  &.medium {
+    @include adjust-icon-size($session-icon-size-md);
   }
 
   &.large {
-    line-height: $session-icon-size-lg;
-    height: $session-icon-size-lg;
-    width: $session-icon-size-lg;
-
-    margin: $session-icon-size-lg / 3;
-
-    img {
-      height: $session-icon-size-lg;
-      width: $session-icon-size-lg;
-    }
+    @include adjust-icon-size($session-icon-size-lg);
   }
 
   &:hover {
diff --git a/ts/components/session/SessionIconButton.tsx b/ts/components/session/SessionIconButton.tsx
index 53da91b8a..62d09a725 100644
--- a/ts/components/session/SessionIconButton.tsx
+++ b/ts/components/session/SessionIconButton.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import classNames from 'classnames';
+import { exists } from 'fs';
 
 export enum SessionIconButtonTypes {
   'exit' = 'exit',
@@ -26,6 +27,7 @@ export enum SessionIconButtonSizes {
 interface Props {
   iconType: SessionIconButtonTypes;
   iconSize: SessionIconButtonSizes;
+  onClick: any;
 }
 
 export class SessionIconButton extends React.PureComponent<Props> {
@@ -51,14 +53,20 @@ export class SessionIconButton extends React.PureComponent<Props> {
           iconSize === SessionIconButtonSizes.large ? 'large' : ''
         )}
         role="button"
-        onClick={this.clickHandler}
+        onClick={ e => {
+            this.clickHandler(e);
+          }
+        }
       >
-        <img src={iconPath} alt="" />
+        <img src={iconPath} alt="Icon Button" />
       </div>
     );
   }
 
-  private clickHandler() {
-    return;
+  private clickHandler(e: any) {
+    if (this.props.onClick) {
+      e.stopPropagation();
+      this.props.onClick();
+    }
   }
 }