Updated recommended changes and made simplifications
This commit is contained in:
parent
211b9649ec
commit
08bf89bdd1
|
@ -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 {
|
||||
|
|
|
@ -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();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue