Merge pull request #8 from KasarLabs/fix/modifs-03/04

modifs done asked 03-04
KasarLabs · Apr 4, 2024 · 79868bc · 79868bc
2 parents 880afd9 + 71d239b
commit 79868bc
Show file tree

Hide file tree

Showing 14 changed files with 65 additions and 52 deletions.
diff --git a/frontend/assets/favicon.ico b/frontend/assets/favicon.ico
diff --git a/frontend/assets/favicon.svg b/frontend/assets/favicon.svg
diff --git a/frontend/assets/index.html b/frontend/assets/index.html
@@ -16,7 +16,7 @@
         color: #111;
       }
     </style>
-    <link rel="icon" type="image/png+xml" href="/favicon.svg" />
+    <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"

diff --git a/frontend/public/favicon.ico b/frontend/public/favicon.ico
diff --git a/frontend/src/components/Chain/Chain.css b/frontend/src/components/Chain/Chain.css
@@ -19,7 +19,8 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.
 .Chain {
   display: flex;
   flex-direction: column;
-  height: 100%;
+  justify-content: space-between;
+  height: 120vh;
   width: 100%;
 }
 /* //ICI */
@@ -28,7 +29,7 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.
   bottom: 0;
   left: 0;
   right: 0;
-  top: 300px;
+  top: 350px;
   display: flex;
   justify-content: center;
   align-items: center;

diff --git a/frontend/src/components/Chain/Chain.tsx b/frontend/src/components/Chain/Chain.tsx
@@ -83,7 +83,7 @@ export class Chain extends React.Component<ChainProps, ChainState> {
         <div className="Chain-content-container">
           <div className="Chain-content">{this.renderContent()}</div>
         </div>
-        {/* <Footer /> */}
+        <Footer />
       </div>
     );
   }

diff --git a/frontend/src/components/Chain/Footer.css b/frontend/src/components/Chain/Footer.css
@@ -21,9 +21,23 @@
   gap: 10px;
 }
 
+@media (max-width: 900px) {
+  .col-footer {
+    width: 33%;
+  }
+  .img-footer {
+    width: 35px;
+    height: 35px;
+  }
+  .icons-row-footer {
+    flex-wrap: wrap;
+  }
+}
+
 .text-footer {
   margin: 0;
   font-size: 14px;
+  cursor: pointer;
 }
 
 .icons-row-footer {
@@ -34,7 +48,8 @@
 }
 
 .icon-footer {
-  width: 35px;
-  height: 35px;
+  width: 25px;
+  height: 25px;
   color: #666;
+  cursor: pointer;
 }
diff --git a/frontend/src/components/Chain/Footer.tsx b/frontend/src/components/Chain/Footer.tsx
@@ -15,15 +15,36 @@ export class Footer extends React.Component {
         </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>
+          <p
+            className="text-footer"
+            onClick={() => window.open('https://starkcet.com/')}
+          >
+            Starkcet
+          </p>
+          <p
+            className="text-footer"
+            onClick={() => window.open('https://kasar.io/')}
+          >
+            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" />
+            <FaTwitter
+              onClick={() => window.open('https://twitter.com/kasarLabs')}
+              className="icon-footer"
+            />
+            <FaTelegram
+              onClick={() =>
+                window.open('https://web.telegram.org/k/#@kasarlabs')
+              }
+              className="icon-footer"
+            />
+            <FaGithub
+              onClick={() => window.open('https://github.com/KasarLabs')}
+              className="icon-footer"
+            />
           </div>
         </div>
       </div>

diff --git a/frontend/src/components/Chain/Header.css b/frontend/src/components/Chain/Header.css
@@ -52,7 +52,7 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  padding-top: 20px;
+  padding-top: 50px;
   padding-bottom: 20px;
   gap: 20px;
 }

diff --git a/frontend/src/components/Chain/Header.tsx b/frontend/src/components/Chain/Header.tsx
@@ -74,7 +74,17 @@ export class Header extends React.Component<
             <div className="Column-image">
               <p className="text-bold gradient-text">Starknet</p>
               <p className="text-gray text-sm">v0.13.1 (JSON-RPC v0.7.1)</p>
-              <p className="text-gray text-sm">Starknet Mainnet</p>
+              <p
+                onClick={() =>
+                  window.open(
+                    'https://docs.starknet.io/documentation/starknet_versions/version_notes/'
+                  )
+                }
+                style={{ cursor: 'pointer' }}
+                className="text-gray text-sm"
+              >
+                Mainnet
+              </p>
             </div>
           </div>
           <div className="Row-icons">

diff --git a/frontend/src/components/List/THead.css b/frontend/src/components/List/THead.css
@@ -17,7 +17,7 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.
 */
 
 .THead {
-  background: #e6936e;
+  background: #0c0c4f;
   width: 100%;
   color: #fff;
 }
@@ -35,7 +35,7 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.
 
 .THeadCell-sorted {
   cursor: pointer;
-  background: #e6936e;
+  background: #0c0c4f;
   color: #fff;
 }
 

diff --git a/frontend/src/components/OfflineIndicator.css b/frontend/src/components/OfflineIndicator.css
@@ -21,7 +21,7 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.
   bottom: 30px;
   right: 30px;
   z-index: 10;
-  background: #e6936e;
+  background: #0c0c4f;
   line-height: 16px;
   color: #fff;
   font-size: 30px;

diff --git a/frontend/src/components/Settings/Setting.css b/frontend/src/components/Settings/Setting.css
@@ -43,7 +43,7 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.
 }
 
 .Setting-on .Setting-switch {
-  background: #e6936e;
+  background: #0c0c4f;
 }
 
 .Setting-knob {