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

feat: automatically generated hover color

This commit is contained in:
DIYgod 2023-02-03 12:37:06 +00:00
parent 87b7efc5e7
commit 092372258b
No known key found for this signature in database
7 changed files with 23 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -17,7 +17,7 @@ export const BlockchainInfo: React.FC<{
{({ open }: { open: boolean }) => (
<>
<Disclosure.Button
className="flex w-full justify-between rounded-lg px-4 py-2 text-left text-gray-900 hover:bg-zinc-100 transition-colors md:rounded-xl"
className="flex w-full justify-between rounded-lg px-4 py-2 text-left text-gray-900 hover:bg-hover transition-colors md:rounded-xl"
aria-label="toggle chain info"
>
<span>

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

@ -207,7 +207,7 @@ export const ConnectButton: React.FC<{
{InsufficientBalance && (
<UniLink
href="https://faucet.crossbell.io/"
className="text-red-600 px-4 h-8 flex items-center w-full whitespace-nowrap hover:bg-zinc-100"
className="text-red-600 px-4 h-8 flex items-center w-full whitespace-nowrap hover:bg-hover"
>
<span className="mr-2 fill-red-600 i-bxs:bell"></span>
Insufficient $CSB balance ({balance?.formatted})
@ -223,7 +223,7 @@ export const ConnectButton: React.FC<{
size === "base"
? "pl-5 pr-6 h-11"
: "pl-4 pr-5 h-9"
} flex items-center w-full whitespace-nowrap hover:bg-zinc-100`}
} flex items-center w-full whitespace-nowrap hover:bg-hover`}
aria-label={link.label}
>
<span className="mr-2 flex justify-center">

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

@ -103,7 +103,7 @@ export const SiteArchives: React.FC<{
<Link
key={post.id}
href={`/${post.slug || post.id}`}
className="flex justify-between items-center p-2 rounded-lg -mx-2 hover:bg-zinc-100"
className="flex justify-between items-center p-2 rounded-lg -mx-2 hover:bg-hover"
>
<span className="text-zinc-700">{post.title}</span>
<span className="text-zinc-400 mr-3 whitespace-nowrap">
@ -117,7 +117,7 @@ export const SiteArchives: React.FC<{
})}
{hasNextPage && (
<Button
className="mt-8 w-full hover:bg-zinc-100 bg-zinc-50 transition-colors text-sm"
className="mt-8 w-full hover:bg-hover bg-zinc-50 transition-colors text-sm"
variant="text"
onClick={fetchNextPage}
isLoading={isFetchingNextPage}

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

@ -96,14 +96,15 @@ export const SiteHeader: React.FC<{
const bannerRef = useRef<HTMLImageElement | HTMLVideoElement>(null)
const [averageColor, setAverageColor] = useState<string>()
const [hoverColor, setHoverColor] = useState<string>()
useEffect(() => {
if (bannerRef?.current) {
console.log(bannerRef?.current)
fac
.getColorAsync(bannerRef.current)
.then((color) => {
setAverageColor(chroma(color.hex).hex())
setHoverColor(chroma(color.hex).luminance(0.9).hex())
})
.catch((e) => {
console.warn(e)
@ -113,6 +114,7 @@ export const SiteHeader: React.FC<{
.getColorAsync(avatarRef.current)
.then((color) => {
setAverageColor(chroma(color.hex).luminance(0.95).hex())
setHoverColor(chroma(color.hex).luminance(0.9).hex())
})
.catch((e) => {
console.warn(e)
@ -122,10 +124,19 @@ export const SiteHeader: React.FC<{
return (
<header className="xlog-header border-b border-zinc-100 relative">
{averageColor && (
<style jsx global>{`
:root {
--hover-color: ${hoverColor};
}
`}</style>
)}
<div
className="xlog-banner absolute top-0 bottom-0 left-0 right-0 -z-10 overflow-hidden"
style={{
backgroundColor: `var(--banner-bg-color, ${averageColor})`,
backgroundColor: averageColor
? `var(--banner-bg-color, ${averageColor})`
: undefined,
}}
>
{(() => {
@ -202,7 +213,7 @@ export const SiteHeader: React.FC<{
<UniLink
key={item.text}
href={item.url}
className="h-10 flex w-full space-x-2 items-center px-3 hover:bg-gray-100"
className="h-10 flex w-full space-x-2 items-center px-3 hover:bg-hover"
>
<span className="fill-gray-500 flex">
{item.icon}

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

@ -38,7 +38,7 @@ export const SiteHome: React.FC<{
<Link
key={post.id}
href={`/${post.slug || post.id}`}
className="xlog-post sm:hover:bg-zinc-100 bg-white transition-colors px-5 py-7 -mx-5 first:-mt-5 sm:rounded-xl flex flex-col sm:flex-row items-center"
className="xlog-post sm:hover:bg-hover bg-white transition-all px-5 py-7 -mx-5 first:-mt-5 sm:rounded-xl flex flex-col sm:flex-row items-center"
>
<div className="flex-1 flex justify-center flex-col w-full min-w-0">
<h3 className="xlog-post-title text-2xl font-bold">
@ -108,7 +108,7 @@ export const SiteHome: React.FC<{
)}
{hasNextPage && (
<Button
className="mt-8 w-full hover:bg-zinc-100 bg-zinc-50 transition-colors text-sm"
className="mt-8 w-full hover:bg-hover bg-zinc-50 transition-colors text-sm"
variant="text"
onClick={fetchNextPage}
isLoading={isFetchingNextPage}

1
src/css/variables.css
View File

@ -8,4 +8,5 @@
--header-height: auto;
/* Accent color for form controls */
accent-color: var(--theme-color);
--hover-color: theme("colors.zinc.100");
}

1
tailwind.config.js
View File

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