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

feat: use accent color

This commit is contained in:
DIYgod 2022-09-20 01:10:48 +01:00
parent 56413078fc
commit 55c57cee03
No known key found for this signature in database
GPG Key ID: D159328F47A80DCA
12 changed files with 26 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -175,7 +175,7 @@ export const Comment: React.FC<{
subdomain: comment.character.handle,
})
}
className="font-medium text-theme-color"
className="font-medium text-accent"
>
{comment?.character?.metadata?.content?.name}
</UniLink>{" "}

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

@ -95,7 +95,7 @@ export const ConnectButton: React.FC<{
if (!mounted || !account || !chain) {
return (
<Button
className="text-theme-color"
className="text-accent"
onClick={openConnectModal}
style={{ height: "30px" }}
variant={variant || "primary"}

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

@ -113,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-text-theme-color 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-accent flex w-full h-12 items-center justify-center transition-colors"
>
<span className="i-bi:box-arrow-up-right"></span>
<span>View Site</span>

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

@ -32,8 +32,8 @@ export function MainLayout({
<div className="space-x-14 text-zinc-500 flex">
{tabs?.map((tab, index) => (
<Link
activeClass="text-theme-color"
className="cursor-pointer items-center hidden sm:flex hover-text-theme-color"
activeClass="text-accent"
className="cursor-pointer items-center hidden sm:flex hover:text-accent"
to={tab}
spy={true}
smooth={true}
@ -45,7 +45,7 @@ export function MainLayout({
))}
<UniLink
href={GITHUB_LINK}
className="items-center hidden sm:flex hover-text-theme-color"
className="items-center hidden sm:flex hover:text-accent"
>
GitHub
</UniLink>
@ -64,7 +64,7 @@ export function MainLayout({
)}
{DISCORD_LINK && (
<UniLink className="flex items-center" href={DISCORD_LINK}>
<span className="inline-block i-mdi-discord text-2xl hover-text-theme-color"></span>
<span className="inline-block i-mdi-discord text-2xl hover:text-accent"></span>
</UniLink>
)}
</span>
@ -74,7 +74,7 @@ export function MainLayout({
href={getSiteLink({
subdomain: "blog",
})}
className="hover-text-theme-color"
className="hover:text-accent"
>
{APP_NAME}
</UniLink>

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

@ -297,7 +297,7 @@ export const PostFooter: React.FC<{
<div className="p-5">
Your like has been permanently stored on the blockchain, view them{" "}
<UniLink
className="text-theme-color"
className="text-accent"
href={`${CSB_SCAN}/tx/${isLike.data?.list?.[0]?.transactionHash}`}
>
here
@ -318,7 +318,7 @@ export const PostFooter: React.FC<{
Your minting has been permanently stored on the blockchain, view
them{" "}
<UniLink
className="text-theme-color"
className="text-accent"
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-theme-color">
<UniLink href="/" className="hover:text-accent">
{site?.username}
</UniLink>{" "}
· Powered by{" "}
<UniLink
href={`https://${OUR_DOMAIN}`}
className="hover-text-theme-color"
className="hover:text-accent"
>
{APP_NAME}
</UniLink>

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

@ -41,7 +41,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-theme-color border-accent` : `border-transparent`,
active ? `text-accent border-accent` : `border-transparent`,
)}
>
{link.icon && <span>{link.icon}</span>}
@ -222,7 +222,7 @@ export const SiteHeader: React.FC<{
<Button
variant="text"
onClick={handleClickSubscribe}
className="space-x-1 group align-middle text-theme-color mx-5"
className="space-x-1 group align-middle text-accent mx-5"
isLoading={
subscription.data
? unsubscribeFromSite.isLoading ||

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-theme-color text-white border-theme-color`
? `text-white bg-accent border-accent`
: 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`,

4
src/css/prose.css
View File

@ -59,7 +59,7 @@
}
.prose a {
@apply text-theme-color-dark;
@apply text-accent-dark;
@apply hover:underline;
}
@ -103,7 +103,7 @@
}
.prose .callout {
@apply border border-zinc-100 bg-zinc-50 text-theme-color rounded-xl p-5 md:p-8 font-normal;
@apply border border-zinc-100 bg-zinc-50 text-accent rounded-xl p-5 md:p-8 font-normal;
@apply -mx-5 md:-mx-8 my-10;
}

32
src/css/tailwind.css
View File

@ -71,19 +71,19 @@ body {
.button.is-primary {
--shadow-color-button: var(--theme-color-dark);
@apply text-white;
fill: var(--theme-color);
background-color: var(--theme-color);
@apply fill-accent;
@apply bg-accent;
opacity: 0.9;
}
.button.is-primary:hover {
opacity: 1;
background-color: var(--theme-color);
@apply bg-accent;
}
.button.is-primary:focus {
opacity: 1;
background-color: var(--theme-color);
@apply bg-accent;
}
.button.is-secondary {
@ -183,7 +183,7 @@ body {
}
.input:focus {
border-color: var(--theme-color);
@apply border-accent;
}
.input.is-block {
@ -250,27 +250,7 @@ textarea.input {
@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);
}
::selection {
background-color: var(--theme-color);
@apply bg-accent;
color: #fff;
}

4
src/pages/index.tsx
View File

@ -126,7 +126,7 @@ export default function Home({ region }: { region: string | null }) {
</h3>
<div className="my-10 sm:my-16">
<Button
className="text-theme-color w-80 h-10"
className="text-accent w-80 h-10"
onClick={() =>
addressIn ? router.push("/dashboard") : openConnectModal?.()
}
@ -232,7 +232,7 @@ export default function Home({ region }: { region: string | null }) {
{addressIn ? (
<UniLink
href="/dashboard"
className="text-theme-color inline-flex items-center space-x-2"
className="text-accent inline-flex items-center space-x-2"
>
<Button size="xl">Try {APP_NAME} Today</Button>
</UniLink>

1
tailwind.config.js
View File

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