Skip to content

Commit fa7448c

Browse files
ameer2468ameer2468
authored
improvement: new buttons look (#960)
* update web buttons * Update globals.css * Update globals.css
1 parent fa61a64 commit fa7448c

File tree

9 files changed

+78
-62
lines changed

9 files changed

+78
-62
lines changed

‎apps/web/app/(org)/dashboard/_components/Navbar/Desktop.tsx‎

Lines changed: 47 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -35,59 +35,57 @@ export const DesktopNav = () => {
3535
}, [toggleSidebarCollapsed]);
3636

3737
return (
38-
<>
39-
<motion.div
40-
initial={{
41-
width: sidebarCollapsed ? "70px" : "230px",
42-
}}
43-
animate={{
44-
width: sidebarCollapsed ? "70px" : "230px",
45-
transition: {
46-
duration: 0.6,
47-
type: "spring",
48-
bounce: 0.25,
49-
},
50-
}}
51-
className={clsx("hidden z-50 h-full lg:flex group", "relative")}
52-
>
53-
<div className="flex flex-col w-full max-w-[220px] mx-auto h-full">
54-
<div className="flex justify-start items-center px-3 pt-5 mb-3.5 w-full truncate min-h-8">
55-
<Link href="/dashboard">
56-
<Logo
57-
hideLogoName={sidebarCollapsed}
58-
className="mx-auto w-[120px] h-[40px]"
59-
/>
60-
</Link>
61-
</div>
38+
<motion.div
39+
initial={{
40+
width: sidebarCollapsed ? "70px" : "230px",
41+
}}
42+
animate={{
43+
width: sidebarCollapsed ? "70px" : "230px",
44+
transition: {
45+
duration: 0.6,
46+
type: "spring",
47+
bounce: 0.25,
48+
},
49+
}}
50+
className={clsx("hidden z-50 h-full lg:flex group", "relative")}
51+
>
52+
<div className="flex flex-col w-full max-w-[220px] mx-auto h-full">
53+
<div className="flex justify-start items-center px-3 pt-5 mb-3.5 w-full truncate min-h-8">
54+
<Link href="/dashboard">
55+
<Logo
56+
hideLogoName={sidebarCollapsed}
57+
className="mx-auto w-[120px] h-[40px]"
58+
/>
59+
</Link>
60+
</div>
6261

63-
<div className="flex overflow-y-auto flex-col flex-grow">
64-
<div className="flex flex-col px-3 h-full">
65-
<AdminNavItems />
66-
</div>
62+
<div className="flex overflow-y-auto flex-col flex-grow">
63+
<div className="flex flex-col px-3 h-full">
64+
<AdminNavItems />
6765
</div>
66+
</div>
6867

69-
<Tooltip
70-
kbd={[cmdSymbol, "Shift", "S"]}
71-
position="right"
72-
content="Toggle collapse"
68+
<Tooltip
69+
kbd={[cmdSymbol, "Shift", "S"]}
70+
position="right"
71+
content="Toggle collapse"
72+
>
73+
<Button
74+
variant="white"
75+
onClick={toggleSidebarCollapsed}
76+
className="absolute right-[-12px] size-7 p-0 min-w-[unset] top-[50%] transform -translate-y-1/2 rounded-full transition-colors z-10"
7377
>
74-
<Button
75-
variant="dark"
76-
onClick={toggleSidebarCollapsed}
77-
className="absolute right-[-12px] size-7 p-0 min-w-[unset] hover:border-gray-3 hover:bg-gray-2 top-[50%] transform -translate-y-1/2 rounded-full border bg-gray-1 border-gray-3 transition-colors z-10"
78-
>
79-
<ChevronRight
80-
size={14}
81-
className={clsx(
82-
"transition-transform duration-200 text-gray-12",
83-
sidebarCollapsed ? "rotate-180" : "",
84-
)}
85-
/>
86-
</Button>
87-
</Tooltip>
88-
</div>
89-
</motion.div>
90-
</>
78+
<ChevronRight
79+
size={14}
80+
className={clsx(
81+
"transition-transform duration-200 text-gray-12",
82+
sidebarCollapsed ? "rotate-180" : "",
83+
)}
84+
/>
85+
</Button>
86+
</Tooltip>
87+
</div>
88+
</motion.div>
9189
);
9290
};
9391

