DRY component, fix spelling, use emojis sparingly

Author: dem4ron

app/javascript/components/localization/glossary-entries/show/Proposed/ProposalActions.tsx

@@ -100,36 +100,37 @@ export function ProposalActions({
     }
   }, [redirectToNext])
 
-  return (
-    <div className="buttons">
-      <div className="flex gap-8 items-center">
-        <button
-          type="button"
-          className="btn-s btn-default"
-          onClick={onEditMode}
-        >
-          Edit
-        </button>
-        {hasBeenEdited && (
-          <button
-            type="button"
-            className="btn-s btn-default"
-            onClick={onResetChanges}
-          >
-            Reset changes
-          </button>
-        )}
-      </div>
+  const SkipButton = ({
+    children = 'Skip',
+  }: {
+    children?: React.ReactNode
+  }) => (
+    <button type="button" className="btn-s btn-default" onClick={handleSkip}>
+      {children}
+    </button>
+  )
+
+  const EditButton = () => (
+    <button type="button" className="btn-s btn-default" onClick={onEditMode}>
+      Edit translation
+    </button>
+  )
+
+  const ResetButton = () => (
+    <button
+      type="button"
+      className="btn-s btn-default"
+      onClick={onResetChanges}
+    >
+      Reset changes
+    </button>
+  )
 
-      {hasBeenEdited ? (
+  const renderRightActions = () => {
+    if (hasBeenEdited) {
+      return (
         <div className="flex gap-8 items-center">
-          <button
-            type="button"
-            className="btn-s btn-default"
-            onClick={() => handleSkip()}
-          >
-            Skip
-          </button>
+          <SkipButton />
           <button
             type="button"
             className="btn-s btn-primary"
@@ -144,52 +145,56 @@ export function ProposalActions({
             Update proposal
           </button>
         </div>
-      ) : isOwn ? (
+      )
+    }
+
+    if (isOwn) {
+      return (
         <div className="flex gap-8 items-center">
-          <button
-            type="button"
-            className="btn-s btn-default"
-            onClick={() => handleSkip()}
-          >
-            Skip
-          </button>
+          <SkipButton />
           <span>(This is your proposal so you cannot approve it)</span>
         </div>
-      ) : (
-        <div className="flex gap-8 items-center">
-          <button
-            type="button"
-            className="btn-s btn-default"
-            onClick={() => handleSkip()}
-          >
-            Skip
-          </button>
-          <button
-            type="button"
-            className="btn-s btn-default"
-            onClick={() =>
-              approveProposal({
-                translationUuid,
-                proposalUuid: proposal.uuid,
-              })
-            }
-          >
-            Approve
-          </button>
-          <button
-            type="button"
-            className="btn-s btn-default"
-            onClick={() =>
-              rejectProposal({
-                translationUuid,
-                proposalUuid: proposal.uuid,
-              })
-            }
-          >
-            Reject
-          </button>
-        </div>
-      )}
+      )
+    }
+
+    return (
+      <div className="flex gap-8 items-center">
+        <SkipButton>Skip this entry</SkipButton>
+        <button
+          type="button"
+          className="btn-s btn-warning"
+          onClick={() =>
+            rejectProposal({
+              translationUuid,
+              proposalUuid: proposal.uuid,
+            })
+          }
+        >
+          Reject
+        </button>
+        <button
+          type="button"
+          className="btn-s btn-primary"
+          onClick={() =>
+            approveProposal({
+              translationUuid,
+              proposalUuid: proposal.uuid,
+            })
+          }
+        >
+          👍 Sign Off
+        </button>
+      </div>
+    )
+  }
+
+  return (
+    <div className="buttons">
+      <div className="flex gap-8 items-center">
+        <EditButton />
+        {hasBeenEdited && <ResetButton />}
+      </div>
+      {renderRightActions()}
     </div>
   )
 }

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

@@ -80,7 +80,7 @@ export function Unchecked({ translation }: { translation: GlossaryEntry }) {
       <div className="body">
         <p className="text-16 leading-140 mb-10">
           How should we translate this word in the context of Exercism? What is
-          the most natural equivelent in{' '}
+          the most natural equivalent in{' '}
           {nameForLocale(translation.locale, { displayInEnglish: true })}?
         </p>
         <div className="flex items-center gap-8 mb-12">
@@ -121,11 +121,11 @@ export function Unchecked({ translation }: { translation: GlossaryEntry }) {
           <div className="buttons flex justify-between">
             <div className="buttons flex gap-8">
               <button onClick={handleEdit} className="btn-s btn-default">
-                ✏️&nbsp;&nbsp;Edit Translation
+                Edit Translation
               </button>
               {hasBeenEdited && (
                 <button onClick={resetChanges} className="btn-s btn-default">
-                  ↩️ Reset changes
+                  Reset changes
                 </button>
               )}
             </div>
@@ -134,7 +134,7 @@ export function Unchecked({ translation }: { translation: GlossaryEntry }) {
                 onClick={() => handleSkip()}
                 className="btn-s btn-default"
               >
-                ↪️&nbsp;&nbsp;Skip this entry
+                Skip this entry
               </button>
               <button onClick={createProposal} className="btn-s btn-primary">
                 {hasBeenEdited ? '👍 Submit proposal' : '👍 Mark as Checked'}

bootcamp_content/concepts/javascript/array-iteration.md

@@ -15,7 +15,7 @@ end
 // 🌱
 ```
 
-The equivelent code in JavaScript is very similar.
+The equivalent code in JavaScript is very similar.
 
 ```javascript
 for (const emoji of ["😀", "🚀", "🌱"]) {

bootcamp_content/concepts/javascript/manual-mapping.md

@@ -17,7 +17,7 @@ end
 log(doubled) //-> [2,4,6]
 ```
 
-The equivelent code in JavaScript is very similar.
+The equivalent code in JavaScript is very similar.
 
 ```javascript
 const numbers = [1, 2, 3];

bootcamp_content/projects/javascript-fundamentals/exercises/dna-to-rna/introduction.md

@@ -36,4 +36,4 @@ Given a DNA strand, its transcribed RNA strand is formed by replacing each nucle
 - `A` -> `U`
 
 Create a function called `dnaToRna(dna)`.
-It should take a DNA string as it's input, and should return a string representing the RNA equivelent.
+It should take a DNA string as it's input, and should return a string representing the RNA equivalent.

bootcamp_content/projects/javascript-fundamentals/exercises/stormy-sounds/stub.js

@@ -1,3 +1,3 @@
 // Receives a number as its input
-// Should return the equivelent raindrop sounds
+// Should return the equivalent raindrop sounds
 export function stormySounds(number) {}

bootcamp_content/projects/number-puzzles/exercises/raindrops/example.jiki

@@ -1,5 +1,5 @@
 // Receives a number as its input
-// Should return the equivelent raindrop sounds
+// Should return the equivalent raindrop sounds
 function raindrops with number do
   set result to ""
 

bootcamp_content/projects/number-puzzles/exercises/raindrops/stub.jiki

@@ -1,5 +1,5 @@
 // Receives a number as its input
-// Should return the equivelent raindrop sounds
+// Should return the equivalent raindrop sounds
 function raindrops with number do
 
 end

bootcamp_content/projects/string-puzzles/exercises/rna-transcription/introduction.md

@@ -34,7 +34,7 @@ Given a DNA strand, its transcribed RNA strand is formed by replacing each nucle
 - `A` -> `U`
 
 Create a function called `dna_to_rna(dna)`.
-It should take a DNA string as it's input, and should return a string representing the RNA equivelent.
+It should take a DNA string as it's input, and should return a string representing the RNA equivalent.
 
 ### Functions