Presentable data now working and reduced code

eigerco · Apr 23, 2024 · 9a58192 · 9a58192
1 parent e812c45
commit 9a58192
Show file tree

Hide file tree

Showing 12 changed files with 1,398 additions and 121 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -23,6 +23,7 @@
     "framer-motion": "^11.0.20",
     "gsap": "^3.12.5",
     "lumina-node-wasm": "file:app/packages/lumina-node-wasm",
+    "mobx-react-lite": "^4.0.7",
     "next": "^14.0.2",
     "next-image-export-optimizer": "^1.12.3",
     "next-transpile-modules": "^10.0.1",

diff --git a/public/cfg.json b/public/cfg.json
@@ -1,5 +1,5 @@
 {
-    "network":0,
-    "bootnodes":["/dns4/lumina.eiger.co/udp/2121/quic-v1/webtransport/p2p/12D3KooW9z4jLqwodwNRcSa5qgcSgtJ13kN7CYLcwZQjPRYodqWx"],
-    "genesis_hash":"6BE39EFD10BA412A9DB5288488303F5DD32CF386707A5BEF33617F4C43301872"
+    "network": 0,
+    "bootnodes": ["/dns4/lumina.eiger.co/udp/2121/quic-v1/webtransport/p2p/12D3KooW9z4jLqwodwNRcSa5qgcSgtJ13kN7CYLcwZQjPRYodqWx"],
+    "genesis_hash": "6BE39EFD10BA412A9DB5288488303F5DD32CF386707A5BEF33617F4C43301872"
 }
diff --git a/public/lumina.svg b/public/lumina.svg
diff --git a/src/parts/Form/Input/index.jsx b/src/parts/Form/Input/index.jsx
@@ -6,18 +6,22 @@ import React from 'react';
 
 // Styles
 // ------------
-import { Jacket } from './styles';
+import { Jacket, Field } from './styles';
 
 // Component
 // ------------
 const Input = ({
+    name,
     value,
     onChange,
     placeholder,
     type = 'text',
+    light,
 }) => {
     return (
-        <Jacket type={type} onChange={onChange} value={value ? value : ``} placeholder={placeholder} />
+        <Jacket>
+            <Field $light={light} name={name} type={type} onChange={onChange} value={value ? value : ``} placeholder={placeholder} />
+        </Jacket>
     );
 }
 

diff --git a/src/parts/Form/Input/styles.js b/src/parts/Form/Input/styles.js
@@ -5,10 +5,21 @@ import { bp } from '@tackl';
 
 // Exports
 // ------------
-export const Jacket = styled.input(
+export const Jacket = styled.div(
     props => css`
         position: relative;
         width: 100%;
-        padding: 1.2rem;
+        padding: .3rem;
+        border-radius: .6rem;
+        border: 1px solid ${props.theme.colors.brand.bc1};
     `
 );
+
+export const Field = styled.input(props => css`
+    position: relative;
+    width: 100%;
+    padding: 1.2rem;
+    border-radius: .6rem;
+    background: ${props.$light ? props.theme.colors.global.black05 : props.theme.colors.global.white10};
+    color: ${props.$light ? props.theme.colors.global.black : props.theme.colors.brand.bc2};
+`);