Cete/sipher
1
1
Fork 0
Code Issues 1 Pull requests Projects Releases Packages Wiki Activity Actions

refactor: update global styles and enhance DM channel UI

Browse source 
- Updated color variables in globals.css for improved accessibility and visual consistency.
- Adjusted font styles and shadow properties for better readability and aesthetics.
- Enhanced DMChannelContent component with new button for sending messages and improved layout for message display.
This commit is contained in:
Nixyan 2026-01-13 14:30:54 -03:00
parent af7142d3d0
commit 666e3d6cae
3 changed files with 123 additions and 156 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

243
src/app/globals.css
View file

@ -4,118 +4,111 @@
@custom-variant dark (&:is(.dark *));
:root {
--background: oklch(1.0000 0 0);
--foreground: oklch(0.2686 0 0);
--card: oklch(1.0000 0 0);
--card-foreground: oklch(0.2686 0 0);
--popover: oklch(1.0000 0 0);
--popover-foreground: oklch(0.2686 0 0);
--primary: oklch(0.7686 0.1647 70.0804);
--primary-foreground: oklch(0 0 0);
--secondary: oklch(0.9670 0.0029 264.5419);
--secondary-foreground: oklch(0.4461 0.0263 256.8018);
--muted: oklch(0.9846 0.0017 247.8389);
--muted-foreground: oklch(0.5510 0.0234 264.3637);
--accent: oklch(0.9869 0.0214 95.2774);
--accent-foreground: oklch(0.4732 0.1247 46.2007);
--destructive: oklch(0.6368 0.2078 25.3313);
--destructive-foreground: oklch(1.0000 0 0);
--border: oklch(0.9276 0.0058 264.5313);
--input: oklch(0.9276 0.0058 264.5313);
--ring: oklch(0.7686 0.1647 70.0804);
--chart-1: oklch(0.7686 0.1647 70.0804);
--chart-2: oklch(0.6658 0.1574 58.3183);
--chart-3: oklch(0.5553 0.1455 48.9975);
--chart-4: oklch(0.4732 0.1247 46.2007);
--chart-5: oklch(0.4137 0.1054 45.9038);
--sidebar: oklch(0.9846 0.0017 247.8389);
--sidebar-foreground: oklch(0.2686 0 0);
--sidebar-primary: oklch(0.7686 0.1647 70.0804);
--sidebar-primary-foreground: oklch(1.0000 0 0);
--sidebar-accent: oklch(0.9869 0.0214 95.2774);
--sidebar-accent-foreground: oklch(0.4732 0.1247 46.2007);
--sidebar-border: oklch(0.9276 0.0058 264.5313);
--sidebar-ring: oklch(0.7686 0.1647 70.0804);
--font-sans: Inter, sans-serif;
--font-serif: Source Serif 4, serif;
--font-mono: JetBrains Mono, monospace;
--radius: 0.375rem;
--shadow-x: 1px;
--shadow-y: 2px;
--shadow-blur: 8px;
--shadow-spread: -1px;
--shadow-opacity: 0.1;
--shadow-color: hsl(0 0% 0%);
--shadow-2xs: 0px 4px 8px -1px hsl(0 0% 0% / 0.05);
--shadow-xs: 0px 4px 8px -1px hsl(0 0% 0% / 0.05);
--shadow-sm: 0px 4px 8px -1px hsl(0 0% 0% / 0.10), 0px 1px 2px -2px hsl(0 0% 0% / 0.10);
--shadow: 0px 4px 8px -1px hsl(0 0% 0% / 0.10), 0px 1px 2px -2px hsl(0 0% 0% / 0.10);
--shadow-md: 0px 4px 8px -1px hsl(0 0% 0% / 0.10), 0px 2px 4px -2px hsl(0 0% 0% / 0.10);
--shadow-lg: 0px 4px 8px -1px hsl(0 0% 0% / 0.10), 0px 4px 6px -2px hsl(0 0% 0% / 0.10);
--shadow-xl: 0px 4px 8px -1px hsl(0 0% 0% / 0.10), 0px 8px 10px -2px hsl(0 0% 0% / 0.10);
--shadow-2xl: 0px 4px 8px -1px hsl(0 0% 0% / 0.25);
--background: oklch(0.1467 0.0041 49.3141);
--foreground: oklch(0.8848 0.0037 56.3763);
--card: oklch(0.1588 0.0050 48.3894);
--card-foreground: oklch(0.8848 0.0037 56.3763);
--popover: oklch(0.1588 0.0050 48.3894);
--popover-foreground: oklch(0.8848 0.0037 56.3763);
--primary: oklch(0.7065 0.1860 48.1293);
--primary-foreground: oklch(0.9620 0.0012 56.4186);
--secondary: oklch(0.2698 0.0089 52.1501);
--secondary-foreground: oklch(0.8848 0.0037 56.3763);
--muted: oklch(0.2698 0.0089 52.1501);
--muted-foreground: oklch(0.7250 0.0092 56.2587);
--accent: oklch(0.2698 0.0089 52.1501);
--accent-foreground: oklch(0.8848 0.0037 56.3763);
--destructive: oklch(0.5714 0.2121 27.2502);
--destructive-foreground: oklch(0.9620 0.0012 56.4186);
--border: oklch(0.2371 0.0107 48.2489);
--input: oklch(0.2371 0.0107 48.2489);
--ring: oklch(0.7065 0.1860 48.1293);
--chart-1: oklch(0.7065 0.1860 48.1293);
--chart-2: oklch(0.6356 0.1398 156.1492);
--chart-3: oklch(0.6296 0.1443 251.2286);
--chart-4: oklch(0.6665 0.1797 327.3573);
--chart-5: oklch(0.9204 0.1621 109.2030);
--sidebar: oklch(0.1154 0.0031 50.5978);
--sidebar-foreground: oklch(0.9081 0.0030 56.3898);
--sidebar-primary: oklch(0.7065 0.1860 48.1293);
--sidebar-primary-foreground: oklch(0.9620 0.0012 56.4186);
--sidebar-accent: oklch(0.1931 0.0052 52.2293);
--sidebar-accent-foreground: oklch(0.9081 0.0030 56.3898);
--sidebar-border: oklch(0.2151 0.0091 48.2763);
--sidebar-ring: oklch(0.7065 0.1860 48.1293);
--font-sans: "Inter", sans-serif;
--font-serif: "Lora", serif;
--font-mono: "Fira Mono", monospace;
--radius: 0.5rem;
--shadow-x: 0px;
--shadow-y: 4px;
--shadow-blur: 10px;
--shadow-spread: -2px;
--shadow-opacity: 0.3;
--shadow-color: hsl(20, 14.3%, 2%);
--shadow-2xs: 0px 4px 10px -2px hsl(20 14.3000% 2% / 0.15);
--shadow-xs: 0px 4px 10px -2px hsl(20 14.3000% 2% / 0.15);
--shadow-sm: 0px 4px 10px -2px hsl(20 14.3000% 2% / 0.30), 0px 1px 2px -3px hsl(20 14.3000% 2% / 0.30);
--shadow: 0px 4px 10px -2px hsl(20 14.3000% 2% / 0.30), 0px 1px 2px -3px hsl(20 14.3000% 2% / 0.30);
--shadow-md: 0px 4px 10px -2px hsl(20 14.3000% 2% / 0.30), 0px 2px 4px -3px hsl(20 14.3000% 2% / 0.30);
--shadow-lg: 0px 4px 10px -2px hsl(20 14.3000% 2% / 0.30), 0px 4px 6px -3px hsl(20 14.3000% 2% / 0.30);
--shadow-xl: 0px 4px 10px -2px hsl(20 14.3000% 2% / 0.30), 0px 8px 10px -3px hsl(20 14.3000% 2% / 0.30);
--shadow-2xl: 0px 4px 10px -2px hsl(20 14.3000% 2% / 0.75);
--tracking-normal: 0em;
--spacing: 0.25rem;
--shadow-offset-x: 0px;
--shadow-offset-y: 4px;
--letter-spacing: 0em;
}
.dark {
--background: oklch(0.2046 0 0);
--foreground: oklch(0.9219 0 0);
--card: oklch(0.2686 0 0);
--card-foreground: oklch(0.9219 0 0);
--popover: oklch(0.2686 0 0);
--popover-foreground: oklch(0.9219 0 0);
--primary: oklch(0.7686 0.1647 70.0804);
--primary-foreground: oklch(0 0 0);
--secondary: oklch(0.2686 0 0);
--secondary-foreground: oklch(0.9219 0 0);
--muted: oklch(0.2393 0 0);
--muted-foreground: oklch(0.7155 0 0);
--accent: oklch(0.4732 0.1247 46.2007);
--accent-foreground: oklch(0.9243 0.1151 95.7459);
--destructive: oklch(0.6368 0.2078 25.3313);
--destructive-foreground: oklch(1.0000 0 0);
--border: oklch(0.3715 0 0);
--input: oklch(0.3715 0 0);
--ring: oklch(0.7686 0.1647 70.0804);
--chart-1: oklch(0.8369 0.1644 84.4286);
--chart-2: oklch(0.6658 0.1574 58.3183);
--chart-3: oklch(0.4732 0.1247 46.2007);
--chart-4: oklch(0.5553 0.1455 48.9975);
--chart-5: oklch(0.4732 0.1247 46.2007);
--sidebar: oklch(0.1684 0 0);
--sidebar-foreground: oklch(0.9219 0 0);
--sidebar-primary: oklch(0.7686 0.1647 70.0804);
--sidebar-primary-foreground: oklch(1.0000 0 0);
--sidebar-accent: oklch(0.4732 0.1247 46.2007);
--sidebar-accent-foreground: oklch(0.9243 0.1151 95.7459);
--sidebar-border: oklch(0.3715 0 0);
--sidebar-ring: oklch(0.7686 0.1647 70.0804);
--font-sans: Inter, sans-serif;
--font-serif: Source Serif 4, serif;
--font-mono: JetBrains Mono, monospace;
--radius: 0.375rem;
--shadow-x: 1px;
--shadow-y: 2px;
--shadow-blur: 8px;
--shadow-spread: -1px;
--shadow-opacity: 0.1;
--shadow-color: hsl(0 0% 0%);
--shadow-2xs: 0px 4px 8px -1px hsl(0 0% 0% / 0.05);
--shadow-xs: 0px 4px 8px -1px hsl(0 0% 0% / 0.05);
--shadow-sm: 0px 4px 8px -1px hsl(0 0% 0% / 0.10), 0px 1px 2px -2px hsl(0 0% 0% / 0.10);
--shadow: 0px 4px 8px -1px hsl(0 0% 0% / 0.10), 0px 1px 2px -2px hsl(0 0% 0% / 0.10);
--shadow-md: 0px 4px 8px -1px hsl(0 0% 0% / 0.10), 0px 2px 4px -2px hsl(0 0% 0% / 0.10);
--shadow-lg: 0px 4px 8px -1px hsl(0 0% 0% / 0.10), 0px 4px 6px -2px hsl(0 0% 0% / 0.10);
--shadow-xl: 0px 4px 8px -1px hsl(0 0% 0% / 0.10), 0px 8px 10px -2px hsl(0 0% 0% / 0.10);
--shadow-2xl: 0px 4px 8px -1px hsl(0 0% 0% / 0.25);
--shadow-offset-x: 0px;
--shadow-offset-y: 4px;
--letter-spacing: 0em;
--spacing: 0.25rem;
--background: oklch(0.1467 0.0041 49.3141);
--foreground: oklch(0.8848 0.0037 56.3763);
--card: oklch(0.1588 0.0050 48.3894);
--card-foreground: oklch(0.8848 0.0037 56.3763);
--popover: oklch(0.1588 0.0050 48.3894);
--popover-foreground: oklch(0.8848 0.0037 56.3763);
--primary: oklch(0.7065 0.1860 48.1293);
--primary-foreground: oklch(0.9620 0.0012 56.4186);
--secondary: oklch(0.2698 0.0089 52.1501);
--secondary-foreground: oklch(0.8848 0.0037 56.3763);
--muted: oklch(0.2698 0.0089 52.1501);
--muted-foreground: oklch(0.7250 0.0092 56.2587);
--accent: oklch(0.2698 0.0089 52.1501);
--accent-foreground: oklch(0.8848 0.0037 56.3763);
--destructive: oklch(0.5714 0.2121 27.2502);
--destructive-foreground: oklch(0.9620 0.0012 56.4186);
--border: oklch(0.2371 0.0107 48.2489);
--input: oklch(0.2371 0.0107 48.2489);
--ring: oklch(0.7065 0.1860 48.1293);
--chart-1: oklch(0.7065 0.1860 48.1293);
--chart-2: oklch(0.6356 0.1398 156.1492);
--chart-3: oklch(0.6296 0.1443 251.2286);
--chart-4: oklch(0.6665 0.1797 327.3573);
--chart-5: oklch(0.9204 0.1621 109.2030);
--sidebar: oklch(0.1154 0.0031 50.5978);
--sidebar-foreground: oklch(0.9081 0.0030 56.3898);
--sidebar-primary: oklch(0.7065 0.1860 48.1293);
--sidebar-primary-foreground: oklch(0.9620 0.0012 56.4186);
--sidebar-accent: oklch(0.1931 0.0052 52.2293);
--sidebar-accent-foreground: oklch(0.9081 0.0030 56.3898);
--sidebar-border: oklch(0.2151 0.0091 48.2763);
--sidebar-ring: oklch(0.7065 0.1860 48.1293);
--font-sans: "Inter", sans-serif;
--font-serif: "Lora", serif;
--font-mono: "Fira Mono", monospace;
--radius: 0.5rem;
--shadow-x: 0px;
--shadow-y: 4px;
--shadow-blur: 10px;
--shadow-spread: -2px;
--shadow-opacity: 0.3;
--shadow-color: hsl(20, 14.3%, 2%);
--shadow-2xs: 0px 4px 10px -2px hsl(20 14.3000% 2% / 0.15);
--shadow-xs: 0px 4px 10px -2px hsl(20 14.3000% 2% / 0.15);
--shadow-sm: 0px 4px 10px -2px hsl(20 14.3000% 2% / 0.30), 0px 1px 2px -3px hsl(20 14.3000% 2% / 0.30);
--shadow: 0px 4px 10px -2px hsl(20 14.3000% 2% / 0.30), 0px 1px 2px -3px hsl(20 14.3000% 2% / 0.30);
--shadow-md: 0px 4px 10px -2px hsl(20 14.3000% 2% / 0.30), 0px 2px 4px -3px hsl(20 14.3000% 2% / 0.30);
--shadow-lg: 0px 4px 10px -2px hsl(20 14.3000% 2% / 0.30), 0px 4px 6px -3px hsl(20 14.3000% 2% / 0.30);
--shadow-xl: 0px 4px 10px -2px hsl(20 14.3000% 2% / 0.30), 0px 8px 10px -3px hsl(20 14.3000% 2% / 0.30);
--shadow-2xl: 0px 4px 10px -2px hsl(20 14.3000% 2% / 0.75);
}
@theme inline {
@ -152,9 +145,9 @@
--color-sidebar-border: var(--sidebar-border);
--color-sidebar-ring: var(--sidebar-ring);
--font-sans: Inter, sans-serif;
--font-mono: JetBrains Mono, monospace;
--font-serif: Source Serif 4, serif;
--font-sans: var(--font-sans);
--font-mono: var(--font-mono);
--font-serif: var(--font-serif);
--radius-sm: calc(var(--radius) - 4px);
--radius-md: calc(var(--radius) - 2px);
@ -169,34 +162,4 @@
--shadow-lg: var(--shadow-lg);
--shadow-xl: var(--shadow-xl);
--shadow-2xl: var(--shadow-2xl);
--tracking-tighter: calc(var(--tracking-normal) - 0.05em);
--tracking-tight: calc(var(--tracking-normal) - 0.025em);
--tracking-normal: var(--tracking-normal);
--tracking-wide: calc(var(--tracking-normal) + 0.025em);
--tracking-wider: calc(var(--tracking-normal) + 0.05em);
--tracking-widest: calc(var(--tracking-normal) + 0.1em);
--radius: 0.375rem;
--spacing: var(--spacing);
--letter-spacing: var(--letter-spacing);
--shadow-offset-y: var(--shadow-offset-y);
--shadow-offset-x: var(--shadow-offset-x);
--shadow-spread: var(--shadow-spread);
--shadow-blur: var(--shadow-blur);
--shadow-opacity: var(--shadow-opacity);
--color-shadow-color: var(--shadow-color);
}
body {
letter-spacing: var(--tracking-normal);
}
@layer base {
* {
@apply border-border outline-ring/50;
}
body {
@apply bg-background text-foreground;
letter-spacing: var(--tracking-normal);
}
}

