dev
/
sudo-archive
mirror of https://github.com/sussy-code/smov.git
2
1
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Move social links in header

This commit is contained in:
Jip Fr 2023-09-06 20:43:45 +02:00
parent 6fcdef3fd7
commit 0b4c47bbd4
3 changed files with 13 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/buttons/IconPatch.tsx
View File

@ -7,6 +7,7 @@ export interface IconPatchProps {
className?: string; className?: string;
icon: Icons; icon: Icons;
transparent?: boolean; transparent?: boolean;
downsized?: boolean;
} }
export function IconPatch(props: IconPatchProps) { export function IconPatch(props: IconPatchProps) {
@ -19,11 +20,12 @@ export function IconPatch(props: IconPatchProps) {
const activeClasses = props.active const activeClasses = props.active
? "border-bink-600 bg-bink-100 text-bink-600" ? "border-bink-600 bg-bink-100 text-bink-600"
: ""; : "";
const sizeClasses = props.downsized ? "h-10 w-10" : "h-12 w-12";
return ( return (
<div className={props.className || undefined} onClick={props.onClick}> <div className={props.className || undefined} onClick={props.onClick}>
<div <div
className={`flex h-12 w-12 items-center justify-center rounded-full border-2 border-transparent bg-pill-background transition-[background-color,color,transform,border-color] duration-75 ${transparentClasses} ${clickableClasses} ${activeClasses}`} className={`flex items-center justify-center rounded-full border-2 border-transparent bg-pill-background bg-opacity-50 transition-[background-color,color,transform,border-color] duration-75 ${transparentClasses} ${clickableClasses} ${activeClasses} ${sizeClasses}`}
> >
<Icon icon={props.icon} /> <Icon icon={props.icon} />
</div> </div>

22
src/components/layout/Navigation.tsx
View File

@ -40,35 +40,27 @@ export function Navigation(props: NavigationProps) {
> >
<div className="pointer-events-none absolute -bottom-24 h-24 w-full bg-gradient-to-b from-background-main to-transparent" /> <div className="pointer-events-none absolute -bottom-24 h-24 w-full bg-gradient-to-b from-background-main to-transparent" />
</div> </div>
<div className="relative flex w-full items-center justify-center sm:w-fit"> <div className="relative flex w-full items-center sm:w-fit space-x-3">
<div className="mr-auto sm:mr-6"> <Link className="block" to="/">
<Link to="/">
<BrandPill clickable /> <BrandPill clickable />
</Link> </Link>
</div>
{props.children}
</div>
<div
className={`${
props.children ? "hidden sm:flex" : "flex"
} relative flex-row gap-4`}
>
<a <a
href={conf().DISCORD_LINK} href={conf().DISCORD_LINK}
target="_blank" target="_blank"
rel="noreferrer" rel="noreferrer"
className="text-2xl text-white" className="text-xl text-white"
> >
<IconPatch icon={Icons.DISCORD} clickable /> <IconPatch icon={Icons.DISCORD} clickable downsized />
</a> </a>
<a <a
href={conf().GITHUB_LINK} href={conf().GITHUB_LINK}
target="_blank" target="_blank"
rel="noreferrer" rel="noreferrer"
className="text-2xl text-white" className="text-xl text-white"
> >
<IconPatch icon={Icons.GITHUB} clickable /> <IconPatch icon={Icons.GITHUB} clickable downsized />
</a> </a>
{props.children}
</div> </div>
</div> </div>
</div> </div>

2
src/components/layout/ThinContainer.tsx
View File

@ -8,7 +8,7 @@ interface ThinContainerProps {
export function ThinContainer(props: ThinContainerProps) { export function ThinContainer(props: ThinContainerProps) {
return ( return (
<div <div
className={`mx-auto w-[600px] max-w-full px-2 sm:px-0 ${ className={`mx-auto w-[600px] max-w-full px-8 sm:px-0 ${
props.classNames || "" props.classNames || ""
}`} }`}
> >