From 2cb9c9d5fdb384b3dceb5cfaef72c610a10fa55e Mon Sep 17 00:00:00 2001
From: DIYgod <i@diygod.me>
Date: Wed, 1 Mar 2023 18:36:38 +0000
Subject: [PATCH] feat: add help button

---
 src/components/dashboard/DashboardLayout.tsx | 14 +++++++++++---
 src/pages/dashboard/[subdomain]/index.tsx    | 19 +++++++++++++++----
 2 files changed, 26 insertions(+), 7 deletions(-)

diff --git a/src/components/dashboard/DashboardLayout.tsx b/src/components/dashboard/DashboardLayout.tsx
index d3f9a835..d721498c 100644
--- a/src/components/dashboard/DashboardLayout.tsx
+++ b/src/components/dashboard/DashboardLayout.tsx
@@ -2,7 +2,7 @@ import { cn } from "~/lib/utils"
 import { useRouter } from "next/router"
 import React, { useEffect } from "react"
 
-import { APP_NAME } from "~/lib/env"
+import { DISCORD_LINK, APP_NAME } from "~/lib/env"
 import { getSiteLink } from "~/lib/helpers"
 import { SEOHead } from "../common/SEOHead"
 import { UniLink } from "../ui/UniLink"
@@ -20,6 +20,7 @@ import { useUserRole } from "~/hooks/useUserRole"
 import { useAccountState, useConnectModal } from "@crossbell/connect-kit"
 import { useTranslation } from "react-i18next"
 import { Logo } from "~/components/common/Logo"
+import { QuestionMarkCircleIcon } from "@heroicons/react/24/outline"
 
 export function DashboardLayout({
   children,
@@ -191,12 +192,19 @@ export function DashboardLayout({
                   })}
                 </div>
 
-                <div className="absolute bottom-0 left-0 right-0 h-20 flex items-center px-4">
+                <div className="absolute bottom-5 left-0 right-0 flex items-center px-4 flex-col">
+                  <UniLink
+                    href={DISCORD_LINK}
+                    className="space-x-2 text-zinc-500 hover:text-zinc-800 flex w-full h-12 items-center justify-center transition-colors mb-2"
+                  >
+                    <QuestionMarkCircleIcon className="w-5 h-5" />
+                    {isOpen && <span>{t("Need help?")}</span>}
+                  </UniLink>
                   <UniLink
                     href={getSiteLink({
                       subdomain,
                     })}
-                    className="space-x-2 border rounded-lg bg-slate-100 border-slate-200 text-slate-500 hover:text-accent flex w-full h-12 items-center justify-center transition-colors"
+                    className="space-x-2 border rounded-lg bg-slate-100 border-slate-200 text-accent hover:scale-105 transition-transform flex w-full h-12 items-center justify-center"
                   >
                     <span className="i-bi:box-arrow-up-right"></span>
                     {isOpen && <span>{t("View Site")}</span>}
diff --git a/src/pages/dashboard/[subdomain]/index.tsx b/src/pages/dashboard/[subdomain]/index.tsx
index 536d5e36..ee5df540 100644
--- a/src/pages/dashboard/[subdomain]/index.tsx
+++ b/src/pages/dashboard/[subdomain]/index.tsx
@@ -88,9 +88,7 @@ export default function SubdomainIndex() {
                 className="bg-slate-100 rounded-lg flex justify-center flex-col py-4 px-6"
               >
                 <span>{t(item.name)}</span>
-                <span className="font-bold text-2xl text-accent">
-                  {item.value}
-                </span>
+                <span className="font-bold text-2xl">{item.value}</span>
               </div>
             ))}
           </div>
@@ -104,6 +102,15 @@ export default function SubdomainIndex() {
               ns="dashboard"
             />
             <ul>
+              <li>
+                <UniLink
+                  href={getSiteLink({
+                    subdomain,
+                  })}
+                >
+                  {t("View Site")}
+                </UniLink>
+              </li>
               <li>
                 <UniLink href={`/dashboard/${subdomain}/editor?type=post`}>
                   Create a Post
@@ -123,7 +130,11 @@ export default function SubdomainIndex() {
               }}
               ns="dashboard"
             />
-            <ul>
+            <ul
+              style={{
+                marginBottom: 0,
+              }}
+            >
               <li>
                 <UniLink href={DISCORD_LINK}>
                   Join {APP_NAME}