Made font size match device preference
This commit is contained in:
+25
-25
@@ -58,14 +58,14 @@ export const SettingsView: Component = () => {
|
||||
<header class="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
|
||||
<div class="min-w-0 flex-1">
|
||||
<h1 class="text-2xl sm:text-4xl font-black tracking-tighter">Settings</h1>
|
||||
<p class="text-[10px] sm:text-xs text-muted-foreground truncate opacity-70 font-mono tracking-tight" title={pb.authStore.model?.email}>
|
||||
<p class="text-[0.625rem] sm:text-xs text-muted-foreground truncate opacity-70 font-mono tracking-tight" title={pb.authStore.model?.email}>
|
||||
{pb.authStore.model?.email}
|
||||
</p>
|
||||
</div>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
class="w-full sm:w-auto font-black uppercase tracking-widest text-[10px] h-10 sm:h-8 rounded-xl shadow-sm border-border/60"
|
||||
class="w-full sm:w-auto font-black uppercase tracking-widest text-[0.625rem] h-10 sm:h-8 rounded-xl shadow-sm border-border/60"
|
||||
onClick={() => { pb.authStore.clear(); location.reload(); }}
|
||||
>
|
||||
Sign Out
|
||||
@@ -134,7 +134,7 @@ export const SettingsView: Component = () => {
|
||||
<Button
|
||||
variant={shareMode() === 'ADD_USER' ? 'default' : 'outline'}
|
||||
size="sm"
|
||||
class="h-7 text-[10px] gap-1 px-2"
|
||||
class="h-7 text-[0.625rem] gap-1 px-2"
|
||||
title="Recipient gets edit access (Collaboration)"
|
||||
onClick={() => setShareMode('ADD_USER')}
|
||||
>
|
||||
@@ -144,7 +144,7 @@ export const SettingsView: Component = () => {
|
||||
<Button
|
||||
variant={shareMode() === 'SEND_TASK' ? 'default' : 'outline'}
|
||||
size="sm"
|
||||
class="h-7 text-[10px] gap-1 px-2"
|
||||
class="h-7 text-[0.625rem] gap-1 px-2"
|
||||
title="Task ownership is transferred to recipient (Handoff)"
|
||||
onClick={() => setShareMode('SEND_TASK')}
|
||||
>
|
||||
@@ -215,7 +215,7 @@ export const SettingsView: Component = () => {
|
||||
Share
|
||||
</Button>
|
||||
</div>
|
||||
<p class="text-[10px] text-muted-foreground italic px-1 pt-1">
|
||||
<p class="text-[0.625rem] text-muted-foreground italic px-1 pt-1">
|
||||
{shareMode() === 'ADD_USER'
|
||||
? "User will be added to the task's shared list."
|
||||
: "Task owner will change to the recipient immediately when tagged."}
|
||||
@@ -226,7 +226,7 @@ export const SettingsView: Component = () => {
|
||||
{/* Active share rules */}
|
||||
{/* Active share rules - Outgoing */}
|
||||
<div class="space-y-3">
|
||||
<h4 class="text-[10px] font-black uppercase tracking-widest text-muted-foreground pb-1 flex items-center gap-2">
|
||||
<h4 class="text-[0.625rem] font-black uppercase tracking-widest text-muted-foreground pb-1 flex items-center gap-2">
|
||||
<div class="w-1 h-1 rounded-full bg-primary" />
|
||||
Sharing With Others
|
||||
</h4>
|
||||
@@ -237,7 +237,7 @@ export const SettingsView: Component = () => {
|
||||
const isOwner = r.ownerId === pb.authStore.model?.id;
|
||||
return !isSystem && isOwner;
|
||||
})} fallback={
|
||||
<div class="text-center py-4 text-muted-foreground text-[10px] uppercase tracking-widest italic border border-dashed border-border/40 rounded-xl bg-muted/5">
|
||||
<div class="text-center py-4 text-muted-foreground text-[0.625rem] uppercase tracking-widest italic border border-dashed border-border/40 rounded-xl bg-muted/5">
|
||||
You aren't sharing with anyone yet.
|
||||
</div>
|
||||
}>
|
||||
@@ -249,7 +249,7 @@ export const SettingsView: Component = () => {
|
||||
</div>
|
||||
<div class="min-w-0">
|
||||
<p class="text-xs font-bold truncate">To: {getUserName(rule.targetUserId)}</p>
|
||||
<p class="text-[9px] text-muted-foreground uppercase font-black tracking-widest opacity-60 flex items-center gap-1">
|
||||
<p class="text-[0.5625rem] text-muted-foreground uppercase font-black tracking-widest opacity-60 flex items-center gap-1">
|
||||
{rule.type === 'all' ? 'All Tasks' : `Tag: ${rule.tagName}`}
|
||||
<span class="mx-1">•</span>
|
||||
<button
|
||||
@@ -278,7 +278,7 @@ export const SettingsView: Component = () => {
|
||||
|
||||
{/* Active share rules - Incoming */}
|
||||
<div class="space-y-3 pt-4 border-t border-border/20">
|
||||
<h4 class="text-[10px] font-black uppercase tracking-widest text-muted-foreground pb-1 flex items-center gap-2">
|
||||
<h4 class="text-[0.625rem] font-black uppercase tracking-widest text-muted-foreground pb-1 flex items-center gap-2">
|
||||
<div class="w-1 h-1 rounded-full bg-indigo-500" />
|
||||
Shared With You
|
||||
</h4>
|
||||
@@ -289,7 +289,7 @@ export const SettingsView: Component = () => {
|
||||
const isTarget = r.targetUserId === pb.authStore.model?.id;
|
||||
return !isSystem && isTarget;
|
||||
})} fallback={
|
||||
<div class="text-center py-4 text-muted-foreground text-[10px] uppercase tracking-widest italic border border-dashed border-border/40 rounded-xl bg-muted/5">
|
||||
<div class="text-center py-4 text-muted-foreground text-[0.625rem] uppercase tracking-widest italic border border-dashed border-border/40 rounded-xl bg-muted/5">
|
||||
No one has shared with you yet.
|
||||
</div>
|
||||
}>
|
||||
@@ -301,7 +301,7 @@ export const SettingsView: Component = () => {
|
||||
</div>
|
||||
<div class="min-w-0">
|
||||
<p class="text-xs font-bold truncate">From: {getUserName(rule.ownerId)}</p>
|
||||
<p class="text-[9px] text-muted-foreground uppercase font-black tracking-widest opacity-60 flex items-center gap-1">
|
||||
<p class="text-[0.5625rem] text-muted-foreground uppercase font-black tracking-widest opacity-60 flex items-center gap-1">
|
||||
{rule.type === 'all' ? 'All Tasks' : `Tag: ${rule.tagName}`}
|
||||
<span class="mx-1">•</span>
|
||||
{rule.share_mode === 'SEND_TASK' ? 'HANDOFF' : 'COLLAB'}
|
||||
@@ -340,7 +340,7 @@ export const SettingsView: Component = () => {
|
||||
{tagDef?.isUser ? getUserName(rule.targetUserId) : rule.tagName}
|
||||
{tagDef?.isUser ? <Users size={10} class="text-muted-foreground" /> : <Archive size={10} class="text-muted-foreground" />}
|
||||
</p>
|
||||
<p class="text-[10px] text-muted-foreground uppercase tracking-wider flex items-center gap-1">
|
||||
<p class="text-[0.625rem] text-muted-foreground uppercase tracking-wider flex items-center gap-1">
|
||||
Auto-shared via {tagDef?.isUser ? 'User' : 'Bucket'} Tag
|
||||
<span class="mx-1">•</span>
|
||||
<button
|
||||
@@ -387,7 +387,7 @@ export const SettingsView: Component = () => {
|
||||
<div class="space-y-4 pt-2 animate-in fade-in slide-in-from-top-2 duration-300">
|
||||
{/* Create Bucket */}
|
||||
<div class="p-3 rounded-xl bg-muted/30 border border-border/50 space-y-3">
|
||||
<h4 class="text-[10px] font-black uppercase tracking-widest text-muted-foreground">Create New Bucket</h4>
|
||||
<h4 class="text-[0.625rem] font-black uppercase tracking-widest text-muted-foreground">Create New Bucket</h4>
|
||||
<form
|
||||
class="flex gap-2"
|
||||
onSubmit={(e) => {
|
||||
@@ -474,7 +474,7 @@ export const SettingsView: Component = () => {
|
||||
autofocus
|
||||
/>
|
||||
</Show>
|
||||
<p class="text-[10px] text-muted-foreground truncate opacity-80">{bucket.description || "No description"}</p>
|
||||
<p class="text-[0.625rem] text-muted-foreground truncate opacity-80">{bucket.description || "No description"}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -620,7 +620,7 @@ export const SettingsView: Component = () => {
|
||||
|
||||
<div class="flex items-center grow sm:grow-0 justify-between sm:justify-end gap-3 sm:gap-4 shrink-0 border-t sm:border-t-0 pt-2 sm:pt-0 border-border/20">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="text-[10px] text-muted-foreground font-bold uppercase tracking-wider">Val</span>
|
||||
<span class="text-[0.625rem] text-muted-foreground font-bold uppercase tracking-wider">Val</span>
|
||||
<select
|
||||
value={String(tag.value)}
|
||||
onChange={(e) => upsertTagDefinition(tag.name, parseInt(e.currentTarget.value), tag.color, resolvedTheme())}
|
||||
@@ -679,7 +679,7 @@ export const SettingsView: Component = () => {
|
||||
|
||||
<div class="flex items-center grow sm:grow-0 justify-between sm:justify-end gap-3 sm:gap-4 shrink-0 border-t sm:border-t-0 pt-2 sm:pt-0 border-border/20">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="text-[10px] text-muted-foreground font-bold uppercase tracking-wider">Val</span>
|
||||
<span class="text-[0.625rem] text-muted-foreground font-bold uppercase tracking-wider">Val</span>
|
||||
<select
|
||||
value={String(tag.value)}
|
||||
onChange={(e) => upsertTagDefinition(tag.name, parseInt(e.currentTarget.value), tag.color, resolvedTheme())}
|
||||
@@ -720,7 +720,7 @@ export const SettingsView: Component = () => {
|
||||
</div>
|
||||
<Button
|
||||
size="sm"
|
||||
class="h-9 gap-2 rounded-xl font-bold uppercase tracking-wider text-[10px]"
|
||||
class="h-9 gap-2 rounded-xl font-bold uppercase tracking-wider text-[0.625rem]"
|
||||
onClick={() => {
|
||||
addTemplate({
|
||||
name: "New Template",
|
||||
@@ -793,7 +793,7 @@ export const SettingsView: Component = () => {
|
||||
) : (
|
||||
<div class="min-w-0 cursor-pointer flex-1" onClick={() => setExpandedTemplateId(isExpanded() ? null : template.id)}>
|
||||
<p class="font-bold text-sm tracking-tight truncate">{template.name}</p>
|
||||
<p class="text-[10px] text-muted-foreground uppercase font-black tracking-widest opacity-60">
|
||||
<p class="text-[0.625rem] text-muted-foreground uppercase font-black tracking-widest opacity-60">
|
||||
P:{template.priority} / U:{template.urgency} / {template.tags?.length || 0} Tags
|
||||
</p>
|
||||
</div>
|
||||
@@ -832,7 +832,7 @@ export const SettingsView: Component = () => {
|
||||
<div class="border-t border-border/50 p-4 space-y-4 bg-background/50 animate-in fade-in slide-in-from-top-2 duration-300">
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||||
<div class="space-y-1.5">
|
||||
<label class="text-[10px] font-bold uppercase tracking-wider text-muted-foreground ml-1">Title Placeholder</label>
|
||||
<label class="text-[0.625rem] font-bold uppercase tracking-wider text-muted-foreground ml-1">Title Placeholder</label>
|
||||
<input
|
||||
class="flex h-9 w-full rounded-lg border border-input bg-background px-3 py-1 text-sm shadow-sm focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
|
||||
value={editTitle()}
|
||||
@@ -843,7 +843,7 @@ export const SettingsView: Component = () => {
|
||||
</div>
|
||||
<div class="flex gap-4">
|
||||
<div class="flex-1 space-y-1.5">
|
||||
<label class="text-[10px] font-bold uppercase tracking-wider text-muted-foreground ml-1">Priority</label>
|
||||
<label class="text-[0.625rem] font-bold uppercase tracking-wider text-muted-foreground ml-1">Priority</label>
|
||||
<select
|
||||
class="flex h-9 w-full rounded-lg border border-input bg-background px-3 py-1 text-sm shadow-sm outline-none focus:ring-1 focus:ring-primary appearance-none px-2"
|
||||
value={template.priority}
|
||||
@@ -855,7 +855,7 @@ export const SettingsView: Component = () => {
|
||||
</select>
|
||||
</div>
|
||||
<div class="flex-1 space-y-1.5">
|
||||
<label class="text-[10px] font-bold uppercase tracking-wider text-muted-foreground ml-1">Urgency</label>
|
||||
<label class="text-[0.625rem] font-bold uppercase tracking-wider text-muted-foreground ml-1">Urgency</label>
|
||||
<select
|
||||
class="flex h-9 w-full rounded-lg border border-input bg-background px-3 py-1 text-sm shadow-sm outline-none focus:ring-1 focus:ring-primary appearance-none px-2"
|
||||
value={template.urgency}
|
||||
@@ -870,7 +870,7 @@ export const SettingsView: Component = () => {
|
||||
</div>
|
||||
|
||||
<div class="space-y-1.5">
|
||||
<label class="text-[10px] font-bold uppercase tracking-wider text-muted-foreground ml-1">Tags</label>
|
||||
<label class="text-[0.625rem] font-bold uppercase tracking-wider text-muted-foreground ml-1">Tags</label>
|
||||
<div class="flex flex-wrap gap-2 p-2 rounded-xl bg-muted/30 border border-border/40">
|
||||
<TagPicker
|
||||
selectedTags={template.tags || []}
|
||||
@@ -897,7 +897,7 @@ export const SettingsView: Component = () => {
|
||||
</div>
|
||||
|
||||
<div class="space-y-1.5">
|
||||
<label class="text-[10px] font-bold uppercase tracking-wider text-muted-foreground ml-1">Description (Content)</label>
|
||||
<label class="text-[0.625rem] font-bold uppercase tracking-wider text-muted-foreground ml-1">Description (Content)</label>
|
||||
<div class="min-h-[120px] rounded-xl border border-border/40 bg-background/50 p-2 overflow-hidden prose-sm">
|
||||
<Suspense fallback={<div class="h-20 animate-pulse bg-muted/20 rounded-lg" />}>
|
||||
<TaskEditor
|
||||
@@ -982,13 +982,13 @@ export const SettingsView: Component = () => {
|
||||
<div class="flex flex-col sm:flex-row sm:items-center justify-between p-3.5 rounded-2xl bg-muted/20 border border-border/40 group hover:bg-muted/40 transition-all gap-3 min-w-0">
|
||||
<div class="min-w-0 flex-1 px-1">
|
||||
<p class="font-semibold truncate text-sm sm:text-base">{task.title || "Untitled"}</p>
|
||||
<p class="text-[11px] text-muted-foreground opacity-70">Expires in {Math.max(0, daysLeft)} days</p>
|
||||
<p class="text-[0.5rem] text-muted-foreground opacity-70">Expires in {Math.max(0, daysLeft)} days</p>
|
||||
</div>
|
||||
<div class="flex items-center justify-end gap-2 shrink-0 border-t sm:border-t-0 pt-3 sm:pt-0 border-border/10">
|
||||
<Button
|
||||
variant="secondary"
|
||||
size="sm"
|
||||
class="h-9 px-4 text-[10px] font-bold uppercase tracking-widest hover:bg-green-500/10 hover:text-green-600 bg-background/50 border border-border/50 transition-all rounded-xl shadow-sm"
|
||||
class="h-9 px-4 text-[0.625rem] font-bold uppercase tracking-widest hover:bg-green-500/10 hover:text-green-600 bg-background/50 border border-border/50 transition-all rounded-xl shadow-sm"
|
||||
onClick={() => {
|
||||
restoreTask(task.id);
|
||||
toast.success("Task restored");
|
||||
|
||||
Reference in New Issue
Block a user