Apply candidate option to popup

src/popup/components/ResultArea.js

@@ -1,5 +1,6 @@
 import React from "react";
 import getErrorMessage from "src/common/getErrorMessage";
+import { getSettings } from "src/settings/settings";
 import "../styles/ResultArea.scss";
 
 const splitLine = text => {
@@ -10,13 +11,13 @@ const splitLine = text => {
 export default props => {
   const { resultText, candidateText, statusText } = props;
   const isError = statusText !== "OK";
+  const shouldShowCandidate = getSettings("ifShowCandidate");
 
   return (
     <div id="resultArea">
       <p className="resultText">{splitLine(resultText)}</p>
-      <p className="candidateText">
-        {isError ? getErrorMessage(statusText) : splitLine(candidateText)}
-      </p>
+      {shouldShowCandidate && <p className="candidateText">{splitLine(candidateText)}</p>}
+      {isError && <p className="error">{getErrorMessage(statusText)}</p>}
     </div>
   );
 };

src/popup/styles/ResultArea.scss

@@ -14,7 +14,8 @@
     &.resultText {
       color: var(--main-text);
     }
-    &.candidateText {
+    &.candidateText,
+    &.error {
       color: var(--sub-text);
       margin-top: 1em;
       &:empty {