mirror of
https://github.com/fosrl/pangolin.git
synced 2025-08-18 16:28:26 +02:00
fix broken header layout on mobile
This commit is contained in:
miloschwartz
parent
aabdcea3c0
commit
013f342ff6
3 changed files with 98 additions and 97 deletions
|
|
@ -43,13 +43,7 @@ export function Header({ orgId, orgs }: HeaderProps) {
|
|||
return (
|
||||
<>
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
<ProfileIcon />
|
||||
|
||||
<div className="hidden md:block">
|
||||
<SupporterStatus />
|
||||
</div>
|
||||
</div>
|
||||
<ProfileIcon />
|
||||
|
||||
<div className="flex items-center">
|
||||
<div className="hidden md:block">
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@ import {
|
|||
} from "@app/components/ui/dropdown-menu";
|
||||
import { useEnvContext } from "@app/hooks/useEnvContext";
|
||||
import { toast } from "@app/hooks/useToast";
|
||||
import { formatAxiosError } from "@app/lib/api";;
|
||||
import { formatAxiosError } from "@app/lib/api";
|
||||
import { Laptop, LogOut, Moon, Sun } from "lucide-react";
|
||||
import { useTheme } from "next-themes";
|
||||
import { useRouter } from "next/navigation";
|
||||
|
|
@ -21,6 +21,7 @@ import { useState } from "react";
|
|||
import { useUserContext } from "@app/hooks/useUserContext";
|
||||
import Disable2FaForm from "./Disable2FaForm";
|
||||
import Enable2FaForm from "./Enable2FaForm";
|
||||
import SupporterStatus from "./SupporterStatus";
|
||||
|
||||
export default function ProfileIcon() {
|
||||
const { setTheme, theme } = useTheme();
|
||||
|
|
@ -152,6 +153,9 @@ export default function ProfileIcon() {
|
|||
<span className="truncate max-w-full font-medium min-w-0 mr-1">
|
||||
{user.email}
|
||||
</span>
|
||||
<div className="hidden md:block">
|
||||
<SupporterStatus />
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -176,82 +176,39 @@ export default function SupporterStatus() {
|
|||
</Link>
|
||||
</p>
|
||||
|
||||
<p>Please select the option that best suits you.</p>
|
||||
|
||||
<div className="grid md:grid-cols-2 grid-cols-1 gap-8">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Full Supporter</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<p className="text-4xl mb-6">$95</p>
|
||||
<ul className="space-y-3">
|
||||
<li className="flex items-center gap-2">
|
||||
<Check className="h-6 w-6 text-green-500" />
|
||||
<span className="text-muted-foreground">
|
||||
For the whole server
|
||||
</span>
|
||||
</li>
|
||||
<li className="flex items-center gap-2">
|
||||
<Check className="h-6 w-6 text-green-500" />
|
||||
<span className="text-muted-foreground">
|
||||
Lifetime purchase
|
||||
</span>
|
||||
</li>
|
||||
<li className="flex items-center gap-2">
|
||||
<Check className="h-6 w-6 text-green-500" />
|
||||
<span className="text-muted-foreground">
|
||||
Supporter status
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
</CardContent>
|
||||
<CardFooter>
|
||||
<Link
|
||||
href="https://github.com/sponsors/fosrl/sponsorships?tier_id=474929"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="w-full"
|
||||
>
|
||||
<Button className="w-full">Buy</Button>
|
||||
</Link>
|
||||
</CardFooter>
|
||||
</Card>
|
||||
|
||||
<Card
|
||||
className={`${supporterStatus?.tier === "Limited Supporter" ? "opacity-50" : ""}`}
|
||||
>
|
||||
<CardHeader>
|
||||
<CardTitle>Limited Supporter</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<p className="text-4xl mb-6">$25</p>
|
||||
<ul className="space-y-3">
|
||||
<li className="flex items-center gap-2">
|
||||
<Check className="h-6 w-6 text-green-500" />
|
||||
<span className="text-muted-foreground">
|
||||
For 5 or less users
|
||||
</span>
|
||||
</li>
|
||||
<li className="flex items-center gap-2">
|
||||
<Check className="h-6 w-6 text-green-500" />
|
||||
<span className="text-muted-foreground">
|
||||
Lifetime purchase
|
||||
</span>
|
||||
</li>
|
||||
<li className="flex items-center gap-2">
|
||||
<Check className="h-6 w-6 text-green-500" />
|
||||
<span className="text-muted-foreground">
|
||||
Supporter status
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
</CardContent>
|
||||
<CardFooter>
|
||||
{supporterStatus?.tier !==
|
||||
"Limited Supporter" ? (
|
||||
<div className="py-6">
|
||||
<p className="mb-3 text-center">Please select the option that best suits you.</p>
|
||||
<div className="grid md:grid-cols-2 grid-cols-1 gap-8">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Full Supporter</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<p className="text-4xl mb-6">$95</p>
|
||||
<ul className="space-y-3">
|
||||
<li className="flex items-center gap-2">
|
||||
<Check className="h-6 w-6 text-green-500" />
|
||||
<span className="text-muted-foreground">
|
||||
For the whole server
|
||||
</span>
|
||||
</li>
|
||||
<li className="flex items-center gap-2">
|
||||
<Check className="h-6 w-6 text-green-500" />
|
||||
<span className="text-muted-foreground">
|
||||
Lifetime purchase
|
||||
</span>
|
||||
</li>
|
||||
<li className="flex items-center gap-2">
|
||||
<Check className="h-6 w-6 text-green-500" />
|
||||
<span className="text-muted-foreground">
|
||||
Supporter status
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
</CardContent>
|
||||
<CardFooter>
|
||||
<Link
|
||||
href="https://github.com/sponsors/fosrl/sponsorships?tier_id=463100"
|
||||
href="https://github.com/sponsors/fosrl/sponsorships?tier_id=474929"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="w-full"
|
||||
|
|
@ -260,22 +217,68 @@ export default function SupporterStatus() {
|
|||
Buy
|
||||
</Button>
|
||||
</Link>
|
||||
) : (
|
||||
<Button
|
||||
className="w-full"
|
||||
disabled={
|
||||
supporterStatus?.tier ===
|
||||
"Limited Supporter"
|
||||
}
|
||||
>
|
||||
Buy
|
||||
</Button>
|
||||
)}
|
||||
</CardFooter>
|
||||
</Card>
|
||||
</CardFooter>
|
||||
</Card>
|
||||
|
||||
<Card
|
||||
className={`${supporterStatus?.tier === "Limited Supporter" ? "opacity-50" : ""}`}
|
||||
>
|
||||
<CardHeader>
|
||||
<CardTitle>Limited Supporter</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<p className="text-4xl mb-6">$25</p>
|
||||
<ul className="space-y-3">
|
||||
<li className="flex items-center gap-2">
|
||||
<Check className="h-6 w-6 text-green-500" />
|
||||
<span className="text-muted-foreground">
|
||||
For 5 or less users
|
||||
</span>
|
||||
</li>
|
||||
<li className="flex items-center gap-2">
|
||||
<Check className="h-6 w-6 text-green-500" />
|
||||
<span className="text-muted-foreground">
|
||||
Lifetime purchase
|
||||
</span>
|
||||
</li>
|
||||
<li className="flex items-center gap-2">
|
||||
<Check className="h-6 w-6 text-green-500" />
|
||||
<span className="text-muted-foreground">
|
||||
Supporter status
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
</CardContent>
|
||||
<CardFooter>
|
||||
{supporterStatus?.tier !==
|
||||
"Limited Supporter" ? (
|
||||
<Link
|
||||
href="https://github.com/sponsors/fosrl/sponsorships?tier_id=463100"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="w-full"
|
||||
>
|
||||
<Button className="w-full">
|
||||
Buy
|
||||
</Button>
|
||||
</Link>
|
||||
) : (
|
||||
<Button
|
||||
className="w-full"
|
||||
disabled={
|
||||
supporterStatus?.tier ===
|
||||
"Limited Supporter"
|
||||
}
|
||||
>
|
||||
Buy
|
||||
</Button>
|
||||
)}
|
||||
</CardFooter>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="w-full pt-6 space-y-2">
|
||||
<div className="w-full space-y-2">
|
||||
<Button
|
||||
className="w-full"
|
||||
variant="outlinePrimary"
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue