Fix PR feedback

Signed-off-by: soupette <cyril.lpz@gmail.com>
This commit is contained in:
soupette 2020-04-24 12:07:07 +02:00
parent 991813636b
commit 8f22ee2c5a
3 changed files with 100 additions and 93 deletions

View File

@ -60,7 +60,7 @@ Each plugin exports all its configurations in an object. This object is located
Here are its properties:
| key | type | value |
| key | type | Description |
| ------------------------- | ------- | :------------------------------------------------------------------------------------------------------ |
| blockerComponent | node | can be either `null` or React node (e.g. `() => <div />`) |
| blockerComponentProps | object | `{}` |
@ -71,10 +71,10 @@ Here are its properties:
| isReady | boolean | The app will load until this proprety is true |
| leftMenuLinks | array | `[]` |
| mainComponent | node | The plugin's App container, setting it to null will prevent the plugin from being displayed in the menu |
| name | string | The plugin's name retrieved from the package.json. |
| name | string | The plugin's name retrieved from the package.json |
| pluginLogo | file | The plugin's logo |
| preventComponentRendering | boolean | Wheter or not display the plugin's blockerComponent instead of the main component |
| settings | object | Refer to ther [Plugins settings API](./frontend-settings-api.md) |
| preventComponentRendering | boolean | Whether or not display the plugin's blockerComponent instead of the main component |
| settings | object | Refer to the [Plugins settings API](./frontend-settings-api.md) |
| reducers | object | The plugin's redux reducers |
| trads | object | The plugin's translation files |

View File

@ -1,105 +1,110 @@
import styled, { createGlobalStyle } from 'styled-components';
import PropTypes from 'prop-types';
/* eslint-disable indent */
const GlobalNotification = createGlobalStyle`
.notificationIcon {
position: relative;
display: block;
width: 60px;
height: 60px;
> div {
position: absolute;
width: 20px;
height: 20px;
top: 20px; left:20px;
border-radius: 10px;
border: 1px solid ${props => props.theme.main.colors.green};
display: flex;
i, svg {
margin: auto;
font-size: 1.2rem;
color: ${props => props.theme.main.colors.green};
.notificationIcon {
position: relative;
display: block;
width: 60px;
height: 60px;
> div {
position: absolute;
width: 20px;
height: 20px;
top: 20px; left:20px;
border-radius: 10px;
border: 1px solid ${props => props.theme.main.colors.green};
display: flex;
i, svg {
margin: auto;
font-size: 1.2rem;
color: ${props => props.theme.main.colors.green};
}
}
}
}
.notificationContent {
display: flex;
align-items: center;
width: 220px;
margin: 0;
padding-right: 10px;
border-right: 1px solid rgba(255, 255, 255, 0.3);
}
.notificationTitle {
margin-bottom: 0;
font-size: 1.4rem;
font-weight: 400;
line-height: 1.8rem;
}
.notificationClose {
cursor: pointer;
opacity: 0.6;
position: relative;
display: flex;
width: 20px;
font-size: 1.4rem;
color: #BBC2BF;
transition: opacity 0.1s ease;
-webkit-font-smoothing: antialiased;
&:hover {
opacity: 1;
.notificationContent {
display: flex;
align-items: center;
width: 220px;
margin: 0;
padding-right: 10px;
border-right: 1px solid rgba(255, 255, 255, 0.3);
}
svg {
margin: auto;
font-size: 1.3rem;
font-weight: 100!important;
.notificationTitle {
margin-bottom: 0;
font-size: 1.4rem;
font-weight: 400;
line-height: 1.8rem;
}
}
.notificationSuccess{
background: linear-gradient(100deg , #FFFFFF 50%, rgba(39, 183, 15, .05)), ${props =>
props.theme.main.colors.white};
}
.notificationWarning {
background: linear-gradient(100deg , #FFFFFF 50%, rgba(250, 156, 0, .05)), ${props =>
props.theme.main.colors.white};
.notificationClose {
cursor: pointer;
opacity: 0.6;
position: relative;
display: flex;
width: 20px;
font-size: 1.4rem;
color: #BBC2BF;
transition: opacity 0.1s ease;
-webkit-font-smoothing: antialiased;
.notificationIcon:before {
padding-top: 4px;
border-color: ${props => props.theme.main.colors.orange};
color: ${props => props.theme.main.colors.orange};
&:hover {
opacity: 1;
}
svg {
margin: auto;
font-size: 1.3rem;
font-weight: 100!important;
}
}
}
.notificationError {
background: linear-gradient(100deg , #FFFFFF 50%, rgba(255, 93, 0, .05)), $white;
.notificationIcon:before {
padding-top: 4px;
border-color: $brand-danger;
border-color: ${props => props.theme.main.colors.red};
color: ${props => props.theme.main.colors.red};
.notificationSuccess{
background: linear-gradient(
100deg ,
#FFFFFF 50%,
rgba(39, 183, 15, .05)),
${props => props.theme.main.colors.white};
}
}
.notificationInfo {
background: linear-gradient(100deg , #FFFFFF 50%, rgba(28, 93, 231, .05)), ${props =>
props.theme.main.colors.white};
.notificationWarning {
background: linear-gradient(
100deg ,
#FFFFFF 50%,
rgba(250, 156, 0, .05)),
${props => props.theme.main.colors.white};
.notificationIcon:before {
border-color: ${props => props.theme.main.colors.blue};
color: ${props => props.theme.main.colors.blue};
.notificationIcon:before {
padding-top: 4px;
border-color: ${props => props.theme.main.colors.orange};
color: ${props => props.theme.main.colors.orange};
}
}
.notificationError {
background: linear-gradient(100deg , #FFFFFF 50%, rgba(255, 93, 0, .05)), $white;
.notificationIcon:before {
padding-top: 4px;
border-color: $brand-danger;
border-color: ${props => props.theme.main.colors.red};
color: ${props => props.theme.main.colors.red};
}
}
.notificationInfo {
background: linear-gradient(100deg ,
#FFFFFF 50%,
rgba(28, 93, 231, .05)), ${props => props.theme.main.colors.white};
.notificationIcon:before {
border-color: ${props => props.theme.main.colors.blue};
color: ${props => props.theme.main.colors.blue};
}
}
}
`;
const Li = styled.li`

View File

@ -1,19 +1,21 @@
import styled, { css } from 'styled-components';
import styled from 'styled-components';
/* eslint-disable indent */
const Wrapper = styled.div`
${({ isActive }) => {
if (isActive) {
return css`
if (isActive) {
return `
height: 3rem;
color: #007eff;
font-weight: 600;
border-bottom: 2px solid #007eff;
z-index: 99;
`;
}
}
return '';
}}
return '';
}}
`;
export default Wrapper;