‎apps/web/app/(org)/dashboard/_components/Navbar/SpacesList.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -142,10 +142,10 @@ const SpacesList = ({ toggleMobileNav }: { toggleMobileNav?: () => void }) => {
142142
<Tooltip position="right" content="Create space">
143143
<Button
144144
className={clsx(
145-
"p-0 bg-transparent min-w-[unset] hover:bg-gray-3",
145+
"p-0 min-w-[unset] hover:bg-gray-3",
146146
sidebarCollapsed ? "size-8" : "size-7",
147147
)}
148-
variant="gray"
148+
variant="white"
149149
onClick={() => {
150150
setShowSpaceDialog(true);
151151
}}

‎apps/web/app/(org)/login/form.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -419,7 +419,7 @@ const NormalLogin = ({
419419
}}
420420
/>
421421
<MotionButton
422-
variant="primary"
422+
variant="dark"
423423
type="submit"
424424
disabled={loading || emailSent}
425425
icon={<FontAwesomeIcon className="mr-1 size-4" icon={faEnvelope} />}

‎apps/web/app/globals.css‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@
2525
--filler-txt: #b3b3b3;
2626
--text-primary: #0d1b2a;
2727
--text-secondary: #ffffff;
28+
--shadow-gray-11: hsl(0, 0%, 13%);
2829
--header-height: 80px;
2930
--vh100-offset: calc(100vh - var(--header-height));
3031
--foreground-rgb: #000000;
@@ -67,6 +68,22 @@ html {
6768
border-radius: 10px;
6869
}
6970

71+
.dark .dark-button-shadow {
72+
box-shadow: 0 1.5px 0 0 rgba(0, 0, 0, 0.2) inset;
73+
}
74+
75+
.dark .gray-button-shadow {
76+
box-shadow: 0 1.5px 0 0 rgba(255, 255, 255, 0.05) inset;
77+
}
78+
79+
.gray-button-shadow {
80+
box-shadow: 0 1.5px 0 0 rgba(255, 255, 255, 0.4) inset;
81+
}
82+
83+
.dark-button-shadow {
84+
box-shadow: 0 1.5px 0 0 rgba(255, 255, 255, 0.2) inset;
85+
}
86+
7087
.dark ::selection {
7188
background: #ffffff;
7289
color: #000000;

‎apps/web/components/ReadyToGetStarted.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ export function ReadyToGetStarted() {
2929
{homepageCopy.readyToGetStarted.buttons.secondary}
3030
</Button>
3131
<Button
32-
variant="primary"
32+
variant="blue"
3333
href="/download"
3434
size="lg"
3535
className="w-full font-medium sm:w-auto"

‎apps/web/components/pages/HomePage/Features.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -202,7 +202,7 @@ const Features = () => {
202202
{/* View all features button */}
203203
<Button
204204
href="/features"
205-
variant="primary"
205+
variant="dark"
206206
size="lg"
207207
className="inline-flex"
208208
>

‎apps/web/components/pages/HomePage/Pricing/CommercialCard.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -75,7 +75,7 @@ export const CommercialCard = () => {
7575
<div className="text-center">
7676
<a
7777
href="/docs/commercial-license"
78-
className="text-sm text-gray-10 hover:text-gray-12 underline"
78+
className="text-sm underline text-gray-10 hover:text-gray-12"
7979
>
8080
Learn more about the commercial license here
8181
</a>
@@ -184,7 +184,7 @@ export const CommercialCard = () => {
184184
<Button
185185
disabled={commercialLoading}
186186
onClick={openCommercialCheckout}
187-
variant="primary"
187+
variant="dark"
188188
size="lg"
189189
className="w-full font-medium"
190190
aria-label="Purchase Commercial License"

‎apps/web/components/pages/HomePage/Testimonials.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -140,7 +140,7 @@ const Testimonials = () => {
140140
<Button
141141
href="/testimonials"
142142
className="mx-auto mt-10 md:mt-0 w-fit"
143-
variant="primary"
143+
variant="dark"
144144
size="lg"
145145
>
146146
{homepageCopy.testimonials.cta}

‎packages/ui/src/components/Button.tsx‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -14,16 +14,17 @@ const buttonVariants = cva(
1414
variants: {
1515
variant: {
1616
primary:
17-
"bg-gray-12 text-gray-1 hover:bg-gray-11 disabled:bg-gray-6 disabled:text-gray-9",
18-
blue: "bg-blue-600 text-white hover:bg-blue-700 disabled:bg-gray-6 disabled:text-gray-9",
17+
"bg-gray-12 dark-button-shadow text-gray-1 disabled:bg-gray-6 disabled:text-gray-9",
18+
blue: "bg-blue-600 text-white border border-blue-800 shadow-[0_1.50px_0_0_rgba(255,255,255,0.20)_inset] hover:bg-blue-700 disabled:bg-gray-6 disabled:text-gray-9",
1919
destructive:
2020
"bg-red-500 text-white hover:bg-red-600 disabled:bg-red-200",
2121
outline:
2222
"border border-gray-4 hover:border-gray-12 hover:bg-gray-12 hover:text-gray-1 text-gray-12 disabled:bg-gray-8",
23-
white: "bg-gray-1 text-gray-12 hover:bg-gray-2 disabled:bg-gray-8",
23+
white:
24+
"bg-gray-1 border border-gray-6 text-gray-12 hover:bg-gray-3 disabled:bg-gray-8",
2425
ghost: "hover:bg-white/20 hover:text-white",
25-
gray: "bg-gray-4 text-gray-12 hover:bg-gray-5 disabled:bg-gray-6 disabled:text-gray-9",
26-
dark: "bg-gray-12 text-gray-1 disabled:cursor-not-allowed hover:bg-gray-11 disabled:text-gray-10 disabled:bg-gray-7 disabled:border-gray-8",
26+
gray: "bg-gray-4 hover:bg-gray-6 border border-gray-5 gray-button-shadow text-gray-12 disabled:bg-gray-6 disabled:text-gray-9",
27+
dark: "bg-gray-12 dark-button-shadow hover:bg-gray-11 border border-gray-12 text-gray-1 disabled:cursor-not-allowed disabled:text-gray-10 disabled:bg-gray-7 disabled:border-gray-8",
2728
darkgradient:
2829
"bg-gradient-to-t button-gradient-border from-[#0f0f0f] to-[#404040] shadow-[0_0_0_1px] hover:brightness-110 shadow-[#383838] text-gray-50 hover:bg-[#383838] disabled:bg-[#383838] border-transparent",
2930
radialblue:

0 commit comments

Comments
 (0)