mirror of
https://github.com/strapi/strapi.git
synced 2025-12-24 21:54:24 +00:00
Fix PR feedback
Signed-off-by: soupette <cyril.lpz@gmail.com>
This commit is contained in:
parent
991813636b
commit
8f22ee2c5a
@ -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 |
|
||||
|
||||
|
||||
@ -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`
|
||||
|
||||
@ -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;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user