new row created + deleted icons to replace by text + button outlined

KasarLabs · Nov 30, 2023 · 4481652 · 4481652
1 parent e1acf61
commit 4481652
Show file tree

Hide file tree

Showing 6 changed files with 158 additions and 27 deletions.
diff --git a/frontend/src/assets/deoxys.png b/frontend/src/assets/deoxys.png
diff --git a/frontend/src/components/Chain/Chain.css b/frontend/src/components/Chain/Chain.css
@@ -22,13 +22,13 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.
   height: 100%;
   width: 100%;
 }
-
+/* //ICI */
 .Chain-content-container {
   position: absolute;
   left: 0;
   right: 0;
   bottom: 0;
-  top: 240px;
+  top: 330px;
 }
 
 .Chain-content {

diff --git a/frontend/src/components/Chain/Header.css b/frontend/src/components/Chain/Header.css
@@ -7,10 +7,19 @@
   padding: 20px 0px;
 }
 
+.Header-top-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  padding: 0px 50px;
+}
+
 .Header-row-first{
   display: flex;
-  justify-content: space-evenly;
+  justify-content: space-between;
   align-items: center;
+  width: 100%;
 }
 
 .Header-row-second {
@@ -19,6 +28,7 @@
   align-items: center;
   padding-top: 20px;
   padding-bottom: 20px;
+  gap: 20px;
 }
 
 .Row-icons{
@@ -37,6 +47,8 @@
   margin-top: 10px;
   margin-bottom: 10px;
   border-radius: 10px;
+  width: 100%;
+  margin: 10px 50px;
 }
 
 .Header-tabs {
@@ -52,3 +64,40 @@
   height: 75px;
   border-radius: 50%;
 }
+
+
+.button-outline {
+  background-color: white;
+  /* default background color */
+  border: none;
+  box-shadow:2px 2px 6px rgba(0, 0, 0, 0.1);
+  /* example shadow */
+  color: black;
+  /* default text color */
+  font-size: 16px;
+  /* assuming 'm' size is 16px */
+  font-weight: 400;
+  /* assuming 'normal' weight is 400 */
+  padding: 12px 24px;
+  /* assuming '3xs' and 's' spacings */
+  border-radius: 5px;
+  /* assuming 'm' radius is 8px */
+  cursor: pointer;
+  transition: all 0.2s ease-in-out;
+  margin: 2px;
+}
+
+.button-outline:hover {
+  color: #F5F5F5;
+  background: black;
+}
+
+
+.button-outline.pressed {
+  background-color: black;
+  color: white;
+}
+
+.button-outline.disabled {
+  cursor: not-allowed;
+}
diff --git a/frontend/src/components/Chain/Header.tsx b/frontend/src/components/Chain/Header.tsx
@@ -29,6 +29,7 @@ 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";
@@ -46,29 +47,63 @@ interface HeaderProps {
   setDisplay: (display: ChainDisplay) => void;
 }
 
