Fit sections using stacks in medical records, update to tgui-core

tgui/packages/tgui/interfaces/MedicalRecords/MedicalRecordsList.tsx

@@ -1,5 +1,6 @@
-import { useBackend } from '../../backend';
-import { Box, Button, Input } from '../../components';
+import { useBackend } from 'tgui/backend';
+import { Box, Button, Input } from 'tgui-core/components';
+
 import { Data } from './types';
 
 export const MedicalRecordsList = (props) => {

tgui/packages/tgui/interfaces/MedicalRecords/MedicalRecordsMedbots.tsx

@@ -1,5 +1,6 @@
-import { useBackend } from '../../backend';
-import { Box, Collapsible, LabeledList } from '../../components';
+import { useBackend } from 'tgui/backend';
+import { Box, Collapsible, LabeledList } from 'tgui-core/components';
+
 import { Data } from './types';
 
 export const MedicalRecordsMedbots = (props) => {

tgui/packages/tgui/interfaces/MedicalRecords/MedicalRecordsOptions.tsx

@@ -1,5 +1,6 @@
-import { useBackend } from '../../backend';
-import { Button, Icon, Section, Tabs } from '../../components';
+import { useBackend } from 'tgui/backend';
+import { Button, Section, Tabs } from 'tgui-core/components';
+
 import { MedicalRecordsViewGeneral } from './MedicalRecordsViewGeneral';
 import { MedicalRecordsViewMedical } from './MedicalRecordsViewMedical';
 import { Data } from './types';
@@ -73,29 +74,29 @@ export const MedicalRecordsNavigation = (props) => {
       <Tabs.Tab
         selected={screen === 2}
         onClick={() => act('screen', { screen: 2 })}
+        icon="list"
       >
-        <Icon name="list" />
         List Records
       </Tabs.Tab>
       <Tabs.Tab
         selected={screen === 5}
         onClick={() => act('screen', { screen: 5 })}
+        icon="database"
       >
-        <Icon name="database" />
         Virus Database
       </Tabs.Tab>
       <Tabs.Tab
         selected={screen === 6}
         onClick={() => act('screen', { screen: 6 })}
+        icon="plus-square"
       >
-        <Icon name="plus-square" />
         Medbot Tracking
       </Tabs.Tab>
       <Tabs.Tab
         selected={screen === 3}
         onClick={() => act('screen', { screen: 3 })}
+        icon="wrench"
       >
-        <Icon name="wrench" />
         Record Maintenance
       </Tabs.Tab>
     </Tabs>

tgui/packages/tgui/interfaces/MedicalRecords/MedicalRecordsViewGeneral.tsx

@@ -1,5 +1,6 @@
-import { useBackend } from '../../backend';
-import { Box, Button, Image, LabeledList } from '../../components';
+import { useBackend } from 'tgui/backend';
+import { Box, Button, Image, LabeledList, Stack } from 'tgui-core/components';
+
 import { doEdit } from '../GeneralRecords/functions';
 import { Data } from './types';
 
@@ -10,13 +11,8 @@ export const MedicalRecordsViewGeneral = (props) => {
     return <Box color="bad">General records lost!</Box>;
   }
   return (
-    <>
-      <Box
-        width="50%"
-        style={{
-          float: 'left',
-        }}
-      >
+    <Stack>
+      <Stack.Item grow>
         <LabeledList>
           {general.fields.map((field, i) => (
             <LabeledList.Item key={i} label={field.field}>
@@ -33,14 +29,8 @@ export const MedicalRecordsViewGeneral = (props) => {
             </LabeledList.Item>
           ))}
         </LabeledList>
-      </Box>
-      <Box
-        width="50%"
-        style={{
-          float: 'right',
-        }}
-        textAlign="right"
-      >
+      </Stack.Item>
+      <Stack.Item>
         {!!general.has_photos &&
           general.photos!.map((p, i) => (
             <Box key={i} inline textAlign="center" color="label">
@@ -55,7 +45,7 @@ export const MedicalRecordsViewGeneral = (props) => {
               Photo #{i + 1}
             </Box>
           ))}
-      </Box>
-    </>
+      </Stack.Item>
+    </Stack>
   );
 };

tgui/packages/tgui/interfaces/MedicalRecords/MedicalRecordsViewMedical.tsx

@@ -1,6 +1,7 @@
-import { useBackend } from '../../backend';
-import { Box, Button, LabeledList, Section } from '../../components';
-import { modalOpen } from '../../interfaces/common/ComplexModal';
+import { useBackend } from 'tgui/backend';
+import { Box, Button, LabeledList, Section } from 'tgui-core/components';
+
+import { modalOpen } from '../common/ComplexModal';
 import { doEdit } from '../GeneralRecords/functions';
 import { Data } from './types';
 

tgui/packages/tgui/interfaces/MedicalRecords/MedicalRecordsViruses.tsx

@@ -1,26 +1,29 @@
 import { Fragment } from 'react';
 
 import { useBackend } from '../../backend';
-import { Button } from '../../components';
+import { Button, NoticeBox } from '../../components';
 import { Data } from './types';
 
 export const MedicalRecordsViruses = (props) => {
   const { act, data } = useBackend<Data>();
   const { virus } = data;
-  virus && virus.sort((a, b) => (a.name > b.name ? 1 : -1));
-  return (
-    virus &&
-    virus.map((vir, i) => (
-      <Fragment key={i}>
-        <Button
-          icon="flask"
-          mb="0.5rem"
-          onClick={() => act('vir', { vir: vir.D })}
-        >
-          {vir.name}
-        </Button>
-        <br />
-      </Fragment>
-    ))
-  );
+
+  if (!virus?.length) {
+    return <NoticeBox>No viruses in database.</NoticeBox>;
+  }
+
+  virus.sort((a, b) => (a.name > b.name ? 1 : -1));
+
+  return virus.map((vir, i) => (
+    <Fragment key={i}>
+      <Button
+        icon="flask"
+        mb="0.5rem"
+        onClick={() => act('vir', { vir: vir.D })}
+      >
+        {vir.name}
+      </Button>
+      <br />
+    </Fragment>
+  ));
 };

tgui/packages/tgui/interfaces/MedicalRecords/index.tsx

@@ -1,10 +1,11 @@
-import { useBackend } from '../../backend';
-import { Section } from '../../components';
+import { useBackend } from 'tgui/backend';
+import { Window } from 'tgui/layouts';
+import { Section, Stack } from 'tgui-core/components';
+
 import {
   ComplexModal,
   modalRegisterBodyOverride,
-} from '../../interfaces/common/ComplexModal';
-import { Window } from '../../layouts';
+} from '../common/ComplexModal';
 import { LoginInfo } from '../common/LoginInfo';
 import { LoginScreen } from '../common/LoginScreen';
 import { TemporaryNotice } from '../common/TemporaryNotice';
@@ -46,14 +47,26 @@ export const MedicalRecords = (props) => {
 
   return (
     <Window width={800} height={380}>
-      <ComplexModal maxHeight="100%" maxWidth="80%" />
-      <Window.Content className="Layout__content--flexColumn" scrollable>
-        <LoginInfo />
-        <TemporaryNotice />
-        <MedicalRecordsNavigation />
-        <Section height="calc(100% - 5rem)" flexGrow>
-          {(screen && body[screen]) || ''}
-        </Section>
+      <Window.Content>
+        <ComplexModal maxHeight="100%" maxWidth="80%" />
+        <Stack fill vertical>
+          <Stack.Item>
+            <LoginInfo />
+          </Stack.Item>
+          {!!data.temp && (
+            <Stack.Item>
+              <TemporaryNotice />
+            </Stack.Item>
+          )}
+          <Stack.Item>
+            <MedicalRecordsNavigation />
+          </Stack.Item>
+          <Stack.Item grow>
+            <Section fill scrollable>
+              {(screen && body[screen]) || ''}
+            </Section>
+          </Stack.Item>
+        </Stack>
       </Window.Content>
     </Window>
   );