From 729f61314c7274eaeb429b727fe3b81f7c48dbc2 Mon Sep 17 00:00:00 2001
From: Spypig23 <007skyfool@gmail.com>
Date: Sun, 17 Aug 2025 19:20:19 +1000
Subject: [PATCH 1/2] scss refactor underway

---
 .../tgui/interfaces/FlightComputer.tsx        | 246 ++++++------------
 .../styles/interfaces/FlightComputer.scss     |  79 ++++++
 tgui/packages/tgui/styles/main.scss           |   1 +
 3 files changed, 157 insertions(+), 169 deletions(-)
 create mode 100644 tgui/packages/tgui/styles/interfaces/FlightComputer.scss

diff --git a/tgui/packages/tgui/interfaces/FlightComputer.tsx b/tgui/packages/tgui/interfaces/FlightComputer.tsx
index 23478d135cee..1fe8b3ba6704 100644
--- a/tgui/packages/tgui/interfaces/FlightComputer.tsx
+++ b/tgui/packages/tgui/interfaces/FlightComputer.tsx
@@ -48,103 +48,66 @@ export const FlightComputer = (props) => {
   const { act, data } = useBackend<FlightComputerData>();
 
   return (
-    <Window width={700} height={410} theme="crtgreen">
-      <Window.Content>
-        <Stack vertical width="100%">
-          <Stack.Item height="100%">
-            <Box m={-10} height={40}>
-              <svg width="100%" height="100%">
-                <rect
-                  fill="rgb(0, 0, 0)"
-                  x="10"
-                  y="10"
+    <Window width={700} height={410}>
+      <Window.Content className="FlightComputer__Background">
+        <Box className="FlightComputer__Casing">
+          <Table height="100%">
+            <Table.Row>
+              <Table.Cell align="start" verticalAlign="top">
+                <HexScrew />
+              </Table.Cell>
+              <Table.Cell />
+              <Table.Cell align="end" verticalAlign="top">
+                <HexScrew />
+              </Table.Cell>
+            </Table.Row>
+            <Table.Row>
+              <Table.Cell />
+              <Table.Cell className="FlightComputer__Gradient">
+                <Box
                   width="100%"
                   height="100%"
-                />
-              </svg>
-            </Box>
-            <Box mt={-71.5} width="100%" height={32}>
-              <Box width="100%" height="100%" ml={-0.5}>
-                <svg width="100%" height="100%">
-                  <rect
-                    stroke="rgb(7, 7, 7)"
-                    strokeWidth={4}
-                    fill="rgb(17, 17, 17)"
-                    x="10"
-                    y="10"
-                    rx="10"
-                    ry="10"
-                    width="98%"
-                    height="95%"
-                  />
-                </svg>
-              </Box>
-
-              <Table mt={-64} height="100%">
-                <Table.Row>
-                  <Table.Cell align="start" verticalAlign="top" p="12px">
-                    <HexScrew />
-                  </Table.Cell>
-                  <Table.Cell align="end" verticalAlign="top" p="12px">
-                    <HexScrew />
-                  </Table.Cell>
-                </Table.Row>
-                <Table.Row>
-                  <Table.Cell align="start" verticalAlign="bottom" p="12px">
-                    <HexScrew />
-                  </Table.Cell>
-                  <Table.Cell align="end" verticalAlign="bottom" p="12px">
-                    <HexScrew />
-                  </Table.Cell>
-                </Table.Row>
-              </Table>
-            </Box>
-
-            <Box mt={-58.5} height={32} width="90%" ml="4%">
-              <Box width="100%" height="100%">
-                <svg width="100%" height="100%">
-                  <defs>
-                    <radialGradient
-                      id="gradient-fill"
-                      x1="0"
-                      y1="0"
-                      x2="800"
-                      y2="0"
-                      gradientUnits="userSpaceOnUse"
-                    >
-                      <stop offset="0" stop-color="#042208" />
-
-                      <stop offset="1" stop-color="#000b02" />
-                    </radialGradient>
-                  </defs>
-
-                  <rect
-                    stroke="#00e94e"
-                    strokeWidth={2}
-                    fill="url(#gradient-fill)"
-                    x="10"
-                    y="10"
-                    rx="5"
-                    ry="5"
-                    width="97%"
-                    height="75%"
-                  />
-                </svg>
-              </Box>
-            </Box>
-          </Stack.Item>
-
-          <Stack.Item align="center" mt={-67.5} width={50} mr={0.2}>
-            <Box height={22.4} p={0.7} m={2} mt={7.5}>
-              <CrtDisplay />
-            </Box>
-          </Stack.Item>
-        </Stack>
+                  className="FlightComputer__Static"
+                >
+                  <Box className="FlightComputer__Screen">
+                    <CrtDisplay />
+                  </Box>
+                </Box>
+              </Table.Cell>
+              <Table.Cell />
+            </Table.Row>
+            <Table.Row>
+              <Table.Cell align="start" verticalAlign="bottom">
+                <HexScrew />
+              </Table.Cell>
+              <Table.Cell />
+              <Table.Cell align="end" verticalAlign="bottom">
+                <HexScrew />
+              </Table.Cell>
+            </Table.Row>
+          </Table>
+        </Box>
       </Window.Content>
     </Window>
   );
 };
 
