Merge pull request #4 from KasarLabs/feat/display-front

Feat/display front
KasarLabs · Jan 11, 2024 · e198202 · e198202
2 parents eb74f2a + b127e39
commit e198202
Show file tree

Hide file tree

Showing 22 changed files with 315 additions and 6,119 deletions.
diff --git a/frontend/assets/index.html b/frontend/assets/index.html
@@ -1,28 +1,30 @@
 <!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/png+xml" href="/favicon.svg" />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap"
+      rel="stylesheet"
+    />
+  </head>
 
-<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/png+xml" href="/favicon.ico">
-  <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>
+  <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
@@ -33,3 +33,8 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.
   text-align: center;
   color: #888;
 }
+
+.text-bold {
+  font-family: 'Inter', Helvetica, Arial, sans-serif;
+  font-weight: 700;
+}
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
@@ -16,7 +16,14 @@
 
 import * as React from 'react';
 import { Types, SortedCollection, Maybe, Compare } from './common';
-import { AllChains, Chains, Chain, Ago, OfflineIndicator } from './components';
+import {
+  AllChains,
+  Chains,
+  Chain,
+  Ago,
+  OfflineIndicator,
+  Footer,
+} from './components';
 import { Row, Column } from './components/List';
 import { Connection } from './Connection';
 import { Persistent, PersistentObject, PersistentSet } from './persist';

diff --git a/frontend/src/components/Chain/Chain.css b/frontend/src/components/Chain/Chain.css
@@ -25,18 +25,20 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.
 /* //ICI */
 .Chain-content-container {
   position: absolute;
+  bottom: 0;
   left: 0;
   right: 0;
-  bottom: 0;
   top: 300px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }
 
 .Chain-content {
-  width: 100%;
-  min-width: 1350px;
   min-height: 100%;
   color: #000;
+  background-color: #fff;
   border-radius: 10px;
+  padding: 0px 10%;
   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/Chain.tsx b/frontend/src/components/Chain/Chain.tsx
@@ -24,6 +24,7 @@ import {
 } from '../../state';
 import { getHashData } from '../../utils';
 import { Header } from './';
+import { Footer } from './';
 import { List, Map, Settings, Stats } from '../';
 import { Persistent, PersistentObject, PersistentSet } from '../../persist';
 
@@ -82,6 +83,7 @@ export class Chain extends React.Component<ChainProps, ChainState> {
         <div className="Chain-content-container">
           <div className="Chain-content">{this.renderContent()}</div>
         </div>
+        {/* <Footer /> */}
       </div>
     );
   }

diff --git a/frontend/src/components/Chain/Footer.css b/frontend/src/components/Chain/Footer.css
@@ -0,0 +1,40 @@
+/* Footer.module.css */
+
+.main-footer {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0px 15%;
+  padding: 20px 15%;
+}
+.img-footer {
+  width: 50px;
+  height: 50px;
+}
+
+.col-footer {
+  display: flex;
+  align-items: start;
+  justify-content: center;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.text-footer {
+  margin: 0;
+  font-size: 14px;
+}
+
+.icons-row-footer {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 5px;
+}
+
+.icon-footer {
+  width: 35px;
+  height: 35px;
+  color: #666;
+}
diff --git a/frontend/src/components/Chain/Footer.tsx b/frontend/src/components/Chain/Footer.tsx
@@ -0,0 +1,32 @@
+import * as React from 'react';
+import './Footer.css';
+import kasarLogo from '../../assets/kasarLogo.png';
+import { FaTwitter } from 'react-icons/fa';
+import { FaTelegram } from 'react-icons/fa6';
+import { FaGithub } from 'react-icons/fa';
+
+export class Footer extends React.Component {
+  public render() {
+    return (
+      <div className="main-footer">
+        <div className="col-footer">
+          <img className="img-footer" src={kasarLogo} />
+          <p>©2023 KasarLabs. All Rights Reserved.</p>
+        </div>
+        <div className="col-footer">
+          <p className="text-bold text-footer">Products</p>
+          <p className="text-footer">Starkcet</p>
+          <p className="text-footer">Starknode</p>
+        </div>
+        <div className="col-footer">
+          <p className="text-bold text-footer">Contact us</p>
+          <div className="icons-row-footer">
+            <FaTwitter className="icon-footer" />
+            <FaTelegram className="icon-footer" />
+            <FaGithub className="icon-footer" />
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
diff --git a/frontend/src/components/Chain/Header.css b/frontend/src/components/Chain/Header.css
@@ -3,8 +3,8 @@
   color: #000;
   min-width: 1350px;
   display: flex;
-  flex-direction: column;  
-  padding: 20px 0px;
+  flex-direction: column;
+  padding: 20px 10%;
 }
 
 .Image-row {
@@ -30,24 +30,24 @@
   color: #666;
 }
 
-.text-bold {
-  font-size: 1.5rem;
-  font-weight: 800;
+.text-sm {
+  font-size: 12px;
 }
 
 .Header-top-row {
   display: flex;
   justify-content: space-between;
   align-items: center;
   width: 100%;
-  padding: 0px 50px;
+  padding: 0px 15% 20px 15%;
 }
 
-.Header-row-first{
+.Header-row-first {
   display: flex;
   justify-content: space-between;
   align-items: center;
   width: 100%;
+  padding: 0px 15%;
 }
 
 .Header-row-second {
@@ -59,7 +59,7 @@
   gap: 20px;
 }
 
-.Row-icons{
+.Row-icons {
   display: flex;
   justify-content: center;
   align-items: center;
@@ -76,7 +76,7 @@
   margin-bottom: 10px;
   border-radius: 10px;
   width: 100%;
-  margin: 10px 50px;
+  margin: 10px 0px;
 }
 
 .Header-tabs {
@@ -93,12 +93,11 @@
   border-radius: 50%;
 }
 
-
 .button-outline {
   background-color: white;
   /* default background color */
   border: none;
-  box-shadow:2px 2px 6px rgba(0, 0, 0, 0.1);
+  box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.1);
   /* example shadow */
   color: black;
   /* default text color */
@@ -116,16 +115,23 @@
 }
 
 .button-outline:hover {
-  color: #F5F5F5;
+  color: #f5f5f5;
   background: black;
 }
 
-
 .button-outline.pressed {
   background-color: black;
   color: white;
 }
 
 .button-outline.disabled {
   cursor: not-allowed;
-}
+}
+
+.gradient-text {
+  background: linear-gradient(to right, #338cf5, #4fd1c5);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+  color: transparent; /* Fallback for browsers that do not support text-fill-color */
+}