Improve shadows

client/src/components/ErrorCard.tsx

@@ -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">
           ¯\_(ツ)_/¯

client/src/components/SearchServers.tsx

@@ -1,5 +1,6 @@
 import {
   Container,
+  Divider,
   Grid,
   Input,
   Slider,
@@ -150,6 +151,7 @@ export default function SearchServers({
   };
 
   return (
+    <>
       <Container
         ref={containerRef}
         className="overflow-hidden"
@@ -444,5 +446,7 @@ export default function SearchServers({
           </Grid>
         </Grid>
       </Container>
+      {contentHeight > 0 && <Divider />}
+    </>
   );
 }

client/src/components/Server/SettingsChipCloud.tsx

@@ -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>

client/src/components/ServerCard.tsx

@@ -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}

client/src/pages/About.tsx

@@ -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.