Rescale UI Elements for 4K Displays

nui/src/components/MainPage/MainPageList.tsx

@@ -46,6 +46,9 @@ const BoxFadeTop = styled(Box)(({ theme }) => ({
   position: "relative",
   bottom: listHeight + fadeHeight - 4,
   height: fadeHeight,
+  '@media (min-height: 2160px)': {
+    bottom: 600 + fadeHeight - 4,
+  }
 }));
 
 const BoxFadeBottom = styled(Box)(({ theme }) => ({
@@ -68,6 +71,9 @@ const StyledList = styled(List)({
   "&::-webkit-scrollbar": {
     display: "none",
   },
+  '@media (min-height: 2160px)': {
+    maxHeight: 800,
+  }
 });
 
 // TODO: This component is kinda getting out of hand, might want to split it somehow
@@ -565,6 +571,12 @@ export const MainPageList: React.FC = () => {
     [playerMode, teleportMode, vehicleMode, healMode, serverCtx, isRedm]
   );
 
+  const StyledExpandMore = styled(ExpandMore)({
+    fontSize: '1rem',
+    '@media (min-height: 2160px)': {
+      fontSize: '2.8rem',
+    },
+  });
   return (
     // add pb={2} if we don't have that arrow at the bottom
     <Box>
@@ -590,7 +602,7 @@ export const MainPageList: React.FC = () => {
       <BoxFadeTop style={{ opacity: curSelected <= 1 ? 0 : 1 }} />
       <BoxFadeBottom style={{ opacity: curSelected >= 6 ? 0 : 1 }} />
       <BoxIcon display="flex" justifyContent="center">
-        <ExpandMore />
+        <StyledExpandMore />
       </BoxIcon>
       {/* <Typography
         color="textSecondary"

nui/src/components/MainPage/MenuListItem.tsx

@@ -1,5 +1,5 @@
 import React, { memo, useEffect, useRef, useState } from "react";
-import { styled } from '@mui/material/styles';
+import { styled, Theme } from '@mui/material/styles';
 import {
   Box,
   BoxProps,
@@ -27,6 +27,8 @@ const classes = {
   root: `${PREFIX}-root`,
   rootDisabled: `${PREFIX}-rootDisabled`,
   icon: `${PREFIX}-icon`,
+  largeIcon: `${PREFIX}-largeIcon`,
+  largeTypography: `${PREFIX}-largeTypography`,
   overrideText: `${PREFIX}-overrideText`
 };
 
@@ -47,7 +49,27 @@ const Root = styled('div')(({ theme }) => ({
   [`& .${classes.overrideText}`]: {
     color: theme.palette.text.primary,
     fontSize: 16,
-  }
+  },
+  '@media (min-height: 2160px)': {
+    [`& .${classes.root}`]: {
+      padding: 12,
+      borderRadius: 20,
+    },
+    [`& .${classes.icon}`]: {
+      fontSize: '2.8rem',
+      padding: 8,
+    },
+    [`& .${classes.largeIcon}`]: {
+      fontSize: '2.8rem',
+    },
+    [`& .${classes.overrideText}`]: {
+      fontSize: '2.4rem',
+      marginLeft: 50,
+    },
+    [`& .${classes.largeTypography}`]: {
+      fontSize: '2.4rem',
+    },
+  },
 }));
 
 export interface MenuListItemProps {
@@ -114,12 +136,15 @@ export const MenuListItem: React.FC<MenuListItemProps> = memo(
     return (
       <Root ref={divRef}>
         <ListItem
+          style={{ maxHeight: 'none', overflow: 'visible' }}
           onClick={() => onSelect()}
           className={isUserAllowed ? classes.root : classes.rootDisabled}
           dense
           selected={selected}
         >
-          <ListItemIcon className={classes.icon}>{icon}</ListItemIcon>
+          <ListItemIcon className={classes.icon}>
+            {React.cloneElement(icon, { className: classes.largeIcon })}
+          </ListItemIcon>
           <ListItemText
             primary={title}
             classes={{
@@ -246,13 +271,13 @@ export const MenuListItemMulti: React.FC<MenuListItemMultiProps> = memo(
           selected={selected}
         >
           <ListItemIcon className={classes.icon}>
-            {actions[curState]?.icon ?? icon}
+            {React.cloneElement(actions[curState]?.icon ?? icon, { className: classes.largeIcon })}
           </ListItemIcon>
           <ListItemText
             primary={
               <>
                 {title}:&nbsp;
-                <Typography component="span" color="text.secondary">
+                <Typography component="span" color="text.secondary" className={classes.largeTypography}>
                   {actions[curState]?.name ?? "???"}
                 </Typography>
               </>

nui/src/components/MenuRootContent.tsx

@@ -10,13 +10,33 @@ interface TxAdminLogoProps {
   themeName: string;
 }
 
+const StyledImage = styled('img')({
+  width: '100%',
+  maxWidth: '200px', 
+  '@media (min-height: 2160px)': {
+    maxWidth: '300px', 
+  },
+});
+
+const StyledTypography = styled(Typography)({
+  fontWeight: 500,
+  marginTop: -20,
+  textAlign: "right",
+  fontSize: 12,
+  '@media (min-height: 2160px)': {
+    fontSize: 20, 
+    marginTop: -32,
+    marginRight: 65,
+  },
+});
+
 const TxAdminLogo: React.FC<TxAdminLogoProps> = ({ themeName }) => {
   const imgName = themeName === 'fivem' ? 'txadmin.png' : 'txadmin-redm.png';
   return (
     <Box my={1} display="flex" justifyContent="center">
-      <img src={`images/${imgName}`} alt="txAdmin logo" />
+      <StyledImage src={`images/${imgName}`} alt="txAdmin logo" />
     </Box>
-  )
+  );
 };
 
 const StyledRoot = styled(Box)(({ theme }) => ({
@@ -27,6 +47,10 @@ const StyledRoot = styled(Box)(({ theme }) => ({
   display: "flex",
   flexDirection: "column",
   userSelect: "none",
+  '@media (min-height: 2160px)': {
+    width: 750,
+    borderRadius: 30,
+  },
 }));
 
 export const MenuRootContent: React.FC = React.memo(() => {
@@ -45,18 +69,10 @@ export const MenuRootContent: React.FC = React.memo(() => {
   return (
     <StyledRoot p={2} pb={1}>
       <TxAdminLogo themeName={theme.name}/>
-      <Typography
-        color="textSecondary"
-        style={{
-          fontWeight: 500,
-          marginTop: -20,
-          textAlign: "right",
-          fontSize: 12,
-        }}
-      >
+      <StyledTypography color="textSecondary">
         v{serverCtx.txAdminVersion}
         {versionPad}
-      </Typography>
+      </StyledTypography>
       <PageTabs />
       <Collapse
         in={debouncedCurPage === txAdminMenuPage.Main}

nui/src/components/misc/HelpTooltip.tsx

@@ -13,12 +13,24 @@ const StyledTooltip = styled(({ className, ...props }: TooltipProps) => (
     borderRadius: 10,
     padding: 10,
     transformOrigin: "bottom",
+    '@media (min-height: 2160px)': {
+      minWidth: '700px !important',
+      padding: 15,
+    },
+
   },
   [`& .${tooltipClasses.arrow}`]: {
     color: theme.palette.background.default,
   },
 }));
 
+const StyledTypography = styled(Typography)({
+  fontSize: '1rem',
+  '@media (min-height: 2160px)': {
+    fontSize: '2rem',
+  },
+});
+
 interface HelpTooltipProps {
   children: ReactNode;
 }
@@ -30,9 +42,9 @@ export const HelpTooltip: React.FC<HelpTooltipProps> = ({ children }) => {
     <StyledTooltip
       open={tooltipOpen}
       title={
-        <Typography variant="caption" align="center">
+        <StyledTypography variant="caption" align="center">
           {tooltipText}
-        </Typography>
+        </StyledTypography>
       }
       //FIXME: is it needed? it was there in Taso's version
       // PopperProps={{

nui/src/components/misc/PageTabs.tsx

@@ -6,9 +6,15 @@ import { useTabDisabledValue } from "../../state/keys.state";
 import { useIsMenuVisibleValue } from "../../state/visibility.state";
 import { useServerCtxValue } from "../../state/server.state";
 
-const StyledTab = styled(Tab)({
+const StyledTab = styled(Tab)(({ theme }) => ({
   minWidth: 100,
-});
+  '@media (min-height: 2160px)': {
+    '&.MuiTab-root': {
+      fontSize: '2.2rem',
+      marginTop: 20,
+    },
+  },
+}));
 
 export const PageTabs: React.FC = () => {
   const [page, setPage] = usePage();