From 4d26c304c04c8cf5891fba6b5c272ae7c96621fc Mon Sep 17 00:00:00 2001 From: Corey Date: Sat, 11 May 2024 10:11:02 +0000 Subject: [PATCH] Change some styling --- client/src/components/Header/Header.tsx | 3 +- client/src/components/Server/ServerCard.tsx | 32 +++- client/src/components/Themed/Accordion.tsx | 44 ----- client/src/context/ThemeContext.tsx | 10 ++ client/src/index.css | 5 + client/src/pages/About.tsx | 180 +++++++++++--------- 6 files changed, 138 insertions(+), 136 deletions(-) delete mode 100644 client/src/components/Themed/Accordion.tsx diff --git a/client/src/components/Header/Header.tsx b/client/src/components/Header/Header.tsx index babdef7..8f3b547 100644 --- a/client/src/components/Header/Header.tsx +++ b/client/src/components/Header/Header.tsx @@ -75,9 +75,8 @@ export default function Header({ component={Link} to="/" variant="h6" + id="title" sx={{ - color: 'inherit', - textDecoration: 'none', flexGrow: 1, }} > diff --git a/client/src/components/Server/ServerCard.tsx b/client/src/components/Server/ServerCard.tsx index d03c22f..9ca65d9 100644 --- a/client/src/components/Server/ServerCard.tsx +++ b/client/src/components/Server/ServerCard.tsx @@ -9,6 +9,9 @@ import { Warning, } from '@mui/icons-material'; import { + Accordion, + AccordionDetails, + AccordionSummary, Box, Card, CardContent, @@ -29,11 +32,6 @@ import { Link } from 'react-router-dom'; import { useThemeModeContext } from '../../context/ThemeContext'; import { ServerData } from '../../data/ServerData'; import CopyImageIcon from '../../images/copy-image.png'; -import { - Accordion, - AccordionDetails, - AccordionSummary, -} from '../Themed/Accordion'; import ExpansionBar from './ExpansionsBar'; import SettingsDataGrid from './SettingsDataGrid'; @@ -115,12 +113,26 @@ export default function ServerCard({ server, children }: ServerCardProps) { } onClick={toggleAcordion} + sx={{ + backgroundColor: (theme) => + theme.palette.mode === 'dark' + ? 'rgba(255, 255, 255, .05)' + : 'rgba(0, 0, 0, .02)', + '& .MuiAccordionSummary-content': { + margin: (theme) => theme.spacing(0), + }, + boxShadow: '0 0 10px rgba(0, 0, 0, 0.1)', + minHeight: '32px', + }} > @@ -258,7 +270,15 @@ export default function ServerCard({ server, children }: ServerCardProps) { - + + theme.palette.mode === 'dark' + ? 'rgba(255, 255, 255, .03)' + : 'rgba(0, 0, 0, .04)', + }} + > {server.settings_summary['MAIN.SERVER_MESSAGE'] && ( <> diff --git a/client/src/components/Themed/Accordion.tsx b/client/src/components/Themed/Accordion.tsx deleted file mode 100644 index f1838fb..0000000 --- a/client/src/components/Themed/Accordion.tsx +++ /dev/null @@ -1,44 +0,0 @@ -/* eslint-disable react/jsx-props-no-spreading */ -import { styled } from '@mui/material'; -import MuiAccordion, { AccordionProps } from '@mui/material/Accordion'; -import MuiAccordionDetails, { - AccordionDetailsProps, -} from '@mui/material/AccordionDetails'; -import MuiAccordionSummary, { - AccordionSummaryProps, -} from '@mui/material/AccordionSummary'; - -export const Accordion = styled((props: AccordionProps) => ( - -))(({ theme }) => ({ - border: `1px solid ${theme.palette.divider}`, - '&:not(:last-child)': { - border: 0, - }, - '&::before': { - display: 'none', - }, -})); - -export const AccordionSummary = styled((props: AccordionSummaryProps) => ( - -))(({ theme }) => ({ - backgroundColor: - theme.palette.mode === 'dark' - ? 'rgba(255, 255, 255, .05)' - : 'rgba(0, 0, 0, .02)', - '& .MuiAccordionSummary-content': { - margin: theme.spacing(0), - }, - boxShadow: '0 0 10px rgba(0, 0, 0, 0.1)', - minHeight: '32px', -})); - -export const AccordionDetails = styled((props: AccordionDetailsProps) => ( - -))(({ theme }) => ({ - backgroundColor: - theme.palette.mode === 'dark' - ? 'rgba(255, 255, 255, .03)' - : 'rgba(0, 0, 0, .04)', -})); diff --git a/client/src/context/ThemeContext.tsx b/client/src/context/ThemeContext.tsx index 2de8aab..ab6b0f6 100644 --- a/client/src/context/ThemeContext.tsx +++ b/client/src/context/ThemeContext.tsx @@ -75,6 +75,16 @@ export function ThemeContextProvider({ container: rootElement, }, }, + MuiLink: { + styleOverrides: { + root: { + textDecoration: 'none', + ':hover': { + textDecoration: 'underline', + }, + }, + }, + }, }, }); diff --git a/client/src/index.css b/client/src/index.css index 8ceb8fe..425fc88 100644 --- a/client/src/index.css +++ b/client/src/index.css @@ -8,6 +8,11 @@ user-select: none; } +#title { + color: white; + text-decoration: none; +} + code { user-select: text; } diff --git a/client/src/pages/About.tsx b/client/src/pages/About.tsx index 5d8dfb3..2ce8f81 100644 --- a/client/src/pages/About.tsx +++ b/client/src/pages/About.tsx @@ -9,7 +9,7 @@ import { Typography, alpha, } from '@mui/material'; -import { Link } from 'react-router-dom'; +import Link from '@mui/material/Link'; import { useThemeModeContext } from '../context/ThemeContext'; export default function About() { @@ -26,15 +26,17 @@ export default function About() { alpha(theme.palette.text.primary, 0.87)} > - Ixion is a catalog of FFXI private servers running the{' '} - + Ixion is a catalog of Final Fantasy XI private servers running the{' '} + LandSandBoat {' '} - software (or serving their API). Servers are updated at a set - interval and are removed after a variable amount of + software (or serving their API). Servers are updated every 10 + minutes and are removed after a variable amount of disconnectivity. All information is gathered directly from the listed servers. @@ -46,7 +48,6 @@ export default function About() { alpha(theme.palette.text.primary, 0.87)} > Click the + button at the top of the page then enter the URL you @@ -61,93 +62,38 @@ export default function About() { alpha(theme.palette.text.primary, 0.87)} > Additional servers and more detailed information can be found on - the XiPrivateServers{' '} - - GitHub + the{' '} + + XiPrivateServers GitHub . Discussion can be found on the{' '} - + subreddit {' '} - or in the Discord. If - you want to setup your own server, check out{' '} - + or in the{' '} + + Discord + + . If you want to setup your own server, check out{' '} + the guide {' '} and don't forget to enable the HTTP server and list yourself here! - - - Notes - -
    - alpha(theme.palette.text.primary, 0.87)} - className="mb-2" - > - Due to the nature of private server customization, only basic - details can be gathered from the LSB API. Ixion doesn't - know about EXP table changes or any kind of scripting or core - changes, just basic settings. If a server doesn't have a - website linked, check the{' '} - - XiPrivateServers GitHub - {' '} - and see if it's listed there. Server owners see below for - how to add a link to your website. - - alpha(theme.palette.text.primary, 0.87)} - className="mb-2" - > - The information provided by Ixion is sourced from third-party - sources, and while we strive to ensure accuracy, we cannot - guarantee its completeness or reliability. Users are encouraged - to verify any information independently before making decisions - based on it. - - alpha(theme.palette.text.primary, 0.87)} - className="mb-2" - > - Ixion may contain links to external websites operated by third - parties. These links are provided for convenience and - informational purposes only. We do not endorse or control the - content of these third-party sites, and we are not responsible - for their accuracy, legality, or content. Users access external - sites at their own risk. - - alpha(theme.palette.text.primary, 0.87)} - className="mb-2" - > - All names, trademarks, and copyrights mentioned on this website - belong to their respective owners. Any use of these names, - trademarks, and copyrights is for identification purposes only - and does not imply endorsement, sponsorship, or affiliation with - our website. We acknowledge the ownership of these intellectual - properties and respect the rights of their owners. - -
