Backup_Repos/filestash
1
0
Fork 0
mirror of https://github.com/mickael-kerjean/filestash synced 2025-12-06 08:22:24 +01:00
Code Issues Projects Releases Wiki Activity

improvement (UI): notification design

Browse source
This commit is contained in:
Mickael KERJEAN 2018-05-29 16:15:46 +10:00
parent e817c1a79d
commit ab280f38b6
2 changed files with 8 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
client/components/notification.js
View file

@ -1,7 +1,7 @@
import React from 'react';
import ReactCSSTransitionGroup from 'react-addons-css-transition-group';
import { NgIf } from './';
import { NgIf, Icon } from './';
import { notify } from '../helpers/';
import './notification.scss';
@ -73,7 +73,9 @@ export class Notification extends React.Component {
<div className="message">
{ this.state.message_text }
</div>
<div className="close" onClick={this.cancelAnimation.bind(this)}>X</div>
<div className="close" onClick={this.cancelAnimation.bind(this)}>
<Icon name="close" />
</div>
</div>
</NgIf>
</ReactCSSTransitionGroup>

7
client/components/notification.scss
View file

@ -13,7 +13,7 @@
display: inline-block;
padding: 15px 20px 15px 15px;
border-radius: 2px;
box-shadow: rgba(0, 0, 0, 0.14) 0px 4px 5px 0px;
box-shadow: rgba(158, 163, 172, 0.3) 5px 5px 20px;
display: flex;
align-items: center;
@ -34,10 +34,11 @@
flex: 1 1 auto;
}
.close{
color: rgba(0,0,0,0.3);
.component_icon{
height: 18px;
}
cursor: pointer;
padding: 0 2px;
font-size: 0.95em;
}
}
}