mirror of https://github.com/cocosolos/ixion.git
Improve shadows
This commit is contained in:
parent
5f215050b7
commit
1553b2606b
|
|
@ -1,10 +1,12 @@
|
|||
import { Card, CardContent, Typography } from '@mui/material';
|
||||
import { useThemeModeContext } from '../context/ThemeContext';
|
||||
|
||||
type ErrorCardProps = { error: string };
|
||||
|
||||
export default function ErrorCard({ error }: ErrorCardProps) {
|
||||
const { themeMode } = useThemeModeContext();
|
||||
return (
|
||||
<Card className="mb-2">
|
||||
<Card className="mb-2" raised={themeMode === 'light'}>
|
||||
<CardContent className="p-4">
|
||||
<Typography align="center" variant="h6">
|
||||
¯\_(ツ)_/¯
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
import {
|
||||
Container,
|
||||
Divider,
|
||||
Grid,
|
||||
Input,
|
||||
Slider,
|
||||
|
|
@ -150,299 +151,302 @@ export default function SearchServers({
|
|||
};
|
||||
|
||||
return (
|
||||
<Container
|
||||
ref={containerRef}
|
||||
className="overflow-hidden"
|
||||
sx={{
|
||||
transition: 'all 0.3s ease',
|
||||
maxHeight: showSearchServer ? contentHeight : 0,
|
||||
backgroundColor: (theme) =>
|
||||
theme.palette.mode === 'dark'
|
||||
? 'rgba(255, 255, 255, .06)'
|
||||
: 'rgba(0, 0, 0, .06)',
|
||||
}}
|
||||
>
|
||||
<Grid container spacing={2} className="py-2">
|
||||
{/* Name */}
|
||||
<Grid item xs={12}>
|
||||
<TextField
|
||||
value={searchState.name}
|
||||
onChange={handleSearchName}
|
||||
variant="standard"
|
||||
autoComplete="false"
|
||||
fullWidth
|
||||
label="Name"
|
||||
size="small"
|
||||
className="pb-2"
|
||||
/>
|
||||
</Grid>
|
||||
{/* Max Level */}
|
||||
<Grid
|
||||
item
|
||||
xs={12}
|
||||
className="pt-0"
|
||||
display="flex"
|
||||
flexDirection="column"
|
||||
alignItems="center"
|
||||
>
|
||||
<Typography id="max-level" variant="caption">
|
||||
Max Level
|
||||
</Typography>
|
||||
</Grid>
|
||||
<Grid item xs={12} className="flex pt-0">
|
||||
<Input
|
||||
value={searchState.maxLevel[0]}
|
||||
size="small"
|
||||
onChange={handleSearchMaxLevelMin}
|
||||
// onBlur={handleBlur}
|
||||
inputProps={{
|
||||
name: 'max-level-min',
|
||||
step: 1,
|
||||
min: 1,
|
||||
max: 99,
|
||||
type: 'number',
|
||||
'aria-labelledby': 'max-level',
|
||||
}}
|
||||
/>
|
||||
<Slider
|
||||
aria-labelledby="max-level"
|
||||
value={searchState.maxLevel}
|
||||
onChange={handleSearchMaxLevel}
|
||||
valueLabelDisplay="auto"
|
||||
disableSwap
|
||||
className="mx-4"
|
||||
size="small"
|
||||
min={1}
|
||||
max={99}
|
||||
/>
|
||||
<Input
|
||||
value={searchState.maxLevel[1]}
|
||||
size="small"
|
||||
onChange={handleSearchMaxLevelMax}
|
||||
// onBlur={handleBlur}
|
||||
inputProps={{
|
||||
name: 'max-level-max',
|
||||
step: 1,
|
||||
min: 1,
|
||||
max: 99,
|
||||
type: 'number',
|
||||
'aria-labelledby': 'max-level',
|
||||
}}
|
||||
/>
|
||||
</Grid>
|
||||
{/* Expansion */}
|
||||
<Grid
|
||||
item
|
||||
xs={12}
|
||||
display="flex"
|
||||
flexDirection="column"
|
||||
alignItems="center"
|
||||
>
|
||||
<Tooltip
|
||||
title="Enabled expansions, exact match."
|
||||
arrow
|
||||
disableInteractive
|
||||
placement="top"
|
||||
<>
|
||||
<Container
|
||||
ref={containerRef}
|
||||
className="overflow-hidden"
|
||||
sx={{
|
||||
transition: 'all 0.3s ease',
|
||||
maxHeight: showSearchServer ? contentHeight : 0,
|
||||
backgroundColor: (theme) =>
|
||||
theme.palette.mode === 'dark'
|
||||
? 'rgba(255, 255, 255, .06)'
|
||||
: 'rgba(0, 0, 0, .06)',
|
||||
}}
|
||||
>
|
||||
<Grid container spacing={2} className="py-2">
|
||||
{/* Name */}
|
||||
<Grid item xs={12}>
|
||||
<TextField
|
||||
value={searchState.name}
|
||||
onChange={handleSearchName}
|
||||
variant="standard"
|
||||
autoComplete="false"
|
||||
fullWidth
|
||||
label="Name"
|
||||
size="small"
|
||||
className="pb-2"
|
||||
/>
|
||||
</Grid>
|
||||
{/* Max Level */}
|
||||
<Grid
|
||||
item
|
||||
xs={12}
|
||||
className="pt-0"
|
||||
display="flex"
|
||||
flexDirection="column"
|
||||
alignItems="center"
|
||||
>
|
||||
<Typography id="expansions-button-group" variant="caption">
|
||||
Expansions
|
||||
<Typography id="max-level" variant="caption">
|
||||
Max Level
|
||||
</Typography>
|
||||
</Tooltip>
|
||||
<ToggleButtonGroup
|
||||
value={searchState.expansions}
|
||||
onChange={handleSearchExpansions}
|
||||
size="small"
|
||||
aria-labelledby="expansions-button-group"
|
||||
sx={{
|
||||
display: 'flex',
|
||||
width: '100%',
|
||||
}}
|
||||
</Grid>
|
||||
<Grid item xs={12} className="flex pt-0">
|
||||
<Input
|
||||
value={searchState.maxLevel[0]}
|
||||
size="small"
|
||||
onChange={handleSearchMaxLevelMin}
|
||||
// onBlur={handleBlur}
|
||||
inputProps={{
|
||||
name: 'max-level-min',
|
||||
step: 1,
|
||||
min: 1,
|
||||
max: 99,
|
||||
type: 'number',
|
||||
'aria-labelledby': 'max-level',
|
||||
}}
|
||||
/>
|
||||
<Slider
|
||||
aria-labelledby="max-level"
|
||||
value={searchState.maxLevel}
|
||||
onChange={handleSearchMaxLevel}
|
||||
valueLabelDisplay="auto"
|
||||
disableSwap
|
||||
className="mx-4"
|
||||
size="small"
|
||||
min={1}
|
||||
max={99}
|
||||
/>
|
||||
<Input
|
||||
value={searchState.maxLevel[1]}
|
||||
size="small"
|
||||
onChange={handleSearchMaxLevelMax}
|
||||
// onBlur={handleBlur}
|
||||
inputProps={{
|
||||
name: 'max-level-max',
|
||||
step: 1,
|
||||
min: 1,
|
||||
max: 99,
|
||||
type: 'number',
|
||||
'aria-labelledby': 'max-level',
|
||||
}}
|
||||
/>
|
||||
</Grid>
|
||||
{/* Expansion */}
|
||||
<Grid
|
||||
item
|
||||
xs={12}
|
||||
display="flex"
|
||||
flexDirection="column"
|
||||
alignItems="center"
|
||||
>
|
||||
<ToggleButton
|
||||
key="none"
|
||||
value="none"
|
||||
aria-label="none-enabled"
|
||||
className="py-0"
|
||||
sx={{ width: '20%' }}
|
||||
<Tooltip
|
||||
title="Enabled expansions, exact match."
|
||||
arrow
|
||||
disableInteractive
|
||||
placement="top"
|
||||
>
|
||||
None
|
||||
</ToggleButton>
|
||||
<ToggleButton
|
||||
key="rotz"
|
||||
value="rotz"
|
||||
aria-label="rotz-enabled"
|
||||
className="py-0"
|
||||
sx={{ width: '20%' }}
|
||||
<Typography id="expansions-button-group" variant="caption">
|
||||
Expansions
|
||||
</Typography>
|
||||
</Tooltip>
|
||||
<ToggleButtonGroup
|
||||
value={searchState.expansions}
|
||||
onChange={handleSearchExpansions}
|
||||
size="small"
|
||||
aria-labelledby="expansions-button-group"
|
||||
sx={{
|
||||
display: 'flex',
|
||||
width: '100%',
|
||||
}}
|
||||
>
|
||||
RotZ
|
||||
</ToggleButton>
|
||||
<ToggleButton
|
||||
key="cop"
|
||||
value="cop"
|
||||
aria-label="cop-enabled"
|
||||
className="py-0"
|
||||
sx={{ width: '20%' }}
|
||||
>
|
||||
CoP
|
||||
</ToggleButton>
|
||||
<ToggleButton
|
||||
key="toau"
|
||||
value="toau"
|
||||
aria-label="toau-enabled"
|
||||
className="py-0"
|
||||
sx={{ width: '20%' }}
|
||||
>
|
||||
ToAU
|
||||
</ToggleButton>
|
||||
<ToggleButton
|
||||
key="wotg"
|
||||
value="wotg"
|
||||
aria-label="wotg-enabled"
|
||||
className="py-0"
|
||||
sx={{ width: '20%' }}
|
||||
>
|
||||
WotG
|
||||
</ToggleButton>
|
||||
<ToggleButton
|
||||
key="soa"
|
||||
value="soa"
|
||||
aria-label="soa-enabled"
|
||||
className="py-0"
|
||||
sx={{ width: '20%' }}
|
||||
>
|
||||
SoA
|
||||
</ToggleButton>
|
||||
</ToggleButtonGroup>
|
||||
</Grid>
|
||||
{/* Multiboxing */}
|
||||
<Grid
|
||||
item
|
||||
xs={12}
|
||||
display="flex"
|
||||
flexDirection="column"
|
||||
alignItems="center"
|
||||
>
|
||||
<Typography id="multibox-button-group" variant="caption">
|
||||
Multiboxing
|
||||
</Typography>
|
||||
<ToggleButtonGroup
|
||||
value={searchState.multibox}
|
||||
onChange={handleSearchMultibox}
|
||||
size="small"
|
||||
aria-labelledby="multibox-button-group"
|
||||
sx={{
|
||||
display: 'flex',
|
||||
width: '100%',
|
||||
}}
|
||||
exclusive
|
||||
<ToggleButton
|
||||
key="none"
|
||||
value="none"
|
||||
aria-label="none-enabled"
|
||||
className="py-0"
|
||||
sx={{ width: '20%' }}
|
||||
>
|
||||
None
|
||||
</ToggleButton>
|
||||
<ToggleButton
|
||||
key="rotz"
|
||||
value="rotz"
|
||||
aria-label="rotz-enabled"
|
||||
className="py-0"
|
||||
sx={{ width: '20%' }}
|
||||
>
|
||||
RotZ
|
||||
</ToggleButton>
|
||||
<ToggleButton
|
||||
key="cop"
|
||||
value="cop"
|
||||
aria-label="cop-enabled"
|
||||
className="py-0"
|
||||
sx={{ width: '20%' }}
|
||||
>
|
||||
CoP
|
||||
</ToggleButton>
|
||||
<ToggleButton
|
||||
key="toau"
|
||||
value="toau"
|
||||
aria-label="toau-enabled"
|
||||
className="py-0"
|
||||
sx={{ width: '20%' }}
|
||||
>
|
||||
ToAU
|
||||
</ToggleButton>
|
||||
<ToggleButton
|
||||
key="wotg"
|
||||
value="wotg"
|
||||
aria-label="wotg-enabled"
|
||||
className="py-0"
|
||||
sx={{ width: '20%' }}
|
||||
>
|
||||
WotG
|
||||
</ToggleButton>
|
||||
<ToggleButton
|
||||
key="soa"
|
||||
value="soa"
|
||||
aria-label="soa-enabled"
|
||||
className="py-0"
|
||||
sx={{ width: '20%' }}
|
||||
>
|
||||
SoA
|
||||
</ToggleButton>
|
||||
</ToggleButtonGroup>
|
||||
</Grid>
|
||||
{/* Multiboxing */}
|
||||
<Grid
|
||||
item
|
||||
xs={12}
|
||||
display="flex"
|
||||
flexDirection="column"
|
||||
alignItems="center"
|
||||
>
|
||||
<ToggleButton
|
||||
value="none"
|
||||
aria-label="no multiboxing"
|
||||
className="py-0"
|
||||
sx={{ width: '33.33%' }}
|
||||
<Typography id="multibox-button-group" variant="caption">
|
||||
Multiboxing
|
||||
</Typography>
|
||||
<ToggleButtonGroup
|
||||
value={searchState.multibox}
|
||||
onChange={handleSearchMultibox}
|
||||
size="small"
|
||||
aria-labelledby="multibox-button-group"
|
||||
sx={{
|
||||
display: 'flex',
|
||||
width: '100%',
|
||||
}}
|
||||
exclusive
|
||||
>
|
||||
None
|
||||
</ToggleButton>
|
||||
<ToggleButton
|
||||
value="limited"
|
||||
aria-label="limited multiboxing"
|
||||
className="py-0"
|
||||
sx={{ width: '33.33%' }}
|
||||
>
|
||||
Limited
|
||||
</ToggleButton>
|
||||
<ToggleButton
|
||||
value="unlimited"
|
||||
aria-label="unlimited multiboxing"
|
||||
className="py-0"
|
||||
sx={{ width: '33.33%' }}
|
||||
>
|
||||
Unlimited
|
||||
</ToggleButton>
|
||||
</ToggleButtonGroup>
|
||||
</Grid>
|
||||
{/* Trusts */}
|
||||
<Grid
|
||||
item
|
||||
xs={6}
|
||||
display="flex"
|
||||
flexDirection="column"
|
||||
alignItems="center"
|
||||
>
|
||||
<Typography id="trust-button-group" variant="caption">
|
||||
Trusts
|
||||
</Typography>
|
||||
<ToggleButtonGroup
|
||||
value={searchState.trusts}
|
||||
onChange={handleSearchTrusts}
|
||||
size="small"
|
||||
aria-labelledby="trust-button-group"
|
||||
exclusive
|
||||
sx={{
|
||||
display: 'flex',
|
||||
width: '100%',
|
||||
}}
|
||||
<ToggleButton
|
||||
value="none"
|
||||
aria-label="no multiboxing"
|
||||
className="py-0"
|
||||
sx={{ width: '33.33%' }}
|
||||
>
|
||||
None
|
||||
</ToggleButton>
|
||||
<ToggleButton
|
||||
value="limited"
|
||||
aria-label="limited multiboxing"
|
||||
className="py-0"
|
||||
sx={{ width: '33.33%' }}
|
||||
>
|
||||
Limited
|
||||
</ToggleButton>
|
||||
<ToggleButton
|
||||
value="unlimited"
|
||||
aria-label="unlimited multiboxing"
|
||||
className="py-0"
|
||||
sx={{ width: '33.33%' }}
|
||||
>
|
||||
Unlimited
|
||||
</ToggleButton>
|
||||
</ToggleButtonGroup>
|
||||
</Grid>
|
||||
{/* Trusts */}
|
||||
<Grid
|
||||
item
|
||||
xs={6}
|
||||
display="flex"
|
||||
flexDirection="column"
|
||||
alignItems="center"
|
||||
>
|
||||
<ToggleButton
|
||||
value="disabled"
|
||||
aria-label="trust disabled"
|
||||
className="py-0"
|
||||
sx={{ width: '50%' }}
|
||||
<Typography id="trust-button-group" variant="caption">
|
||||
Trusts
|
||||
</Typography>
|
||||
<ToggleButtonGroup
|
||||
value={searchState.trusts}
|
||||
onChange={handleSearchTrusts}
|
||||
size="small"
|
||||
aria-labelledby="trust-button-group"
|
||||
exclusive
|
||||
sx={{
|
||||
display: 'flex',
|
||||
width: '100%',
|
||||
}}
|
||||
>
|
||||
Disabled
|
||||
</ToggleButton>
|
||||
<ToggleButton
|
||||
value="enabled"
|
||||
aria-label="trust enabled"
|
||||
className="py-0"
|
||||
sx={{ width: '50%' }}
|
||||
>
|
||||
Enabled
|
||||
</ToggleButton>
|
||||
</ToggleButtonGroup>
|
||||
</Grid>
|
||||
{/* Level Sync */}
|
||||
<Grid
|
||||
item
|
||||
xs={6}
|
||||
display="flex"
|
||||
flexDirection="column"
|
||||
alignItems="center"
|
||||
>
|
||||
<Typography id="level-sync-button-group" variant="caption">
|
||||
Level Sync
|
||||
</Typography>
|
||||
<ToggleButtonGroup
|
||||
value={searchState.levelSync}
|
||||
onChange={handleSearchLevelSync}
|
||||
size="small"
|
||||
aria-labelledby="level-sync-button-group"
|
||||
exclusive
|
||||
sx={{
|
||||
display: 'flex',
|
||||
width: '100%',
|
||||
}}
|
||||
<ToggleButton
|
||||
value="disabled"
|
||||
aria-label="trust disabled"
|
||||
className="py-0"
|
||||
sx={{ width: '50%' }}
|
||||
>
|
||||
Disabled
|
||||
</ToggleButton>
|
||||
<ToggleButton
|
||||
value="enabled"
|
||||
aria-label="trust enabled"
|
||||
className="py-0"
|
||||
sx={{ width: '50%' }}
|
||||
>
|
||||
Enabled
|
||||
</ToggleButton>
|
||||
</ToggleButtonGroup>
|
||||
</Grid>
|
||||
{/* Level Sync */}
|
||||
<Grid
|
||||
item
|
||||
xs={6}
|
||||
display="flex"
|
||||
flexDirection="column"
|
||||
alignItems="center"
|
||||
>
|
||||
<ToggleButton
|
||||
value="disabled"
|
||||
aria-label="level-sync-disabled"
|
||||
className="py-0"
|
||||
sx={{ width: '50%' }}
|
||||
<Typography id="level-sync-button-group" variant="caption">
|
||||
Level Sync
|
||||
</Typography>
|
||||
<ToggleButtonGroup
|
||||
value={searchState.levelSync}
|
||||
onChange={handleSearchLevelSync}
|
||||
size="small"
|
||||
aria-labelledby="level-sync-button-group"
|
||||
exclusive
|
||||
sx={{
|
||||
display: 'flex',
|
||||
width: '100%',
|
||||
}}
|
||||
>
|
||||
Disabled
|
||||
</ToggleButton>
|
||||
<ToggleButton
|
||||
value="enabled"
|
||||
aria-label="level-sync-enabled"
|
||||
className="py-0"
|
||||
sx={{ width: '50%' }}
|
||||
>
|
||||
Enabled
|
||||
</ToggleButton>
|
||||
</ToggleButtonGroup>
|
||||
<ToggleButton
|
||||
value="disabled"
|
||||
aria-label="level-sync-disabled"
|
||||
className="py-0"
|
||||
sx={{ width: '50%' }}
|
||||
>
|
||||
Disabled
|
||||
</ToggleButton>
|
||||
<ToggleButton
|
||||
value="enabled"
|
||||
aria-label="level-sync-enabled"
|
||||
className="py-0"
|
||||
sx={{ width: '50%' }}
|
||||
>
|
||||
Enabled
|
||||
</ToggleButton>
|
||||
</ToggleButtonGroup>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Container>
|
||||
</Container>
|
||||
{contentHeight > 0 && <Divider />}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -64,7 +64,7 @@ export default function SettingsChipCloud({ server }: SettingsChipCloudProps) {
|
|||
'&> .MuiChip-label': {
|
||||
paddingRight: 0.5,
|
||||
},
|
||||
boxShadow: '0px 3px 3px rgba(0, 0, 0, .25)',
|
||||
boxShadow: 1,
|
||||
}}
|
||||
/>
|
||||
</Tooltip>
|
||||
|
|
|
|||
|
|
@ -26,6 +26,7 @@ import {
|
|||
useState,
|
||||
} from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
import { useThemeModeContext } from '../context/ThemeContext';
|
||||
import { ServerData } from '../data/ServerData';
|
||||
import CopyImageIcon from '../images/copy-image.png';
|
||||
import ExpansionBar from './Server/ExpansionsBar';
|
||||
|
|
@ -46,6 +47,7 @@ type ServerCardProps = {
|
|||
};
|
||||
|
||||
export default function ServerCard({ server, children }: ServerCardProps) {
|
||||
const { themeMode } = useThemeModeContext();
|
||||
const [clipboardTooltip, setClipboardTooltip] = useState('Copy server URL.');
|
||||
const [clipboardTooltipOpen, setClipboardTooltipOpen] = useState(false);
|
||||
const handleClipboardTooltipClose = () => {
|
||||
|
|
@ -110,7 +112,7 @@ export default function ServerCard({ server, children }: ServerCardProps) {
|
|||
};
|
||||
|
||||
return (
|
||||
<Card className="mb-2">
|
||||
<Card className="mb-2" raised={themeMode === 'light'}>
|
||||
<Accordion
|
||||
className="my-0"
|
||||
defaultExpanded={isSettingsDataGridChild}
|
||||
|
|
|
|||
|
|
@ -6,16 +6,18 @@ import {
|
|||
Box,
|
||||
Card,
|
||||
CardContent,
|
||||
Paper,
|
||||
Typography,
|
||||
alpha,
|
||||
} from '@mui/material';
|
||||
import { Link } from 'react-router-dom';
|
||||
import { useThemeModeContext } from '../context/ThemeContext';
|
||||
|
||||
export default function About() {
|
||||
const { themeMode } = useThemeModeContext();
|
||||
|
||||
return (
|
||||
<>
|
||||
<Card className="mb-3">
|
||||
<Card className="mb-2" raised={themeMode === 'light'}>
|
||||
<CardContent>
|
||||
<Box className="mb-3">
|
||||
<Typography align="center" variant="h6">
|
||||
|
|
@ -148,7 +150,7 @@ export default function About() {
|
|||
</Box>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card>
|
||||
<Card className="mb-2" raised={themeMode === 'light'}>
|
||||
<Accordion className="my-0">
|
||||
<AccordionSummary expandIcon={<ExpandMore />}>
|
||||
<Typography variant="h5">For server owners:</Typography>
|
||||
|
|
@ -203,8 +205,8 @@ export default function About() {
|
|||
>
|
||||
Create a new file <b>settings/api.lua</b> in your server
|
||||
directory.
|
||||
<Paper elevation={2}>
|
||||
<pre className="m-0 p-2">
|
||||
<Card className="bg-neutral-500/50">
|
||||
<pre className="m-0 select-text p-2">
|
||||
<code>
|
||||
{`xi = xi or {}
|
||||
xi.settings = xi.settings or {}
|
||||
|
|
@ -216,7 +218,7 @@ xi.settings.api =
|
|||
}`}
|
||||
</code>
|
||||
</pre>
|
||||
</Paper>
|
||||
</Card>
|
||||
The world server needs to be restarted after any changes to any
|
||||
of the settings. If you set <b>DO_NOT_TRACK</b> to <b>true</b>,
|
||||
your server will be removed on the next hourly update.
|
||||
|
|
|
|||
Loading…
Reference in New Issue