Fixed syntax & linted
parent
a6fb54233a
commit
533ec4eedc
@ -1,107 +1,99 @@
|
||||
$session-color-green: #00F782;
|
||||
$session-color-green: #00f782;
|
||||
$session-color-white: #fff;
|
||||
$session-color-black: #000;
|
||||
|
||||
|
||||
$session-font-family: Waza;
|
||||
|
||||
$session-transition-duration: 0.25s;
|
||||
|
||||
|
||||
$session-icon-size-sm: 16px;
|
||||
$session-icon-size-md: 20px;
|
||||
$session-icon-size-lg: 28px;
|
||||
|
||||
.session-button {
|
||||
min-width: 165px;
|
||||
width: auto;
|
||||
height: 45px;
|
||||
line-height: 45px;
|
||||
padding: 0 35px 0 35px;
|
||||
font-size: 15px;
|
||||
font-family: $session-font-family;
|
||||
font-weight: 700;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
border-radius: 500px;
|
||||
|
||||
@mixin transparent-background($textAndBorderColor) {
|
||||
background-color: Transparent;
|
||||
background-repeat: no-repeat;
|
||||
overflow: hidden;
|
||||
outline: none;
|
||||
color: $textAndBorderColor;
|
||||
border: 2px solid $textAndBorderColor;
|
||||
}
|
||||
|
||||
.content{
|
||||
background-color: $session-color-black !important;
|
||||
}
|
||||
&.full-green {
|
||||
background-color: $session-color-green;
|
||||
color: $session-color-white;
|
||||
}
|
||||
|
||||
.session-button {
|
||||
min-width: 165px;
|
||||
width: auto;
|
||||
height: 45px;
|
||||
line-height: 45px;
|
||||
padding: 0 35px 0 35px;
|
||||
font-size: 15px;
|
||||
font-family: $session-font-family;
|
||||
font-weight: 700;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
border-radius: 500px;
|
||||
|
||||
@mixin transparent-background($textAndBorderColor) {
|
||||
background-color: Transparent;
|
||||
background-repeat:no-repeat;
|
||||
overflow: hidden;
|
||||
outline:none;
|
||||
color: $textAndBorderColor;
|
||||
border: 2px solid $textAndBorderColor;
|
||||
}
|
||||
|
||||
&.full-green {
|
||||
background-color: $session-color-green;
|
||||
color: $session-color-white;
|
||||
}
|
||||
|
||||
&.green {
|
||||
@include transparent-background($session-color-green);
|
||||
}
|
||||
|
||||
&.white {
|
||||
@include transparent-background($session-color-white);
|
||||
}
|
||||
&.green {
|
||||
@include transparent-background($session-color-green);
|
||||
}
|
||||
|
||||
&.white {
|
||||
@include transparent-background($session-color-white);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.session-icon-button {
|
||||
fill: $session-color-white;
|
||||
opacity: 0.4;
|
||||
cursor: pointer;
|
||||
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;
|
||||
|
||||
margin: $session-icon-size-sm / 3;
|
||||
|
||||
img {
|
||||
height: $session-icon-size-sm;
|
||||
width: $session-icon-size-sm;
|
||||
}
|
||||
fill: $session-color-white;
|
||||
opacity: 0.4;
|
||||
cursor: pointer;
|
||||
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;
|
||||
|
||||
margin: $session-icon-size-sm / 3;
|
||||
|
||||
img {
|
||||
height: $session-icon-size-sm;
|
||||
width: $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;
|
||||
}
|
||||
}
|
||||
|
||||
&.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;
|
||||
}
|
||||
&.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;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover{
|
||||
opacity: 1;
|
||||
&.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
@ -1,72 +1,64 @@
|
||||
import React from 'react';
|
||||
import classNames from 'classnames';
|
||||
|
||||
|
||||
export enum SessionIconButtonTypes {
|
||||
'exit' = 'exit',
|
||||
'search' = 'search',
|
||||
'back' = 'back',
|
||||
'attachment' = 'attachment',
|
||||
'emoji' = 'emoji',
|
||||
'favorite' = 'favorite',
|
||||
'group' = 'group',
|
||||
'menu' = 'menu',
|
||||
'message' = 'message',
|
||||
'microphone' = 'microphone',
|
||||
'network' = 'network',
|
||||
'options' = 'options',
|
||||
'theme' = 'theme',
|
||||
'exit' = 'exit',
|
||||
'search' = 'search',
|
||||
'back' = 'back',
|
||||
'attachment' = 'attachment',
|
||||
'emoji' = 'emoji',
|
||||
'favorite' = 'favorite',
|
||||
'group' = 'group',
|
||||
'menu' = 'menu',
|
||||
'message' = 'message',
|
||||
'microphone' = 'microphone',
|
||||
'network' = 'network',
|
||||
'options' = 'options',
|
||||
'theme' = 'theme',
|
||||
}
|
||||
|
||||
export enum SessionIconButtonSizes {
|
||||
'small' = 'small',
|
||||
'medium' = 'medium',
|
||||
'large' = 'large',
|
||||
'small' = 'small',
|
||||
'medium' = 'medium',
|
||||
'large' = 'large',
|
||||
}
|
||||
|
||||
|
||||
interface Props {
|
||||
iconType: SessionIconButtonTypes;
|
||||
iconSize: SessionIconButtonSizes;
|
||||
iconType: SessionIconButtonTypes;
|
||||
iconSize: SessionIconButtonSizes;
|
||||
}
|
||||
|
||||
|
||||
export class SessionIconButton extends React.PureComponent<Props> {
|
||||
constructor(props: any){
|
||||
super(props);
|
||||
this.clickHandler = this.clickHandler.bind(this);
|
||||
}
|
||||
constructor(props: any) {
|
||||
super(props);
|
||||
this.clickHandler = this.clickHandler.bind(this);
|
||||
}
|
||||
|
||||
public render() {
|
||||
const {
|
||||
iconType,
|
||||
iconSize,
|
||||
} = this.props;
|
||||
public render() {
|
||||
const { iconType, iconSize } = this.props;
|
||||
|
||||
let iconPath = `./images/session/icon-${iconType}.svg`;
|
||||
let iconPath = `./images/session/icon-${iconType}.svg`;
|
||||
|
||||
return (
|
||||
<div
|
||||
className={classNames(
|
||||
'session-icon-button',
|
||||
iconType === SessionIconButtonTypes.exit ? 'exit' : '',
|
||||
iconType === SessionIconButtonTypes.search ? 'search' : '',
|
||||
iconType === SessionIconButtonTypes.back ? 'back' : '',
|
||||
iconSize === SessionIconButtonSizes.small ? 'small' : '',
|
||||
iconSize === SessionIconButtonSizes.medium ? 'medium' : '',
|
||||
iconSize === SessionIconButtonSizes.large ? 'large' : ''
|
||||
)}
|
||||
role='button'
|
||||
onClick={this.clickHandler}
|
||||
>
|
||||
<img src={iconPath}/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<div
|
||||
className={classNames(
|
||||
'session-icon-button',
|
||||
iconType === SessionIconButtonTypes.exit ? 'exit' : '',
|
||||
iconType === SessionIconButtonTypes.search ? 'search' : '',
|
||||
iconType === SessionIconButtonTypes.back ? 'back' : '',
|
||||
iconSize === SessionIconButtonSizes.small ? 'small' : '',
|
||||
iconSize === SessionIconButtonSizes.medium ? 'medium' : '',
|
||||
iconSize === SessionIconButtonSizes.large ? 'large' : ''
|
||||
)}
|
||||
role="button"
|
||||
onClick={this.clickHandler}
|
||||
>
|
||||
<img src={iconPath} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
clickHandler(){
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
private clickHandler() {
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
Loading…
Reference in New Issue