add user profile route

src/components/common/accordion/Accordion.component.tsx

@@ -0,0 +1,43 @@
+import React, { useContext, useState } from "react";
+import { styled } from "@linaria/react";
+import { Theme } from "../../../types/theme";
+import { ThemeContext } from "../../../providers/theme/themeProvider";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faPlusSquare, faMinusSquare } from "@fortawesome/free-solid-svg-icons";
+
+const Style = {
+    accordionWrapper: styled.div`
+        margin: 2rem;
+    `,
+
+    accordionHeader: styled.div<{theme: Theme}>`
+        background-color: ${(props) => props.theme.backgroundColor};
+        border: ${(props) => props.theme.borderWidth} solid ${(props) => props.theme.black};
+    `,
+
+    headerText: styled.h5`
+        cursor: pointer;
+    `,
+}
+
+const Accordion:React.FC<{title:string, children: React.ReactNode}> = ({title, children}) => {
+    const { currentTheme } = useContext(ThemeContext);
+    const [ expanded, setExpanded ] = useState(false);
+
+    return( 
+        <Style.accordionWrapper>
+            <Style.accordionHeader theme={currentTheme} className="p-3">
+                <Style.headerText onClick={() => setExpanded((prev) => !prev)}>
+                    <FontAwesomeIcon icon={expanded ? faMinusSquare : faPlusSquare} className="me-2"/>
+                    {title}
+                </Style.headerText>
+            </Style.accordionHeader>
+            {expanded && <div className="m-2">
+                {children}
+            </div>}
+        </Style.accordionWrapper>
+    )
+
+};
+
+export default Accordion;

src/components/routes/forum/board.component.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo } from "react";
+import React, { useContext, useMemo } from "react";
 import { useParams } from "react-router";
 import Widget from "../../common/widgets/widget.component";
 import { styled } from "@linaria/react";
@@ -7,12 +7,14 @@ import { useBBQuery } from "../../../hooks/useBBQuery";
 import { Forum } from "../../../types/forum";
 import { Link } from "react-router-dom";
 import FooterButtons from "./footerButtons.component";