+const CrtDisplay = (props) => {
+  const { act, data } = useBackend<FlightComputerData>();
+
+  return (
+    <Stack m="6px" pl="1%">
+      <Stack.Item width="55%">
+        <FuelPanel />
+      </Stack.Item>
+      <Stack.Item grow>
+        <Console />
+        <TankReadouts />
+      </Stack.Item>
+    </Stack>
+  );
+};
+
 const FuelPanel = (props) => {
   const { act, data } = useBackend<FlightComputerData>();
 
@@ -152,49 +115,41 @@ const FuelPanel = (props) => {
 
   return (
     <Box pt={2} width="100%">
-      <Stack>
-        <Stack.Item>
+      <Stack className="FlightComputer__Fuel">
+        <Stack.Item className="FlightComputer__Divider">
           <Flex ml={2.5} mb={1} bold fontSize={0.9}>
             <Flex.Item grow>LEFT</Flex.Item>
             <Flex.Item grow>RIGHT</Flex.Item>
           </Flex>
 
           <Stack mb={1} height={10.3}>
-            <Stack.Item grow fontSize={0.75} mr={0}>
+            <Stack.Item grow fontSize={0.9} mr={0}>
               <Box
                 inline
                 mb={2.5}
                 width="26px"
                 fontSize={1}
                 bold
-                textColor="white"
                 textAlign="right"
               >
                 F -
               </Box>
-              <Box inline mb={2.5} width="30px" bold textColor="white">
+              <Box inline className="FlightComputer__Fuelnotch" bold>
                 3/4 -
               </Box>
-              <Box inline mb={2.5} width="30px" bold textColor="white">
+              <Box inline className="FlightComputer__Fuelnotch" bold>
                 2/4 -
               </Box>
-              <Box inline mb={2.5} width="30px" bold textColor="white">
+              <Box inline className="FlightComputer__Fuelnotch" bold>
                 1/4 -
               </Box>
-              <Box
-                inline
-                width="26px"
-                fontSize={1}
-                bold
-                textColor="white"
-                textAlign="right"
-              >
+              <Box inline width="26px" fontSize={1} bold textAlign="right">
                 E -
               </Box>
             </Stack.Item>
             <Stack.Item ml={0}>
               <Stack.Item height={10}>
-                <ColorBox color="green" height={10} />
+                <ColorBox color="#00e94ef5" height={10} />
               </Stack.Item>
               <Stack.Item mt={-19.5} ml={0.5}>
                 <ColorBox color="darkgreen" height={9.5} width={0.5} />
@@ -202,7 +157,7 @@ const FuelPanel = (props) => {
               <Stack.Item mt={(fuel / max_fuel) * -20} minHeight="0px">
                 <ColorBox
                   height={vtol_detected ? (fuel / max_fuel) * 10 : 0}
-                  color="green"
+                  color="#00e94ef5"
                 />
               </Stack.Item>
             </Stack.Item>
@@ -214,28 +169,20 @@ const FuelPanel = (props) => {
                 width="26px"
                 fontSize={1}
                 bold
-                textColor="white"
                 textAlign="right"
               >
                 F -
               </Box>
-              <Box inline mb={2.5} width="30px" bold textColor="white">
+              <Box inline className="FlightComputer__Fuelnotch" bold>
                 3/4 -
               </Box>
-              <Box inline mb={2.5} width="30px" bold textColor="white">
+              <Box inline className="FlightComputer__Fuelnotch" bold>
                 2/4 -
               </Box>
-              <Box inline mb={2.5} width="30px" bold textColor="white">
+              <Box inline className="FlightComputer__Fuelnotch" bold>
                 1/4 -
               </Box>
-              <Box
-                inline
-                width="26px"
-                fontSize={1}
-                bold
-                textColor="white"
-                textAlign="right"
-              >
+              <Box inline width="26px" fontSize={1} bold textAlign="right">
                 E -
               </Box>
             </Stack.Item>
@@ -270,7 +217,7 @@ const FuelPanel = (props) => {
             {vtol_detected ? '[ 16,000L CAPACITY ]' : 'NONE DETECTED'}
           </Box>
         </Stack.Item>
-        <Stack.Divider ml={3} mr={2} />
+
         <Stack.Item verticalAlign="center">
           <Flex ml={2.5} mb={1} bold fontSize={0.9}>
             <Flex.Item grow>CELL</Flex.Item>
@@ -279,34 +226,19 @@ const FuelPanel = (props) => {
 
           <Stack mb={1} height={10.3}>
             <Stack.Item grow fontSize={0.75}>
-              <Box
-                inline
-                ml={-1}
-                mb={2.5}
-                width="30px"
-                bold
-                textColor="white"
-                textAlign="right"
-              >
+              <Box inline ml={-1} mb={2.5} width="30px" bold textAlign="right">
                 2.8 -
               </Box>
-              <Box inline mb={2.5} width="30px" bold textColor="white">
+              <Box inline className="FlightComputer__Fuelnotch" bold>
                 2.1 -
               </Box>
-              <Box inline mb={2.5} width="30px" bold textColor="white">
+              <Box inline className="FlightComputer__Fuelnotch" bold>
                 1.4 -
               </Box>
-              <Box inline mb={2.5} width="30px" bold textColor="white">
+              <Box inline className="FlightComputer__Fuelnotch" bold>
                 0.7 -
               </Box>
-              <Box
-                inline
-                width="30px"
-                bold
-                ml={-1}
-                textColor="white"
-                textAlign="right"
-              >
+              <Box inline width="30px" bold ml={-1} textAlign="right">
                 0 -
               </Box>
             </Stack.Item>
@@ -326,26 +258,19 @@ const FuelPanel = (props) => {
             </Stack.Item>
             <Stack.Divider ml={2.5} mr={2.5} height={10} opacity={0.99} />
             <Stack.Item grow fontSize={0.75}>
-              <Box inline ml={-2} mb={2.5} width="40px" bold textColor="white">
+              <Box inline ml={-2} mb={2.5} width="40px" bold>
                 1.2kW -
               </Box>
-              <Box inline mb={2.5} ml={-2} width="40px" bold textColor="white">
+              <Box inline mb={2.5} ml={-2} width="40px" bold>
                 0.9kW -
               </Box>
-              <Box inline mb={2.5} ml={-2} width="40px" bold textColor="white">
+              <Box inline mb={2.5} ml={-2} width="40px" bold>
                 0.6kW -
               </Box>
-              <Box inline mb={2.5} ml={-2} width="40px" bold textColor="white">
+              <Box inline mb={2.5} ml={-2} width="40px" bold>
                 0.9kW -
               </Box>
-              <Box
-                inline
-                mb={2.5}
-                ml={-0.4}
-                width="40px"
-                bold
-                textColor="white"
-              >
+              <Box inline mb={2.5} ml={-0.4} width="40px" bold>
                 0kW -
               </Box>
             </Stack.Item>
@@ -406,23 +331,6 @@ const FuelPanel = (props) => {
   );
 };
 
-const CrtDisplay = (props) => {
-  const { act, data } = useBackend<FlightComputerData>();
-
-  return (
-    <Stack>
-      <Stack.Item width="55%">
-        <FuelPanel />
-      </Stack.Item>
-      <Stack.Divider opacity={0.99} mr={1} />
-      <Stack.Item grow>
-        <Console />
-        <TankReadouts />
-      </Stack.Item>
-    </Stack>
-  );
-};
-
 const TankReadouts = (props) => {
   const { act, data } = useBackend<FlightComputerData>();
 
diff --git a/tgui/packages/tgui/styles/interfaces/FlightComputer.scss b/tgui/packages/tgui/styles/interfaces/FlightComputer.scss
new file mode 100644
index 000000000000..a1632d6d012d
--- /dev/null
+++ b/tgui/packages/tgui/styles/interfaces/FlightComputer.scss
@@ -0,0 +1,79 @@
+.FlightComputer__Background {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  background-color: black;
+}
+
+.FlightComputer__Gradient {
+  background: radial-gradient(#042208, #000b02);
+}
+
+.FlightComputer__Casing {
+  height: 100%;
+  border-radius: 5px;
+  border: 4px solid rgb(7, 7, 7);
+  background-color: rgb(17, 17, 17);
+  padding: 6px;
+  max-width: 700px;
+  max-height: 410px;
+}
+
+.FlightComputer__Static {
+  width: 100%;
+  height: 100%;
+  border-radius: 5px;
+  border: 2px solid #00e94e;
+  background:
+    linear-gradient(hsla(0, 6%, 7%, 0) 50%, hsla(0, 0%, 0%, 0.25) 50%),
+    linear-gradient(
+      90deg,
+      hsla(0, 100%, 50%, 0.06),
+      hsla(120, 100%, 50%, 0.02),
+      hsla(240, 100%, 50%, 0.06)
+    );
+  background-size:
+    100% 2px,
+    3px 100%;
+  .FlightComputer__Screen {
+    mix-blend-mode: color-dodge;
+    background: radial-gradient(#05a11ab7, #00250786);
+    width: 100%;
+    height: 100%;
+    padding-left: 1%;
+    padding-right: 2%;
+    color: #00e94e;
+    font-family: monospace;
+  }
+}
+
+.FlightComputer__Fuel {
+  .FlightComputer__Divider {
+    border-right: 2px solid #00e94ed3;
+    padding-right: 6px;
+    margin-right: 6px;
+  }
+  .FlightComputer__Fuelnotch {
+    width: 30px;
+    margin-bottom: 14px;
+  }
+}
+
+.FlightComputer__Gradient2 {
+  overflow: inherit;
+
+  width: 100%;
+  height: 100%;
+  background-blend-mode: difference;
+  background:
+    linear-gradient(hsla(0, 6%, 7%, 0.582) 50%, hsla(0, 0%, 0%, 0.25) 50%),
+    linear-gradient(
+      90deg,
+      hsla(0, 100%, 50%, 0.06),
+      hsla(120, 100%, 50%, 0.02),
+      hsla(240, 100%, 50%, 0.06)
+    );
+  background-size:
+    100% 2px,
+    3px 100%;
+}
diff --git a/tgui/packages/tgui/styles/main.scss b/tgui/packages/tgui/styles/main.scss
index 7547c6e29b55..0425b5403f98 100644
--- a/tgui/packages/tgui/styles/main.scss
+++ b/tgui/packages/tgui/styles/main.scss
@@ -94,6 +94,7 @@
 @include meta.load-css('./interfaces/TacticalMap.scss');
 @include meta.load-css('./interfaces/StripMenu.scss');
 @include meta.load-css('./interfaces/CrewManifest.scss');
+@include meta.load-css('./interfaces/FlightComputer.scss');
 
 // Layouts
 @include meta.load-css('./layouts/Layout.scss');

From 37f40de1bc12d17569d753f1373685fda6560f16 Mon Sep 17 00:00:00 2001
From: Spypig23 <007skyfool@gmail.com>
Date: Mon, 18 Aug 2025 16:50:23 +1000
Subject: [PATCH 2/2] paintjob complete

---
 .../tgui/interfaces/FlightComputer.tsx        | 140 +++++++++++-------
 .../styles/interfaces/FlightComputer.scss     |  69 +++++----
 2 files changed, 128 insertions(+), 81 deletions(-)

diff --git a/tgui/packages/tgui/interfaces/FlightComputer.tsx b/tgui/packages/tgui/interfaces/FlightComputer.tsx
index 1fe8b3ba6704..3a594844523e 100644
--- a/tgui/packages/tgui/interfaces/FlightComputer.tsx
+++ b/tgui/packages/tgui/interfaces/FlightComputer.tsx
@@ -7,7 +7,6 @@ import {
   Box,
   Button,
   ColorBox,
-  Divider,
   Flex,
   RoundGauge,
   Stack,
@@ -97,7 +96,7 @@ const CrtDisplay = (props) => {
 
   return (
     <Stack m="6px" pl="1%">
-      <Stack.Item width="55%">
+      <Stack.Item width="54%" className="FlightComputer__MainDivider">
         <FuelPanel />
       </Stack.Item>
       <Stack.Item grow>
@@ -122,7 +121,7 @@ const FuelPanel = (props) => {
             <Flex.Item grow>RIGHT</Flex.Item>
           </Flex>
 
-          <Stack mb={1} height={10.3}>
+          <Stack mb={1} height={10.3} pr={1}>
             <Stack.Item grow fontSize={0.9} mr={0}>
               <Box
                 inline
@@ -161,8 +160,8 @@ const FuelPanel = (props) => {
                 />
               </Stack.Item>
             </Stack.Item>
-            <Stack.Divider ml={2} mr={1} height={10} opacity={0.99} />
-            <Stack.Item grow fontSize={0.75}>
+            <Stack.Item className="FlightComputer__Subdivider" />
+            <Stack.Item grow fontSize={0.9}>
               <Box
                 inline
                 mb={2.5}
@@ -188,7 +187,7 @@ const FuelPanel = (props) => {
             </Stack.Item>
             <Stack.Item ml={0} mr={1}>
               <Stack.Item height={10}>
-                <ColorBox color="green" height={10} />
+                <ColorBox color="#00e94ef5" height={10} />
               </Stack.Item>
               <Stack.Item mt={-19.5} ml={0.5}>
                 <ColorBox color="darkgreen" height={9.5} width={0.5} />
@@ -196,12 +195,19 @@ const FuelPanel = (props) => {
               <Stack.Item mt={(fuel / max_fuel) * -20} minHeight="0px">
                 <ColorBox
                   height={vtol_detected ? (fuel / max_fuel) * 10 : 0}
-                  color="green"
+                  color="#00e94ef5"
                 />
               </Stack.Item>
             </Stack.Item>
           </Stack>
-          <Box bold fontSize={0.8} textAlign="center">
+          <Box
+            bold={fuel / max_fuel === 1 ? false : true}
+            fontSize={0.8}
+            textAlign="center"
+            className={
+              fuel / max_fuel === 1 ? 'FlightComputer__TextConfirm' : ''
+            }
+          >
             TANK VOLUME:{' '}
             <AnimatedNumber
               initial={0}
@@ -210,7 +216,7 @@ const FuelPanel = (props) => {
             %
           </Box>
 
-          <Box textAlign="center" bold mt={2} fontFamily="monospace">
+          <Box textAlign="center" bold mt={1.8} fontFamily="monospace">
             FUEL TANK LEVELS
           </Box>
           <Box textAlign="center" bold fontSize={0.7}>
@@ -224,9 +230,16 @@ const FuelPanel = (props) => {
             <Flex.Item grow>INPUT</Flex.Item>
           </Flex>
 
-          <Stack mb={1} height={10.3}>
-            <Stack.Item grow fontSize={0.75}>
-              <Box inline ml={-1} mb={2.5} width="30px" bold textAlign="right">
+          <Stack mb={1} height={10.3} pr={1}>
+            <Stack.Item fontSize={0.9}>
+              <Box
+                inline
+                ml={-0.5}
+                mb={2.5}
+                width="30px"
+                bold
+                textAlign="right"
+              >
                 2.8 -
               </Box>
               <Box inline className="FlightComputer__Fuelnotch" bold>
@@ -238,13 +251,13 @@ const FuelPanel = (props) => {
               <Box inline className="FlightComputer__Fuelnotch" bold>
                 0.7 -
               </Box>
-              <Box inline width="30px" bold ml={-1} textAlign="right">
+              <Box inline width="30px" bold ml={-0.5} textAlign="right">
                 0 -
               </Box>
             </Stack.Item>
             <Stack.Item ml={0}>
               <Stack.Item height={10}>
-                <ColorBox color="green" height={10} />
+                <ColorBox color="#00e94ef5" height={10} />
               </Stack.Item>
               <Stack.Item mt={-19.5} ml={0.5}>
                 <ColorBox color="darkgreen" height={9.5} width={0.5} />
@@ -252,31 +265,38 @@ const FuelPanel = (props) => {
               <Stack.Item mt={(battery / max_battery) * -20}>
                 <ColorBox
                   height={vtol_detected ? (battery / max_battery) * 10 : 0}
-                  color="green"
+                  color="#00e94ef5"
                 />
               </Stack.Item>
             </Stack.Item>
-            <Stack.Divider ml={2.5} mr={2.5} height={10} opacity={0.99} />
-            <Stack.Item grow fontSize={0.75}>
-              <Box inline ml={-2} mb={2.5} width="40px" bold>
+            <Stack.Item className="FlightComputer__Subdivider" />
+            <Stack.Item grow fontSize={0.8} mr={0.5}>
+              <Box inline ml={-0.5} mb={2.5} width="40px" bold>
                 1.2kW -
               </Box>
-              <Box inline mb={2.5} ml={-2} width="40px" bold>
+              <Box inline className="FlightComputer__Energynotch" bold>
                 0.9kW -
               </Box>
-              <Box inline mb={2.5} ml={-2} width="40px" bold>
+              <Box inline className="FlightComputer__Energynotch" bold>
                 0.6kW -
               </Box>
-              <Box inline mb={2.5} ml={-2} width="40px" bold>
+              <Box inline className="FlightComputer__Energynotch" bold>
                 0.9kW -
               </Box>
-              <Box inline mb={2.5} ml={-0.4} width="40px" bold>
+              <Box
+                inline
+                mb={2.5}
+                width="40px"
+                bold
+                textAlign="right"
+                ml={-0.6}
+              >
                 0kW -
               </Box>
             </Stack.Item>
             <Stack.Item ml={0} mr={2}>
               <Stack.Item height={10}>
-                <ColorBox color="green" height={10} />
+                <ColorBox color="#00e94ef5" height={10} />
               </Stack.Item>
               <Stack.Item mt={-19.5} ml={0.5}>
                 <ColorBox
@@ -291,7 +311,15 @@ const FuelPanel = (props) => {
               </Stack.Item>
             </Stack.Item>
           </Stack>
-          <Box bold fontSize={0.8} textAlign="center">
+          <Box
+            bold={battery / max_battery === 1 ? false : true}
+            fontSize={0.8}
+            textAlign="center"
+            width="95%"
+            className={
+              battery / max_battery === 1 ? 'FlightComputer__TextConfirm' : ''
+            }
+          >
             APROX CHARGE:{' '}
             <AnimatedNumber
               initial={0}
@@ -300,20 +328,20 @@ const FuelPanel = (props) => {
             %
           </Box>
 
-          <Box textAlign="center" bold mt={2} fontFamily="monospace">
+          <Box textAlign="center" bold ml={-1} mt={1.7} fontFamily="monospace">
             POWERCELL CHARGE
           </Box>
-          <Box textAlign="center" bold fontSize={0.7}>
+          <Box textAlign="center" bold ml={-1} fontSize={0.7}>
             {vtol_detected ? '[ 2x Li BATTERY, KWh ]' : 'NONE DETECTED'}
           </Box>
         </Stack.Item>
       </Stack>
       <Button
         align="center"
+        className="FlightComputer__FuelButton"
         icon={!vtol_detected || fueling ? 'ban' : 'tint'}
         fluid
         bold
-        color={!vtol_detected && 'transperant'}
         onClick={() =>
           act(vtol_detected ? (fueling ? 'stop' : 'start') + '_fueling' : '')
         }
@@ -331,6 +359,33 @@ const FuelPanel = (props) => {
   );
 };
 
+const Console = (props) => {
+  const { act, data } = useBackend<FlightComputerData>();
+  let { vtol_detected, fueling } = data;
+  return (
+    <Box height={10.75} opacity={0.99}>
+      <Box mt={1} mb={1} className="FlightComputer__HorizontalDivider" />
+      <Box bold fontFamily="monospace" fontSize={1.1}>
+        {vtol_detected ? 'Linked aircraft detected:' : 'No aircraft detected!'}
+      </Box>
+      <Box bold>{vtol_detected && '[ AD-71E BLACKFOOT ]'}</Box>
+      <Box bold fontFamily="monospace" fontSize={1.1} mt={1.3}>
+        Refuel and recharge status:
+      </Box>
+      <Box bold fontSize={1.1}>
+        {fueling ? '[ ENGAGED ]' : '[ DISENGAGED ]'}
+      </Box>
+      <Box bold fontFamily="monospace" fontSize={1.1} mt={1.3}>
+        Primary resupply systems:
+      </Box>
+      <Box bold fontSize={0.95} mb={1.3}>
+        [ SYSTEMS NOMINAL ]
+      </Box>
+      <Box className="FlightComputer__HorizontalDivider" />
+    </Box>
+  );
+};
+
 const TankReadouts = (props) => {
   const { act, data } = useBackend<FlightComputerData>();
 
@@ -367,6 +422,7 @@ const TankReadouts = (props) => {
             INT. PRESSURE
           </Box>
           <RoundGauge
+            className="FlightComputer__Readout"
             value={randomNumber(945, 950)}
             minValue={800}
             maxValue={1000}
@@ -384,6 +440,7 @@ const TankReadouts = (props) => {
             STORED FUEL
           </Box>
           <RoundGauge
+            className="FlightComputer__Readout"
             value={vtol_detected ? 35000 - fuel * 27 : 36000}
             minValue={0}
             maxValue={40000}
@@ -396,34 +453,7 @@ const TankReadouts = (props) => {
           />
         </Flex.Item>
       </Flex>
-      <Divider />
-    </Box>
-  );
-};
-
-const Console = (props) => {
-  const { act, data } = useBackend<FlightComputerData>();
-  let { vtol_detected, fueling } = data;
-  return (
-    <Box height={10.75} opacity={0.99}>
-      <Divider />
-      <Box bold fontFamily="monospace" fontSize={1.1}>
-        {vtol_detected ? 'Linked aircraft detected:' : 'No aircraft detected!'}
-      </Box>
-      <Box bold>{vtol_detected && '[ AD-71E BLACKFOOT ]'}</Box>
-      <Box bold fontFamily="monospace" fontSize={1.1} mt={1.3}>
-        Refuel and recharge status:
-      </Box>
-      <Box bold color={fueling ? 'default' : 'red'} fontSize={1.1}>
-        {fueling ? '[ ENGAGED ]' : '[ DISENGAGED ]'}
-      </Box>
-      <Box bold fontFamily="monospace" fontSize={1.1} mt={1.3}>
-        Primary resupply systems:
-      </Box>
-      <Box bold fontSize={0.95} mb={1.3}>
-        [ SYSTEMS NOMINAL ]
-      </Box>
-      <Divider />
+      <Box mb={1} className="FlightComputer__HorizontalDivider" />
     </Box>
   );
 };
diff --git a/tgui/packages/tgui/styles/interfaces/FlightComputer.scss b/tgui/packages/tgui/styles/interfaces/FlightComputer.scss
index a1632d6d012d..eaf65cf9d039 100644
--- a/tgui/packages/tgui/styles/interfaces/FlightComputer.scss
+++ b/tgui/packages/tgui/styles/interfaces/FlightComputer.scss
@@ -5,25 +5,27 @@
   background-color: black;
 }
 
-.FlightComputer__Gradient {
-  background: radial-gradient(#042208, #000b02);
-}
-
 .FlightComputer__Casing {
   height: 100%;
   border-radius: 5px;
-  border: 4px solid rgb(7, 7, 7);
-  background-color: rgb(17, 17, 17);
+  border: 2px outset rgba(0, 0, 0, 0.685);
+  background-color: #111111;
   padding: 6px;
   max-width: 700px;
   max-height: 410px;
 }
 
+.FlightComputer__Gradient {
+  background: radial-gradient(#042208, #000b02);
+}
+
 .FlightComputer__Static {
   width: 100%;
   height: 100%;
+  outline: 3px inset #111111;
+  outline-offset: 2px;
   border-radius: 5px;
-  border: 2px solid #00e94e;
+  border: 2px ridge #00e94e;
   background:
     linear-gradient(hsla(0, 6%, 7%, 0) 50%, hsla(0, 0%, 0%, 0.25) 50%),
     linear-gradient(
@@ -47,33 +49,48 @@
   }
 }
 
+.FlightComputer__TextConfirm {
+  color: #000b02;
+  background-color: #00e94e;
+}
+
+.FlightComputer__FuelButton {
+  border: 1px solid #00e94e;
+  color: #00e94e;
+  background-color: transparent;
+}
+
+.FlightComputer__Readout {
+  filter: brightness(1.5);
+}
+
+.FlightComputer__MainDivider {
+  border-right: 2px solid #00e94ed3;
+  margin-right: 6px;
+}
+
+.FlightComputer__HorizontalDivider {
+  width: 100%;
+  border-bottom: 2px solid #00e94ee3;
+}
+
 .FlightComputer__Fuel {
   .FlightComputer__Divider {
     border-right: 2px solid #00e94ed3;
     padding-right: 6px;
     margin-right: 6px;
   }
+  .FlightComputer__Subdivider {
+    border-right: 2px solid #00e94ed3;
+    padding-right: 6px;
+    margin-right: 6px;
+  }
   .FlightComputer__Fuelnotch {
     width: 30px;
     margin-bottom: 14px;
   }
-}
-
-.FlightComputer__Gradient2 {
-  overflow: inherit;
-
-  width: 100%;
-  height: 100%;
-  background-blend-mode: difference;
-  background:
-    linear-gradient(hsla(0, 6%, 7%, 0.582) 50%, hsla(0, 0%, 0%, 0.25) 50%),
-    linear-gradient(
-      90deg,
-      hsla(0, 100%, 50%, 0.06),
-      hsla(120, 100%, 50%, 0.02),
-      hsla(240, 100%, 50%, 0.06)
-    );
-  background-size:
-    100% 2px,
-    3px 100%;
+  .FlightComputer__Energynotch {
+    width: 40px;
+    margin-bottom: 17px;
+  }
 }