diff --git a/tgui/packages/tgui/assets/game-icons.net/LICENSE.md b/tgui/packages/tgui/assets/game-icons.net/LICENSE.md
new file mode 100644
index 00000000000..226aa5c0e0f
--- /dev/null
+++ b/tgui/packages/tgui/assets/game-icons.net/LICENSE.md
@@ -0,0 +1,3 @@
+# Licenses from game-icons.net
+
+algae.svg by Delapouite - CC BY 3.0 - https://game-icons.net/1x1/delapouite/algae.html4
diff --git a/tgui/packages/tgui/assets/game-icons.net/algae.svg b/tgui/packages/tgui/assets/game-icons.net/algae.svg
new file mode 100644
index 00000000000..f0d5b45fea5
--- /dev/null
+++ b/tgui/packages/tgui/assets/game-icons.net/algae.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/tgui/packages/tgui/index.tsx b/tgui/packages/tgui/index.tsx
index 8fafb713af7..3bbebad930a 100644
--- a/tgui/packages/tgui/index.tsx
+++ b/tgui/packages/tgui/index.tsx
@@ -28,6 +28,7 @@ import './styles/themes/wizard.scss';
import './styles/themes/admin.scss';
import './styles/themes/abstract.scss';
import './styles/themes/bingle.scss';
+import './styles/themes/algae.scss';
import { perf } from 'common/perf';
import { setupGlobalEvents } from 'tgui-core/events';
diff --git a/tgui/packages/tgui/interfaces/AlgaeFarm.tsx b/tgui/packages/tgui/interfaces/AlgaeFarm.tsx
index 2699389d5ee..153600f8131 100644
--- a/tgui/packages/tgui/interfaces/AlgaeFarm.tsx
+++ b/tgui/packages/tgui/interfaces/AlgaeFarm.tsx
@@ -7,6 +7,7 @@ import {
NoticeBox,
ProgressBar,
Section,
+ Stack,
Table,
} from 'tgui-core/components';
import { capitalize } from 'tgui-core/string';
@@ -24,12 +25,12 @@ type Data = {
last_power_draw: number;
inputDir: string;
outputDir: string;
- input: gas;
- output: gas;
+ input: Gas;
+ output: Gas;
errorText: string | null;
};
-type gas = { pressure: number; name: string; percent: number; moles: number };
+type Gas = { pressure: number; name: string; percent: number; moles: number };
export const AlgaeFarm = (props) => {
const { act, data } = useBackend();
@@ -46,97 +47,104 @@ export const AlgaeFarm = (props) => {
} = data;
return (
-
+
- {errorText && (
-
-
- {errorText}
-
-
- )}
- act('toggle')}
- >
- Processing
-
- }
- >
-
-
- {last_flow_rate} L/s
-
-
- {last_power_draw} W
-
-
- {materials.map((material) => (
-
-
- {material.qty}/{material.max}
-
+
+ {errorText && (
+
+
+
+ {errorText}
+
+
+
+ )}
+
+
- act('ejectMaterial', {
- mat: material.name,
- })
- }
+ icon="power-off"
+ selected={usePower === 2}
+ onClick={() => act('toggle')}
>
- Eject
+ Processing
-
- ))}
-
-
-
-
-
- {input ? (
-
-
- {input.pressure} kPa
-
-
- {input.percent}% ({input.moles} moles)
-
-
- ) : (
- No connection detected.
- )}
-
-
-
-
- {output ? (
-
-
- {output.pressure} kPa
-
-
- {output.percent}% ({output.moles} moles)
-
-
- ) : (
- No connection detected.
- )}
-
-
-
-
-
+ }
+ >
+
+
+ {last_flow_rate} L/s
+
+
+ {last_power_draw} W
+
+
+ {materials.map((material) => (
+
+
+ {material.qty}/{material.max}
+
+
+
+ ))}
+
+
+
+
+
+ {input ? (
+
+
+ {input.pressure} kPa
+
+
+ {input.percent}% ({input.moles} moles)
+
+
+ ) : (
+ No connection detected.
+ )}
+
+
+
+
+ {output ? (
+
+
+ {output.pressure} kPa
+
+
+ {output.percent}% ({output.moles} moles)
+
+
+ ) : (
+ No connection detected.
+ )}
+
+
+
+
+
+
+
);
diff --git a/tgui/packages/tgui/styles/themes/algae.scss b/tgui/packages/tgui/styles/themes/algae.scss
new file mode 100644
index 00000000000..66cc5ec699c
--- /dev/null
+++ b/tgui/packages/tgui/styles/themes/algae.scss
@@ -0,0 +1,13 @@
+.theme-algae:root {
+ // Base
+ --color-base: hsl(118, 100%, 13%);
+ --color-primary: hsl(118, 48%, 29%);
+ --color-label: hsl(133, 85%, 39%);
+ --button-color-selected: hsl(118, 100%, 50%);
+ --notice-box-background: hsl(123, 40%, 57%);
+ --section-background: rgba(0, 0, 0, 0.67);
+
+ .Layout__content {
+ background-image: url('../../assets/game-icons.net/algae.svg');
+ }
+}