New Apps UI (#406)

* fix style of cards * fix desktop style * fix header button style * fix mobile style * add new font and fix style of texts * fix footer * fix header * fix(lint error): fix all lint errors * Update src/components/Hero.tsx --------- Co-authored-by: Hamid Roohi <[email protected]> Co-authored-by: fisher <[email protected]> Co-authored-by: Hamid Roohi <[email protected]>
darwinia-network · Apr 23, 2024 · 9dec514 · 9dec514
1 parent 71e9463
commit 9dec514
Show file tree

Hide file tree

Showing 32 changed files with 140 additions and 41 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -9,7 +9,7 @@ function App() {
         <Header />
       </div>
 
-      <div className="pb-0 pt-[3.125rem] lg:pb-[4.375rem] lg:pt-[3.75rem]">
+      <div className="pb-0 lg:pb-[4.375rem]">
         <Outlet />
       </div>
 

diff --git a/src/assets/DownArrow.svg b/src/assets/DownArrow.svg
diff --git a/src/assets/darwiniabtnlogo.svg b/src/assets/darwiniabtnlogo.svg
diff --git a/src/assets/headerbtnlogo.svg b/src/assets/headerbtnlogo.svg
diff --git a/src/assets/herobg.png b/src/assets/herobg.png
diff --git a/src/assets/mobileMenuIcon.svg b/src/assets/mobileMenuIcon.svg
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
@@ -1,13 +1,13 @@
-import { useTranslation } from "react-i18next";
+// import { useTranslation } from "react-i18next";
 
 import twitter from "../assets/social/twitter.svg";
 import telegram from "../assets/social/telegram.svg";
 import discord from "../assets/social/discord.svg";
-import element from "../assets/social/element.svg";
+// import element from "../assets/social/element.svg";
 import github from "../assets/social/github.svg";
 import medium from "../assets/social/medium.svg";
 import email from "../assets/social/email.svg";
-import lng from "../assets/lng.svg";
+// import lng from "../assets/lng.svg";
 
 const socialCfg: { icon: string; link: string; isMail?: boolean }[] = [
   {
@@ -22,10 +22,10 @@ const socialCfg: { icon: string; link: string; isMail?: boolean }[] = [
     icon: discord,
     link: "https://discord.com/invite/aQdK9H4MZS",
   },
-  {
-    icon: element,
-    link: "https://app.element.io/#/room/#darwinia:matrix.org",
-  },
+  // {
+  //   icon: element,
+  //   link: "https://app.element.io/#/room/#darwinia:matrix.org",
+  // },
   {
     icon: github,
     link: "https://github.com/darwinia-network",
@@ -41,7 +41,7 @@ const socialCfg: { icon: string; link: string; isMail?: boolean }[] = [
 ];
 
 export const Footer = () => {
-  const { i18n } = useTranslation();
+  // const { i18n } = useTranslation();
 
   return (
     <div className="container flex items-center justify-between">
@@ -59,13 +59,13 @@ export const Footer = () => {
           </a>
         ))}
 
-        <button
+        {/* <button
           className="flex items-center gap-[0.3125rem] transition hover:opacity-80 active:scale-95"
           onClick={() => i18n.changeLanguage(i18n.language === "en" ? "zh" : "en")}
         >
           <img alt="..." src={lng} />
           <span className="text-normal text-sm text-white/50">{i18n.language === "en" ? "EN" : "ZH"}</span>
-        </button>
+        </button> */}
       </div>
     </div>
   );

diff --git a/src/components/Header.tsx b/src/components/Header.tsx
@@ -1,4 +1,8 @@
 import logo from "../assets/app-logo.svg";
+// import darwiniabtnlogo from "../assets/darwiniabtnlogo.svg";
+// import headerbtnlogo from "../assets/headerbtnlogo.svg";
+import mobileMenuIcon from "../assets/mobileMenuIcon.svg";
+// import DownArrow from "../assets/DownArrow.svg";
 import { Link, useMatch } from "react-router-dom";
 import { useTranslation } from "react-i18next";
 import { useWallet } from "../hooks/wallet";
@@ -21,14 +25,35 @@ export const Header = () => {
         ) : null}
       </div>
       {isHome ? (
-        <a
-          className="text-light bg-bg-primary px-[15px] py-[7px] text-sm text-white transition hover:opacity-80 active:scale-95 lg:border lg:border-primary"
-          target="_blank"
-          rel="noopener noreferrer"
-          href="https://github.com/darwinia-network/apps/blob/master/README.md#how-to-add-your-portal"
-        >
-          {t("Submit")}
-        </a>
+        <>
+          <div className="flex items-center gap-[0.625rem]">
+            <a
+              className="text-light min-h-[2.25rem] bg-[#242A2E] px-[15px] py-[7px] text-sm text-white transition hover:opacity-80 active:scale-95 lg:border lg:border-primary"
+              target="_blank"
+              rel="noopener noreferrer"
+              href="https://github.com/darwinia-network/apps/blob/master/README.md#how-to-add-your-portal"
+            >
+              {t("Submit")}
+            </a>
+            <button className="h-[2.25rem] w-[2.25rem] bg-[#242A2E] p-[0.625rem] lg:hidden lg:border lg:border-primary">
+              <img src={mobileMenuIcon} alt="mobileMenuIcon" className="" />
+            </button>
+          </div>
+          {/* <div className=" hidden items-center gap-[0.625rem] lg:flex">
+            <div className="flex cursor-pointer items-center gap-[0.313rem] rounded-[0.313rem] bg-[#242A2E] px-[0.625rem] py-[0.5rem]">
+              <img src={darwiniabtnlogo} alt="darwiniabtnlogo" />
+              <span className="text-[0.875rem] font-[400] leading-[1.5rem] text-white">Darwinia</span>
+              <button
+                className="h-[1rem] w-[1rem] bg-cover bg-center"
+                style={{ backgroundImage: `url(${DownArrow})` }}
+              ></button>
+            </div>
+            <div className="flex cursor-pointer items-center gap-[0.313rem] rounded-[0.313rem] bg-[#242A2E] px-[0.625rem] py-[0.5rem]">
+              <img src={headerbtnlogo} alt="darwiniabtnlogo" />
+              <span className="text-[0.875rem] font-[400] leading-[1.5rem] text-white">0x0E5...f204</span>
+            </div>
+          </div> */}
+        </>
       ) : null}
       {isLocalSubkeyMigration ? (
         <button