Moved hide content style to stylesheet

src/components/HideContent.jsx

@@ -1,31 +1,25 @@
 import React, { useState, useEffect } from 'react'
 
-/* eslint-disable jsx-a11y/no-interactive-element-to-noninteractive-role */
-
 const HideContent = ({ text }) => {
-  const [state, setState] = useState(null)
+  const [content, setContent] = useState(null)
 
   useEffect(() => {
-    setState(window.btoa(text))
+    setContent(window.btoa(text))
   }, [text])
 
   const decryptContent = () => {
-    setState(text)
+    setContent(text)
   }
 
   return (
     <button
-      className="tooltip inline reset"
+      className="hidden-content tooltip inline reset"
       onKeyPress={decryptContent}
       onClick={decryptContent}
       aria-label="Click to reveal"
       data-position="top"
-      style={{
-        cursor: 'default',
-        userSelect: 'all',
-      }}
     >
-      {state}
+      {content}
     </button>
   )
 }

src/styles/app.scss

@@ -44,6 +44,7 @@
 @import 'components/button';
 @import 'components/dot';
 @import 'components/footnote';
+@import 'components/hidden-content';
 @import 'components/icon';
 @import 'components/language';
 @import 'components/lightbox';

src/styles/components/_hidden-content.scss

@@ -0,0 +1,4 @@
+.hidden-content {
+  cursor: default;
+  user-select: all;
+}

src/styles/elements/_form.scss

@@ -1,3 +1,15 @@
+input {
+  &.inline {
+    display: inline-block;
+  }
+
+  &.reset {
+    width: auto;
+    border: 0;
+    background: transparent;
+  }
+}
+
 .form-control {
   display: flex;
   position: relative;