adapt UI changes; rev.2

Signed-off-by: Uncle Fatso <uncle.fatso@ghostchain.io>

package.json

@@ -1,6 +1,6 @@
 {
     "name": "ghost-lite",
-    "version": "0.2.2",
+    "version": "0.2.3",
     "description": "Web application for Ghost and Casper chain.",
     "author": "Uncle f4ts0 <f4ts0@ghostchain.io>",
     "maintainers": [

src/components/Sidebar.tsx

@@ -1,5 +1,7 @@
 import { HeartPulse, SendToBack, Book, Users } from "lucide-react"
-import { FaGithub } from "react-icons/fa"
+import { IoEarthOutline } from "react-icons/io5";
+import { FaGithub, FaDiscord, FaTelegramPlane } from "react-icons/fa"
+import { FaXTwitter } from "react-icons/fa6";
 import { Link, useLocation } from "react-router-dom"
 import { useEffect } from "react"
 import ReactGA from "react-ga4";
@@ -88,12 +90,13 @@ export const Sidebar = () => {
 
     return (
         <header className="h-full sticky top-0 flex">
-            <div className="h-[full] bg-muted flex flex-col md:w-60 w-[100px]">
+            <div className="h-[full] bg-muted flex flex-col w-[264px]">
                 <div className="md:px-6 md:pt-5 md:pb-2 p-2 pt-6">
                     <div className="flex items-center">
                         <div className="grow">
-                            <div className="flex justify-center items-center">
+                            <div className="flex flex-col gap-2 justify-center items-center">
                                 <Logo cName="md:w-[80%] cursor-pointer fill-primary hover:fill-accent w-full" />
+                                <div className="text-base text-xs">Version {pckg.version}</div>
                             </div>
                         </div>
                     </div>
@@ -124,23 +127,52 @@ export const Sidebar = () => {
                             <span className={`md:block hidden ${cName("title", currentPath, "nominations")}`} >Nominations</span>
                         </div>
                     </Link>
+                    <Link
+                        rel="noreferrer"
+                        to="https://ecosystem.ghostchain.io"
+                        target="_blank"
+                        className={cName("item", currentPath, "ecosystem")}
+                    >
+                        <IoEarthOutline className={cName("icon", currentPath, "ecosystem")} />
+                        <span className={`md:block hidden ${cName("title", currentPath, "ecosystem")}`} >Ecosystem</span>
+                    </Link>
                 </ul>
 
                 <div className="w-full text-center flex-grow flex flex-col justify-end">
                     <hr className="m-0" />
-                    <div className="block float-left px-6 py-4 cursor-pointer">
+                    <div className="my-2 w-full h-[50px] flex flex-row justify-around items-center">
-                        <a
+                        <Link
-                            href="https://git.ghostchain.io/ghostchain/ghost-lite"
-                            target="_blank"
                             rel="noreferrer"
-                            className="flex justify-center items-center md:flex-row flex-col gap-4"
+                            to="https://git.ghostchain.io/ghostchain/ghost-extension-wallet"
+                            target="_blank"
+                            className="text-base hover:text-accent"
                         >
-                            <FaGithub className="w-8 h-8" />
+                            <FaGithub className="w-6 h-6" />
-                            <div className="block float-left text-xs text-left">
+                        </Link>
-                                <div className="md:block hidden text-primary">GHOST Lite Git</div>
+                        <Link
-                                <div className="text-accent">v {pckg.version}</div>
+                            rel="noreferrer"
-                            </div>
+                            to="https://x.com/realGhostChain"
-                        </a>
+                            target="_blank"
+                            className="text-base hover:text-accent"
+                        >
+                            <FaXTwitter className="w-6 h-6" />
+                        </Link>
+                        <Link
+                            rel="noreferrer"
+                            to="https://discord.com/invite/CvYP7vrqN3"
+                            target="_blank"
+                            className="text-base hover:text-accent"
+                        >
+                            <FaDiscord className="w-6 h-6" />
+                        </Link>
+                        <Link
+                            rel="noreferrer"
+                            to="https://t.me/realGhostChain"
+                            target="_blank"
+                            className="text-base hover:text-accent"
+                        >
+                            <FaTelegramPlane className="w-6 h-6" />
+                        </Link>
                     </div>
                 </div>
             </div>

src/style.css

@@ -6,7 +6,8 @@
         --background: 211 57% 28%;
         --foreground: 53 83% 69%;
 
-        --muted: 212 44% 37%;
+        /* --muted: 212 44% 37%; */
+        --muted: 212 33% 47%;
         --muted-foreground: 53 100% 89%;
 
         --popover: 150 40% 98.04%;