From 5bf095ed7f175078dd0df2c33ce1ecb6a39610ef Mon Sep 17 00:00:00 2001
From: SandPoot <enric_gabirel@hotmail.com>
Date: Thu, 30 Sep 2021 12:08:32 -0300
Subject: [PATCH] Adds tips to matrix

---
 tgui/packages/tgui/interfaces/Colormate.js | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

diff --git a/tgui/packages/tgui/interfaces/Colormate.js b/tgui/packages/tgui/interfaces/Colormate.js
index bb56f294a5..9dd2267406 100644
--- a/tgui/packages/tgui/interfaces/Colormate.js
+++ b/tgui/packages/tgui/interfaces/Colormate.js
@@ -1,5 +1,5 @@
 import { useBackend } from '../backend';
-import { Button, Flex, NoticeBox, NumberInput, Section, Tabs } from '../components';
+import { Button, Flex, Icon, NoticeBox, NumberInput, Section, Tabs } from '../components';
 import { Window } from '../layouts';
 
 export const Colormate = (props, context) => {
@@ -7,7 +7,7 @@ export const Colormate = (props, context) => {
   const { matrixactive, temp } = data;
   const item = data.item || [];
   return (
-    <Window width="700" height="600" resizable>
+    <Window width="700" height="620" resizable>
       <Window.Content overflow="auto">
         {temp ? (
           <NoticeBox>{temp}</NoticeBox>
@@ -83,7 +83,7 @@ export const ColormateNoMatrix = (props, context) => {
   return (
     <Section>
       <Flex grow={1} fill>
-        <Flex.Item width="50%">
+        <Flex.Item width="33%">
           <Button
             fluid
             content="Paint"
@@ -100,7 +100,7 @@ export const ColormateNoMatrix = (props, context) => {
             icon="eject"
             onClick={() => act('drop')} />
         </Flex.Item>
-        <Flex.Item width="50%">
+        <Flex.Item width="66%">
           <Button
             fluid
             height="100%"
@@ -119,7 +119,7 @@ export const ColormateMatrix = (props, context) => {
   return (
     <Section>
       <Flex>
-        <Flex.Item width="50%">
+        <Flex.Item width="33%">
           <Button
             fluid
             content="Paint"
@@ -288,6 +288,10 @@ export const ColormateMatrix = (props, context) => {
               })} />
           </Flex.Item>
         </Flex.Item>
+        <Flex.Item width="33%">
+          <Icon name="question-circle" color="blue" /> RG means red will become this much green.<br />
+          <Icon name="question-circle" color="blue" /> CR means that red will have this much constrast applied to it.
+        </Flex.Item>
       </Flex>
     </Section>
   );