coco/ixion
coco
/
ixion
mirror of https://github.com/cocosolos/ixion.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Change some styling

This commit is contained in:
Corey 2024-05-11 10:11:02 +00:00
parent 52908764ed
commit 4d26c304c0
6 changed files with 138 additions and 136 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
client/src/components/Header/Header.tsx
View File

@ -75,9 +75,8 @@ export default function Header({
component={Link}
to="/"
variant="h6"
id="title"
sx={{
color: 'inherit',
textDecoration: 'none',
flexGrow: 1,
}}
>

32
client/src/components/Server/ServerCard.tsx
View File

@ -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) {
<Card className="mb-2" raised={themeMode === 'light'}>
<Accordion
className="my-0"
disableGutters
elevation={0}
square
defaultExpanded={isSettingsDataGridChild}
expanded={expand}
>
<AccordionSummary
expandIcon={!isSettingsDataGridChild && <ExpandMore />}
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',
}}
>
<Box className="flex flex-col items-center justify-center">
<Box className="flex content-center">
@ -258,7 +270,15 @@ export default function ServerCard({ server, children }: ServerCardProps) {
</Typography>
</Box>
</AccordionSummary>
<AccordionDetails className="p-2">
<AccordionDetails
className="p-2"
sx={{
backgroundColor: (theme) =>
theme.palette.mode === 'dark'
? 'rgba(255, 255, 255, .03)'
: 'rgba(0, 0, 0, .04)',
}}
>
{server.settings_summary['MAIN.SERVER_MESSAGE'] && (
<>
<Box className="flex justify-center">

44
client/src/components/Themed/Accordion.tsx
View File

@ -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) => (
<MuiAccordion disableGutters elevation={0} square {...props} />
))(({ theme }) => ({
border: `1px solid ${theme.palette.divider}`,
'&:not(:last-child)': {
border: 0,
},
'&::before': {
display: 'none',
},
}));
export const AccordionSummary = styled((props: AccordionSummaryProps) => (
<MuiAccordionSummary {...props} />
))(({ 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) => (
<MuiAccordionDetails {...props} />
))(({ theme }) => ({
backgroundColor:
theme.palette.mode === 'dark'
? 'rgba(255, 255, 255, .03)'
: 'rgba(0, 0, 0, .04)',
}));

10
client/src/context/ThemeContext.tsx
View File

@ -75,6 +75,16 @@ export function ThemeContextProvider({
container: rootElement,
},
},
MuiLink: {
styleOverrides: {
root: {
textDecoration: 'none',
':hover': {
textDecoration: 'underline',
},
},
},
},
},
});

5
client/src/index.css
View File

@ -8,6 +8,11 @@
user-select: none;
}
#title {
color: white;
text-decoration: none;
}
code {
user-select: text;
}

180
client/src/pages/About.tsx
View File

@ -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() {
<Typography
component="p"
variant="body1"
align="justify"
color={(theme) => alpha(theme.palette.text.primary, 0.87)}
>
Ixion is a catalog of FFXI private servers running the{' '}
<Link to="https://github.com/LandSandBoat/server">
Ixion is a catalog of Final Fantasy XI private servers running the{' '}
<Link
href="https://github.com/LandSandBoat/server"
target="_blank"
>
LandSandBoat
</Link>{' '}
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.
</Typography>
@ -46,7 +48,6 @@ export default function About() {
<Typography
component="p"
variant="body1"
align="justify"
color={(theme) => 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() {
<Typography
component="p"
variant="body1"
align="justify"
color={(theme) => alpha(theme.palette.text.primary, 0.87)}
>
Additional servers and more detailed information can be found on
the XiPrivateServers{' '}
<Link to="https://github.com/XiPrivateServers/Servers/blob/main/SERVERS.md">
GitHub
the{' '}
<Link
href="https://github.com/XiPrivateServers/Servers/blob/main/SERVERS.md"
target="_blank"
>
XiPrivateServers GitHub
</Link>
. Discussion can be found on the{' '}
<Link to="https://www.reddit.com/r/FFXIPrivateServers/">
<Link
href="https://www.reddit.com/r/FFXIPrivateServers/"
target="_blank"
>
subreddit
</Link>{' '}
or in the <Link to="https://discord.gg/nYF6gNv">Discord</Link>. If
you want to setup your own server, check out{' '}
<Link to="https://github.com/LandSandBoat/server/wiki/Quick-Start-Guide">
or in the{' '}
<Link href="https://discord.gg/nYF6gNv" target="_blank">
Discord
</Link>
. If you want to setup your own server, check out{' '}
<Link
href="https://github.com/LandSandBoat/server/wiki/Quick-Start-Guide"
target="_blank"
>
the guide
</Link>{' '}
and don&apos;t forget to enable the HTTP server and list yourself
here!
</Typography>
</Box>
<Box className="mb-3">
<Typography align="center" variant="h6">
Notes
</Typography>
<ul className="m-0 pl-4">
<Typography
component="li"
variant="body2"
align="justify"
color={(theme) => 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&apos;t
know about EXP table changes or any kind of scripting or core
changes, just basic settings. If a server doesn&apos;t have a
website linked, check the{' '}
<Link to="https://github.com/XiPrivateServers/Servers/blob/main/SERVERS.md">
XiPrivateServers GitHub
</Link>{' '}
and see if it&apos;s listed there. Server owners see below for
how to add a link to your website.
</Typography>
<Typography
component="li"
variant="body2"
align="justify"
color={(theme) => 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.
</Typography>
<Typography
component="li"
variant="body2"
align="justify"
color={(theme) => 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.
</Typography>
<Typography
component="li"
variant="body2"
align="justify"
color={(theme) => 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.
</Typography>
</ul>
</Box>
</CardContent>
</Card>
<Card className="mb-2" raised={themeMode === 'light'}>
@ -163,7 +109,6 @@ export default function About() {
<Typography
component="p"
variant="body1"
align="justify"
color={(theme) => 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() {
<Typography
component="p"
variant="body1"
align="justify"
color={(theme) => alpha(theme.palette.text.primary, 0.87)}
>
If you&apos;re not on LSB, you could fake the API response.
@ -200,7 +144,6 @@ export default function About() {
<Typography
component="span"
variant="body1"
align="justify"
color={(theme) => alpha(theme.palette.text.primary, 0.87)}
>
Create a new file <b>settings/api.lua</b> in your server
@ -227,6 +170,75 @@ xi.settings.api =
</AccordionDetails>
</Accordion>
</Card>
<Card className="mb-2" raised={themeMode === 'light'}>
<CardContent>
<Box className="mb-3">
<Typography align="center" variant="h6">
Notes
</Typography>
<ul className="m-0 pl-4">
<Typography
component="li"
variant="body2"
color={(theme) => 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&apos;t
know about EXP table changes or any kind of scripting or core
changes, just basic settings. If a server doesn&apos;t have a
website linked, check the{' '}
<Link
href="https://github.com/XiPrivateServers/Servers/blob/main/SERVERS.md"
target="_blank"
>
XiPrivateServers GitHub
</Link>{' '}
and see if it&apos;s listed there. Server owners see above for
information on how to add a Link href your website.
</Typography>
<Typography
component="li"
variant="body2"
color={(theme) => 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.
</Typography>
<Typography
component="li"
variant="body2"
color={(theme) => 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.
</Typography>
<Typography
component="li"
variant="body2"
color={(theme) => 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.
</Typography>
</ul>
</Box>
</CardContent>
</Card>
</>
);
}