layout changed in header

KasarLabs · Nov 26, 2023 · e1acf61 · e1acf61
1 parent cdf8282
commit e1acf61
Show file tree

Hide file tree

Showing 9 changed files with 137 additions and 89 deletions.
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -16,7 +16,8 @@
   "dependencies": {
     "@polkadot/util-crypto": "^10.1.7",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "react-icons": "^4.12.0"
   },
   "devDependencies": {
     "@types/jest": "29.4.0",

diff --git a/frontend/src/components/Chain/Chain.css b/frontend/src/components/Chain/Chain.css
@@ -16,12 +16,19 @@ You should have received a copy of the GNU General Public License
 along with this program. If not, see <https://www.gnu.org/licenses/>.
 */
 
+.Chain {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  width: 100%;
+}
+
 .Chain-content-container {
   position: absolute;
   left: 0;
   right: 0;
   bottom: 0;
-  top: 148px;
+  top: 240px;
 }
 
 .Chain-content {

diff --git a/frontend/src/components/Chain/Header.css b/frontend/src/components/Chain/Header.css
@@ -1,49 +1,54 @@
-/*
-Source code for the Substrate Telemetry Server.
-Copyright (C) 2023 Parity Technologies (UK) Ltd.
-
-This program is free software: you can redistribute it and/or modify
-it under the terms of the GNU General Public License as published by
-the Free Software Foundation, either version 3 of the License, or
-(at your option) any later version.
-
-This program is distributed in the hope that it will be useful,
-but WITHOUT ANY WARRANTY; without even the implied warranty of
-MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-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/>.
-*/
-
 .Header {
   width: 100%;
-  height: 200px;
-  overflow: hidden;
   color: #000;
   min-width: 1350px;
-  position: relative;
+  display: flex;
+  flex-direction: column;  
+  padding: 20px 0px;
+}
+
+.Header-row-first{
+  display: flex;
+  justify-content: space-evenly;
+  align-items: center;
+}
+
+.Header-row-second {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding-top: 20px;
+  padding-bottom: 20px;
+}
+
+.Row-icons{
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 10px;
+  cursor: pointer;
+}
+
+.Row-tiles {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.1);
+  margin-top: 10px;
+  margin-bottom: 10px;
+  border-radius: 10px;
 }
 
 .Header-tabs {
-  position: absolute;
-  right: 5px;
   bottom: 30%;
   width: 1250px;
   text-align: left;
   display: flex;
   flex-direction: row;
 }
 
-
 .ImageIcon {
-  position: relative;
-  left: 20px;
   width: 75px;
   height: 75px;
   border-radius: 50%;
-  font-size: 2.5em;
-  bottom: 12%;
-  margin-left: 10px;
-  margin-right: 50px;
 }
diff --git a/frontend/src/components/Chain/Header.tsx b/frontend/src/components/Chain/Header.tsx
@@ -30,6 +30,11 @@ import settingsIcon from '../../icons/settings.svg';
 import statsIcon from '../../icons/graph.svg';
 import kasarImg from '../../assets/kasarLogo.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';
 
 interface HeaderProps {
@@ -58,57 +63,69 @@ export class Header extends React.Component<HeaderProps> {
 
     return (
       <div className="Header">
-        <img
-          src={kasarImg}
-          alt="Deoxys"
-          className='ImageIcon'
-        />
-        <Tile icon={blockIcon} title="Best Block">
-          #{formatNumber(best)}
-        </Tile>
-        <Tile icon={finalizedIcon} title="Finalized Block">
-          #{formatNumber(finalized)}
-        </Tile>
-        <Tile icon={lastTimeIcon} title="Average Time">
-          {blockAverage == null
-            ? '-'
-            : secondsWithPrecision(blockAverage / 1000)}
-        </Tile>
-        <Tile icon={blockTimeIcon} title="Last Block">
-          <Ago when={blockTimestamp} />
-        </Tile>
-        <Tab
-          icon={listIcon}
-          label="List"
-          display="list"
-          tab=""
-          current={currentTab}
-          setDisplay={setDisplay}
-        />
-        <Tab
-          icon={worldIcon}
-          label="Map"
-          display="map"
-          tab="map"
-          current={currentTab}
-          setDisplay={setDisplay}
-        />
-        <Tab
-          icon={statsIcon}
-          label="Stats"
-          display="stats"
-          tab="stats"
-          current={currentTab}
-          setDisplay={setDisplay}
-        />
-        <Tab
-          icon={settingsIcon}
-          label="Settings"
-          display="settings"
-          tab="settings"
-          current={currentTab}
-          setDisplay={setDisplay}
-        />
+        <div className="Header-row-first">
+          <img
+            src={kasarImg}
+            alt="Deoxys"
+            className="ImageIcon"
+          />
+          <div className="Row-tiles">
+            <Tile icon={blockIcon} title="Best Block">
+              #{formatNumber(best)}
+            </Tile>
+            <Tile icon={finalizedIcon} title="Finalized Block">
+              #{formatNumber(finalized)}
+            </Tile>
+            <Tile icon={lastTimeIcon} title="Average Time">
+              {blockAverage == null
+                ? '-'
+                : secondsWithPrecision(blockAverage / 1000)}
+            </Tile>
+            <Tile icon={blockTimeIcon} title="Last Block">
+              <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">
+          <Tab
+            icon={listIcon}
+            label="List"
+            display="list"
+            tab=""
+            current={currentTab}
+            setDisplay={setDisplay}
+          />
+          <Tab
+            icon={worldIcon}
+            label="Map"
+            display="map"
+            tab="map"
+            current={currentTab}
+            setDisplay={setDisplay}
+          />
+          <Tab
+            icon={statsIcon}
+            label="Stats"
+            display="stats"
+            tab="stats"
+            current={currentTab}
+            setDisplay={setDisplay}
+          />
+          <Tab
+            icon={settingsIcon}
+            label="Settings"
+            display="settings"
+            tab="settings"
+            current={currentTab}
+            setDisplay={setDisplay}
+          />
+        </div>
       </div>
     );
   }

diff --git a/frontend/src/components/Chain/Tab.css b/frontend/src/components/Chain/Tab.css
@@ -17,8 +17,7 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.
 */
 
 .Chain-Tab {
-  position: relative;
-  display: inline-flex;
+  display: flex;
   align-items: center;
   justify-content: center;
   margin-right: 5px;

diff --git a/frontend/src/components/OfflineIndicator.css b/frontend/src/components/OfflineIndicator.css
@@ -18,7 +18,7 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.
 
 .OfflineIndicator {
   position: absolute;
-  top: 30px;
+  bottom: 30px;
   right: 30px;
   z-index: 10;
   background: #338cf5;

diff --git a/frontend/src/components/Tile.css b/frontend/src/components/Tile.css
@@ -27,7 +27,6 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.
   border-radius: 10px;
   padding: 20px;
   color: black;
-  box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.1);
   margin: 20px;
 }
 

diff --git a/frontend/yarn.lock b/frontend/yarn.lock
@@ -4549,6 +4549,11 @@
     "loose-envify" "^1.1.0"
     "scheduler" "^0.23.0"
 
+"react-icons@^4.12.0":
+  "integrity" "sha512-IBaDuHiShdZqmfc/TwHu6+d6k2ltNCf3AszxNmjJc1KUfXdEeRJOKyNvLmAHaarhzGmTSVygNdyu8/opXv2gaw=="
+  "resolved" "https://registry.npmjs.org/react-icons/-/react-icons-4.12.0.tgz"
+  "version" "4.12.0"
+
 "react-is@^16.13.1":
   "integrity" "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
   "resolved" "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz"
@@ -4559,7 +4564,7 @@
   "resolved" "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz"
   "version" "18.2.0"
 
-"react@^18.2.0":
+"react@*", "react@^18.2.0":
   "integrity" "sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ=="
   "resolved" "https://registry.npmjs.org/react/-/react-18.2.0.tgz"
   "version" "18.2.0"