-export class Header extends React.Component<HeaderProps> {
-  public shouldComponentUpdate(nextProps: HeaderProps) {
+type ButtonId = 'nodes' | 'map' | 'stats' | 'params';
+
+export class Header extends React.Component<HeaderProps, { pressedButton: ButtonId | null }> {
+  public shouldComponentUpdate(nextProps: HeaderProps, nextState: any) {
     return (
       this.props.best !== nextProps.best ||
       this.props.finalized !== nextProps.finalized ||
       this.props.blockTimestamp !== nextProps.blockTimestamp ||
       this.props.blockAverage !== nextProps.blockAverage ||
-      this.props.currentTab !== nextProps.currentTab
+      this.props.currentTab !== nextProps.currentTab ||
+      this.state.pressedButton !== nextState.pressedButton // Add this line
     );
   }
 
+  state = {
+    pressedButton: 'nodes' as ButtonId, // Tracks the button currently pressed
+  };
+
+  // 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-row-first">
+        <div className="Header-top-row">
           <img
-            src={kasarImg}
+            src={deoxysImg}
             alt="Deoxys"
             className="ImageIcon"
           />
+          <div className="Row-icons">
+            <button className="button-outline" onClick={() => window.open('https://github.com/KasarLabs/deoxys')}>
+              Github
+            </button>
+            <button className="button-outline" onClick={() => window.open('https://twitter.com/kasarlabs')}>
+              Twitter
+            </button>
+            <button className="button-outline" onClick={() => window.open('https://deoxys-docs.kasar.io')}>
+              Docs
+            </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">
+
           <div className="Row-tiles">
             <Tile icon={blockIcon} title="Best Block">
               #{formatNumber(best)}
@@ -85,40 +120,52 @@ export class Header extends React.Component<HeaderProps> {
               <Ago when={blockTimestamp} />
             </Tile>
           </div>
-          <div className="Row-icons">
-            <FiGithub size={20} />
-            <PiTwitterLogoBold size={20} />
-            <SiGoogledocs size={20} />
-            <MdOutlineContactSupport size={20} />
-          </div>
+
         </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
-            icon={listIcon}
-            label="List"
+            text="Nodes"
+            label="node"
             display="list"
-            tab=""
+            tab="node"
             current={currentTab}
             setDisplay={setDisplay}
           />
           <Tab
-            icon={worldIcon}
+            text="Map"
             label="Map"
             display="map"
             tab="map"
             current={currentTab}
             setDisplay={setDisplay}
           />
           <Tab
-            icon={statsIcon}
+            text="Stats"
             label="Stats"
             display="stats"
             tab="stats"
             current={currentTab}
             setDisplay={setDisplay}
           />
           <Tab
-            icon={settingsIcon}
+            text="Settings"
             label="Settings"
             display="settings"
             tab="settings"

diff --git a/frontend/src/components/Chain/Tab.css b/frontend/src/components/Chain/Tab.css
@@ -40,3 +40,39 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.
   box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.1);
   color: #000;
 }
+
+
+.button-outline {
+  background-color: white;
+  /* default background color */
+  border: none;
+  box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.1);
+  /* example shadow */
+  color: black;
+  /* default text color */
+  font-size: 16px;
+  /* assuming 'm' size is 16px */
+  font-weight: 400;
+  /* assuming 'normal' weight is 400 */
+  padding: 12px 24px;
+  /* assuming '3xs' and 's' spacings */
+  border-radius: 5px;
+  /* assuming 'm' radius is 8px */
+  cursor: pointer;
+  transition: all 0.2s ease-in-out;
+}
+
+.button-outline:hover {
+  color: #F5F5F5;
+  background: black;
+}
+
+
+.button-outline.pressed {
+  background-color: black;
+  color: white;
+}
+
+.button-outline.disabled {
+  cursor: not-allowed;
+}
diff --git a/frontend/src/components/Chain/Tab.tsx b/frontend/src/components/Chain/Tab.tsx
@@ -16,14 +16,13 @@
 
 import * as React from 'react';
 import { ChainDisplay } from './';
-import { Icon } from '../';
 import { setHashData } from '../../utils';
 
 import './Tab.css';
 
 interface TabProps {
   label: string;
-  icon: string;
+  text: string;
   display: ChainDisplay;
   current: string;
   tab: string;
@@ -32,14 +31,14 @@ interface TabProps {
 
 export class Tab extends React.Component<TabProps> {
   public render() {
-    const { label, icon, display, current } = this.props;
+    const { label, text, display, current } = this.props;
     const highlight = display === current;
-    const className = highlight ? 'Chain-Tab-on Chain-Tab' : 'Chain-Tab';
+    const className = highlight ? 'pressed button-outline' : 'button-outline';
 
     return (
-      <div className={className} onClick={this.onClick} title={label}>
-        <Icon src={icon} />
-      </div>
+      <button className={className} onClick={this.onClick} title={label}>
+        {text}
+      </button>
     );
   }