More Design Tweaks

This commit is contained in:
Belen Curcio
2017-01-12 09:16:23 -03:00
parent 7101d99187
commit 4a4affad70
14 changed files with 76 additions and 33 deletions
+2 -1
View File
@@ -64,10 +64,11 @@ const getActionButton = (action, i, props) => {
<div className={styles.ban}>
<Button
className={`ban ${styles.banButton}`}
cStyle='black'
cStyle='darkGrey'
disabled={banned ? 'disabled' : ''}
onClick={() => props.onClickShowBanDialog(author.id, author.displayName, comment.id)}
key={i}
raised
>
<Icon name='not_interested' className={styles.banIcon} />
{lang.t('comment.ban_user')}
@@ -36,12 +36,19 @@
.listItem {
border-bottom: 1px solid #e0e0e0;
padding: 16px;
font-size: 16px;
width: 100%;
max-width: 660px;
min-width: 400px;
margin: 0 auto;
padding: 16px 14px;
position: relative;
transition: box-shadow 200ms;
&:hover {
box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
}
&:last-child {
border-bottom: none;
@@ -52,7 +59,8 @@
right: 0;
height: 100%;
top: 0;
padding: 30px 22px;
padding: 40px 18px;
box-sizing: border-box;
}
.itemHeader {
@@ -83,8 +91,8 @@
.created {
color: #666;
font-size: 10px;
margin-left: 10px;
font-size: 13px;
margin-left: 40px;
}
.actionButton {
@@ -95,8 +103,8 @@
.body {
margin-top: 20px;
flex: 1;
font-size: 1em;
color: rgba(0,0,0,.54);
font-size: 0.88em;
color: black;
}
.flagged {
@@ -154,6 +162,7 @@
.ban {
display: block;
text-align: center;
margin-top: 5px;
}
.banButton {
@@ -14,10 +14,6 @@
height: 58px;
}
.active {
background: #232323;
}
.rightPanel {
position: absolute;
right: 0;
@@ -56,6 +52,12 @@
padding: 0 20px;
font-size: 15px;
font-weight: 500;
background-color: transparent;
transition: background-color 200ms;
&.active {
background-color: #232323;
}
}
.nav {
@@ -1,4 +1,5 @@
.layout {
max-width: 1280px;
margin: 0 auto;
overflow: hidden;
}
@@ -1,17 +1,22 @@
.roleButton {
display: block;
display: block;
}
.searchInput {
display: block;
padding-left: 40px;
width: auto;
display: block;
padding-left: 40px;
width: 100%
}
.searchBox {
background: white;
background: white;
max-width: 150px;
}
.email {
display: block;
display: block;
}
.dataTable {
white-space: normal;
}
@@ -53,7 +53,7 @@ const Community = ({isFetching, commenters, ...props}) => {
</div>
</form>
</Cell>
<Cell col={6}>
<Cell col={10}>
{ isFetching && <Loading /> }
{ !hasResults && <NoResults /> }
{ hasResults &&
@@ -17,6 +17,7 @@
font-weight: 500;
font-size: 15px;
letter-spacing: 1px;
transition: border-bottom 200ms;
}
.active {
@@ -15,19 +15,28 @@ export default ({onTabClick, ...props}) => (
<div className='mdl-tabs'>
<div className={`mdl-tabs__tab-bar ${styles.tabBar}`}>
<a href='#pending'
onClick={() => onTabClick('pending')}
onClick={(e) => {
e.preventDefault();
onTabClick('pending');
}}
className={`mdl-tabs__tab ${styles.tab} ${props.activeTab === 'pending' ? styles.active : ''}`}
>
{lang.t('modqueue.pending')}
</a>
<a href='#rejected'
onClick={() => onTabClick('rejected')}
onClick={(e) => {
e.preventDefault();
onTabClick('rejected');
}}
className={`mdl-tabs__tab ${styles.tab} ${props.activeTab === 'rejected' ? styles.active : ''}`}
>
{lang.t('modqueue.rejected')}
</a>
<a href='#flagged'
onClick={() => onTabClick('flagged')}
onClick={(e) => {
e.preventDefault();
onTabClick('flagged');
}}
className={`mdl-tabs__tab ${styles.tab} ${props.activeTab === 'flagged' ? styles.active : ''}`}
>
{lang.t('modqueue.flagged')}
+1 -2
View File
@@ -69,7 +69,7 @@
.type--darkGrey {
color: white;
background: #696969;
background: #616161;
}
.type--darkGrey:hover {
@@ -104,6 +104,5 @@
}
.raised {
background: rgba(158,158,158,.2);
box-shadow: 0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);
}
+3 -3
View File
@@ -1,14 +1,14 @@
import React from 'react';
import styles from './Button.css';
const Button = ({cStyle = 'local', children, className, raised, full, ...props}) => (
const Button = ({cStyle = 'local', children, className, raised = false, full = false, ...props}) => (
<button
className={`
${styles.button}
${styles[`type--${cStyle}`]}
${className}
${full && styles.full}
${raised && styles.button}
${full ? styles.full : ''}
${raised ? styles.raised : ''}
`}
{...props}
>
+20 -4
View File
@@ -1,9 +1,25 @@
.base {
background: red;
i {
font-size: 30px;
transform: translate(-14px,-12px) !important;
}
}
.type--approve {
background: #00796b;
color: rgba(255, 255, 255, 0.901961);
background: #388E3C;
color: rgba(255, 255, 255, 0.901961);
}
.type--approve:hover {
background: #40a244;
}
.type--reject {
background: #d32f2f ;
color: rgba(255, 255, 255, 0.901961);
background: #D32F2F ;
color: rgba(255, 255, 255, 0.901961);
}
.type--reject:hover {
background: #e53333;
}
+1 -1
View File
@@ -3,7 +3,7 @@ import styles from './FabButton.css';
import {FABButton, Icon} from 'react-mdl';
const FabButton = ({cStyle = 'local', icon, className, ...props}) => (
<FABButton className={`${styles[`type--${cStyle}`]} ${className ? className : ''}`} {...props}>
<FABButton className={`${styles.base} ${styles[`type--${cStyle}`]} ${className ? className : ''}`} {...props}>
<Icon name={icon} />
</FABButton>
);
+1 -1
View File
@@ -2,7 +2,7 @@ import React from 'react';
import {Icon as IconMDL} from 'react-mdl';
const Icon = ({className, name}) => (
<IconMDL classname={className} name={name} />
<IconMDL className={className} name={name} />
);
export default Icon;
+1 -1
View File
@@ -5,7 +5,7 @@
<meta name="viewport" content="initial-scale=1, maximum-scale=1">
<meta property="csrf" content="<%= csrfToken %>">
<title>Talk - Coral Admin</title>
<link href="https://fonts.googleapis.com/css?family=Roboto:400,500" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.2.1/material.indigo-pink.min.css">
<style media="screen">