xiaoxue_admin
/
xLog
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: theme color

This commit is contained in:
DIYgod 2022-08-31 02:30:53 +01:00
parent f4913c9120
commit 9dad7de656
No known key found for this signature in database
GPG Key ID: D159328F47A80DCA
13 changed files with 68 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/common/Comment.tsx
View File

@ -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>{" "}

2
src/components/common/ConnectButton.tsx
View File

@ -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" }}

5
src/components/dashboard/DashboardLayout.tsx
View File

@ -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>

4
src/components/main/MainLayout.tsx
View File

@ -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}>

4
src/components/site/PostFooter.tsx
View File

@ -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

4
src/components/site/SiteFooter.tsx
View File

@ -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>

2
src/components/site/SiteHeader.tsx
View File

@ -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>}

2
src/components/ui/EditorToolbar.tsx
View File

@ -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`,

12
src/css/prose.css
View File

@ -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;
}

46
src/css/tailwind.css
View File

@ -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);
}

5
src/css/variables.css
View File

@ -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);
}

4
src/pages/index.tsx
View File

@ -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>

2
tailwind.config.js
View File

@ -10,7 +10,7 @@ module.exports = {
},
colors: {
border: "var(--border-color)",
accent: "var(--accent-color)",
accent: "var(--theme-color)",
},
spacing: {
sidebar: `240px`,