librecloud/web
3
2
Fork 0
Code Issues Pull Requests Packages Projects 3 Releases Wiki Activity

design: sync design (especially that font size) with rest of site, some other cleanup and tweaks

Browse Source
This commit is contained in:
Aidan 2025-04-22 10:17:16 -04:00
parent 275958edd1
commit 611506a103
11 changed files with 50 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
app/account/dashboard/downloads/page.tsx
View File

@ -19,10 +19,10 @@ export default function DownloadCenter() {
<h1 className="text-3xl font-bold mb-6 text-foreground">Download Center</h1> <h1 className="text-3xl font-bold mb-6 text-foreground">Download Center</h1>
<Tabs defaultValue="home" className="w-full"> <Tabs defaultValue="home" className="w-full">
<TabsList className="mb-4 flex flex-wrap"> <TabsList className="mb-4 flex flex-wrap">
<TabsTrigger value="home">Home</TabsTrigger> <TabsTrigger value="home" className="cursor-pointer">Home</TabsTrigger>
<TabsTrigger value="email">Email</TabsTrigger> <TabsTrigger value="email" className="cursor-pointer">Email</TabsTrigger>
<TabsTrigger value="pass">Pass</TabsTrigger> <TabsTrigger value="pass" className="cursor-pointer">Pass</TabsTrigger>
<TabsTrigger value="git">Git</TabsTrigger> <TabsTrigger value="git" className="cursor-pointer">Git</TabsTrigger>
</TabsList> </TabsList>
<TabsContent value="home"> <TabsContent value="home">
<HomeTab /> <HomeTab />

4
app/account/dashboard/settings/page.tsx
View File

@ -84,8 +84,8 @@ export default function Settings() {
<MyAccount /> <MyAccount />
<Card> <Card>
<CardHeader> <CardHeader>
<CardTitle className="flex items-center"> <CardTitle className="flex items-center text-xl gap-2">
<LayoutDashboard size={15} className="mr-1" /> <LayoutDashboard size={20} />
Dashboard Settings Dashboard Settings
</CardTitle> </CardTitle>
<CardDescription>Customize your dashboard experience</CardDescription> <CardDescription>Customize your dashboard experience</CardDescription>

8
app/account/dashboard/support/page.tsx
View File

@ -20,8 +20,8 @@ export default function Support() {
<div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3"> <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
<Card className="col-span-full md:col-span-1"> <Card className="col-span-full md:col-span-1">
<CardHeader> <CardHeader>
<CardTitle className="flex items-center text-2xl"> <CardTitle className="flex items-center text-xl gap-2">
<Mail size={24} className="mr-1.5" /> <Mail size={20} />
Email Email
</CardTitle> </CardTitle>
<CardDescription>Create a ticket by sending an email</CardDescription> <CardDescription>Create a ticket by sending an email</CardDescription>
@ -49,8 +49,8 @@ export default function Support() {
</Card> </Card>
<Card className="col-span-full md:col-span-1"> <Card className="col-span-full md:col-span-1">
<CardHeader> <CardHeader>
<CardTitle className="flex items-center text-2xl"> <CardTitle className="flex items-center text-xl gap-2">
<RiTelegram2Line size={24} className="mr-1.5" /> <RiTelegram2Line size={20} />
Telegram Telegram
</CardTitle> </CardTitle>
<CardDescription>Get support and updates via Telegram</CardDescription> <CardDescription>Get support and updates via Telegram</CardDescription>

4
components/cards/dashboard/Settings/MyAccount.tsx
View File

@ -7,8 +7,8 @@ export default function MyAccount() {
return ( return (
<Card> <Card>
<CardHeader> <CardHeader>
<CardTitle className="flex items-center text-2xl"> <CardTitle className="flex items-center text-xl gap-2">
<User className="mr-1" /> <User size={20} />
My Account My Account
</CardTitle> </CardTitle>
<CardDescription>LibreCloud makes it easy to manage your account</CardDescription> <CardDescription>LibreCloud makes it easy to manage your account</CardDescription>

8
components/cards/dashboard/git/LinkGitea.tsx
View File

@ -98,8 +98,8 @@ export function LinkGitea({ linked }: { linked: boolean }) {
return ( return (
<Card> <Card>
<CardHeader> <CardHeader>
<CardTitle className="flex items-center text-xl"> <CardTitle className="flex items-center text-xl gap-2">
<SiGitea size={20} className="mr-2" /> <SiGitea size={20} />
Gitea Link Gitea Link
</CardTitle> </CardTitle>
<CardDescription> <CardDescription>
@ -165,8 +165,8 @@ export function LinkGitea({ linked }: { linked: boolean }) {
return ( return (
<Card> <Card>
<CardHeader> <CardHeader>
<CardTitle className="flex items-center text-xl"> <CardTitle className="flex items-center text-xl gap-2">
<SiGitea size={20} className="mr-2" /> <SiGitea size={20} />
Gitea Link Gitea Link
</CardTitle> </CardTitle>
<CardDescription> <CardDescription>

33
components/cards/dashboard/overview/LinkedAccounts.tsx
View File

@ -3,7 +3,7 @@
import { useState, useEffect } from "react" import { useState, useEffect } from "react"
import { Card, CardHeader, CardTitle, CardDescription, CardContent } from "@/components/ui/card" import { Card, CardHeader, CardTitle, CardDescription, CardContent } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge" import { Badge } from "@/components/ui/badge"
import { Loader2 } from "lucide-react" import { Loader2, Link } from "lucide-react"
import { useSession } from "next-auth/react" import { useSession } from "next-auth/react"
export const LinkedAccounts = () => { export const LinkedAccounts = () => {
@ -58,44 +58,43 @@ export const LinkedAccounts = () => {
return ( return (
<Card className="col-span-full md:col-span-1"> <Card className="col-span-full md:col-span-1">
<CardHeader> <CardHeader>
<CardTitle>Linked Accounts</CardTitle> <CardTitle className="flex items-center text-xl gap-2">
<Link size={20} />
Linked Accounts
</CardTitle>
<CardDescription>LibreCloud-connected services you&apos;ve linked to your account.</CardDescription> <CardDescription>LibreCloud-connected services you&apos;ve linked to your account.</CardDescription>
</CardHeader> </CardHeader>
<CardContent> <CardContent>
<ul className="space-y-2"> <ul className="space-y-2">
{authStatus ? ( {authStatus ? (
<li className="flex items-center"> <li className="flex items-center gap-2">
<span className="w-2 h-2 rounded-full bg-green-500 mr-2"></span> <span className="w-2 h-2 rounded-full bg-green-500"></span>
<span>LibreCloud Auth</span> <span>LibreCloud Auth</span>
</li> </li>
) : ( ) : (
<li className="flex items-center"> <li className="flex items-center gap-2">
<span className="w-2 h-2 rounded-full bg-red-500 mr-2"></span> <span className="w-2 h-2 rounded-full bg-red-500"></span>
<span>LibreCloud Auth</span> <span>LibreCloud Auth</span>
</li> </li>
)} )}
<li className="flex items-center"> <li className="flex items-center gap-2">
<span className="w-2 h-2 rounded-full bg-green-500 mr-2"></span> <span className="w-2 h-2 rounded-full bg-green-500"></span>
<span>LibreCloud Mail</span> <span>LibreCloud Mail</span>
</li> </li>
<li className="flex items-center"> <li className="flex items-center gap-2">
{isLoading ? ( {isLoading ? (
<Loader2 className="w-4 h-4 mr-2 animate-spin" /> <Loader2 className="w-4 h-4 animate-spin" />
) : ( ) : (
<span <span
className={`w-2 h-2 rounded-full mr-2 ${ className={`w-2 h-2 rounded-full ${
gitStatus ? "bg-green-500" : "bg-red-500" gitStatus ? "bg-green-500" : "bg-red-500"
}`} }`}
></span> ></span>
)} )}
{isAdmin ? ( {isAdmin ? (
<div> <div className="flex items-center gap-2">
<span>LibreCloud Git</span> <span>LibreCloud Git</span>
<Badge <Badge>Admin</Badge>
className="ml-2"
>
Admin
</Badge>
</div> </div>
) : ( ) : (
<span>LibreCloud Git</span> <span>LibreCloud Git</span>

6
components/cards/dashboard/overview/QuickLinks.tsx
View File

@ -4,6 +4,7 @@ import {
Mail, Mail,
Headset, Headset,
Heart, Heart,
Link as LinkIcon,
Scale Scale
} from "lucide-react" } from "lucide-react"
import Link from "next/link" import Link from "next/link"
@ -12,7 +13,10 @@ export const QuickLinks = () => {
return ( return (
<Card className="col-span-full md:col-span-1"> <Card className="col-span-full md:col-span-1">
<CardHeader> <CardHeader>
<CardTitle>Quick Links</CardTitle> <CardTitle className="flex items-center text-xl gap-2">
<LinkIcon size={20} />
Quick Links
</CardTitle>
</CardHeader> </CardHeader>
<CardContent> <CardContent>
<Link <Link

4
components/cards/dashboard/overview/WelcomeCard.tsx
View File

@ -25,11 +25,11 @@ export const WelcomeCard = () => {
return ( return (
<Card className="col-span-full md:col-span-1"> <Card className="col-span-full md:col-span-1">
<CardHeader> <CardHeader>
<CardTitle>Welcome to your dashboard</CardTitle> <CardTitle className="text-xl">Welcome to <span className="italic mr-0.5">your</span> dashboard!</CardTitle>
</CardHeader> </CardHeader>
<CardContent> <CardContent>
<p className="text-sm"> <p className="text-sm">
Thanks for logging in! Here you can manage your account and the services available to you. Thank you for signing up! Here you can manage your account and the services available to you.
</p> </p>
<p className="text-sm mt-4"> <p className="text-sm mt-4">
We’re thrilled to have you on board, and if you need <i>anything</i>, don’t hesitate to <Link href="/account/dashboard/support" className="underline hover:text-muted-foreground transition-all" target="_blank">contact our support team</Link>! We’re thrilled to have you on board, and if you need <i>anything</i>, don’t hesitate to <Link href="/account/dashboard/support" className="underline hover:text-muted-foreground transition-all" target="_blank">contact our support team</Link>!

5
components/cards/dashboard/statistics/Infrastructure.tsx
View File

@ -13,7 +13,10 @@ export default function Infrastructure() {
return ( return (
<Card> <Card>
<CardHeader> <CardHeader>
<CardTitle>Infrastructure</CardTitle> <CardTitle className="flex items-center text-xl gap-2">
<Server size={20} />
Infrastructure
</CardTitle>
<CardDescription> <CardDescription>
Our portfolio of servers and services Our portfolio of servers and services
</CardDescription> </CardDescription>

6
components/cards/dashboard/statistics/OperationalCosts.tsx
View File

@ -6,12 +6,16 @@ import {
CardContent, CardContent,
} from "@/components/ui/card" } from "@/components/ui/card"
import { Separator } from "@/components/ui/separator" import { Separator } from "@/components/ui/separator"
import { CreditCard } from "lucide-react"
export default function OperationalCosts() { export default function OperationalCosts() {
return ( return (
<Card className="col-span-full md:col-span-1"> <Card className="col-span-full md:col-span-1">
<CardHeader> <CardHeader>
<CardTitle>Operational Costs</CardTitle> <CardTitle className="flex items-center text-xl gap-2">
<CreditCard size={20} />
Operational Costs
</CardTitle>
<CardDescription>How much it costs us to run LibreCloud each month</CardDescription> <CardDescription>How much it costs us to run LibreCloud each month</CardDescription>
</CardHeader> </CardHeader>
<CardContent> <CardContent>

4
components/pages/dashboard/SecurityTab.tsx
View File

@ -77,7 +77,7 @@ export const SecurityTab = () => {
<div className="grid gap-6 grid-cols-1 md:grid-cols-2"> <div className="grid gap-6 grid-cols-1 md:grid-cols-2">
<Card> <Card>
<CardHeader> <CardHeader>
<CardTitle className="flex items-center gap-1"> <CardTitle className="flex items-center gap-2">
<ShieldCheck size={18} /> <ShieldCheck size={18} />
<span className="text-xl">Account Security Scan</span> <span className="text-xl">Account Security Scan</span>
</CardTitle> </CardTitle>
@ -161,7 +161,7 @@ export const SecurityTab = () => {
</Card> </Card>
<Card> <Card>
<CardHeader> <CardHeader>
<CardTitle className="flex items-center gap-1"> <CardTitle className="flex items-center gap-2">
<Lightbulb size={18} /> <Lightbulb size={18} />
<span className="text-xl">Recommendations</span> <span className="text-xl">Recommendations</span>
</CardTitle> </CardTitle>