From 2efe042d8680ae16d22fc296a8b5206867b0c9b1 Mon Sep 17 00:00:00 2001 From: Jackson Williams Date: Wed, 17 Jan 2024 12:56:31 -0500 Subject: [PATCH 1/6] fixed log out button and header changing sizes --- FU.SPA/src/components/Navbar.css | 32 +++++++++++++++++++++++++++++--- FU.SPA/src/components/Navbar.jsx | 2 ++ 2 files changed, 31 insertions(+), 3 deletions(-) diff --git a/FU.SPA/src/components/Navbar.css b/FU.SPA/src/components/Navbar.css index 8a2e67d9..3904be3b 100644 --- a/FU.SPA/src/components/Navbar.css +++ b/FU.SPA/src/components/Navbar.css @@ -18,12 +18,15 @@ body { justify-content: space-between; align-items: stretch; gap: 2rem; - padding: 0 1rem; + padding: 0.1rem; + font-family: 'Times New Roman', Times, serif; + font-size: 1rem; + height: 50px; } .left-content, .right-content { - display: flex; + display:flex; } .site-title { @@ -40,13 +43,36 @@ body { gap: 1rem; } +.nav p { + display: flex; + align-items: center; + margin: 0; + padding: 0rem; +} + + +.nav button { +color: white; +background: none; +border: none; +outline: none; +font-family: inherit; +font-size: inherit; +cursor: pointer; +display: flex; +align-items: center; +padding: 0.2rem; +height: 100%; +} + .nav a { color: inherit; text-decoration: none; height: 100%; display: flex; - align-items: center; + align-items:center; padding: 0.2rem; + } .nav li.active { diff --git a/FU.SPA/src/components/Navbar.jsx b/FU.SPA/src/components/Navbar.jsx index faad8f82..f942ad71 100644 --- a/FU.SPA/src/components/Navbar.jsx +++ b/FU.SPA/src/components/Navbar.jsx @@ -12,7 +12,9 @@ export default function Navbar() { return ( <>

{user.username}

+
  • +
    • ); } else { From 064c2f98e2b6dc28a3aec075d6e23e5545ba398e Mon Sep 17 00:00:00 2001 From: Jackson Williams Date: Wed, 17 Jan 2024 14:02:35 -0500 Subject: [PATCH 2/6] removed p css --- FU.SPA/src/components/Navbar.css | 8 -------- 1 file changed, 8 deletions(-) diff --git a/FU.SPA/src/components/Navbar.css b/FU.SPA/src/components/Navbar.css index 3904be3b..34984a2a 100644 --- a/FU.SPA/src/components/Navbar.css +++ b/FU.SPA/src/components/Navbar.css @@ -43,14 +43,6 @@ body { gap: 1rem; } -.nav p { - display: flex; - align-items: center; - margin: 0; - padding: 0rem; -} - - .nav button { color: white; background: none; From cb992e2e524615a35bbc6bf2ca043d88bb361358 Mon Sep 17 00:00:00 2001 From: Jackson Williams Date: Wed, 17 Jan 2024 14:09:15 -0500 Subject: [PATCH 3/6] avatar is generated based off of username --- FU.SPA/src/components/Navbar.jsx | 39 +++++++++++++++++++++++++++++--- 1 file changed, 36 insertions(+), 3 deletions(-) diff --git a/FU.SPA/src/components/Navbar.jsx b/FU.SPA/src/components/Navbar.jsx index f942ad71..c319010b 100644 --- a/FU.SPA/src/components/Navbar.jsx +++ b/FU.SPA/src/components/Navbar.jsx @@ -2,6 +2,7 @@ import { Link, useMatch, useResolvedPath } from 'react-router-dom'; import UserContext from '../context/userContext'; import { useNavigate } from 'react-router-dom'; import { useContext } from 'react'; +import Avatar from '@mui/material/Avatar'; export default function Navbar() { const { user, logout } = useContext(UserContext); @@ -11,10 +12,12 @@ export default function Navbar() { if (user) { return ( <> -

    {user.username}

    -
  • +
  • + +
    • +
  • -
    • + ); } else { @@ -61,3 +64,33 @@ function CustomLink({ to, children, ...props }) { ); } +function stringToColor(string) { + let hash = 0; + let i; + for (i = 0; i < string.length; i += 1) { + hash = string.charCodeAt(i) + ((hash << 5) - hash); + } + let color = '#'; + for (i = 0; i < 3; i += 1) { + const value = (hash >> (i * 8)) & 0xff; + color += `00${value.toString(16)}`.slice(-2); + } + return color; +} + +function stringAvatar(name) { + // split name by spaces and filter empty entries + let nameParts = name.split(' ').filter(Boolean); + // get the first letter of the first part + let initials = nameParts[0][0]; + // if there is a second part to name + if (nameParts.length > 1) { + initials += nameParts[1][0]; + } + return { + sx: { + bgcolor: stringToColor(name), + }, + children: initials, + }; +} \ No newline at end of file From e759cdbb2581a97b3331def1f94a6c0425e6bc1f Mon Sep 17 00:00:00 2001 From: Jackson Williams Date: Fri, 19 Jan 2024 12:52:08 -0500 Subject: [PATCH 4/6] removed padding --- FU.SPA/src/components/Navbar.css | 1 - 1 file changed, 1 deletion(-) diff --git a/FU.SPA/src/components/Navbar.css b/FU.SPA/src/components/Navbar.css index 34984a2a..06c39d28 100644 --- a/FU.SPA/src/components/Navbar.css +++ b/FU.SPA/src/components/Navbar.css @@ -18,7 +18,6 @@ body { justify-content: space-between; align-items: stretch; gap: 2rem; - padding: 0.1rem; font-family: 'Times New Roman', Times, serif; font-size: 1rem; height: 50px; From ccae3658bbe965d66035df0b0e84c8617edda169 Mon Sep 17 00:00:00 2001 From: Jackson Williams Date: Fri, 19 Jan 2024 12:52:51 -0500 Subject: [PATCH 5/6] use custom pfp otherwise use MUI generated pfp --- FU.SPA/src/components/Navbar.jsx | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/FU.SPA/src/components/Navbar.jsx b/FU.SPA/src/components/Navbar.jsx index c319010b..827391d4 100644 --- a/FU.SPA/src/components/Navbar.jsx +++ b/FU.SPA/src/components/Navbar.jsx @@ -10,10 +10,15 @@ export default function Navbar() { const renderTabContent = () => { if (user) { + // if user has a custom pfp then use that, if not then use MUI instead of default pfp + const defaultPFP = user.pfpUrl.includes('https://tr.rbxcdn.com/38c6edcb50633730ff4cf39ac8859840/420/420/Hat/Png'); + const pfpComponent = !defaultPFP + ? + : ; return ( <>
  • - + {pfpComponent}
  • From 4623f465894e93033700f5d7e84bd01254daf88c Mon Sep 17 00:00:00 2001 From: evan-scales Date: Sat, 20 Jan 2024 12:02:28 -0500 Subject: [PATCH 6/6] cleanupHeader: Use same font all across site --- FU.SPA/src/components/Navbar.css | 1 - FU.SPA/src/main.jsx | 2 +- 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/FU.SPA/src/components/Navbar.css b/FU.SPA/src/components/Navbar.css index 06c39d28..befc669c 100644 --- a/FU.SPA/src/components/Navbar.css +++ b/FU.SPA/src/components/Navbar.css @@ -18,7 +18,6 @@ body { justify-content: space-between; align-items: stretch; gap: 2rem; - font-family: 'Times New Roman', Times, serif; font-size: 1rem; height: 50px; } diff --git a/FU.SPA/src/main.jsx b/FU.SPA/src/main.jsx index bf1a7125..be74370c 100644 --- a/FU.SPA/src/main.jsx +++ b/FU.SPA/src/main.jsx @@ -1,7 +1,7 @@ import React from 'react'; import ReactDOM from 'react-dom/client'; import App from './App.jsx'; -//import './index.css' +import './index.css' // add comment import './components/Navbar.css'; import { BrowserRouter } from 'react-router-dom';