new modifications for header app

KasarLabs · Dec 3, 2023 · b30c618 · b30c618
1 parent 4481652
commit b30c618
Show file tree

Hide file tree

Showing 7 changed files with 60 additions and 78 deletions.
diff --git a/frontend/assets/index.html b/frontend/assets/index.html
@@ -1,24 +1,28 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <meta name="theme-color" content="#000000">
-    <title>Deoxys Telemetry</title>
-    <script type="text/javascript" src="/tmp/env-config.js"></script>
-    <style>
-      body, html {
-        background: #fff;
-        color: #111;
-      }
-    </style>
-    <link rel="icon" type="image/svg+xml" href="/favicon.svg">
-    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
-  </head>
-  <body>
-    <noscript>
-      You need to enable JavaScript to run this app.
-    </noscript>
-    <div id="root"></div>
-  </body>
-</html>
+
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+  <meta name="theme-color" content="#000000">
+  <title>Deoxys Telemetry</title>
+  <script type="text/javascript" src="/tmp/env-config.js"></script>
+  <style>
+    body,
+    html {
+      background: #fff;
+      color: #111;
+    }
+  </style>
+  <link rel="icon" type="image/svg+xml" href="/favicon.svg">
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
+</head>
+
+<body>
+  <noscript>
+    You need to enable JavaScript to run this app.
+  </noscript>
+  <div id="root"></div>
+</body>
+
+</html>
diff --git 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 <https://www.gnu.org/licenses/>.
 */
+@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
@@ -28,14 +28,15 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.
   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
@@ -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<HeaderProps, { pressedButton: Button
 
   // Event handler for button clicks
   handleButtonClick = (buttonId: ButtonId) => {
-    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 (
       <div className="Header">
         <div className="Header-top-row">
@@ -96,10 +85,6 @@ export class Header extends React.Component<HeaderProps, { pressedButton: Button
             <button className="button-outline" onClick={() => window.open('https://t.me/kasarlabs')}>
               Support
             </button>
-            {/* <FiGithub onClick={() => window.open('https://github.com/KasarLabs/deoxys')} size={30} />
-            <PiTwitterLogoBold onClick={() => window.open('https://twitter.com/kasarlabs')} size={30} />
-            <SiGoogledocs onClick={() => window.open('https://deoxys-docs.kasar.io')} size={30} />
-            <MdOutlineContactSupport onClick={() => window.open('https://t.me/kasarlabs')} size={30} /> */}
           </div>
         </div>
         <div className="Header-row-first">
@@ -123,22 +108,6 @@ export class Header extends React.Component<HeaderProps, { pressedButton: Button
 
         </div>
         <div className="Header-row-second">
-          {/* <button className={`button-outline ${this.state.pressedButton === 'nodes' ? 'pressed' : ''}`}
-            onClick={() => this.handleButtonClick('nodes')}>
-            Nodes
-          </button>
-          <button className={`button-outline ${this.state.pressedButton === 'map' ? 'pressed' : ''}`}
-            onClick={() => this.handleButtonClick('map')}>
-            Map
-          </button>
-          <button className={`button-outline ${this.state.pressedButton === 'stats' ? 'pressed' : ''}`}
-            onClick={() => this.handleButtonClick('stats')}>
-            Stats
-          </button>
-          <button className={`button-outline ${this.state.pressedButton === 'params' ? 'pressed' : ''}`}
-            onClick={() => this.handleButtonClick('params')}>
-            Params
-          </button> */}
 
           <Tab
             text="Nodes"

diff --git a/frontend/src/components/List/THead.css b/frontend/src/components/List/THead.css
@@ -19,6 +19,7 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.
 
 .THead {
   background: #338CF5;
+  color: #fff;
 }
 
 .THeadCell {

diff --git a/frontend/src/components/Tile.css b/frontend/src/components/Tile.css
@@ -19,44 +19,48 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.
 .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
@@ -27,8 +27,10 @@ interface TileProps {
 export function Tile(props: TileProps) {
   return (
     <div className="Tile">
-      <Icon src={props.icon} />
-      <span className="Tile-label">{props.title}</span>
+      <div className="Tile-row">
+        <Icon src={props.icon} />
+        <span className="Tile-label">{props.title}</span>
+      </div>
       <span className="Tile-content">{props.children}</span>
     </div>
   );