- @@ -163,7 +109,6 @@ export default function About() { alpha(theme.palette.text.primary, 0.87)} > To be searchable, you need to enable the HTTP server on the LSB @@ -180,7 +125,6 @@ export default function About() { alpha(theme.palette.text.primary, 0.87)} > If you're not on LSB, you could fake the API response. @@ -200,7 +144,6 @@ export default function About() { alpha(theme.palette.text.primary, 0.87)} > Create a new file settings/api.lua in your server @@ -227,6 +170,75 @@ xi.settings.api = + + + + + Notes + +
    + alpha(theme.palette.text.primary, 0.87)} + className="mb-2" + > + Due to the nature of private server customization, only basic + details can be gathered from the LSB API. Ixion doesn't + know about EXP table changes or any kind of scripting or core + changes, just basic settings. If a server doesn't have a + website linked, check the{' '} + + XiPrivateServers GitHub + {' '} + and see if it's listed there. Server owners see above for + information on how to add a Link href your website. + + alpha(theme.palette.text.primary, 0.87)} + className="mb-2" + > + The information provided by Ixion is sourced from third-party + sources, and while we strive to ensure accuracy, we cannot + guarantee its completeness or reliability. Users are encouraged + to verify any information independently before making decisions + based on it. + + alpha(theme.palette.text.primary, 0.87)} + className="mb-2" + > + Ixion may contain links to external websites operated by third + parties. These links are provided for convenience and + informational purposes only. We do not endorse or control the + content of these third-party sites, and we are not responsible + for their accuracy or content. Users access external sites at + their own risk. + + alpha(theme.palette.text.primary, 0.87)} + className="mb-2" + > + All names, trademarks, and copyrights mentioned on this website + belong to their respective owners. Any use of these names, + trademarks, and copyrights is for identification purposes only + and does not imply endorsement, sponsorship, or affiliation with + our website. We acknowledge the ownership of these intellectual + properties and respect the rights of their owners. + +
+ + + ); }