From b30c618e7b180d5b6852ce49c1c14d0511912ccb Mon Sep 17 00:00:00 2001 From: jb1011 Date: Sun, 3 Dec 2023 12:38:44 +0100 Subject: [PATCH 1/3] new modifications for header app --- frontend/assets/index.html | 48 +++++++++++++----------- frontend/src/App.css | 1 + frontend/src/components/Chain/Chain.css | 7 ++-- frontend/src/components/Chain/Header.tsx | 31 --------------- frontend/src/components/List/THead.css | 1 + frontend/src/components/Tile.css | 44 ++++++++++++---------- frontend/src/components/Tile.tsx | 6 ++- 7 files changed, 60 insertions(+), 78 deletions(-) diff --git a/frontend/assets/index.html b/frontend/assets/index.html index 1f80b6fa..16e70da2 100644 --- a/frontend/assets/index.html +++ b/frontend/assets/index.html @@ -1,24 +1,28 @@ - - - - - Deoxys Telemetry - - - - - - - -
- - + + + + + + Deoxys Telemetry + + + + + + + + +
+ + + \ No newline at end of file diff --git a/frontend/src/App.css b/frontend/src/App.css index 7090598a..99c8d754 100644 --- a/frontend/src/App.css +++ b/frontend/src/App.css @@ -15,6 +15,7 @@ GNU General Public License for more details. You should have received a copy of the GNU General Public License along with this program. If not, see . */ +@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap'); .App { text-align: left; diff --git a/frontend/src/components/Chain/Chain.css b/frontend/src/components/Chain/Chain.css index e284b5e1..9d88a38c 100644 --- a/frontend/src/components/Chain/Chain.css +++ b/frontend/src/components/Chain/Chain.css @@ -28,14 +28,15 @@ along with this program. If not, see . left: 0; right: 0; bottom: 0; - top: 330px; + top: 300px; } .Chain-content { width: 100%; min-width: 1350px; min-height: 100%; - background: #2c2b2b; - color: #fff; + color: #000; + border-radius: 10px; + box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.1); box-shadow: rgba(0, 0, 0, 0.5) 0 3px 30px; } diff --git a/frontend/src/components/Chain/Header.tsx b/frontend/src/components/Chain/Header.tsx index e57fc1b6..e233e732 100644 --- a/frontend/src/components/Chain/Header.tsx +++ b/frontend/src/components/Chain/Header.tsx @@ -24,17 +24,8 @@ import blockIcon from '../../icons/blockchain-icon.svg'; import finalizedIcon from '../../icons/distribute-icon.svg'; import blockTimeIcon from '../../icons/stopwatch-icon.svg'; import lastTimeIcon from '../../icons/timer.svg'; -import listIcon from '../../icons/list-alt-regular.svg'; -import worldIcon from '../../icons/location.svg'; -import settingsIcon from '../../icons/settings.svg'; -import statsIcon from '../../icons/graph.svg'; -import kasarImg from '../../assets/kasarLogo.png' import deoxysImg from '../../assets/deoxys.png' -import { FiGithub } from "react-icons/fi"; -import { PiTwitterLogoBold } from "react-icons/pi"; -import { SiGoogledocs } from "react-icons/si"; -import { MdOutlineContactSupport } from "react-icons/md"; import './Header.css'; @@ -67,14 +58,12 @@ export class Header extends React.Component { - console.log('Button clicked:', buttonId); // Add this line to check if method is called this.setState({ pressedButton: buttonId }); }; public render() { const { best, finalized, blockTimestamp, blockAverage } = this.props; const { currentTab, setDisplay } = this.props; - console.log(this.state.pressedButton) return (
@@ -96,10 +85,6 @@ export class Header extends React.Component window.open('https://t.me/kasarlabs')}> Support - {/* window.open('https://github.com/KasarLabs/deoxys')} size={30} /> - window.open('https://twitter.com/kasarlabs')} size={30} /> - window.open('https://deoxys-docs.kasar.io')} size={30} /> - window.open('https://t.me/kasarlabs')} size={30} /> */}
@@ -123,22 +108,6 @@ export class Header extends React.Component
- {/* - - - */} . .THead { background: #338CF5; + color: #fff; } .THeadCell { diff --git a/frontend/src/components/Tile.css b/frontend/src/components/Tile.css index e76883fd..a42abd6d 100644 --- a/frontend/src/components/Tile.css +++ b/frontend/src/components/Tile.css @@ -19,44 +19,48 @@ along with this program. If not, see . .Tile { font-size: 1.8em; /* Increased text size */ text-align: left; - width: 200px; - height: 80px; - display: inline-block; - position: relative; + width: 25%; + display: flex; + flex-direction: column; align-items: center; - border-radius: 10px; - padding: 20px; + justify-content: center; color: black; - margin: 20px; + border-right: 1px solid #666; + padding: 10px 0px; + margin: 10px; +} + +.Row-tiles .Tile:last-child { + border-right: none; +} + +.Tile-row { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + width: 100%; + gap: 10px; } .Tile-label { - position: absolute; background-color: transparent; padding: 2px; - left: 50px; - right: 0; font-size: 0.6em; /* Increased text size */ - font-weight: 600; /* Increased text weight */ + font-weight: 800; /* Increased text weight */ color: black; } .Tile-content { - position: absolute; - bottom: 10px; background-color: transparent; padding: 2px; - left: 50px; - right: 0; - font-weight: 600; /* Increased text weight */ - font-size: 0.6em; /* Increased text size */ - color: black; + font-weight: 400; /* Increased text weight */ + font-size: 0.5em; /* Increased text size */ + color: #666; } .Tile .Icon { - position: absolute; background-color: transparent; - left: 15px; font-size: 0.9em; /* Increased text size */ color: black; border: none; diff --git a/frontend/src/components/Tile.tsx b/frontend/src/components/Tile.tsx index 84f8e809..80020bc4 100644 --- a/frontend/src/components/Tile.tsx +++ b/frontend/src/components/Tile.tsx @@ -27,8 +27,10 @@ interface TileProps { export function Tile(props: TileProps) { return (
- - {props.title} +
+ + {props.title} +
{props.children}
); From f2eb112c86dd3a3546150917946c4b9729c556af Mon Sep 17 00:00:00 2001 From: jb1011 Date: Sun, 3 Dec 2023 13:42:30 +0100 Subject: [PATCH 2/3] new title added in header + letter spacing --- frontend/src/components/Chain/Header.css | 28 ++++++++++++++++++++++++ frontend/src/components/Chain/Header.tsx | 16 +++++++++----- frontend/src/components/Tile.css | 1 + 3 files changed, 40 insertions(+), 5 deletions(-) diff --git a/frontend/src/components/Chain/Header.css b/frontend/src/components/Chain/Header.css index 0d17822b..b96a3779 100644 --- a/frontend/src/components/Chain/Header.css +++ b/frontend/src/components/Chain/Header.css @@ -7,6 +7,34 @@ padding: 20px 0px; } +.Image-row { + display: flex; + justify-content: center; + align-items: center; + gap: 10px; +} + +.Column-image { + display: flex; + flex-direction: column; + justify-content: center; + align-items: start; + gap: 5px; +} + +.Column-image p { + margin: 0; +} + +.text-gray { + color: #666; +} + +.text-bold { + font-size: 1.5rem; + font-weight: 800; +} + .Header-top-row { display: flex; justify-content: space-between; diff --git a/frontend/src/components/Chain/Header.tsx b/frontend/src/components/Chain/Header.tsx index e233e732..ac3b3b60 100644 --- a/frontend/src/components/Chain/Header.tsx +++ b/frontend/src/components/Chain/Header.tsx @@ -67,11 +67,17 @@ export class Header extends React.Component
- Deoxys +
+ Deoxys +
+

Deoxis

+

v0.1.0-alpha

+
+