wip: now logo + console fix + hiding ext links

tabarra · Dec 30, 2023 · c073303 · c073303
1 parent d71c9e3
commit c073303
Show file tree

Hide file tree

Showing 9 changed files with 136 additions and 42 deletions.
diff --git a/docs/dev_notes.md b/docs/dev_notes.md
@@ -195,7 +195,7 @@ setTimeout(() => {
     - [x] flow to refresh the permissions on the client side
 - [x][2d] full setup flow (legacy)
 - [x][1d] full deployer flow (legacy)
-- [ ][1d] add the new logos to shell+auth pages
+- [x][1d] add the new logos to shell+auth pages
 > BETA RELEASE
 
 - [ ][3d] NEW PAGE: Dashboard
@@ -215,7 +215,7 @@ Quickies
 - [x] move the socket.io stuff from mainshell to a dedicated component child of mainshell
 - [x] disable testing page in prod build
 - [x] check if strict mode is indeed disabled in prod build
-- [ ] fix the console bg on light mode + command input
+- [x] fix the console bg on light mode + command input
 - [ ] commit the fixes for the player ids and god mode issues
 - [ ] fix the tsc build
 > BETA RELEASE

diff --git a/panel/src/components/KickIcons.tsx b/panel/src/components/KickIcons.tsx
@@ -1,7 +1,11 @@
-export function KickAllIcon({style}: {style?: React.CSSProperties}) {
-    return <svg style={style} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M18.97 18.35a3.076 3.076 0 0 1-3.42 3.4h-7.1a4.075 4.075 0 0 1-1.529-.25.75.75 0 1 1 .558-1.4 2.679 2.679 0 0 0 .971.146h7.1c1.363 0 1.92-.55 1.92-1.9a3.42 3.42 0 0 0-3.4-3.7.748.748 0 0 1-.714-.783.768.768 0 0 1 .783-.715 4.872 4.872 0 0 1 4.831 5.202zm-12.67.407L2.53 22.53a.75.75 0 0 1-1.06-1.06l3.579-3.579a4.81 4.81 0 0 1 4.721-4.722l1.486-1.485a3.755 3.755 0 1 1 4.428-4.428l2.95-2.95a1.407 1.407 0 0 0-1.124-.556 1.345 1.345 0 0 0-.947.367.75.75 0 1 1-1.046-1.074 2.832 2.832 0 0 1 1.993-.793 2.9 2.9 0 0 1 2.184 1l1.776-1.78a.75.75 0 0 1 1.06 1.06L6.3 18.756zm6.55-8.667 1.24-1.24a2.29 2.29 0 0 0 .17-.84 2.255 2.255 0 1 0-2.25 2.25 2.29 2.29 0 0 0 .84-.17zm5.94-1.41h-.22a.75.75 0 0 0 0 1.5h.22a2.261 2.261 0 0 1 2.46 2.47c0 .864-.309 1.17-1.18 1.17h-.36a.75.75 0 0 0 0 1.5h.36a2.435 2.435 0 0 0 2.68-2.67 3.76 3.76 0 0 0-3.96-3.97zM5.922 8.035a.75.75 0 1 0 .3-1.471A1.421 1.421 0 0 1 6.51 3.75a1.386 1.386 0 0 1 .956.375.749.749 0 0 0 1.029-1.09A2.875 2.875 0 0 0 6.51 2.25a2.922 2.922 0 0 0-.588 5.785zM3.93 15.32h.35a.75.75 0 1 0 0-1.5h-.35c-.871 0-1.18-.306-1.18-1.17a2.261 2.261 0 0 1 2.46-2.47h.99a.75.75 0 0 0 0-1.5h-.99a3.726 3.726 0 0 0-3.96 3.97 2.435 2.435 0 0 0 2.68 2.67z"/></svg>;
+export function KickAllIcon({ style }: { style?: React.CSSProperties }) {
+    return <svg style={style} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+        <path d="M18.97 18.35a3.076 3.076 0 0 1-3.42 3.4h-7.1a4.075 4.075 0 0 1-1.529-.25.75.75 0 1 1 .558-1.4 2.679 2.679 0 0 0 .971.146h7.1c1.363 0 1.92-.55 1.92-1.9a3.42 3.42 0 0 0-3.4-3.7.748.748 0 0 1-.714-.783.768.768 0 0 1 .783-.715 4.872 4.872 0 0 1 4.831 5.202zm-12.67.407L2.53 22.53a.75.75 0 0 1-1.06-1.06l3.579-3.579a4.81 4.81 0 0 1 4.721-4.722l1.486-1.485a3.755 3.755 0 1 1 4.428-4.428l2.95-2.95a1.407 1.407 0 0 0-1.124-.556 1.345 1.345 0 0 0-.947.367.75.75 0 1 1-1.046-1.074 2.832 2.832 0 0 1 1.993-.793 2.9 2.9 0 0 1 2.184 1l1.776-1.78a.75.75 0 0 1 1.06 1.06L6.3 18.756zm6.55-8.667 1.24-1.24a2.29 2.29 0 0 0 .17-.84 2.255 2.255 0 1 0-2.25 2.25 2.29 2.29 0 0 0 .84-.17zm5.94-1.41h-.22a.75.75 0 0 0 0 1.5h.22a2.261 2.261 0 0 1 2.46 2.47c0 .864-.309 1.17-1.18 1.17h-.36a.75.75 0 0 0 0 1.5h.36a2.435 2.435 0 0 0 2.68-2.67 3.76 3.76 0 0 0-3.96-3.97zM5.922 8.035a.75.75 0 1 0 .3-1.471A1.421 1.421 0 0 1 6.51 3.75a1.386 1.386 0 0 1 .956.375.749.749 0 0 0 1.029-1.09A2.875 2.875 0 0 0 6.51 2.25a2.922 2.922 0 0 0-.588 5.785zM3.93 15.32h.35a.75.75 0 1 0 0-1.5h-.35c-.871 0-1.18-.306-1.18-1.17a2.261 2.261 0 0 1 2.46-2.47h.99a.75.75 0 0 0 0-1.5h-.99a3.726 3.726 0 0 0-3.96 3.97 2.435 2.435 0 0 0 2.68 2.67z" />
+    </svg>;
 }
 
-export function KickOneIcon({style}: {style?: React.CSSProperties}) {
-    return <svg style={style} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M19.75 18.02c0 2.405-1.332 3.73-3.75 3.73H8a4.932 4.932 0 0 1-1.072-.108.75.75 0 1 1 .324-1.464A3.555 3.555 0 0 0 8 20.25h8c1.577 0 2.25-.667 2.25-2.23a3.954 3.954 0 0 0-3.411-4.22.75.75 0 1 1 .2-1.486 5.422 5.422 0 0 1 4.711 5.706zm1.78-14.49-19 19a.75.75 0 0 1-1.06-1.06l2.842-2.843a4.87 4.87 0 0 1-.062-.607c0-2.662 1.506-5.77 5.75-5.77h.689l1.521-1.52c-.068 0-.132.02-.2.02a4.25 4.25 0 1 1 4.25-4.25c0 .069-.017.133-.02.2l4.23-4.23a.75.75 0 0 1 1.06 1.06zm-9.521 5.72a2.75 2.75 0 1 0-2.75-2.75 2.753 2.753 0 0 0 2.75 2.75zm-6.18 7.861 3.293-3.293a3.7 3.7 0 0 0-3.293 3.293z"/></svg>;
+export function KickOneIcon({ style }: { style?: React.CSSProperties }) {
+    return <svg style={style} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+        <path d="M19.75 18.02c0 2.405-1.332 3.73-3.75 3.73H8a4.932 4.932 0 0 1-1.072-.108.75.75 0 1 1 .324-1.464A3.555 3.555 0 0 0 8 20.25h8c1.577 0 2.25-.667 2.25-2.23a3.954 3.954 0 0 0-3.411-4.22.75.75 0 1 1 .2-1.486 5.422 5.422 0 0 1 4.711 5.706zm1.78-14.49-19 19a.75.75 0 0 1-1.06-1.06l2.842-2.843a4.87 4.87 0 0 1-.062-.607c0-2.662 1.506-5.77 5.75-5.77h.689l1.521-1.52c-.068 0-.132.02-.2.02a4.25 4.25 0 1 1 4.25-4.25c0 .069-.017.133-.02.2l4.23-4.23a.75.75 0 0 1 1.06 1.06zm-9.521 5.72a2.75 2.75 0 1 0-2.75-2.75 2.753 2.753 0 0 0 2.75 2.75zm-6.18 7.861 3.293-3.293a3.7 3.7 0 0 0-3.293 3.293z" />
+    </svg>;
 }
diff --git a/panel/src/components/Logos.tsx b/panel/src/components/Logos.tsx
@@ -0,0 +1,69 @@
+import { useId } from "react";
+
+type LogoProps = {
+    className?: string;
+    style?: React.CSSProperties;
+};
+
+//NOTE: used Black_Full from figma
+export function LogoFullSolidThin({ style, className }: LogoProps) {
+    return <svg
+        className={className}
+        style={style}
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 889 193"
+    >
+        <g fill="current">
+            <path d="m163.29 107.5-19.59 23.01-5.33-6.26-45.09-52.97H120c7.9 0 15.4 3.47 20.53 9.48l17.49 20.55 5.27 6.19ZM233.74 190.24h-26.72c-7.9 0-15.41-3.46-20.53-9.48l-7.07-8.3-16.11-18.93 19.58-23.01 16.13 18.93 34.72 40.79Z" />
+            <path d="m233.32 71.28-31.4 36.88L187.59 125l-4.7 5.52-19.58 23.01-.01-.01-14.59 17.15-8.59 10.09a26.964 26.964 0 0 1-20.53 9.48H92.51l25.93-30.26h.17l21.52-25.28 3.57-4.19 19.59-23.01 2.01-2.35 6.15-7.23 14.62-17.16a26.962 26.962 0 0 1 20.52-9.48h26.73ZM84.64 71.29c0 16.38-13.28 29.66-29.67 29.66H31.02l-.01-29.66h53.63Z" />
+            <path d="m107.74 159.98-25.92 30.24C-.89 188.77.31 112.31.31 112.31L.38-.6c8.46 0 16.11 3.43 21.66 8.96 5.54 5.55 8.97 13.2 8.97 21.67v41.26l.01 29.66h-.01v1.82c0 58.21 53.23 57.21 53.23 57.21h23.5ZM246.04 189.16 312.4 32.37a10.613 10.613 0 0 1 19.54 0l66.36 156.78h-19.67l-16.86-40.29H282.6l-16.86 40.29h-19.7v.01Zm43.56-57.15h65.11l-32.56-77.76-32.55 77.76ZM503.45 88.67V36.51c0-5.86 4.75-10.6 10.6-10.6h6.73V162.7c0 10.31 2.34 14.76 8.9 14.76l5.96-.01c.07 0 .13.06.13.13v12.53c-2.81 1.17-6.56 1.87-11.01 1.87-5.15 0-9.37-1.17-12.41-3.28-4.45-3.51-7.26-9.13-7.96-16.86-8.9 13.82-23.19 20.85-42.86 20.85-16.63 0-30.92-5.86-42.39-17.8-11.48-11.95-17.33-26.94-17.33-44.74s5.86-32.56 17.33-44.5c11.47-11.94 25.76-18.04 42.39-18.04 21.31-.02 35.13 9.12 41.92 21.06Zm-10.54 74.72c8.43-8.9 12.65-19.91 12.65-33.26 0-13.35-4.22-24.36-12.65-33.02-8.2-8.9-18.74-13.35-31.39-13.35-12.18 0-22.25 4.45-30.45 13.35-7.96 8.67-11.95 19.67-11.95 33.02 0 13.35 3.98 24.36 11.95 33.26 8.2 8.67 18.27 13.12 30.45 13.12 12.65 0 23.19-4.45 31.39-13.12ZM548.42 189.16V81.71c0-5.86 4.75-10.6 10.6-10.6h6.73v19.91c5.62-13.12 17.33-21.78 33.26-21.78 16.86 0 28.34 7.73 34.66 23.42 7.03-15.69 19.21-23.42 36.77-23.42 23.66 0 38.41 17.57 38.41 44.5v48.72c0 9.37 1.64 12.41 8.2 12.41l4.34-.01c.06 0 .11.05.11.11v13.72c-1.87.7-4.45 1.17-7.5 1.17-9.13 0-22.49-2.58-22.49-26.23v-46.14c0-19.67-9.84-32.09-25.76-32.09-16.16 0-28.11 13.58-28.11 33.26v70.5h-17.33v-71.67c0-19.91-9.6-32.09-26.23-32.09-16.16 0-28.34 13.58-28.34 33.26v70.5h-17.32ZM735.8 48.15c-4.68-4.68-4.68-12.18 0-16.63 4.68-4.68 11.71-4.68 16.4 0 4.68 4.45 4.68 11.95 0 16.63-4.69 4.45-11.71 4.45-16.4 0Zm5.84 22.96h11.03v92.75c0 8.67 2.34 12.41 8.9 12.41 1.87 0 3.98-.23 6.09-.47v14.29c-2.81 1.17-6.56 1.87-11.01 1.87-14.29 0-21.31-8.43-21.31-25.06V77.41c-.01-3.48 2.82-6.3 6.3-6.3ZM778.9 189.16V81.71c0-5.86 4.75-10.6 10.6-10.6h6.73v19.91c6.32-13.12 19.67-21.78 37.24-21.78 26.47 0 43.1 17.57 43.1 44.5v48.72c0 9.6 1.41 12.41 8.2 12.41 1.17 0 2.58-.23 4.45-.47v14.29c-1.87.7-4.45 1.17-7.5 1.17-9.13 0-22.49-2.58-22.49-26.23v-46.14c0-19.67-11.48-32.09-30.21-32.09-19.44 0-32.79 13.58-32.79 33.26v70.5H778.9Z" />
+        </g>
+    </svg>;
+}
+
+//NOTE: used Green_FullBox_resize from figma
+export function LogoFullSquareGreen({ style, className }: LogoProps) {
+    const maskId = useId();
+    const bgId = useId();
+    return <svg
+        className={className}
+        style={style}
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 1115 288"
+    >
+        <mask id={maskId} fill="#fff">
+            <path d="M.42 48.27v191.46C.42 266.39 22.03 288 48.69 288h191.46c26.66 0 48.27-21.61 48.27-48.27V48.27C288.42 21.61 266.81 0 240.15 0H48.69C22.03 0 .42 21.61.42 48.27Zm36.19 106.19.07-106.24c7.96 0 15.15 3.23 20.38 8.44a28.733 28.733 0 0 1 8.43 20.38v38.82h50.46c0 15.42-12.5 27.91-27.91 27.91H65.49v1.7c0 54.78 50.08 53.84 50.08 53.84h22.11l-24.38 28.45c-77.82-1.38-76.69-73.3-76.69-73.3Zm194.47 73.32c-7.44 0-14.5-3.26-19.32-8.92l-6.64-7.81-15.17-17.82-21.81 25.63a25.37 25.37 0 0 1-19.32 8.92h-25.47l24.39-28.47h.16l23.61-27.73-5.01-5.88-42.43-49.84h25.14c7.43 0 14.49 3.26 19.31 8.92l16.46 19.33 4.96 5.83 7.68-9.02 13.75-16.14a25.366 25.366 0 0 1 19.31-8.92h25.14l-29.54 34.7-17.9 21.02 15.17 17.82 32.67 38.38h-25.14Z" />
+            <path d="m310.85 240.677 75.49-180.805a22.205 22.205 0 0 1 20.487-13.65 22.203 22.203 0 0 1 20.486 13.65l75.49 180.805h-36.828l-15.9-38.781h-86.484l-15.901 38.781h-36.84Zm63.603-67.51h64.723l-32.361-79.23-32.362 79.23Z" />
+            <path d="M616.61 120.438V68.424c0-12.256 9.934-22.202 22.202-22.202h11.279v152.041c0 11.994 2.787 16.46 10.327 16.46 1.953 0 4.466-.274 6.98-.559v27.061c-3.621 1.393-9.207 2.227-16.461 2.227-8.087 0-14.507-1.393-19.534-4.466-6.134-4.181-10.04-9.767-11.434-17.021C610.202 236.746 594.027 244 571.707 244c-19.808 0-36.542-6.98-50.216-21.201-13.387-14.233-20.081-31.528-20.081-52.443 0-20.927 6.694-38.222 20.081-52.169 13.674-14.233 30.408-21.201 50.216-21.201 22.583.024 39.603 10.064 44.903 23.452Zm-10.04 80.624c8.373-8.088 12.553-18.414 12.553-30.682 0-12.28-4.18-22.595-12.553-30.682-8.088-8.088-18.415-12.28-30.409-12.28s-21.76 4.18-29.848 12.28c-7.813 8.087-11.72 18.414-11.72 30.682 0 12.28 3.907 22.594 11.72 30.682 8.088 8.087 17.854 12.28 29.848 12.28s22.321-4.193 30.409-12.28Z" />
+            <path d="M680.5 240.677V122.272c0-12.256 9.933-22.201 22.201-22.201h11.006v20.081c5.86-13.673 19.807-22.88 37.661-22.88 19.248 0 32.636 8.087 39.615 24.548 8.088-16.461 23.155-24.548 45.19-24.548 30.408 0 47.988 21.487 47.988 56.349v44.356c0 10.874 1.953 14.781 9.481 14.781l4.609-.012c.072 0 .131.06.131.131v27.49c-3.346 1.12-8.087 1.68-14.507 1.68-22.035 0-32.921-12.28-32.921-36.828V158.35c0-19.248-8.933-31.242-24.548-31.242-15.615 0-27.061 13.674-27.061 32.635v80.898h-33.207v-82.303c0-19.248-9.207-31.242-25.108-31.242-15.627 0-27.335 13.674-27.335 32.636v80.897H680.5v.048Z" />
+            <path d="M907.304 63.898c-.048-10.077 7.789-18.664 17.806-19.772 11.887-1.31 22.095 7.754 22.095 19.677 0 11.16-8.933 19.807-19.808 19.807-11.136 0-20.046-8.6-20.093-19.712Zm25.548 36.173h11.28v98.752c0 10.874 2.227 14.781 9.766 14.781 2.514 0 4.467-.274 5.861-.56v28.181c-3.347 1.393-8.934 2.227-16.735 2.227-21.487 0-32.361-11.994-32.361-35.708V122.26c-.012-12.244 9.933-22.189 22.189-22.189Z" />
+            <path d="M972.3 240.677V122.272c0-12.256 9.934-22.201 22.202-22.201h11.008v20.081c6.69-13.673 22.32-22.88 42.13-22.88 33.19 0 52.44 21.487 52.44 56.349v44.356c0 10.874 1.95 14.781 9.48 14.781l4.61-.012c.07 0 .13.06.13.131v27.49c-3.91 1.12-8.65 1.68-14.51 1.68-22.03 0-32.92-12.28-32.92-36.828V158.35c0-19.248-10.87-31.242-29.57-31.242-18.69 0-31.8 13.388-31.8 32.635v80.898h-33.2v.036Z" />
+        </mask>
+        <rect fill={`url(#${bgId})`} mask={`url(#${maskId})`} width='100%' height='100%' />
+        <linearGradient id={bgId} gradientTransform="rotate(90)">
+            <stop offset="0.2" stopColor="#5BBE83" />
+            <stop offset="1" stopColor="#00888F" />
+        </linearGradient>
+    </svg>;
+}
+
+
+export function LogoSquareGreen({ style, className }: LogoProps) {
+    const maskId = useId();
+    const bgId = useId();
+    return <svg
+        className={className}
+        style={style}
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 288 288"
+    >
+        <mask id={maskId} fill="#fff">
+            <path d="M-.46 48.21v191.46c0 26.66 21.61 48.27 48.27 48.27h191.46c26.66 0 48.27-21.61 48.27-48.27V48.21c0-26.66-21.61-48.27-48.27-48.27H47.81C21.15-.06-.46 21.55-.46 48.21ZM35.73 154.4l.07-106.24c7.96 0 15.15 3.23 20.38 8.44a28.735 28.735 0 0 1 8.43 20.38v38.82h50.46c0 15.42-12.5 27.91-27.91 27.91H64.61v1.7c0 54.78 50.08 53.84 50.08 53.84h22.11l-24.38 28.45c-77.82-1.38-76.69-73.3-76.69-73.3Zm194.47 73.32c-7.44 0-14.5-3.26-19.32-8.92l-6.64-7.81-15.17-17.82-21.81 25.63a25.365 25.365 0 0 1-19.32 8.92h-25.47l24.39-28.47h.16l23.61-27.73-5.01-5.88-42.43-49.84h25.14c7.43 0 14.49 3.26 19.31 8.92l16.46 19.33 4.96 5.83 7.68-9.02 13.75-16.14a25.366 25.366 0 0 1 19.31-8.92h25.14l-29.54 34.7-17.9 21.02 15.17 17.82 32.67 38.38H230.2Z" />
+        </mask>
+        <rect fill={`url(#${bgId})`} mask={`url(#${maskId})`} width='100%' height='100%' />
+        <linearGradient id={bgId} gradientTransform="rotate(90)">
+            <stop offset="0.2" stopColor="#5BBE83" />
+            <stop offset="1" stopColor="#00888F" />
+        </linearGradient>
+    </svg>;
+}
diff --git a/panel/src/components/MainPageLink.tsx b/panel/src/components/MainPageLink.tsx
@@ -92,3 +92,21 @@ export function MenuNavLink({ href, children, className, disabled }: MenuNavProp
         )
     }
 }
+
+type NavLinkProps = {
+    href: string;
+    children: React.ReactNode;
+};
+
+export function NavLink({ href, children }: NavLinkProps) {
+    const [isActive] = useRoute(href);
+
+    return (
+        <MainPageLink
+            href={href}
+            isActive={isActive}
+        >
+            <a>{children}</a>
+        </MainPageLink>
+    )
+}
diff --git a/panel/src/layout/AuthShell.tsx b/panel/src/layout/AuthShell.tsx
@@ -4,19 +4,14 @@ import CfxreCallback from "../pages/auth/CfxreCallback";
 import AddMasterPin from "../pages/auth/AddMasterPin";
 import AddMasterCallback from "../pages/auth/AddMasterCallback";
 import { Card } from "../components/ui/card";
+import { LogoFullSquareGreen } from "@/components/Logos";
 
 
 export default function AuthShell() {
     return (
         <div className="min-h-screen flex items-center justify-center">
             <div className="text-center m-4 w-full xs:w-[25rem] min-w-[20rem]">
-                <Link
-                    href="/login"
-                    className="bg-accent hover:bg-accent/75 text-3xl
-                    p-1 font-bold tracking-widest rounded"
-                >
-                    txAdmin
-                </Link>
+                <LogoFullSquareGreen className="h-12 mx-auto" />
 
                 <Card className="min-h-64 mt-8 mb-4 p-4 flex items-center justify-center">
                     <Switch>
@@ -30,7 +25,8 @@ export default function AuthShell() {
                     </Switch>
                 </Card>
 
-                <div className="mx-auto flex flex-wrap gap-4 justify-center mb-2">
+                {/* FIXME: add back the links */}
+                <div className="mx-auto DEBUGflex hidden flex-wrap gap-4 justify-center mb-2">
                     <Link
                         href="/"
                         className="h-16 w-48 bg-accent hover:bg-accent/75 text-xl p-1 font-bold tracking-widest rounded-lg flex justify-center items-center"

diff --git a/panel/src/layout/Header.tsx b/panel/src/layout/Header.tsx
@@ -15,6 +15,8 @@ import { useAtomValue } from "jotai";
 import { serverNameAtom } from "@/hooks/status";
 import { playerCountAtom } from "@/hooks/playerlist";
 import { useAccountModal } from "@/hooks/dialogs";
+import { LogoSquareGreen, LogoFullSquareGreen } from "@/components/Logos";
+import { NavLink } from "@/components/MainPageLink";
 
 
 function ServerTitle() {
@@ -179,14 +181,14 @@ export function Header() {
             <div className="h-14 lg:px-3 px-2 w-full max-w-[1920px] flex flex-row justify-between transition-all">
                 <div className="flex flex-row items-center flex-grow gap-5 mr-5">
                     <div className="w-sidebar hidden xl:flex justify-center">
-                        <span
-                            className="h-7 w-36 bg-accent text-accent-foreground rounded text-center p-0.5 font-bold tracking-widest"
-                            title={`tx: v${window.txConsts.txaVersion} | fx: b${window.txConsts.fxsVersion}`}
-                        >FULL LOGO</span>
-                    </div>
-                    <div className="h-8 w-8 lg:h-10 lg:w-10 rounded hidden sm:max-xl:block bg-accent text-accent-foreground text-center">
-                        TX
+                        <NavLink href="/">
+                            <LogoFullSquareGreen className="h-9 hover:scale-105" />
+                        </NavLink>
                     </div>
+                    <NavLink href="/">
+                        <LogoSquareGreen className="h-8 w-8 lg:h-10 lg:w-10 hidden sm:max-xl:block hover:scale-105" />
+                    </NavLink>
+
                     <div className="lg:hidden">
                         <ServerTitle />
                     </div>

diff --git a/panel/src/layout/MainSheets.tsx b/panel/src/layout/MainSheets.tsx
@@ -2,10 +2,11 @@ import { ScrollArea } from "@/components/ui/scroll-area";
 import { Sheet, SheetContent, SheetHeader, SheetTitle } from "@/components/ui/sheet";
 import { ServerSidebar } from "./serverSidebar/ServerSidebar";
 import { useGlobalMenuSheet, usePlayerlistSheet, useServerSheet } from "@/hooks/sheets";
-import { MenuNavLink } from "@/components/MainPageLink";
-import { ClipboardCheckIcon, ListIcon, PieChartIcon, ScrollIcon, SettingsIcon, UserSquare2Icon, UsersIcon, ZapIcon } from 'lucide-react';
+import { MenuNavLink, NavLink } from "@/components/MainPageLink";
+import { ClipboardCheckIcon, ListIcon, PieChartIcon, SettingsIcon, UserSquare2Icon, UsersIcon, ZapIcon } from 'lucide-react';
 import { PlayerlistSidebar } from "./playerlistSidebar/PlayerlistSidebar";
 import { useAdminPerms } from "@/hooks/auth";
+import { LogoFullSquareGreen } from "@/components/Logos";
 
 
 export function GlobalMenuSheet() {
@@ -20,7 +21,11 @@ export function GlobalMenuSheet() {
                 onOpenAutoFocus={(e) => e.preventDefault()}
             >
                 <SheetHeader>
-                    <SheetTitle><span className="h-7 w-36 bg-accent text-accent-foreground rounded text-center p-0.5 font-bold tracking-widest">FULL LOGO</span></SheetTitle>
+                    <SheetTitle>
+                        <NavLink href="/">
+                            <LogoFullSquareGreen className="h-9 hover:scale-105" />
+                        </NavLink>
+                    </SheetTitle>
                 </SheetHeader>
 
                 <div>

diff --git a/panel/src/layout/serverSidebar/ServerSidebar.tsx b/panel/src/layout/serverSidebar/ServerSidebar.tsx
@@ -33,15 +33,16 @@ export function ServerSidebar({ isSheet }: ServerSidebarProps) {
             <hr className={isSheet ? 'block' : 'hidden'} />
 
             {/* Ad Placeholder */}
+            {/* FIXME: add it back */}
             <a
                 href='http://zap-hosting.com/txAdmin5'
                 onClick={handleExternalLinkClick}
                 target='_blank'
-                className='h-[80px] p-4 flex justify-center items-center gap-2
+                className='h-[80px] p-4 DEBUGflex justify-center items-center gap-2
                 rounded-xl border shadow-sm
                 bg-gradient-to-r from-yellow-200 via-green-200 to-green-300
                 dark:brightness-90 dark:hover:brightness-100
-                relative group'
+                relative group hidden'
             >
                 <div className='scale-0 group-hover:scale-100 transition-transform
                 absolute inset-0 animate-pulse blur-md -z-10