Skip to content

Commit 27724c0

Browse files
AyanavaKarmakarAyanavaKarmakar
authored
fix: dashboard ui in mobile screens (#65)
* refactor: improve layout and styling for website page header and settings tab components - Adjusted the layout of the website page header for better responsiveness. - Enhanced the settings tab components with consistent spacing and improved copy functionality for code snippets. - Updated the structure of the website info section for better alignment and readability. * refactor: enhance layout and structure of settings tab in website info section - Improved the layout of the settings tab by adjusting spacing and alignment. - Updated the structure to group elements more logically for better readability.
1 parent 95cf20a commit 27724c0

File tree

3 files changed

+118
-41
lines changed

3 files changed

+118
-41
lines changed

‎apps/dashboard/app/(main)/websites/[id]/_components/tabs/settings-tab.tsx‎

Lines changed: 62 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -175,9 +175,11 @@ export function WebsiteSettingsTab({
175175
installMethod === 'script'
176176
? trackingCode
177177
: generateNpmComponentCode(websiteId, trackingOptions),
178-
installMethod === 'script' ? 'script-tag' : 'tracking-code',
179-
installMethod === 'script'
180-
? 'Script tag copied to clipboard!'
178+
installMethod === 'script'
179+
? 'script-tag'
180+
: 'tracking-code',
181+
installMethod === 'script'
182+
? 'Script tag copied to clipboard!'
181183
: 'Tracking code copied to clipboard!'
182184
)
183185
}
@@ -519,7 +521,13 @@ function TrackingCodeTab({
519521
code={trackingCode}
520522
copied={copiedBlockId === 'script-tag'}
521523
description="Add this script to the <head> section of your website:"
522-
onCopy={() => onCopyCode(trackingCode, 'script-tag', 'Script tag copied to clipboard!')}
524+
onCopy={() =>
525+
onCopyCode(
526+
trackingCode,
527+
'script-tag',
528+
'Script tag copied to clipboard!'
529+
)
530+
}
523531
/>
524532
</TabsContent>
525533

@@ -551,7 +559,13 @@ function TrackingCodeTab({
551559
code="npm install @databuddy/sdk"
552560
copied={copiedBlockId === 'npm-install'}
553561
description=""
554-
onCopy={() => onCopyCode('npm install @databuddy/sdk', 'npm-install', 'Command copied to clipboard!')}
562+
onCopy={() =>
563+
onCopyCode(
564+
'npm install @databuddy/sdk',
565+
'npm-install',
566+
'Command copied to clipboard!'
567+
)
568+
}
555569
/>
556570
</TabsContent>
557571

@@ -560,7 +574,13 @@ function TrackingCodeTab({
560574
code="yarn add @databuddy/sdk"
561575
copied={copiedBlockId === 'yarn-install'}
562576
description=""
563-
onCopy={() => onCopyCode('yarn add @databuddy/sdk', 'yarn-install', 'Command copied to clipboard!')}
577+
onCopy={() =>
578+
onCopyCode(
579+
'yarn add @databuddy/sdk',
580+
'yarn-install',
581+
'Command copied to clipboard!'
582+
)
583+
}
564584
/>
565585
</TabsContent>
566586

@@ -569,7 +589,13 @@ function TrackingCodeTab({
569589
code="pnpm add @databuddy/sdk"
570590
copied={copiedBlockId === 'pnpm-install'}
571591
description=""
572-
onCopy={() => onCopyCode('pnpm add @databuddy/sdk', 'pnpm-install', 'Command copied to clipboard!')}
592+
onCopy={() =>
593+
onCopyCode(
594+
'pnpm add @databuddy/sdk',
595+
'pnpm-install',
596+
'Command copied to clipboard!'
597+
)
598+
}
573599
/>
574600
</TabsContent>
575601

@@ -578,7 +604,13 @@ function TrackingCodeTab({
578604
code="bun add @databuddy/sdk"
579605
copied={copiedBlockId === 'bun-install'}
580606
description=""
581-
onCopy={() => onCopyCode('bun add @databuddy/sdk', 'bun-install', 'Command copied to clipboard!')}
607+
onCopy={() =>
608+
onCopyCode(
609+
'bun add @databuddy/sdk',
610+
'bun-install',
611+
'Command copied to clipboard!'
612+
)
613+
}
582614
/>
583615
</TabsContent>
584616
</Tabs>
@@ -587,7 +619,13 @@ function TrackingCodeTab({
587619
code={npmCode}
588620
copied={copiedBlockId === 'tracking-code'}
589621
description="Then initialize the tracker in your code:"
590-
onCopy={() => onCopyCode(npmCode, 'tracking-code', 'Tracking code copied to clipboard!')}
622+
onCopy={() =>
623+
onCopyCode(
624+
npmCode,
625+
'tracking-code',
626+
'Tracking code copied to clipboard!'
627+
)
628+
}
591629
/>
592630
</div>
593631
</TabsContent>
@@ -683,20 +721,22 @@ function WebsiteInfoSection({
683721
websiteId: string;
684722
}) {
685723
return (
686-
<div className="mt-6 grid grid-cols-2 gap-4 lg:grid-cols-1 xl:grid-cols-2">
724+
<div className="mt-6 grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-1 xl:grid-cols-2">
687725
<div className="space-y-3 rounded-md bg-muted/50 p-4">
688726
<h4 className="flex items-center gap-2 font-medium text-sm">
689727
<InfoIcon className="h-4 w-4 text-muted-foreground" />
690728
Website Details
691729
</h4>
692730
<div className="space-y-2 text-sm">
693-
<div className="flex justify-between">
731+
<div className="flex flex-col sm:flex-row sm:justify-between">
694732
<span className="text-muted-foreground">Created</span>
695-
<span>{new Date(websiteData.createdAt).toLocaleDateString()}</span>
733+
<span className="mt-1 sm:mt-0">
734+
{new Date(websiteData.createdAt).toLocaleDateString()}
735+
</span>
696736
</div>
697-
<div className="flex justify-between">
737+
<div className="flex flex-col sm:flex-row sm:justify-between">
698738
<span className="text-muted-foreground">Website ID</span>
699-
<div className="flex items-center gap-1 font-mono text-xs">
739+
<div className="mt-1 flex items-center gap-1 font-mono text-xs sm:mt-0">
700740
{websiteId}
701741
<Button
702742
className="h-5 w-5"
@@ -715,17 +755,20 @@ function WebsiteInfoSection({
715755
</div>
716756

717757
<div className="rounded-md border border-primary/10 bg-primary/5 p-4">
718-
<div className="flex items-start gap-3">
719-
<div className="mt-0.5 rounded-full bg-primary/10 p-1.5">
720-
<CheckIcon className="h-4 w-4 text-primary" />
758+
<div className="flex flex-col items-start gap-x-3 gap-y-2">
759+
<div className="flex items-center gap-x-2">
760+
<div className="mt-0.5 rounded-full bg-primary/10 p-1.5">
761+
<CheckIcon className="h-4 w-4 text-primary" />
762+
</div>
763+
<p className="font-medium text-sm">Ready to Track</p>
721764
</div>
765+
722766
<div>
723-
<p className="font-medium text-sm">Ready to Track</p>
724767
<p className="mt-1 text-muted-foreground text-xs">
725768
Add the tracking code to your website to start collecting data.
726769
</p>
727770
<Button
728-
className="h-6 px-0 text-primary text-xs"
771+
className="-ml-2 h-6 px-0 text-primary text-xs"
729772
size="sm"
730773
variant="link"
731774
>

‎apps/dashboard/app/(main)/websites/[id]/_components/tabs/tracking-setup-tab.tsx‎

Lines changed: 34 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -5,11 +5,11 @@ import {
55
ArrowClockwiseIcon,
66
ArrowSquareOutIcon,
77
BookOpenIcon,
8+
ChatCircleIcon,
89
CheckIcon,
910
ClipboardIcon,
1011
CodeIcon,
1112
FileCodeIcon,
12-
ChatCircleIcon,
1313
WarningCircleIcon,
1414
} from '@phosphor-icons/react';
1515
import { useState } from 'react';
@@ -198,7 +198,13 @@ export function WebsiteTrackingSetupTab({ websiteId }: WebsiteDataTabProps) {
198198
code={trackingCode}
199199
copied={copiedBlockId === 'script-tag'}
200200
description="Add this script to the <head> section of your HTML:"
201-
onCopy={() => handleCopyCode(trackingCode, 'script-tag', 'Script tag copied to clipboard!')}
201+
onCopy={() =>
202+
handleCopyCode(
203+
trackingCode,
204+
'script-tag',
205+
'Script tag copied to clipboard!'
206+
)
207+
}
202208
/>
203209
<p className="text-muted-foreground text-xs">
204210
Data will appear within a few minutes after installation.
@@ -234,7 +240,11 @@ export function WebsiteTrackingSetupTab({ websiteId }: WebsiteDataTabProps) {
234240
copied={copiedBlockId === 'npm-install'}
235241
description=""
236242
onCopy={() =>
237-
handleCopyCode('npm install @databuddy/sdk', 'npm-install', 'Command copied to clipboard!')
243+
handleCopyCode(
244+
'npm install @databuddy/sdk',
245+
'npm-install',
246+
'Command copied to clipboard!'
247+
)
238248
}
239249
/>
240250
</TabsContent>
@@ -244,7 +254,13 @@ export function WebsiteTrackingSetupTab({ websiteId }: WebsiteDataTabProps) {
244254
code="yarn add @databuddy/sdk"
245255
copied={copiedBlockId === 'yarn-install'}
246256
description=""
247-
onCopy={() => handleCopyCode('yarn add @databuddy/sdk', 'yarn-install', 'Command copied to clipboard!')}
257+
onCopy={() =>
258+
handleCopyCode(
259+
'yarn add @databuddy/sdk',
260+
'yarn-install',
261+
'Command copied to clipboard!'
262+
)
263+
}
248264
/>
249265
</TabsContent>
250266

@@ -253,7 +269,13 @@ export function WebsiteTrackingSetupTab({ websiteId }: WebsiteDataTabProps) {
253269
code="pnpm add @databuddy/sdk"
254270
copied={copiedBlockId === 'pnpm-install'}
255271
description=""
256-
onCopy={() => handleCopyCode('pnpm add @databuddy/sdk', 'pnpm-install', 'Command copied to clipboard!')}
272+
onCopy={() =>
273+
handleCopyCode(
274+
'pnpm add @databuddy/sdk',
275+
'pnpm-install',
276+
'Command copied to clipboard!'
277+
)
278+
}
257279
/>
258280
</TabsContent>
259281

@@ -262,7 +284,13 @@ export function WebsiteTrackingSetupTab({ websiteId }: WebsiteDataTabProps) {
262284
code="bun add @databuddy/sdk"
263285
copied={copiedBlockId === 'bun-install'}
264286
description=""
265-
onCopy={() => handleCopyCode('bun add @databuddy/sdk', 'bun-install', 'Command copied to clipboard!')}
287+
onCopy={() =>
288+
handleCopyCode(
289+
'bun add @databuddy/sdk',
290+
'bun-install',
291+
'Command copied to clipboard!'
292+
)
293+
}
266294
/>
267295
</TabsContent>
268296
</Tabs>

‎apps/dashboard/app/(main)/websites/[id]/_components/website-page-header.tsx‎

Lines changed: 22 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -80,22 +80,28 @@ export function WebsitePageHeader({
8080

8181
if (variant === 'minimal') {
8282
return (
83-
<div className="mb-6 flex items-center gap-3">
84-
{showBackButton && (
85-
<Button asChild size="sm" variant="ghost">
86-
<Link href={`/websites/${websiteId}`}>
87-
<ArrowLeftIcon size={16} />
88-
Back
89-
</Link>
90-
</Button>
91-
)}
92-
<div className="rounded-xl border border-primary/20 bg-primary/10 p-3">
93-
{icon}
94-
</div>
95-
<div className="flex-1">
96-
<h1 className="font-semibold text-xl">{title}</h1>
97-
{renderSubtitle()}
83+
<div className="mb-6 flex flex-col gap-4 sm:flex-row sm:items-center sm:gap-3">
84+
<div className="flex items-center gap-3">
85+
<div className="flex items-center gap-3">
86+
{showBackButton && (
87+
<Button asChild size="sm" variant="ghost">
88+
<Link href={`/websites/${websiteId}`}>
89+
<ArrowLeftIcon size={16} />
90+
<span className="xs:inline hidden">Back</span>
91+
</Link>
92+
</Button>
93+
)}
94+
<div className="rounded-xl border border-primary/20 bg-primary/10 p-3">
95+
{icon}
96+
</div>
97+
</div>
98+
99+
<div className="flex-1">
100+
<h1 className="font-semibold text-xl">{title}</h1>
101+
{renderSubtitle()}
102+
</div>
98103
</div>
104+
99105
<div className="flex items-center gap-3">
100106
{onRefresh && (
101107
<Button
@@ -108,7 +114,7 @@ export function WebsitePageHeader({
108114
className={isRefreshing ? 'animate-spin' : ''}
109115
size={16}
110116
/>
111-
Refresh
117+
<span className="xs:inline hidden">Refresh</span>
112118
</Button>
113119
)}
114120
{additionalActions}

0 commit comments

Comments
 (0)