From 0b4c47bbd496862ee4c87f31db3be1908627b3f1 Mon Sep 17 00:00:00 2001
From: Jip Fr <jipfrijlink@gmail.com>
Date: Wed, 6 Sep 2023 20:43:45 +0200
Subject: [PATCH] Move social links in header

---
 src/components/buttons/IconPatch.tsx    |  4 +++-
 src/components/layout/Navigation.tsx    | 26 +++++++++----------------
 src/components/layout/ThinContainer.tsx |  2 +-
 3 files changed, 13 insertions(+), 19 deletions(-)

diff --git a/src/components/buttons/IconPatch.tsx b/src/components/buttons/IconPatch.tsx
index 3d431d40..89a4a23f 100644
--- a/src/components/buttons/IconPatch.tsx
+++ b/src/components/buttons/IconPatch.tsx
@@ -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>
diff --git a/src/components/layout/Navigation.tsx b/src/components/layout/Navigation.tsx
index f966333f..8285c15c 100644
--- a/src/components/layout/Navigation.tsx
+++ b/src/components/layout/Navigation.tsx
@@ -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="/">
-                <BrandPill clickable />
-              </Link>
-            </div>
-            {props.children}
-          </div>
-          <div
-            className={`${
-              props.children ? "hidden sm:flex" : "flex"
-            } relative flex-row	gap-4`}
-          >
+          <div className="relative flex w-full items-center sm:w-fit space-x-3">
+            <Link className="block" to="/">
+              <BrandPill clickable />
+            </Link>
             <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>
diff --git a/src/components/layout/ThinContainer.tsx b/src/components/layout/ThinContainer.tsx
index e1672f63..f7f90acb 100644
--- a/src/components/layout/ThinContainer.tsx
+++ b/src/components/layout/ThinContainer.tsx
@@ -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 || ""
       }`}
     >