Show "unlimited" not 0

Shows unlimited for resources if they're set to "0"
Im sure we could also just remove the "of {limit}" part if its unlimited? Dane Advise

Im sure there is a 100x better way of doing this? Dane please advise.

resources/scripts/components/dashboard/ServerRow.tsx

@@ -53,6 +53,21 @@ export default ({ server, className }: { server: Server; className: string | und
         alarms.disk = server.limits.disk === 0 ? false : isAlarmState(stats.diskUsageInBytes, server.limits.disk);
     }
 
+    let disklimit;
+    let memorylimit;
+
+    if(server.limits.disk != 0) {
+        disklimit = bytesToHuman(server.limits.disk * 1000 * 1000);
+    } else {
+        disklimit = "Unlimited";
+    };
+
+    if(server.limits.memory != 0) {
+        memorylimit = bytesToHuman(server.limits.memory * 1000 * 1000);
+    } else {
+        memorylimit = "Unlimited";
+    };
+
     return (
         <Link to={`/server/${server.id}`} className={`grey-row-box cursor-pointer ${className}`}>
             <div className={'icon'}>
@@ -127,7 +142,7 @@ export default ({ server, className }: { server: Server; className: string | und
                                     {bytesToHuman(stats.memoryUsageInBytes)}
                                 </p>
                             </div>
-                            <p className={'text-xs text-neutral-600 text-center mt-1'}>of {bytesToHuman(server.limits.memory * 1000 * 1000)}</p>
+                            <p className={'text-xs text-neutral-600 text-center mt-1'}>of {memorylimit}</p>
                         </div>
                         <div className={'flex-1 ml-4'}>
                             <div className={'flex justify-center'}>
@@ -147,9 +162,7 @@ export default ({ server, className }: { server: Server; className: string | und
                                     {bytesToHuman(stats.diskUsageInBytes)}
                                 </p>
                             </div>
-                            <p className={'text-xs text-neutral-600 text-center mt-1'}>
+                            <p className={'text-xs text-neutral-600 text-center mt-1'}>of {disklimit}</p>
-                                of {bytesToHuman(server.limits.disk * 1000 * 1000)}
-                            </p>
                         </div>
                     </React.Fragment>
                 }

resources/scripts/components/server/ServerConsole.tsx

@@ -81,6 +81,21 @@ export default () => {
         };
     }, [ instance, connected ]);
 
+
+    let memorylimit;
+    let disklimit;
+
+    if(server.limits.disk != 0 ) {
+        disklimit = <span className={'text-neutral-500'}> / {server.limits.memory} MB</span>;
+    } else {
+        disklimit = <span className={'text-neutral-500'}> / Unlimited</span>;
+    };
+    if(server.limits.memory != 0 ) {
+        memorylimit = <span className={'text-neutral-500'}> / {server.limits.memory} MB</span>;
+    } else {
+        memorylimit = <span className={'text-neutral-500'}> / Unlimited</span>;
+    };
+
     return (
         <PageContentBlock className={'flex'}>
             <div className={'w-1/4'}>
@@ -112,7 +127,7 @@ export default () => {
                             className={'mr-1'}
                         />
                         &nbsp;{bytesToHuman(memory)}
-                        <span className={'text-neutral-500'}> / {server.limits.memory} MB</span>
+                        {memorylimit}
                     </p>
                     <p className={'text-xs mt-2'}>
                         <FontAwesomeIcon
@@ -121,7 +136,7 @@ export default () => {
                             className={'mr-1'}
                         />
                         &nbsp;{bytesToHuman(disk)}
-                        <span className={'text-neutral-500'}> / {server.limits.disk} MB</span>
+			            {disklimit}
                     </p>
                 </TitledGreyBox>
                 {!server.isInstalling ?