diff --git a/app/page.jsx b/app/page.jsx
index 36080ea..56fc8e0 100644
--- a/app/page.jsx
+++ b/app/page.jsx
@@ -6,21 +6,6 @@ import React from 'react';
import Header from '@parts/Header';
import Hero from '@parts/Hero';
import Form from '@parts/Form';
-// import { useSuspenseQuery } from '@apollo/experimental-nextjs-app-support/ssr';
-// import { gql } from '@apollo/client';
-
-// GraphQL
-// ------------
-// Tells the age how to cache content
-// export const dynamic = 'force-dynamic';
-
-// const query = gql`
-// query {
-// launchLatest {
-// mission_name
-// }
-// }
-// `;
// Component
// ------------
diff --git a/src/parts/Button/index.jsx b/src/parts/Button/index.jsx
index b94d69b..92c75a9 100644
--- a/src/parts/Button/index.jsx
+++ b/src/parts/Button/index.jsx
@@ -12,9 +12,9 @@ import { Jacket } from './styles';
const Button = ({ label, onClick, icon, icoL, icoR, disabled }) => {
return (
- {icon && icoL && ()}
+ {icon && icoL && ()}
{label}
- {icon && icoR && ()}
+ {icon && icoR && ()}
);
}
diff --git a/src/parts/Button/styles.js b/src/parts/Button/styles.js
index 34c4ebc..c86731c 100644
--- a/src/parts/Button/styles.js
+++ b/src/parts/Button/styles.js
@@ -11,6 +11,7 @@ export const Jacket = styled.button(
position: relative;
display: flex;
flex-direction: row;
+ align-items: center;
gap: 1.2rem;
width: max-content;
border-radius: 3.6rem;
@@ -21,10 +22,15 @@ export const Jacket = styled.button(
transition: all .4s ${props.theme.easing.bezzy};
&:hover {
- cursor: pointer;
+ cursor: pointer !important;
transform: scale(0.95);
}
+ svg {
+ width: 1.6rem;
+ height: 1.6rem;
+ }
+
span {
${pStyles}
text-transform: uppercase;
diff --git a/src/parts/Contexts/Contexts.jsx b/src/parts/Contexts/Contexts.jsx
index 1b95822..a9c1245 100644
--- a/src/parts/Contexts/Contexts.jsx
+++ b/src/parts/Contexts/Contexts.jsx
@@ -10,12 +10,13 @@ import { GlobalContext } from './';
const Contexts = ({ children }) => {
// NOTE • States
const [isLoaded, setIsLoaded] = React.useState(false);
+ const [begin, setBegin] = React.useState(false);
// NOTE • Refs
const scrollProxy = React.useRef();
return (
-
+
{children}
);
diff --git a/src/parts/Form/index.jsx b/src/parts/Form/index.jsx
index a785330..f6d5233 100644
--- a/src/parts/Form/index.jsx
+++ b/src/parts/Form/index.jsx
@@ -2,24 +2,26 @@
// Imports
// ------------
-import React, { useState, useEffect, use } from 'react';
+import React, { useState, useEffect, useContext } from 'react';
import init, { Node, NodeConfig } from '@package/lumina-node-wasm';
import Input from './Input';
import Button from '@parts/Button';
import Icon from '@icon';
import Visualisation from '@parts/Visualisation';
import { Grid } from '@waffl';
+import { GlobalContext } from '@parts/Contexts';
// Styles
// ------------
-import { Blanket, Jacket, ImageContainer, Container, Title, NetworkList, NetworkItem, StatsItem, PeerList, Col, } from './styles';
+import { Blanket, Jacket, ImageContainer, Container, Header, Title, Progress, NetworkList, NetworkItem, StatsItem, PeerList, Col, FieldGroup, ButtonJacket } from './styles';
// Component
// ------------
const Form = () => {
+ const { begin, setBegin } = useContext(GlobalContext);
+
const [node, setNode] = useState(null);
const [config, setConfig] = useState({});
- const [begin, setBegin] = useState(false);
const [go, setGo] = useState(false);
const [modalOpen, setModalOpen] = useState({
modal1: false,
@@ -165,6 +167,10 @@ const Form = () => {
}
};
+ const handleReload = () => {
+ window.location.reload();
+ };
+
return (
@@ -221,7 +227,17 @@ const Form = () => {
- Status
+
+
+
+ Status
+
+
+
+
@@ -231,16 +247,12 @@ const Form = () => {
handleInput(e)} placeholder="..." light />
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/parts/Form/styles.js b/src/parts/Form/styles.js
index 8953fe5..ebcd6c7 100644
--- a/src/parts/Form/styles.js
+++ b/src/parts/Form/styles.js
@@ -91,10 +91,37 @@ export const Container = styled(Div)(props => css`
`}
`);
+export const Header = styled.div(props => css`
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ gap: 1.2rem;
+
+ margin-bottom: 3.6rem;
+`);
+
export const Title = styled(H3)(props => css`
color: ${props.$dark ? props.theme.colors.global.black : props.theme.colors.global.white};
+`);
+
+export const Progress = styled.div(props => css`
+ position: relative;
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ gap: .6rem;
+
+ svg {
+ width: 1.6rem;
+ height: 1.6rem;
+ }
- ${props.$dark && css` margin-bottom: 3.6rem; `}
+ span {
+ text-transform: uppercase;
+ font-size: 1.3rem;
+ font-weight: 700;
+ color: ${props.theme.colors.brand.bc4};
+ }
`);
export const NetworkList = styled.ul(props => css`
@@ -187,6 +214,7 @@ export const NetworkItem = styled.li(props => css`
${props.$disabled && css`
opacity: .5;
pointer-events: none;
+ cursor: not-allowed;
`}
`);
@@ -197,8 +225,16 @@ export const StatsItem = styled.div(props => css`
align-items: center;
justify-content: center;
width: 100%;
+ margin-bottom: 1.2rem;
- ${props.$block && css` margin-bottom: 3.6rem; `}
+ ${props.$block && css`
+ margin-top: 2.4rem;
+ margin-bottom: 3.6rem;
+
+ label {
+ gap: 1.2rem;
+ }
+ `}
label {
display: flex;
@@ -222,6 +258,7 @@ export const PeerList = styled.ul(props => css`
justify-content: flex-start;
gap: .3rem;
+ min-height: 8rem;
max-height: 15rem;
overflow: hidden;
overflow-y: scroll;
@@ -241,4 +278,16 @@ export const PeerList = styled.ul(props => css`
}
`);
-export const Col = styled(Div)(props => css``);
\ No newline at end of file
+export const Col = styled(Div)(props => css``);
+
+export const FieldGroup = styled(Div)(props => css`
+ display: flex;
+ flex-direction: row;
+ gap: 2.4rem;
+`);
+
+export const ButtonJacket = styled(Div)(props => css`
+ position: relative;
+ border-top: 1px solid ${props.theme.colors.global.black10};
+ padding-top: 2.4rem;
+`);
\ No newline at end of file
diff --git a/src/parts/Hero/index.jsx b/src/parts/Hero/index.jsx
index 134e29b..f541742 100644
--- a/src/parts/Hero/index.jsx
+++ b/src/parts/Hero/index.jsx
@@ -1,7 +1,8 @@
// Imports
// ------------
-import React from 'react';
+import React, { useContext } from 'react';
import { Grid } from '@waffl';
+import { GlobalContext } from '@parts/Contexts';
// Styles
// ------------
@@ -10,10 +11,13 @@ import { Jacket, Title } from './styles';
// Component
// ------------
const Hero = () => {
+ // NOTE • Contexts
+ const { begin } = useContext(GlobalContext);
+
return (
- Verify the availability of block data by sampling the Celestia network for shares
+ Verify the availability of block data by sampling the Celestia network for shares
);
diff --git a/src/parts/Hero/styles.js b/src/parts/Hero/styles.js
index 5dfe39d..5954616 100644
--- a/src/parts/Hero/styles.js
+++ b/src/parts/Hero/styles.js
@@ -14,4 +14,7 @@ export const Jacket = styled(Section)(
export const Title = styled(H1)(props => css`
color: ${props.theme.colors.global.white};
+
+ transition: all 1s ${props.theme.easing.bezzy};
+ opacity: ${props.$isHidden ? 0 : 1};
`);
\ No newline at end of file
diff --git a/src/parts/Icon/index.jsx b/src/parts/Icon/index.jsx
index e51b5cb..f02730c 100644
--- a/src/parts/Icon/index.jsx
+++ b/src/parts/Icon/index.jsx
@@ -241,6 +241,44 @@ const Icon = ({ type, className, onClick }) => {
);
+ if (type === 'back')
+ return (
+
+
+
+ );
+
+ if (type === 'logoGrad')
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+
console.error(
`You've not added the correct 'type' prop to your component`
diff --git a/src/parts/Visualisation/styles.js b/src/parts/Visualisation/styles.js
index 665793e..0d7b128 100644
--- a/src/parts/Visualisation/styles.js
+++ b/src/parts/Visualisation/styles.js
@@ -13,24 +13,40 @@ export const Container = styled(Div)(
props => css`
position: relative;
pointer-events: none;
- padding: 1px;
display: grid;
grid-template-columns: repeat(32, 1fr);
grid-template-rows: repeat(32, 1fr);
- grid-gap: 1px;
+ // grid-gap: 1px;
+
+ border-top: 1px solid ${props.theme.colors.global.black10};
+ border-left: 1px solid ${props.theme.colors.global.black10};
width: 42.08vw;
height: 42.08vw;
- background: ${props.theme.colors.global.black10};
-
.grid-item {
- background: white;
- }
-
- .selected {
- background: ${props.theme.colors.brand.bc4};
+ position: relative;
+ border-right: 1px solid ${props.theme.colors.global.black10};
+ border-bottom: 1px solid ${props.theme.colors.global.black10};
+
+ &:before {
+ content: '';
+ position: absolute;
+ inset: 0;
+ background: ${props.theme.colors.brand.bc3};
+ opacity: 0;
+
+ transition: opacity .3s ease-in-out;
+ transition-delay: 1s;
+ will-change: opacity;
+ }
+
+ &.selected {
+ &:before {
+ opacity: 1;
+ }
+ }
}
`
);
@@ -38,4 +54,7 @@ export const Container = styled(Div)(
export const SplineJacket = styled(Div)(props => css`
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
+ opacity: 1;
+ z-index: -1;
+ pointer-events: none;
`);
\ No newline at end of file