DEV stash

cdcabrera · Oct 2, 2024 · bee9be6 · bee9be6
1 parent cb6a399
commit bee9be6
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 3 deletions.
diff --git a/src/components/errorMessage/errorMessage.js b/src/components/errorMessage/errorMessage.js
@@ -34,10 +34,11 @@ import { translate } from '../i18n/i18n';
  */
 const ErrorMessage = ({ message, description, title, t = translate }) => {
   const [isErrorDisplay, setIsErrorDisplay] = useState(false);
-  const [hasScrolled, setHasScrolled] = useState(false);
+  const [hasScrolled, setHasScrolled] = useState([]);
   const errorStr = (typeof message === 'string' && message) || message?.message;
   const cause = message?.cause && (
     <textarea
+      className="curiosity-error__textarea"
       onScroll={event => {
         const target = event.currentTarget;
         if (target.scrollTop >= target.scrollHeight - target.offsetHeight && !hasScrolled) {
@@ -46,7 +47,6 @@ const ErrorMessage = ({ message, description, title, t = translate }) => {
       }}
       readOnly
       rows="10"
-      style={{ display: 'block', width: '100%', resize: 'vertical', whiteSpace: 'pre-wrap' }}
       value={JSON.stringify([message.cause], null, 2)}
     />
   );
@@ -63,6 +63,7 @@ const ErrorMessage = ({ message, description, title, t = translate }) => {
     <div className="fadein" aria-live="polite">
       {isCauseOrError && (
         <Button
+          className="curiosity-error__link"
           title={t('curiosity-view.error', { context: 'debug' })}
           style={{ float: 'right' }}
           variant="link"
@@ -73,7 +74,12 @@ const ErrorMessage = ({ message, description, title, t = translate }) => {
         </Button>
       )}
       {hasScrolled && isErrorDisplay && isCauseOrError && (
-        <Button className="fadein" variant="link" onClick={() => onDownloadLog()} icon={<ExportIcon />}>
+        <Button
+          className="curiosity-error__link fadein"
+          variant="link"
+          onClick={() => onDownloadLog()}
+          icon={<ExportIcon />}
+        >
           {t('curiosity-view.error', { context: 'download' })}
         </Button>
       )}

diff --git a/src/styles/_errors.scss b/src/styles/_errors.scss
@@ -0,0 +1,19 @@
+.curiosity {
+  .curiosity-error {
+    &__link {
+      color: var(--pf-global--palette--black-400);
+
+      &:hover {
+        color: var(--pf-global--palette--black-900);
+      }
+    }
+
+    &__textarea {
+      display: block;
+      resize: vertical;
+      width: 100%;
+      white-space: pre-wrap;
+      border-color: var(--pf-global--palette--black-400);
+    }
+  }
+}
diff --git a/src/styles/index.scss b/src/styles/index.scss
@@ -15,6 +15,7 @@ $pf-global--breakpoint--lg: $pf-v5-global--breakpoint--lg;
   --pf-global--Color--light-100: var(--pf-v5-global--Color--light-100);
 
   --pf-global--palette--blue-300: var(--pf-v5-global--palette--blue-300);
+  --pf-global--palette--black-300: var(--pf-v5-global--palette--black-300);
   --pf-global--palette--black-400: var(--pf-v5-global--palette--black-400);
   --pf-global--palette--black-500: var(--pf-v5-global--palette--black-500);
   --pf-global--palette--black-900: var(--pf-v5-global--palette--black-900);
@@ -54,3 +55,4 @@ $pf-global--breakpoint--lg: $pf-v5-global--breakpoint--lg;
 @import 'graph';
 @import 'inventory';
 @import 'optin';
+@import 'errors';