From 9dad7de656dd6e4932b6a1214d59a2e5fe0b0014 Mon Sep 17 00:00:00 2001
From: DIYgod <i@diygod.me>
Date: Wed, 31 Aug 2022 02:30:53 +0100
Subject: [PATCH] feat: theme color

---
 src/components/common/Comment.tsx            |  2 +-
 src/components/common/ConnectButton.tsx      |  2 +-
 src/components/dashboard/DashboardLayout.tsx |  5 ++-
 src/components/main/MainLayout.tsx           |  4 +-
 src/components/site/PostFooter.tsx           |  4 +-
 src/components/site/SiteFooter.tsx           |  4 +-
 src/components/site/SiteHeader.tsx           |  2 +-
 src/components/ui/EditorToolbar.tsx          |  2 +-
 src/css/prose.css                            | 12 +++--
 src/css/tailwind.css                         | 46 +++++++++++++++++---
 src/css/variables.css                        |  5 ++-
 src/pages/index.tsx                          |  4 +-
 tailwind.config.js                           |  2 +-
 13 files changed, 68 insertions(+), 26 deletions(-)

diff --git a/src/components/common/Comment.tsx b/src/components/common/Comment.tsx
index 99dd4a71..37e705b7 100644
--- a/src/components/common/Comment.tsx
+++ b/src/components/common/Comment.tsx
@@ -164,7 +164,7 @@ export const Comment: React.FC<{
               <div className="mb-2 text-sm">
                 <UniLink
                   href={CSB_IO && `${CSB_IO}/@${comment?.character?.handle}`}
-                  className="font-medium text-indigo-600"
+                  className="font-medium text-theme-color"
                 >
                   {comment?.character?.metadata?.content?.name}
                 </UniLink>{" "}
diff --git a/src/components/common/ConnectButton.tsx b/src/components/common/ConnectButton.tsx
index 2effaa84..26f6f247 100644
--- a/src/components/common/ConnectButton.tsx
+++ b/src/components/common/ConnectButton.tsx
@@ -93,7 +93,7 @@ export const ConnectButton: React.FC<{
               if (!mounted || !account || !chain) {
                 return (
                   <button
-                    className="text-indigo-600"
+                    className="text-theme-color"
                     onClick={openConnectModal}
                     type="button"
                     style={{ height: "30px" }}
diff --git a/src/components/dashboard/DashboardLayout.tsx b/src/components/dashboard/DashboardLayout.tsx
index 64bb3fd9..4d565ce5 100644
--- a/src/components/dashboard/DashboardLayout.tsx
+++ b/src/components/dashboard/DashboardLayout.tsx
@@ -12,6 +12,7 @@ import { SiteSwitcher } from "./SiteSwitcher"
 import { useGetUserSites } from "~/queries/site"
 import { useAccount } from "wagmi"
 import { ConnectButton } from "~/components/common/ConnectButton"
+import { useGetSite } from "~/queries/site"
 
 export function DashboardLayout({
   children,
@@ -22,6 +23,7 @@ export function DashboardLayout({
 }) {
   const router = useRouter()
   const subdomain = router.query.subdomain as string
+  const site = useGetSite(subdomain)
 
   const { address } = useAccount()
 
@@ -74,6 +76,7 @@ export function DashboardLayout({
   return (
     <>
       <SEOHead title={title} siteName={APP_NAME} />
+      <style>{site.data?.css}</style>
       <div className="flex">
         <DashboardSidebar>
           <div className="mb-2 px-5 pt-3 pb-2">
@@ -110,7 +113,7 @@ export function DashboardLayout({
                 subdomain,
                 domain: userSite.data?.[0]?.custom_domain,
               })}
-              className="space-x-2 border rounded-lg bg-gray-100 border-gray-200 text-gray-500 hover:border-indigo-300 hover:bg-indigo-100 hover:text-indigo-500 flex w-full h-12 items-center justify-center transition-colors"
+              className="space-x-2 border rounded-lg bg-gray-100 border-gray-200 text-gray-500 hover-text-theme-color flex w-full h-12 items-center justify-center transition-colors"
             >
               <span className="i-bi:box-arrow-up-right"></span>
               <span>View Site</span>
diff --git a/src/components/main/MainLayout.tsx b/src/components/main/MainLayout.tsx
index f30d1915..1bed9b51 100644
--- a/src/components/main/MainLayout.tsx
+++ b/src/components/main/MainLayout.tsx
@@ -42,14 +42,14 @@ export function MainLayout({
                 href={getSiteLink({
                   subdomain: "blog",
                 })}
-                className="hover:text-indigo-500"
+                className="hover-text-theme-color"
               >
                 {APP_NAME}
               </UniLink>
             </span>
             <span className="text-zinc-400 ml-2 inline-flex items-center space-x-1 align-middle">
               <UniLink className="flex items-center" href={DISCORD_LINK}>
-                <span className="inline-block i-mdi-discord text-xl hover:text-indigo-500"></span>
+                <span className="inline-block i-mdi-discord text-xl hover-text-theme-color"></span>
               </UniLink>
               {GITHUB_LINK && (
                 <UniLink className="flex items-center" href={GITHUB_LINK}>
diff --git a/src/components/site/PostFooter.tsx b/src/components/site/PostFooter.tsx
index b93a8bf9..9fce77e7 100644
--- a/src/components/site/PostFooter.tsx
+++ b/src/components/site/PostFooter.tsx
@@ -256,7 +256,7 @@ export const PostFooter: React.FC<{
           <div className="p-5">
             Your like has been permanently stored on the blockchain, view them{" "}
             <UniLink
-              className="text-indigo-600"
+              className="text-theme-color"
               href={`${CSB_SCAN}/tx/${isLike.data?.list?.[0]?.transactionHash}`}
             >
               here
@@ -277,7 +277,7 @@ export const PostFooter: React.FC<{
             Your minting has been permanently stored on the blockchain, view
             them{" "}
             <UniLink
-              className="text-indigo-600"
+              className="text-theme-color"
               href={`${CSB_SCAN}/tx/${isMint.data?.list?.[0]?.transactionHash}`}
             >
               here
diff --git a/src/components/site/SiteFooter.tsx b/src/components/site/SiteFooter.tsx
index 345d4881..3a185af9 100644
--- a/src/components/site/SiteFooter.tsx
+++ b/src/components/site/SiteFooter.tsx
@@ -13,13 +13,13 @@ export const SiteFooter: React.FC<{
         <div className="max-w-screen-md mx-auto px-5 py-10 text-xs">
           <p className="font-medium text-base">
             &copy;{" "}
-            <UniLink href="/" className="hover:text-indigo-500">
+            <UniLink href="/" className="hover-text-theme-color">
               {site?.username}
             </UniLink>{" "}
             · Powered by{" "}
             <UniLink
               href={`https://${OUR_DOMAIN}`}
-              className="hover:text-indigo-500"
+              className="hover-text-theme-color"
             >
               {APP_NAME}
             </UniLink>
diff --git a/src/components/site/SiteHeader.tsx b/src/components/site/SiteHeader.tsx
index 7a72a0be..ce646bd1 100644
--- a/src/components/site/SiteHeader.tsx
+++ b/src/components/site/SiteHeader.tsx
@@ -46,7 +46,7 @@ const HeaderLink: React.FC<{ link: HeaderLinkType }> = ({ link }) => {
       onClick={link.onClick}
       className={clsx(
         `h-10 flex items-center border-b-2 space-x-1 hover:border-gray-500 hover:text-gray-700`,
-        active ? `text-indigo-700 border-accent` : `border-transparent`,
+        active ? `text-theme-color border-accent` : `border-transparent`,
       )}
     >
       {link.icon && <span>{link.icon}</span>}
diff --git a/src/components/ui/EditorToolbar.tsx b/src/components/ui/EditorToolbar.tsx
index c9aa37a9..13b70d35 100644
--- a/src/components/ui/EditorToolbar.tsx
+++ b/src/components/ui/EditorToolbar.tsx
@@ -40,7 +40,7 @@ export const EditorToolbar: FC<EditorToolbarProps> = ({
             className={clsx(
               "w-7 h-7 transition-colors text-lg border border-transparent rounded flex items-center justify-center",
               active
-                ? `bg-indigo-400 text-white border-indigo-400`
+                ? `bg-theme-color text-white border-theme-color`
                 : disabled
                 ? `text-zinc-400 cursor-not-allowed`
                 : `text-zinc-400 group-hover:text-zinc-600 hover:text-zinc-500 hover:border-zinc-300 hover:bg-zinc-100`,
diff --git a/src/css/prose.css b/src/css/prose.css
index 5e033dd9..75106a39 100644
--- a/src/css/prose.css
+++ b/src/css/prose.css
@@ -3,7 +3,11 @@
 }
 
 .prose > p {
-  @apply my-7;
+  @apply mb-5;
+}
+
+.prose img {
+  @apply inline-block;
 }
 
 .prose > *:first-child {
@@ -33,7 +37,7 @@
 }
 
 .prose blockquote {
-  @apply border-l-4 border-indigo-500;
+  @apply border-l-4 border-theme-color;
   @apply pl-5;
   @apply my-7;
   @apply text-zinc-900 font-medium;
@@ -55,7 +59,7 @@
 }
 
 .prose a {
-  @apply text-indigo-600;
+  @apply text-theme-color-dark;
   @apply hover:underline;
 }
 
@@ -99,7 +103,7 @@
 }
 
 .prose .callout {
-  @apply border border-indigo-100 bg-indigo-50 text-indigo-700 rounded-xl p-5 md:p-8 font-normal;
+  @apply border border-zinc-100 bg-zinc-50 text-theme-color rounded-xl p-5 md:p-8 font-normal;
   @apply -mx-5 md:-mx-8 my-10;
 }
 
diff --git a/src/css/tailwind.css b/src/css/tailwind.css
index b732e508..98701211 100644
--- a/src/css/tailwind.css
+++ b/src/css/tailwind.css
@@ -45,7 +45,7 @@ body {
   @apply opacity-50;
 }
 
-.button[disabled] {
+.button.button.button[disabled] {
   @apply opacity-50;
   @apply cursor-not-allowed;
 }
@@ -69,10 +69,21 @@ body {
 }
 
 .button.is-primary {
-  --shadow-color-button: theme("colors.indigo.700");
-  @apply bg-indigo-500 hover:bg-indigo-600 focus:bg-indigo-700;
+  --shadow-color-button: var(--theme-color-dark);
   @apply text-white;
-  @apply fill-indigo-500;
+  fill: var(--theme-color);
+  background-color: var(--theme-color);
+  opacity: 0.9;
+}
+
+.button.is-primary:hover {
+  opacity: 1;
+  background-color: var(--theme-color);
+}
+
+.button.is-primary:focus {
+  opacity: 1;
+  background-color: var(--theme-color);
 }
 
 .button.is-secondary {
@@ -169,8 +180,11 @@ body {
   @apply inline-flex;
   @apply items-center;
   @apply focus:ring-1;
-  @apply focus:ring-indigo-400;
-  @apply focus:border-indigo-400;
+  --tw-ring-color: var(--theme-color);
+}
+
+.input:focus {
+  border-color: var(--theme-color);
 }
 
 .input.is-block {
@@ -240,3 +254,23 @@ textarea.input {
 .xlog-site-description a {
   @apply underline;
 }
+
+.text-theme-color {
+  color: var(--theme-color);
+}
+
+.hover-text-theme-color:hover {
+  color: var(--theme-color);
+}
+
+.border-theme-color {
+  border-color: var(--theme-color);
+}
+
+.bg-theme-color {
+  background-color: var(--theme-color);
+}
+
+.text-theme-color-dark {
+  color: var(--theme-color-dark);
+}
diff --git a/src/css/variables.css b/src/css/variables.css
index db6d6272..47d7ad5e 100644
--- a/src/css/variables.css
+++ b/src/css/variables.css
@@ -2,7 +2,8 @@
   --border-color: #eee;
   --font-fans: theme("fontFamily.sans");
   --shadow-color-button: theme("colors.gray.300");
-  --accent-color: theme("colors.indigo.500");
+  --theme-color: theme("colors.indigo.600");
+  --theme-color-dark: theme("colors.indigo.700");
   /* Accent color for form controls */
-  accent-color: var(--accent-color);
+  accent-color: var(--theme-color);
 }
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 5ef81056..1765246a 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -133,7 +133,7 @@ export default function Home({ region }: { region: string | null }) {
               {addressIn ? (
                 <UniLink
                   href="/dashboard"
-                  className="text-indigo-500 inline-flex items-center space-x-2 hover:text-indigo-600"
+                  className="text-theme-color inline-flex items-center space-x-2"
                 >
                   <span className="i-bi-grid text-lg"></span>
                   <span>Dashboard</span>
@@ -233,7 +233,7 @@ export default function Home({ region }: { region: string | null }) {
             {addressIn ? (
               <UniLink
                 href="/dashboard"
-                className="text-indigo-500 inline-flex items-center space-x-2 hover:text-indigo-600"
+                className="text-theme-color inline-flex items-center space-x-2"
               >
                 <Button size="xl">Try {APP_NAME} today</Button>
               </UniLink>
diff --git a/tailwind.config.js b/tailwind.config.js
index a949bdf4..0ed3f422 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -10,7 +10,7 @@ module.exports = {
       },
       colors: {
         border: "var(--border-color)",
-        accent: "var(--accent-color)",
+        accent: "var(--theme-color)",
       },
       spacing: {
         sidebar: `240px`,