show tweaks (#8212)

* Add back RHS, tweak LLM instructions visually

* More copy and visual tweaks

Author: dem4ron

app/css/pages/localization/show.css

@@ -40,6 +40,7 @@ body.namespace-localization.controller-glossary_entries.action-show {
     .body-container {
         @apply flex flex-1;
         @apply bg-backgroundColorA;
+        @apply h-screen;
     }
 
     .lhs {
@@ -63,12 +64,12 @@ body.namespace-localization.controller-glossary_entries.action-show {
     }
     .original {
         p {
-            @apply text-16 leading-140 mb-8;
+            @apply text-16 leading-160 mb-16;
         }
     }
 
     .translations {
-        @apply mb-16;
+        @apply mb-16 mr-16;
         .locale {
             &.unchecked {
                 --locale-background-color: #ffeeee;

app/javascript/components/localization/glossary-entries/show/index.tsx

@@ -37,7 +37,7 @@ function Header() {
           <Icon icon="close" className="c-icon" alt="Close" />
         </a>
         <div className="info">
-          <div className="intro">You are editing glossary entry for</div>
+          <div className="intro">You are editing the glossary entry for</div>
           <div className="key">
             {glossaryEntry.term} ({glossaryEntry.locale})
           </div>
@@ -51,33 +51,70 @@ function Body() {
   return (
     <div className="lg-container body-container">
       <LHS />
+      <RHS />
     </div>
   )
 }
 
 function LHS() {
-  const { glossaryEntry, currentUserId, links } = React.useContext(
+  const { glossaryEntry, currentUserId } = React.useContext(
     GlossaryEntriesShowContext
   )
 
   useLogger('render', glossaryEntry)
   return (
     <div className="translations mt-16 max-w-[800px]">
-      <h2 className="text-h2 mb-4">Proposals</h2>
+      <h2 className="text-h2 mb-4">Proposal</h2>
       <p className="text-p-base mb-16">
-        These are the proposals suggested by either an LLM or other translators.
-        Each proposal must be checked and then signed-off. Please{' '}
+        This proposal was suggested by an LLM or another translator. It needs to
+        be reviewed and signed off. Please{' '}
         <strong className="font-semibold">
-          edit translations that are incorrect
-        </strong>
-        , which will put them in a queue for other reviewers to see, or mark
-        them as checked/signed-off.
+          edit any incorrect translations.
+        </strong>{' '}
+        Your changes will be placed in a queue for another reviewer, or mark it
+        as checked and signed off.
       </p>
       {renderShow(glossaryEntry, currentUserId)}
     </div>
   )
 }
 
+function RHS() {
+  const { glossaryEntry } = React.useContext(GlossaryEntriesShowContext)
+  return (
+    <div className="rhs">
+      <div className="original">
+        <h2 className="text-h3 mb-6">The Entry</h2>
+        <p>
+          Your job is to make the translation as close to the original English
+          in <strong className="font-semibold">meaning and tone</strong> as
+          possible, considering how it is used on the site.
+        </p>
+        <p>
+          <strong className="font-semibold">
+            Please be careful not to change the meaning of the original English
+          </strong>
+          . If you believe the original English is wrong, please{' '}
+          <a
+            href="https://forum.exercism.org/c/exercism/i18n/695"
+            className="c-prominent-link --inline"
+          >
+            start a discussion on the forum
+          </a>
+          .
+        </p>
+
+        <div className="c-textblock-note">
+          <div className="c-textblock-header">How this term is used</div>
+          <div className="c-textblock-content">
+            <p>{glossaryEntry.llmInstructions}</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
 function renderShow(
   glossaryEntry: GlossaryEntry,
   currentUserId: string | number