From deef5998c54199ade997cb06e0629c6a49262d4a Mon Sep 17 00:00:00 2001
From: "G.Ambatte" <sean@robertson-family.nz>
Date: Sat, 8 Jun 2024 18:55:14 +1200
Subject: [PATCH] Update LockBrew text and styling

---
 client/admin/lockTools/lockTools.jsx  | 80 ++++++++++++++++++---------
 client/admin/lockTools/lockTools.less | 45 ++++++++++++---
 2 files changed, 90 insertions(+), 35 deletions(-)

diff --git a/client/admin/lockTools/lockTools.jsx b/client/admin/lockTools/lockTools.jsx
index d9448fc14..58829eacf 100644
--- a/client/admin/lockTools/lockTools.jsx
+++ b/client/admin/lockTools/lockTools.jsx
@@ -85,32 +85,60 @@ const LockBrew = createClass({
 
 	render : function() {
 		return <div className='lockBrew'>
-			<h2>Lock Brew</h2>
-			<form onSubmit={this.submit}>
-				<label>
-                    ID:
-					{this.renderInput('brewId')}
-				</label>
-				<br />
-				<label>
-                    Error Code:
-					{this.renderInput('code')}
-				</label>
-				<br />
-				<label>
-                    Edit Message:
-					{this.renderInput('editMessage')}
-				</label>
-				<br />
-				<label>
-                    Share Message:
-					{this.renderInput('shareMessage')}
-				</label>
-				<br />
-				<label>
-				    <input type='submit' />
-				</label>
-			</form>
+			<div className='lockForm'>
+				<h2>Lock Brew</h2>
+				<form onSubmit={this.submit}>
+					<label>
+						ID:
+						{this.renderInput('brewId')}
+					</label>
+					<br />
+					<label>
+						Error Code:
+						{this.renderInput('code')}
+					</label>
+					<br />
+					<label>
+						Edit Message:
+						{this.renderInput('editMessage')}
+					</label>
+					<br />
+					<label>
+						Share Message:
+						{this.renderInput('shareMessage')}
+					</label>
+					<br />
+					<label>
+						<input type='submit' />
+					</label>
+				</form>
+			</div>
+			<div className='lockSuggestions'>
+				<h2>Suggestions</h2>
+				<div className='lockCodes'>
+					<h3>Codes</h3>
+					<ul>
+						<li>455 - Generic Lock</li>
+						<li>456 - Copyright issues</li>
+						<li>457 - Confidential Information Leakage</li>
+						<li>458 - Sensitive Personal Information</li>
+						<li>459 - Defamation or Libel</li>
+						<li>460 - Hate Speech or Discrimination</li>
+						<li>461 - Illegal Activities</li>
+						<li>462 - Malware or Phishing</li>
+						<li>463 - Plagiarism</li>
+						<li>465 - Misrepresentation</li>
+						<li>466 - Inappropriate Content</li>
+					</ul>
+				</div>
+				<div className='lockMessages'>
+					<h3>Messages</h3>
+					<ul>
+						<li><b>Edit Message:</b> This is the private message that is ONLY displayed to the authors of the locked brew. This message MUST specify exactly what actions must be taken in order to have the brew unlocked.</li>
+						<li><b>Share Message:</b> This is the public message that is displayed to the EVERYONE that attempts to view the locked brew.</li>
+					</ul>
+				</div>
+			</div>
 		</div>;
 	}
 });
diff --git a/client/admin/lockTools/lockTools.less b/client/admin/lockTools/lockTools.less
index 765c3cc5d..c34a69485 100644
--- a/client/admin/lockTools/lockTools.less
+++ b/client/admin/lockTools/lockTools.less
@@ -1,13 +1,40 @@
 .lockTools {
-    .lockBrew label {
-        width: 50%;
-        display: inline-block;
-        text-align: right;
-        line-height: 1.5em;
-        input {
-            float: right;
-            width: 70%;
-            margin-left: 10px;
+    .lockBrew { 
+        columns: 2;
+
+        .lockForm {
+            break-inside: avoid;
+
+            label {
+            width: 100%;
+            display: inline-block;
+            text-align: right;
+            line-height: 1.5em;            
+            input {
+                float: right;
+                width: 70%;
+                margin-left: 10px;
+                }
+            }
+        }
+
+        .lockSuggestions {
+            break-inside: avoid;
+            columns: 2;
+            line-height: 1.2em;
+            h2 {
+                column-span: all;
+            }
+            h3 {
+                margin-top: 0px;
+            }
+            b {
+                font-weight: 600;
+            }
+
+            .lockCodes {
+                break-inside: avoid;
+            }
         }
     }