Revert "[#801] Merge branch 'signup'"

This reverts commit d10f607a4d40587510b0dc31b31fe4750bf4a3a3, reversing
changes made to c28abba2f5b1186c671ebef508d40ffaae6d5bc5.

1 files changed, 451 insertions, 0 deletions

diff --git a/web-ui/app/scss/views/_compose-view.scss b/web-ui/app/scss/views/_compose-view.scss
new file mode 100644
index 00000000..9e120357
--- /dev/null
+++ b/web-ui/app/scss/views/_compose-view.scss
@@ -0,0 +1,451 @@
+.compose-view {
+    overflow: auto;
+
+    &__buttons {
+        &-attachment {
+            cursor: pointer;
+            margin-left: 18px;
+            padding-top: 0px;
+            display: inline;
+            border: 1px $contrast solid;
+            background: $background_light_grey;
+            padding: 7px 4px;
+            font-size: 0.8em;
+
+            span {
+              -ms-transform: rotate(224deg);
+              -webkit-transform: rotate(224deg);
+              transform: rotate(224deg);
+              outline: 0;
+            }
+
+            i.fa-paperclip {
+                font-size: 1.7em;
+            }
+
+            &--busy {
+                color: lighten($recipients_font_color, 10%);
+                cursor: progress;
+            }
+        }
+    }
+
+    &__attachments {
+        &-wrapper {
+            padding: 0;
+            margin-top: 30px;
+        }
+
+        &-list {
+            &-item {
+                display: block;
+                position: relative;
+                margin-bottom: 8px;
+                padding: 5px;
+                border: 1px solid $border_light_grey;
+                border-radius: 2px;
+                background-color: $contrast;
+
+                &-label {
+                    color: $attachment_text;
+                    text-decoration: none;
+
+                    &:hover, &:focus {
+                        color: $attachment_icon;
+                        outline: none;
+                    }
+                }
+
+                &-icon {
+                    color: #a2a2a2;
+                    float: right;
+                    margin-top: 7px;
+                    cursor: pointer;
+                }
+
+                &-progress {
+                    width: 0%;
+                    position: absolute;
+                    right: 0;
+                    left: 0;
+                    top: 0;
+                    bottom: 0;
+                    min-height: 100%;
+
+                    &-bar {
+                        height: 100%;
+                        background-color: rgba($light_blue, 0.3);
+                    }
+                }
+
+            }
+
+            &--upload {
+                display: none;
+            }
+
+        }
+
+        &-error {
+            background-color: $background_light_grey;
+            border-radius: 2px;
+            border: 1px solid $error;
+            display: block;
+            font-size: 0.9rem;
+            margin-bottom: 20px;
+            padding: 5px;
+            width: 100%;
+
+            &-close {
+                float: left;
+                margin: 5px 5px 0 0;
+            }
+
+            & > * {
+                color: $error;
+            }
+
+            & > a {
+                display: inline-block;
+                text-decoration: underline;
+                padding: 5px;
+            }
+        }
+    }
+
+}
+
+// COMPOSE PANE
+#compose-box, #draft-box, #reply-box, #feedback-box {
+    div.floatlabel {
+        position: relative;
+    }
+
+    .input-container {
+        padding: 1px;
+    }
+
+    label, span {
+        color: $recipients_font_color;
+        padding: 0.5rem;
+        display: inline-block;
+    }
+
+    label {
+        padding: 13px 10px;
+    }
+
+    span {
+        padding: 3px;
+
+        &.attachment-size {
+            color: $attachment_size;
+            cursor: pointer;
+        }
+    }
+
+    label.floatlabel {
+        padding: 0.4rem !important;
+        position: absolute;
+        font-size: 0.6rem;
+        transition: all 0.1s linear;
+        opacity: 0;
+        font-weight: bold;
+    }
+
+    label.showfloatlabel {
+        color: $light_blue !important;
+        top: -0.3rem;
+        opacity: 1;
+    }
+
+    input, textarea {
+        margin: 0;
+        border: none;
+        transition: all 0.1s linear;
+    }
+
+    input.showfloatlabel, textarea.showfloatlabel {
+        padding-top: 1rem !important;
+    }
+
+    input#subject, #feedback-subject {
+        font-size: 1.6875rem;
+        line-height: 1.4;
+        border-top: 1px solid $lighter_gray;
+    }
+
+    #feedback-subject {
+        color: $dark_grey;
+    }
+
+    textarea {
+        border-bottom: 2px solid $lighter_gray;
+        min-height: 400px;
+        font-family: inherit;
+        font-weight: normal;
+        font-size: 1rem;
+        line-height: 1.6;
+        text-rendering: optimizeLegibility;
+    }
+
+    &.reply-box, &.forward-box {
+        margin: 0;
+
+        h4 {
+            font-size: 0.9em;
+            font-style: italic;
+            color: $medium_grey;
+            margin: 2px 0;
+            clear: both;
+            cursor: pointer;
+
+            &:hover {
+                background: $contrast;
+            }
+        }
+
+        textarea {
+            min-height: 200px;
+            margin: 10px 0;
+        }
+
+        p {
+            padding: 5px;
+            margin: 10px 0;
+            font-style: italic;
+            cursor: pointer;
+
+            &:hover {
+                background: $contrast;
+            }
+        }
+    }
+
+    button.close-mail-button {
+        margin: 1px;
+    }
+
+    .buttons-group {
+        margin-top: 0px;
+    }
+
+    .recipients-area {
+        -webkit-appearance: none;
+        background-color: white;
+        font-family: inherit;
+        display: flex;
+        flex-wrap: wrap;
+        font-size: 0.898em;
+        -webkit-box-sizing: border-box;
+        -moz-box-sizing: border-box;
+        box-sizing: border-box;
+        position: relative;
+
+        .compose-column-label {
+            width: 5%;
+            display: inline-block;
+        }
+
+        .compose-column-recipients {
+            width: 95%;
+            display: inline-block;
+        }
+
+        .recipients-label {
+            width: 100%;
+            height: 100%;
+        }
+
+        .recipients-navigation-handler {
+            z-index: -1;
+            position: absolute;
+            top: -200px;
+        }
+
+        .twitter-typeahead {
+            flex: 1 1 50px;
+
+            .tt-dropdown-menu {
+              background: $dark_white;
+
+              div div {
+                padding: 8px;
+
+                &:hover {
+                  background: $background_dropdown_grey;
+                }
+              }
+            }
+        }
+
+        .invalid-format {
+            border-bottom: 1px dotted $error;
+        }
+
+        input[type=text] {
+            vertical-align: top;
+            height: 35px;
+            margin-left: 1px;
+            font-size: 0.9em;
+            width: 100%;
+        }
+
+        .fixed-recipient {
+            display: inline-block;
+            margin-right: -3px;
+            flex: none;
+            position: relative;
+
+            .recipient-value {
+                &.selected {
+                    border: 1px solid $medium_dark_grey;
+                }
+
+                &:before {
+                    font-family: FontAwesome;
+                    padding-right: 6px;
+                    font-size: 1.4em;
+                }
+
+                &.encrypted {
+                    border-bottom-color: $will_be_encrypted;
+
+                    &:before {
+                        color: $will_be_encrypted;
+                        content: "\f023 ";
+                    }
+                }
+
+                &.not-encrypted {
+                    border-bottom-color: $wont_be_encrypted;
+
+                    &:before {
+                        color: $wont_be_encrypted;
+                        content: "\f09c";
+                    }
+                }
+
+                &.deleting span {
+                    text-decoration: line-through;
+                }
+
+                & span {
+                    margin: 0px;
+                    padding: 0px 0px 0px 0px;
+                    vertical-align: top;
+                    cursor: pointer;
+                }
+
+                margin: 3px;
+                padding: 5px;
+                background-color: $background_light_grey;
+                border: 1px solid $border_light_grey;
+                border-radius: 2px;
+            }
+
+            .recipient-del {
+                position: relative;
+                color: $recipients_font_color;
+
+                &:hover, &:focus {
+                    color: $recipients_font_color;
+                }
+
+                &:before {
+                    margin-left: 0.4em;
+                    font-weight: bold;
+                    content: "x";
+                }
+
+                &.deleteTooltip:hover:after {
+                    position: absolute;
+                    content: attr(data-label);
+                    font-size: 0.5rem;
+
+                    @include tooltip(25px, 0px);
+                }
+            }
+        }
+
+        input.recipients-input:focus {
+            background-color: $dark_white !important;
+            border-color: $medium_light_grey;
+            outline: none;
+            width: 270px;
+        }
+    }
+
+    .collapse {
+        display: block;
+        position: absolute;
+        right: 10px;
+        padding-right: 15px;
+        padding-left: 15px;
+        font-family: 'FontAwesome';
+        font-weight: bolder;
+        font-size: larger;
+        cursor: pointer;
+    }
+
+    .collapse + input, .collapse + input + * {
+        display: none;
+    }
+
+    .collapse + input:checked + * {
+        display: block;
+    }
+}
+
+#reply-section {
+    padding-left: 30px;
+
+    .reply-container {
+        margin: 10px 0;
+        padding: 10px;
+        border: 1px dashed darken($contrast, 10%);
+
+        @include btn-transition;
+    }
+
+    button {
+        margin: 0;
+    }
+
+    #all-recipients {
+        color: $black;
+    }
+
+    #all-recipients:focus {
+        background-color: darken($contrast, 10%);
+    }
+
+    #reply-button, #reply-all-button, #forward-button {
+        text-align: center;
+        font-weight: 100;
+        font-size: 1.1em;
+        background: $white;
+        color: $medium_light_grey;
+        padding: 25px;
+        margin: 0;
+
+        @include border-radius(0);
+
+        &:hover {
+            background: darken($contrast, 5%);
+            cursor: pointer;
+        }
+    }
+}
+
+.buttons-group {
+    clear: both;
+    margin: 20px 0 0;
+    padding: 0;
+}
+
+#draft-save-status {
+    float: right;
+    padding: 0.4rem 1.1rem;
+    color: $lighter_blue;
+}