mirrors/smov
mirrors/smov
1
0
Fork 0
mirror of https://github.com/sussy-code/smov.git synced 2024-12-20 14:37:43 +01:00
Code Issues Wiki Activity

Move social links in header

Browse source
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;
icon: Icons;
transparent?: boolean;
downsized?: boolean;
}
export function IconPatch(props: IconPatchProps) {
@ -19,11 +20,12 @@ export function IconPatch(props: IconPatchProps) {
const activeClasses = props.active
? "border-bink-600 bg-bink-100 text-bink-600"
: "";
const sizeClasses = props.downsized ? "h-10 w-10" : "h-12 w-12";
return (
<div className={props.className || undefined} onClick={props.onClick}>
<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} />
</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>
<div className="relative flex w-full items-center justify-center sm:w-fit">
<div className="mr-auto sm:mr-6">
<Link to="/">
<div className="relative flex w-full items-center sm:w-fit space-x-3">
<Link className="block" to="/">
<BrandPill clickable />
</Link>
</div>
{props.children}
</div>
<div
className={`${
props.children ? "hidden sm:flex" : "flex"
} relative flex-row gap-4`}
>
<a
href={conf().DISCORD_LINK}
target="_blank"
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
href={conf().GITHUB_LINK}
target="_blank"
rel="noreferrer"
className="text-2xl text-white"
className="text-xl text-white"
>
<IconPatch icon={Icons.GITHUB} clickable />
<IconPatch icon={Icons.GITHUB} clickable downsized />
</a>
{props.children}
</div>
</div>
</div>

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

@ -8,7 +8,7 @@ interface ThinContainerProps {
export function ThinContainer(props: ThinContainerProps) {
return (
<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 || ""
}`}
>