14
src/components/ui/dm/DmChannelContent.tsx
View file

@ -2,11 +2,12 @@ import { useOlmContext } from "@/contexts/olm-context";
import { useSocketContext } from "@/contexts/socket-context";
import { clearUnread, db, sendMessage } from "@/lib/db";
import { useLiveQuery } from "dexie-react-hooks";
import { KeyRound } from "lucide-react";
import { KeyRound, SendIcon } from "lucide-react";
import moment from "moment";
import React, { useEffect, useMemo, useState } from "react";
import { toast } from "sonner";
import { Avatar, AvatarFallback, AvatarImage } from "../avatar";
import { Button } from "../button";
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "../dialog";
import { Input } from "../input";
@ -294,14 +295,14 @@ export default function DMChannelContent(
{timeLabel}
</span>
</div>
<div className="text-sm md:text-[15px] leading-[1.375rem] text-foreground mt-0.5 wrap-break-word">
<div className="text-sm md:text-[15px] leading-5.5 text-foreground mt-0.5 wrap-break-word">
{msg.content}
</div>
</div>
</div>
) : (
// Compact message without avatar (grouped)
<div className="flex gap-2 md:gap-4 leading-[1.375rem]">
<div className="flex gap-2 md:gap-4 leading-5.5">
<div className="w-8 md:w-10 shrink-0 flex items-start justify-end pt-0.5">
<span className="text-[10px] text-transparent group-hover:text-muted-foreground transition-colors duration-100 font-medium">
{
@ -309,7 +310,7 @@ export default function DMChannelContent(
}
</span>
</div>
<div className="flex-1 min-w-0 text-sm md:text-[15px] leading-[1.375rem] text-foreground wrap-break-word">
<div className="flex-1 min-w-0 text-sm md:text-[15px] leading-5.5 text-foreground wrap-break-word">
{msg.content}
</div>
</div>
@ -324,7 +325,7 @@ export default function DMChannelContent(
</div>
{/* Message input */}
<div className="shrink-0 px-2 md:px-4 pb-4 md:pb-6 pt-2">
<div className="flex items-center gap-2 shrink-0 px-2 md:px-4 pb-4 md:pb-6 pt-2">
<Input
className="h-10 md:h-11 rounded-lg bg-muted border-0 focus-visible:ring-0 focus-visible:ring-offset-0 px-3 md:px-4 text-sm md:text-[15px]"
placeholder={
@ -362,6 +363,9 @@ export default function DMChannelContent(
}
}}
/>
<Button className="flex md:hidden items-center justify-center h-10 md:h-11 w-10 md:w-11" variant="outline" size="icon">
<SendIcon className="size-4" />
</Button>
</div>
</div>
);

6
src/components/ui/layout/channel-list.tsx
View file

@ -2,9 +2,10 @@
import { Button } from "@/components/ui/button"
import { clearUnread, db } from "@/lib/db"
import { QuestionMarkIcon } from "@phosphor-icons/react"
import { formatDistanceToNow } from "date-fns"
import { useLiveQuery } from "dexie-react-hooks"
import { MessageSquarePlusIcon, SettingsIcon, Sparkles, UsersIcon, XIcon } from "lucide-react"
import { MessageSquarePlusIcon, SettingsIcon, UsersIcon, XIcon } from "lucide-react"
import { useRouter } from "next/navigation"
import UserCard from "../user/user-card"
@ -157,7 +158,6 @@ export function ChannelList({
{openDmChannels.length > 0 ? (
<div className="flex flex-col gap-0.5">
{openDmChannels.map((channel) => {
const participantDetails = dmChannel?.participantDetails.find((p) => p.id === channel.participants[0])
const isActive = dmChannel?.id === channel.id
const lastMessage = channel.times?.lastMessage
const lastMessageTime = channel.times?.lastMessageAt
@ -239,7 +239,7 @@ export function ChannelList({
) : (
<div className="flex flex-col items-center justify-center py-8 px-4 text-center">
<div className="flex items-center justify-center w-12 h-12 rounded-full bg-muted/50 mb-3">
<Sparkles className="size-5 text-muted-foreground/50" />
<QuestionMarkIcon size={20} className="text-muted-foreground/50" />
</div>
<span className="text-xs font-medium text-muted-foreground/70 leading-relaxed">
{emptyMessage}