Browse Source

feat: add particles to main layout

develop
Ezerous 4 years ago
parent
commit
8710c83e57
  1. 6
      packages/concordia-app/src/assets/particles.js
  2. 2
      packages/concordia-app/src/components/InitializationScreen/CustomLoader/style.css
  3. 3
      packages/concordia-app/src/layouts/MainLayout/MainLayoutMenu/styles.css
  4. 3
      packages/concordia-app/src/layouts/MainLayout/index.jsx
  5. 3
      packages/concordia-app/src/layouts/RegisterLayout/styles.css

6
packages/concordia-app/src/assets/particles.js

@ -1,7 +1,7 @@
const particlesOptions = { const particlesOptions = {
particles: { particles: {
number: { number: {
value: 90, value: 120,
density: { density: {
enable: true, enable: true,
value_area: 1500, value_area: 1500,
@ -9,14 +9,14 @@ const particlesOptions = {
}, },
line_linked: { line_linked: {
enable: true, enable: true,
opacity: 0.04, opacity: 0.06,
}, },
move: { move: {
direction: 'none', direction: 'none',
speed: 0.12, speed: 0.12,
}, },
size: { size: {
value: 1.5, value: 1.6,
}, },
opacity: { opacity: {
anim: { anim: {

2
packages/concordia-app/src/components/InitializationScreen/CustomLoader/style.css

@ -1,5 +1,5 @@
#loading-screen { #loading-screen {
padding-top: 12em; padding-top: 14em;
text-align: center; text-align: center;
font-size: large; font-size: large;
height: 100%; height: 100%;

3
packages/concordia-app/src/layouts/MainLayout/MainLayoutMenu/styles.css

@ -7,4 +7,7 @@
border-radius: 0; border-radius: 0;
margin-top: 0; margin-top: 0;
margin-bottom: 4rem; margin-bottom: 4rem;
z-index: 1;
position: relative;
border-bottom: solid rgba(255, 255, 255,0.2) 1px;
} }

3
packages/concordia-app/src/layouts/MainLayout/index.jsx

@ -1,6 +1,8 @@
import React from 'react'; import React from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { Grid } from 'semantic-ui-react'; import { Grid } from 'semantic-ui-react';
import Particles from 'react-particles-js';
import particlesOptions from '../../assets/particles';
import MainLayoutMenu from './MainLayoutMenu'; import MainLayoutMenu from './MainLayoutMenu';
import MainLayoutEthereumStatus from './MainLayoutEthereumStatus'; import MainLayoutEthereumStatus from './MainLayoutEthereumStatus';
import MainLayoutIPFSStatus from './MainLayoutIPFSStatus'; import MainLayoutIPFSStatus from './MainLayoutIPFSStatus';
@ -11,6 +13,7 @@ const MainLayout = (props) => {
return ( return (
<div id="main-layout"> <div id="main-layout">
<Particles className="particles" params={particlesOptions} />
<MainLayoutMenu /> <MainLayoutMenu />
<Grid id="main-layout-grid"> <Grid id="main-layout-grid">
<Grid.Column width={4} /> <Grid.Column width={4} />

3
packages/concordia-app/src/layouts/RegisterLayout/styles.css

@ -3,6 +3,5 @@
right: 0; right: 0;
bottom: 0; bottom: 0;
left: 0; left: 0;
z-index: -1; background: var(--secondary-color);
background: rgba(0, 0, 0, 0) linear-gradient(45deg, rgb(37, 45, 63) 0%, rgb(11,37,64) 100%) repeat scroll 0 0;
} }

Loading…
Cancel
Save