feat: bigger dashboard tabs
This commit is contained in:
DIYgod
parent
2b9db31546
commit
40989b7b87
|
|
@ -27,7 +27,20 @@ import {
|
|||
export const ConnectButton: React.FC<{
|
||||
left?: boolean
|
||||
variant?: "text" | "primary" | "secondary" | "like" | "collect" | "crossbell"
|
||||
}> = ({ left, variant }) => {
|
||||
size?: "base" | "sm"
|
||||
}> = ({ left, variant, size = "sm" }) => {
|
||||
let avatarSize
|
||||
let sizeDecrease
|
||||
switch (size) {
|
||||
case "base":
|
||||
avatarSize = 40
|
||||
sizeDecrease = "sm"
|
||||
break
|
||||
default:
|
||||
avatarSize = 30
|
||||
sizeDecrease = "xs"
|
||||
}
|
||||
|
||||
const [ssrReady, account] = useAccountState(({ ssrReady, computed }) => [
|
||||
ssrReady,
|
||||
computed.account,
|
||||
|
|
@ -105,7 +118,7 @@ export const ConnectButton: React.FC<{
|
|||
<Button
|
||||
className="text-accent"
|
||||
onClick={openConnectModal}
|
||||
style={{ height: "30px" }}
|
||||
style={{ height: avatarSize + "px" }}
|
||||
variant={variant || "primary"}
|
||||
>
|
||||
Connect
|
||||
|
|
@ -113,7 +126,10 @@ export const ConnectButton: React.FC<{
|
|||
)
|
||||
}
|
||||
return (
|
||||
<div className="relative group" style={{ gap: 12, height: "30px" }}>
|
||||
<div
|
||||
className="relative group"
|
||||
style={{ gap: 12, height: avatarSize + "px" }}
|
||||
>
|
||||
{userSites.isSuccess ? (
|
||||
<>
|
||||
<button
|
||||
|
|
@ -125,13 +141,13 @@ export const ConnectButton: React.FC<{
|
|||
className="align-middle mr-2"
|
||||
images={userSites.data?.[0]?.avatars || []}
|
||||
name={userSites.data?.[0]?.name}
|
||||
size={30}
|
||||
size={avatarSize}
|
||||
/>
|
||||
<div className="flex-1 flex flex-col min-w-0">
|
||||
<span
|
||||
className={`text-left leading-none font-medium truncate ${
|
||||
InsufficientBalance ? "text-red-600" : "text-gray-600"
|
||||
}`}
|
||||
} ${size === "base" ? "text-base" : "text-sm"}`}
|
||||
style={{ marginBottom: "0.15rem" }}
|
||||
>
|
||||
{userSites.data?.[0]?.name ||
|
||||
|
|
@ -139,7 +155,9 @@ export const ConnectButton: React.FC<{
|
|||
</span>
|
||||
{userSites.data?.[0]?.username && (
|
||||
<span
|
||||
className={`text-left leading-none text-xs truncate ${
|
||||
className={`text-left leading-none ${
|
||||
sizeDecrease === "sm" ? "text-sm" : "text-xs"
|
||||
} truncate ${
|
||||
InsufficientBalance ? "text-red-400" : "text-gray-400"
|
||||
}`}
|
||||
>
|
||||
|
|
@ -154,7 +172,11 @@ export const ConnectButton: React.FC<{
|
|||
left ? "left" : "right"
|
||||
}-0 pt-2 group-hover:block top-full z-10 text-gray-600`}
|
||||
>
|
||||
<div className="bg-white rounded-lg ring-1 ring-zinc-100 min-w-[140px] shadow-md py-2 text-sm">
|
||||
<div
|
||||
className={`bg-white rounded-lg ring-1 ring-zinc-100 min-w-[140px] shadow-md py-2 ${
|
||||
size === "base" ? "text-base" : "text-sm"
|
||||
}`}
|
||||
>
|
||||
{InsufficientBalance && (
|
||||
<UniLink
|
||||
href="https://faucet.crossbell.io/"
|
||||
|
|
@ -170,7 +192,9 @@ export const ConnectButton: React.FC<{
|
|||
key={i}
|
||||
href={link.url}
|
||||
onClick={link.onClick}
|
||||
className="px-4 h-8 flex items-center w-full whitespace-nowrap hover:bg-zinc-100"
|
||||
className={`${
|
||||
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`}
|
||||
aria-label={link.label}
|
||||
>
|
||||
<span className="mr-2 flex justify-center">
|
||||
|
|
|
|||
|
|
@ -142,7 +142,7 @@ export function DashboardLayout({
|
|||
</div>
|
||||
)}
|
||||
<div className="mb-2 px-5 pt-3 pb-2">
|
||||
<ConnectButton left={true} />
|
||||
<ConnectButton left={true} size="base" />
|
||||
</div>
|
||||
|
||||
<div className="px-3 space-y-[2px] text-zinc-500">
|
||||
|
|
@ -158,10 +158,10 @@ export function DashboardLayout({
|
|||
href={link.href}
|
||||
key={link.href}
|
||||
className={clsx(
|
||||
`flex px-2 h-8 text-sm items-center rounded-lg space-x-2 w-full`,
|
||||
`flex px-4 h-12 items-center rounded-md space-x-2 w-full`,
|
||||
active
|
||||
? `bg-gray-200 font-medium text-gray-800`
|
||||
: `hover:bg-gray-200 hover:bg-opacity-50`,
|
||||
? `bg-slate-200 font-medium text-slate-800`
|
||||
: `hover:bg-slate-200 hover:bg-opacity-50`,
|
||||
)}
|
||||
onClick={link.onClick}
|
||||
>
|
||||
|
|
@ -177,7 +177,7 @@ export function DashboardLayout({
|
|||
href={getSiteLink({
|
||||
subdomain,
|
||||
})}
|
||||
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"
|
||||
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"
|
||||
>
|
||||
<span className="i-bi:box-arrow-up-right"></span>
|
||||
<span>View Site</span>
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@ export const DashboardSidebar: React.FC<{
|
|||
children: React.ReactNode
|
||||
}> = ({ children }) => {
|
||||
return (
|
||||
<div className="w-sidebar fixed top-0 bottom-0 left-0 bg-zinc-50 z-10">
|
||||
<div className="w-sidebar fixed top-0 bottom-0 left-0 bg-slate-50 z-10">
|
||||
{children}
|
||||
<div className="w-[1px] bg-border absolute top-0 right-0 bottom-0"></div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -22,7 +22,7 @@ export const Tabs: React.FC<{ items: TabItem[] }> = ({ items }) => {
|
|||
onClick={item.onClick}
|
||||
key={item.text}
|
||||
className={clsx(
|
||||
`border-b-2 text-sm inline-flex items-center h-10`,
|
||||
`border-b-2 inline-flex items-center h-10`,
|
||||
item.active
|
||||
? `border-accent text-black font-medium`
|
||||
: `text-gray-500 border-transparent hover:border-gray-300`,
|
||||
|
|
|
|||
|
|
@ -212,7 +212,6 @@ textarea.input {
|
|||
.form-label {
|
||||
@apply block;
|
||||
@apply mb-2;
|
||||
@apply text-sm;
|
||||
@apply font-bold;
|
||||
@apply text-gray-700;
|
||||
@apply capitalize;
|
||||
|
|
|
|||
Loading…
Reference in New Issue