Updated recommended changes and made simplifications

This commit is contained in:
Vincent 2019-12-05 17:18:20 +11:00
parent 211b9649ec
commit 08bf89bdd1
2 changed files with 28 additions and 35 deletions

View File

@ -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;
}
}
&.small {
@include adjust-icon-size($session-icon-size-sm);
}
&.medium {
line-height: $session-icon-size-md;
height: $session-icon-size-md;
width: $session-icon-size-md;
margin: $session-icon-size-md / 3;
img {
height: $session-icon-size-md;
width: $session-icon-size-md;
}
@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 {

View File

@ -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();
}
}
}