Use own styling in URL attachment instead of letter

metasfresh · Oct 4, 2017 · da98070 · da98070
1 parent dd955e6
commit da98070
Show file tree

Hide file tree

Showing 3 changed files with 71 additions and 7 deletions.
diff --git a/src/assets/css/attachments.css b/src/assets/css/attachments.css
@@ -0,0 +1,63 @@
+.panel-attachurl {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+
+    /* create small window */
+    width: auto;
+    height: auto;
+}
+
+.attachurl-headline {
+    display: flex;
+    flex-grow: 1;
+}
+
+.panel-attachurl-header-top {
+    background-color: $brand-color-primary;
+}
+
+.panel-attachurl-header {
+    display: flex;
+    flex-flow: row wrap;
+    min-height: 50px;
+    align-items: center;
+    justify-content: space-between;
+    padding-left: 20px;
+    padding-right: 20px;
+    border-bottom: 1px solid $brand-super-light-color;
+}
+
+.panel-attachurl-header-wrapper {
+    box-shadow: 0 0 6px rgba(0, 0, 0, .1);
+}
+
+.panel-attachurl-body {
+    padding: 20px;
+    height: 100%;
+    display: flex;
+}
+
+.panel-attachurl-body textarea {
+    height: 100%;
+    border: none;
+}
+
+.panel-attachurl-footer {
+    padding: 20px;
+    display: flex;
+    border-top: 1px solid $brand-super-light-color;
+    justify-content: space-between;
+    color: $brand-font-color;
+    align-items: center;
+    position: relative;
+}
+
+.panel-attachurl-footer button {
+    min-width: 100px;
+}
+
+.attachurl-icon-close {
+    cursor: pointer;
+    color: $brand-super-light-color;
+}
diff --git a/src/assets/css/styles.css b/src/assets/css/styles.css
@@ -23,6 +23,7 @@
 @import './image.css';
 @import './email.css';
 @import './letter.css';
+@import './attachments.css';
 
 @import './intro.css';
 

diff --git a/src/components/header/NewUrl.js b/src/components/header/NewUrl.js
@@ -43,31 +43,31 @@ class NewUrl extends Component {
         return (
             <div className="screen-freeze">
                 <div
-                    className="panel panel-modal panel-letter panel-modal-primary"
+                    className="panel panel-modal panel-attachurl panel-modal-primary"
                 >
-                    <div className="panel-letter-header-wrapper">
+                    <div className="panel-attachurl-header-wrapper">
                         <div
-                            className="panel-letter-header panel-letter-header-top"
+                            className="panel-attachurl-header panel-attachurl-header-top"
                         >
-                            <span className="letter-headline">
+                            <span className="attachurl-headline">
                                 Add URL
                                 {/* TODO: Add translation */}
                             </span>
                             <div
-                                className="input-icon input-icon-lg letter-icon-close"
+                                className="input-icon input-icon-lg attachurl-icon-close"
                                 onClick={handleAddUrlClose}
                             >
                                 <i className="meta-icon-close-1"/>
                             </div>
                         </div>
                     </div>
-                    <div className="panel-letter-body">
+                    <div className="panel-attachurl-body">
                         <textarea
                             value={url}
                             onChange={this.handleChange}
                         />
                     </div>
-                    <div className="panel-letter-footer">
+                    <div className="panel-attachurl-footer">
                         <button
                             onClick={this.handleClick}
                             className="btn btn-meta-success btn-sm btn-submit"