fix header

ocadotechnology · Sep 11, 2024 · 1a30a12 · 1a30a12
1 parent 036bc5f
commit 1a30a12
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 7 deletions.
diff --git a/.env b/.env
@@ -2,5 +2,6 @@
 VITE_SERVICE_NAME=contributor
 
 # Links.
+VITE_LINK_CFL=https://www.codeforlife.education
 VITE_LINK_GH_LOGIN=https://github.com/login/oauth/authorize?client_id=Ov23liBErSabQFqROeMg&scope=read%3Auser%20user%3Aemail
 VITE_LINK_GH_CONTRIBUTING=https://github.com/ocadotechnology/codeforlife-workspace/blob/{commitId}/CONTRIBUTING.md
diff --git a/src/app/env.ts b/src/app/env.ts
@@ -2,5 +2,6 @@ import env from "codeforlife/env"
 
 export * from "codeforlife/env"
 
+export const LINK_CFL = env.VITE_LINK_CFL
 export const LINK_GH_LOGIN = env.VITE_LINK_GH_LOGIN
 export const LINK_GH_CONTRIBUTING = env.VITE_LINK_GH_CONTRIBUTING
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
@@ -10,17 +10,25 @@ import { LINK_CFL } from "../app/env"
 import { useLogoutMutation } from "../api"
 import { useRetrieveContributorQuery } from "../api/contributor"
 
-const Profile: FC<SessionMetadata> = ({ contributor_id }) =>
-  handleResultState(
+const Profile: FC<SessionMetadata> = ({ contributor_id }) => {
+  const avatarSize = 50
+
+  return handleResultState(
     useRetrieveContributorQuery(contributor_id),
     contributor => (
       <LinkButton
         to={contributor.html_url}
         target="_blank"
-        startIcon={
-          <Avatar alt={contributor.name} src={contributor.avatar_url} />
+        endIcon={
+          <Avatar
+            alt={contributor.name}
+            src={contributor.avatar_url}
+            sx={{ width: avatarSize, height: avatarSize }}
+          />
         }
         sx={{
+          height: avatarSize + 5,
+          fontSize: 20,
           margin: "0 auto",
           backgroundColor: "transparent",
           "&:hover": { backgroundColor: "transparent" },
@@ -30,6 +38,7 @@ const Profile: FC<SessionMetadata> = ({ contributor_id }) =>
       </LinkButton>
     ),
   )
+}
 
 export interface HeaderProps {}
 
@@ -57,16 +66,16 @@ const Header: FC<HeaderProps> = () => {
           style={{ cursor: "pointer" }}
         />
         {sessionMetadata && (
-          <>
-            <Profile {...sessionMetadata} />
+          <Stack direction="row" gap={2} alignItems="center" marginLeft="auto">
             <Link
               onClick={() => {
                 void logout(null)
               }}
             >
               Log out
             </Link>
-          </>
+            <Profile {...sessionMetadata} />
+          </Stack>
         )}
       </Stack>
     </Paper>