+import { Theme } from "../../../types/theme";
+import { ThemeContext } from "../../../providers/theme/themeProvider";
 
 const Style = {
-    row: styled.tr`
+    row: styled.tr<{theme:Theme}>`
         &.tableRow{
             th{
-                background-color: #1E2B44;
+                background-color: ${(props) => props.theme.widgetColor};
                 color: white;
             }
 
@@ -23,13 +25,13 @@ const Style = {
 
                 &:nth-child(odd){
                     td{
-                        background-color: #25334e;
+                        background-color: ${(props) => props.theme.tableRowAlt};
                     }
                 }
 
                 &:nth-child(even){
                     td{
-                        background-color: #1e2b44;
+                        background-color: ${(props) => props.theme.tableRow};
                     }
                 }
             }
@@ -72,6 +74,7 @@ const Style = {
 const Board:React.FC = () => {
     const {boardId} = useParams();
     const board  = useBBQuery<Forum>(`board/${boardId}`)
+    const {currentTheme} = useContext(ThemeContext);
 
     const footer = useMemo(() =>{
         return [
@@ -104,7 +107,7 @@ const Board:React.FC = () => {
                     {board && <Widget widgetTitle={board.boardName}>
                         <Table striped hover responsive>
                             <thead>
-                                <Style.row className="tableRow">
+                                <Style.row className="tableRow" theme={currentTheme}>
                                     <th></th>
                                     <th></th>
                                     <th>Subject</th>
@@ -113,15 +116,15 @@ const Board:React.FC = () => {
                                     <th>Views</th>
                                     <th>Latest Post</th>
                                 </Style.row>
-                                <Style.row className="subRow">
+                                <Style.row className="subRow" theme={currentTheme}>
                                     <th colSpan={7}>
                                         MGZero and 1 other guests are using this board
                                     </th>
                                 </Style.row>
                             </thead>
                             <tbody>
                                 {board?.threads?.map(thread => {
-                                    return <Style.row className="tableRow body">
+                                    return <Style.row className="tableRow body" theme={currentTheme}>
                                                 <td>abced</td>
                                                 <td>abcdef</td>
                                                 <td><Link to={`/forum/thread/${thread.id}`}>{thread.threadName}</Link></td>

src/components/routes/user/userProfileMaster.component.tsx

@@ -4,17 +4,21 @@ import { useParams } from "react-router";
 import { useBBQuery } from "../../../hooks/useBBQuery";
 import { User } from "../../../types/user";
 import UserLeftPane from "../../user/userLeftPane.component";
-import { Accordion, AccordionBody, AccordionHeader, AccordionItem } from "react-bootstrap";
 import { styled } from "@linaria/react";
 import { ThemeContext } from "../../../providers/theme/themeProvider";
 import { Theme } from "../../../types/theme";
+import Accordion from "../../common/accordion/Accordion.component";
+import { Form } from "react-bootstrap";
 
 const Style = {
-    AccordionBody: styled(AccordionBody)<{theme: Theme}>`
-        &.accordion-body{
-            background-color: ${(props) => props.theme.widgetColor};
-        }
-    `
+    accordionWrapper: styled.div`
+        margin: 2rem;
+    `,
+
+    accordionHeader: styled.div<{theme: Theme}>`
+        background-color: ${(props) => props.theme.backgroundColor};
+        border: ${(props) => props.theme.borderWidth} solid ${(props) => props.theme.black};
+    `,
 }
 
 const UserProfileMaster:React.FC = () => {
@@ -30,17 +34,65 @@ const UserProfileMaster:React.FC = () => {
                     <div className="d-flex flex-column flex-md-row">
                         {user &&<UserLeftPane user={user}/>}
                         <div className="right-pane col-12 col-md-9">
-                            <Accordion>
-                                <AccordionItem eventKey="0">
-                                    <AccordionHeader>Bio Information</AccordionHeader>
-                                    <Style.AccordionBody theme={currentTheme}>
-                                        <AccordionBody>test</AccordionBody>
-                                    </Style.AccordionBody>
-                                </AccordionItem>
-                                <AccordionItem eventKey="1">
-                                    <AccordionHeader>Contact Information</AccordionHeader>
-                                    <AccordionBody>test</AccordionBody>
-                                </AccordionItem>
+                            <Accordion title="Bio Information">
+                                <Form>
+                                    <Form.Group>
+                                        <Form.Label>Displayname</Form.Label>
+                                        <Form.Control type="text" value={user?.displayName}/>
+                                    </Form.Group>
+
+                                    <Form.Group>
+                                        <Form.Label>Personal Text</Form.Label>
+                                        <Form.Control type="text" value={user?.bioInfo?.personalText}/>
+                                    </Form.Group>
+
+                                    <Form.Group>
+                                        <Form.Label>Date of Birth</Form.Label>
+                                        <Form.Control type="text" placeholder="MM/dd/YYYY"/>
+                                    </Form.Group>
+
+                                    <Form.Group>
+                                        <Form.Label>Gender</Form.Label>
+                                        <Form.Select>
+                                            <option value="1">Male</option>
+                                            <option value="2">Female</option>
+                                            <option value="3">Non-binary/Other</option>
+                                            <option value="4">Prefer not to say</option>
+                                        </Form.Select>
+                                    </Form.Group>
+                                </Form>
+                            </Accordion>
+
+                            <Accordion title="Contact Information">
+                                <Form.Group>
+                                    <Form.Label>Email Address</Form.Label>
+                                    <Form.Control type="email"/>
+                                </Form.Group>
+
+                                <Form.Group>
+                                    <Form.Label>Discord</Form.Label>
+                                    <Form.Control type="text"/>
+                                </Form.Group>
+
+                                <Form.Group>
+                                    <Form.Label>Facebook</Form.Label>
+                                    <Form.Control type="text"/>
+                                </Form.Group>
+
+                                <Form.Group>
+                                    <Form.Label>Instagram</Form.Label>
+                                    <Form.Control type="text"/>
+                                </Form.Group>
+
+                                <Form.Group>
+                                    <Form.Label>Threads</Form.Label>
+                                    <Form.Control type="text"/>
+                                </Form.Group>
+
+                                <Form.Group>
+                                    <Form.Label>Twitter</Form.Label>
+                                    <Form.Control type="text"/>
+                                </Form.Group>
                             </Accordion>
                         </div>
                     </div>

src/components/user/userLeftPane.component.tsx

@@ -19,7 +19,7 @@ const Style = {
 
 const UserLeftPane:React.FC<{user: User}> = ({user}) => {
     return (
-        <div className="left-pane p-2 col-12 col-md-3 d-flex flex-row-reverse flex-md-column justify-content-end align-items-center align-items-md-baseline">
+        <div className="left-pane p-2 col-12 col-md-3 d-flex flex-row-reverse flex-md-column align-items-center align-items-md-baseline">
             <h6>{user?.displayName}</h6>
             <div className="d-none d-md-block">Member</div>
             <div>

src/providers/theme/themeProvider.tsx

@@ -4,9 +4,13 @@ import { UserContext } from "../user/userProvider";
 
 
 const midnightTheme = {
+    borderWidth: ".2rem",
     backgroundColor: "#204378",
     widgetColor: "#1E2B44",
-    black: "black"
+    black: "black",
+    tableRow: "#1E2B44",
+    tableRowAlt:"#25334e",
+    textColor: "white"
 } as Theme;
 
 const themeMap:Map<String, Theme> = new Map();

src/types/theme.ts

@@ -1,6 +1,12 @@
 export type Theme = {
+    borderWidth: string,
+
     backgroundColor: string,
-    widgetColor: string
+    widgetColor: string,
+    tableRow: string,
+    tableRowAlt: string,
+    textColor: string,
+    black: string
 };
 
 export type ThemeWrapper = {

src/types/user.ts

@@ -1,6 +1,14 @@
 import { BaseBB } from "./api";
 
 export type User = BaseBB & {
-    displayName: String,
-    theme?: String
+    displayName: string,
+    theme?: string,
+
+    bioInfo?: UserBioInfo
+};
+
+export type UserBioInfo = BaseBB & {
+    personalText?: string,
+    customTitle?: string,
+    userId: number
 };