Add thick border to readonly textarea

.gitignore

@@ -103,4 +103,6 @@ dist
 # TernJS port file
 .tern-port
 
-build/
+build/
+
+hemmelig.yaml

src/client/components/form/style.css

@@ -12,6 +12,10 @@
     height: 75px;
 }
 
+.thick {
+    border: 7px solid #eee;
+}
+
 .select,
 .input {
     width: 100%;

src/client/components/form/textarea.js

@@ -2,9 +2,13 @@ import { h } from 'preact';
 import cc from 'classcat';
 import style from './style.css';
 
-const Textarea = ({ compress, children, ...rest }) => (
+const Textarea = ({ compress, thickBorder, children, ...rest }) => (
     <textarea
-        class={cc({ [style.textarea]: true, [style.compress]: compress })}
+        class={cc({
+            [style.textarea]: true,
+            [style.compress]: compress,
+            [style.thick]: thickBorder,
+        })}
         spellcheck="false"
         autocomplete="off"
         data-gramm_editor="false"

src/client/routes/home/index.js

@@ -98,6 +98,7 @@ const Home = () => {
                         onChange={onChangeHandler}
                         value={text}
                         readonly={!!secretId}
+                        thickBorder={!!secretId}
                     />
 
                     <Select value={ttl} onChange={onSelectChange}>

src/client/routes/secret/index.js

@@ -88,7 +88,7 @@ const Secret = ({ secretId }) => {
                 <Info>We will only show the secret once.</Info>
 
                 {isSecretOpen && (
-                    <Textarea class={style.textarea} readonly>
+                    <Textarea class={style.textarea} thickBorder={true} readonly>
                         {secret}
                     </Textarea>
                 )}