comments #2

Author: jhadvig

frontend/public/components/_secret.scss

@@ -1,31 +1,4 @@
-.co-create-secret-form {
-  .btn-file {
-    position: relative;
-    overflow: hidden;
-  }
-
-  .btn-file input[type=file] {
-    position: absolute;
-    top: 0;
-    right: 0;
-    min-width: 100%;
-    min-height: 100%;
-    font-size: 100px;
-    text-align: right;
-    filter: alpha(opacity=0);
-    opacity: 0;
-    outline: none;
-    background: white;
-    cursor: inherit;
-    display: block;
-  }
-
-  .form-textarea {
-    min-height: 300px;
-    width: 100%;
-  }
-
-  .help-block {
-    margin-bottom: 10px;
-  }
-}
+.co-create-secret-form__textarea {
+  min-height: 300px;
+  width: 100%;
+}

frontend/public/components/secrets/create-secret.tsx

@@ -293,7 +293,7 @@ class SSHAuthSubform extends React.Component<SSHAuthSubformProps, SSHAuthSubform
       <div>
         <FileInput onChange={this.onFileChange} />
         <p className="help-block">Upload your private SSH key file.</p>
-        <textarea className="form-control form-textarea"
+        <textarea className="form-control co-create-secret-form__textarea"
           id="ssh-privatekey"
           name="privateKey"
           onChange={this.changeData}

frontend/public/components/utils/_file-input.scss

@@ -0,0 +1,19 @@
+.co-btn-file {
+  position: relative;
+  overflow: hidden;
+  input[type=file] {
+    position: absolute;
+    top: 0;
+    right: 0;
+    min-width: 100%;
+    min-height: 100%;
+    font-size: 100px;
+    text-align: right;
+    filter: alpha(opacity=0);
+    opacity: 0;
+    outline: none;
+    background: white;
+    cursor: inherit;
+    display: block;
+  }
+}

frontend/public/components/utils/file-input.tsx

@@ -29,7 +29,7 @@ export class FileInput extends React.Component<fileInputProps, fileInputState> {
         readOnly
         disabled />
       <span className="input-group-btn">
-        <span className="btn btn-default btn-file">
+        <span className="btn btn-default co-btn-file">
           Browse&hellip;
           <input type="file" onChange={this.onFileChange} className="form-control"/>
         </span>

frontend/public/style.scss

@@ -33,6 +33,7 @@
 
 // React Components
 @import "components/utils/copy-to-clipboard";
+@import "components/utils/file-input";
 @import "components/utils/label";
 @import "components/utils/number-spinner";
 @import "components/utils/status-box";