Merge pull request #11741 from HabitRPG/fix/pm-textarea-styling

fix style textarea + added story for an overview

website/client/src/components/ui/textarea.stories.js

@@ -0,0 +1,28 @@
+/* eslint-disable import/no-extraneous-dependencies */
+import { storiesOf } from '@storybook/vue';
+import { text, withKnobs } from '@storybook/addon-knobs';
+
+const stories = storiesOf('Textare', module);
+
+stories.addDecorator(withKnobs);
+
+stories
+  .add('states', () => ({
+    components: { },
+    template: `
+      <div style="position: absolute; margin: 20px">
+        <textarea autofocus ref="area">Normal {{text}}</textarea>  <button @click="$refs.area.focus()">Focus</button>
+        <br />
+
+        <textarea disabled>Disabled {{text}}</textarea><br />
+
+        <textarea readonly>Readonly {{text}}</textarea> <br />
+
+      </div>
+    `,
+    props: {
+      text: {
+        default: text('Area Message', 'example text'),
+      },
+    },
+  }));

website/client/src/pages/private-messages.vue

@@ -403,14 +403,6 @@
       vertical-align: bottom;
       border-radius: 2px;
       z-index: 5;
-      border: solid 1px $gray-400;
-      opacity: 0.64;
-      background-color: $gray-500;
-
-      &:focus, &.has-content {
-        opacity: 1;
-        background-color: $white;
-      }
     }
   }