From 5cf982e0217a968d5c10ee182c3f02f6edffe567 Mon Sep 17 00:00:00 2001
From: Asaad Mahmood <asaadmahmoodspin@users.noreply.github.com>
Date: Thu, 7 Apr 2016 23:37:50 +0500
Subject: PLT-2549 - Improvements to theme stuff (#2657)

---
 webapp/sass/components/_modal.scss   | 802 ++++++++++++++++++-----------------
 webapp/sass/components/_search.scss  |   8 -
 webapp/sass/responsive/_mobile.scss  | 326 +++++++-------
 webapp/sass/routes/_about-modal.scss | 118 +++---
 4 files changed, 625 insertions(+), 629 deletions(-)

(limited to 'webapp/sass')

diff --git a/webapp/sass/components/_modal.scss b/webapp/sass/components/_modal.scss
index 8796f2c60..0cb19b717 100644
--- a/webapp/sass/components/_modal.scss
+++ b/webapp/sass/components/_modal.scss
@@ -1,518 +1,522 @@
 @charset 'UTF-8';
 
-.browser--ie {
-    .modal {
-        .modal-dialog {
-            @include translateY(0);
-        }
-    }
-}
-
-.modal-body {
-    max-height: calc(90vh - 62px);
-    overflow: auto;
-    padding: 20px 15px;
+.app__body {
 
-    .edit-modal-body {
-        overflow: visible;
-
-        .suggestion-list__content {
-            max-height: 150px;
-        }
-    }
-}
-
-.more-table {
-    margin: 0;
-    table-layout: fixed;
-}
-
-.modal {
-    color: alpha-color($black, .9);
-    width: 100%;
-
-    &.modal-image {
-        .modal-backdrop {
-            &.in {
-                @include opacity(.7);
+    &.browser--ie {
+        .modal {
+            .modal-dialog {
+                @include translateY(0);
             }
         }
     }
 
-    .custom-textarea {
-        border-color: $light-gray;
-        color: inherit;
-
-        &:focus {
-            border-color: $light-gray;
-            box-shadow: none;
-        }
-    }
+    .modal-body {
+        max-height: calc(90vh - 62px);
+        overflow: auto;
+        padding: 20px 15px;
 
-    .btn {
-        font-size: 13px;
+        .edit-modal-body {
+            overflow: visible;
 
-        &.btn-default {
-            background: transparent;
-            border: none;
+            .suggestion-list__content {
+                max-height: 150px;
+            }
         }
     }
 
-    .info__label {
-        font-weight: 600;
-        padding-right: 0;
-        text-align: right;
+    .more-table {
+        margin: 0;
+        table-layout: fixed;
     }
 
-    .team-member-list {
+    .modal {
+        color: alpha-color($black, .9);
         width: 100%;
-    }
-
-    .remove__member {
-        color: $dark-gray;
-        float: right;
-        font-size: 20px;
-        line-height: 0;
-        padding: 6px;
-
-        &:hover {
-            color: $red;
-        }
-    }
-
-    .modal-dialog {
-        margin-left: auto;
-        margin-right: auto;
-        max-width: 95%;
-    }
-
-    .modal-push-down {
-        margin-top: 5%;
-    }
-
-    .modal-next-bar {
-        height: 100%;
-        position: absolute;
-        right: 0;
-        top: 0;
-    }
 
-    .modal-header {
-        @include border-radius(0);
-        @include clearfix;
-        background: $primary-color;
-        border: 1px solid $light-gray;
-        color: $white;
-        min-height: 56px;
-        padding: 15px 15px 11px;
-
-        .modal-title {
-            color: $bg--gray;
-            float: left;
-            font-size: 17px;
-            line-height: 27px;
-
-            .name {
-                color: $white;
-                font-weight: 600;
+        &.modal-image {
+            .modal-backdrop {
+                &.in {
+                    @include opacity(.7);
+                }
             }
         }
 
-        .modal-action {
-            margin: 0;
-            padding: 0;
-        }
-
-        .close {
-            @include opacity(1);
-            @include single-transition(all, .25s, ease-in);
-            color: $white;
-            height: 30px;
-            line-height: 30px;
-            position: absolute;
-            right: 10px;
-            width: 30px;
-            z-index: 5;
-
-            &:hover {
-                @include alpha-property(background, $black, .1);
-            }
+        .custom-textarea {
+            border-color: $light-gray;
+            color: inherit;
 
-            span {
-                font-family: 'Open Sans', sans-serif;
-                line-height: 10px;
+            &:focus {
+                border-color: $light-gray;
+                box-shadow: none;
             }
         }
 
         .btn {
-            &.btn-primary {
-                float: right;
-                margin: -4px 25px 0 0;
-                position: relative;
+            font-size: 13px;
 
-                i {
-                    margin-right: 5px;
-                }
+            &.btn-default {
+                background: transparent;
+                border: none;
             }
         }
-    }
-
-    .no-channel-message {
-        padding: 2em 1em;
-        text-align: center;
 
-        .primary-message {
-            font-size: 1.25em;
+        .info__label {
+            font-weight: 600;
+            padding-right: 0;
+            text-align: right;
         }
 
-        .secondary-message {
-            @include opacity(.8);
-            margin: 1em 0 0;
+        .team-member-list {
+            width: 100%;
         }
-    }
-
-    .modal-content {
-        border-radius: 0;
-        box-shadow: none;
-    }
 
-    .modal-chevron-icon {
-        font-size: 120%;
-        top: 50%;
-    }
+        .remove__member {
+            color: $dark-gray;
+            float: right;
+            font-size: 20px;
+            line-height: 0;
+            padding: 6px;
 
-    .modal-prev-bar {
-        height: 100%;
-        left: 0;
-        position: absolute;
-        top: 0;
-    }
+            &:hover {
+                color: $red;
+            }
+        }
 
-    &.more-channel__modal {
-        .modal-body {
-            padding: 0;
+        .modal-dialog {
+            margin-left: auto;
+            margin-right: auto;
+            max-width: 95%;
         }
-    }
 
-    .modal-image {
-        height: 100%;
-        margin: 0 auto;
-        max-width: 100%;
-        position: relative;
-        width: 100%;
+        .modal-push-down {
+            margin-top: 5%;
+        }
 
-        .modal-body {
-            @include clearfix;
-            display: table;
+        .modal-next-bar {
             height: 100%;
-            max-height: 100%;
-            table-layout: fixed;
-            width: 100%;
+            position: absolute;
+            right: 0;
+            top: 0;
         }
 
-        .modal-image__wrapper {
-            @include border-radius(3px);
-            display: table-cell;
-            max-width: 90%;
-            position: relative;
-            text-align: center;
-            vertical-align: middle;
-            width: 100%;
-
-            &:hover {
-                @include border-radius(3px 3px 0 0);
-            }
-
-            &.default {
-                height: 80%;
-                width: 100%;
+        .modal-header {
+            @include border-radius(0);
+            @include clearfix;
+            background: $primary-color;
+            border: 1px solid $light-gray;
+            color: $white;
+            min-height: 56px;
+            padding: 15px 15px 11px;
+
+            .modal-title {
+                color: $bg--gray;
+                float: left;
+                font-size: 17px;
+                line-height: 27px;
+
+                .name {
+                    color: $white;
+                    font-weight: 600;
+                }
             }
 
-            audio,
-            canvas,
-            progress,
-            video {
-                display: block;
-                height: auto;
-                max-width: 100%;
+            .modal-action {
+                margin: 0;
+                padding: 0;
             }
 
-            .modal-close {
-                @include single-transition(opacity, .6s);
-                @include background-size(100% 100%);
-                @include opacity(0);
-                background-image: url('../images/close.png');
-                cursor: pointer;
-                height: 37px;
+            .close {
+                @include opacity(1);
+                @include single-transition(all, .25s, ease-in);
+                color: $white;
+                height: 30px;
+                line-height: 30px;
                 position: absolute;
-                right: -13px;
-                top: -13px;
-                transition: opacity .6s;
-                width: 37px;
-                z-index: 9999;
+                right: 10px;
+                width: 30px;
+                z-index: 5;
 
-                &.modal-close--show {
-                    @include opacity(1);
+                &:hover {
+                    @include alpha-property(background, $black, .1);
                 }
-            }
 
-            > div {
-                display: inline-block;
-                min-height: 100px;
-                min-width: 320px;
-                position: relative;
+                span {
+                    font-family: 'Open Sans', sans-serif;
+                    line-height: 10px;
+                }
             }
 
-            code {
-                min-height: 130px;
-                min-width: 330px;
-            }
+            .btn {
+                &.btn-primary {
+                    float: right;
+                    margin: -4px 25px 0 0;
+                    position: relative;
 
-            pre, code {
-                display: inline-block;
+                    i {
+                        margin-right: 5px;
+                    }
+                }
             }
+        }
 
-            .post-body--code {
-                max-height: calc(100vh - 80px);
-                max-width: calc(100vw - 80px);
-                overflow: auto;
-            }
+        .no-channel-message {
+            padding: 2em 1em;
+            text-align: center;
 
-            img {
-                max-height: 100%;
-                max-width: 100%;
+            .primary-message {
+                font-size: 1.25em;
             }
 
-            .spinner {
-                .file__loading {
-                    left: 50%;
-                    margin-left: -16px;
-                    margin-top: -16px;
-                    position: absolute;
-                    top: 50%;
-                    z-index: 2;
-                }
+            .secondary-message {
+                @include opacity(.8);
+                margin: 1em 0 0;
             }
         }
 
         .modal-content {
-            background: alpha-color($black, 0);
-            border: none;
+            border-radius: 0;
             box-shadow: none;
-            height: 100%;
-            padding: 0;
-            width: 100%;
-        }
-
-        .modal-image__body {
-            display: table-cell;
-            height: 100%;
-            overflow: visible;
-            padding: 0;
-            position: relative;
-            text-align: center;
-            vertical-align: middle;
         }
 
-        .image-control {
-            background: url('../images/prev.png') left no-repeat;
-            float: left;
-            height: 45px;
-            margin-top: -23px;
-            position: relative;
+        .modal-chevron-icon {
+            font-size: 120%;
             top: 50%;
-            width: 50px;
-
-            &.image-next {
-                background: url('../images/next.png') left no-repeat;
-                float: right;
-            }
         }
 
-        .loader-image {
-            bottom: 0;
+        .modal-prev-bar {
+            height: 100%;
             left: 0;
-            margin: auto;
             position: absolute;
-            right: 0;
             top: 0;
         }
 
-        .loader-percent {
-            bottom: 0;
-            color: $dark-gray;
-            height: 20px;
-            left: 0;
-            margin: auto;
-            position: absolute;
-            right: 0;
-            top: 55px;
+        &.more-channel__modal {
+            .modal-body {
+                padding: 0;
+            }
         }
 
-        .modal-button-bar {
-            @include single-transition(opacity, .6s);
-            @include border-radius(0 0 3px 3px);
-            @include opacity(0);
-            background-color: $black;
-            bottom: -40px;
-            left: 0;
-            line-height: 40px;
-            padding: 0 10px;
-            position: absolute;
-            right: 0;
+        .modal-image {
+            height: 100%;
+            margin: 0 auto;
+            max-width: 100%;
+            position: relative;
+            width: 100%;
 
-            &.footer--show {
-                @include opacity(1);
+            .modal-body {
+                @include clearfix;
+                display: table;
+                height: 100%;
+                max-height: 100%;
+                table-layout: fixed;
+                width: 100%;
             }
 
-            .image-links {
-                a,
-                span {
+            .modal-image__wrapper {
+                @include border-radius(3px);
+                display: table-cell;
+                max-width: 90%;
+                position: relative;
+                text-align: center;
+                vertical-align: middle;
+                width: 100%;
+
+                &:hover {
+                    @include border-radius(3px 3px 0 0);
+                }
+
+                &.default {
+                    height: 80%;
+                    width: 100%;
+                }
+
+                audio,
+                canvas,
+                progress,
+                video {
+                    display: block;
+                    height: auto;
+                    max-width: 100%;
+                }
+
+                .modal-close {
+                    @include single-transition(opacity, .6s);
+                    @include background-size(100% 100%);
+                    @include opacity(0);
+                    background-image: url('../images/close.png');
+                    cursor: pointer;
+                    height: 37px;
+                    position: absolute;
+                    right: -13px;
+                    top: -13px;
+                    transition: opacity .6s;
+                    width: 37px;
+                    z-index: 9999;
+
+                    &.modal-close--show {
+                        @include opacity(1);
+                    }
+                }
+
+                > div {
+                    display: inline-block;
+                    min-height: 100px;
+                    min-width: 320px;
+                    position: relative;
+                }
+
+                code {
+                    min-height: 130px;
+                    min-width: 330px;
+                }
+
+                pre,
+                code {
+                    display: inline-block;
+                }
+
+                .post-body--code {
+                    max-height: calc(100vh - 80px);
+                    max-width: calc(100vw - 80px);
+                    overflow: auto;
+                }
+
+                img {
+                    max-height: 100%;
+                    max-width: 100%;
+                }
+
+                .spinner {
+                    .file__loading {
+                        left: 50%;
+                        margin-left: -16px;
+                        margin-top: -16px;
+                        position: absolute;
+                        top: 50%;
+                        z-index: 2;
+                    }
+                }
+            }
+
+            .modal-content {
+                background: alpha-color($black, 0);
+                border: none;
+                box-shadow: none;
+                height: 100%;
+                padding: 0;
+                width: 100%;
+            }
+
+            .modal-image__body {
+                display: table-cell;
+                height: 100%;
+                overflow: visible;
+                padding: 0;
+                position: relative;
+                text-align: center;
+                vertical-align: middle;
+            }
+
+            .image-control {
+                background: url('../images/prev.png') left no-repeat;
+                float: left;
+                height: 45px;
+                margin-top: -23px;
+                position: relative;
+                top: 50%;
+                width: 50px;
+
+                &.image-next {
+                    background: url('../images/next.png') left no-repeat;
                     float: right;
                 }
             }
 
-            .text {
+            .loader-image {
                 bottom: 0;
-                color: $white;
-                margin-left: 5px;
-                vertical-align: middle;
+                left: 0;
+                margin: auto;
+                position: absolute;
+                right: 0;
+                top: 0;
             }
 
-            .public-link {
-                margin-right: 5px;
+            .loader-percent {
+                bottom: 0;
+                color: $dark-gray;
+                height: 20px;
+                left: 0;
+                margin: auto;
+                position: absolute;
+                right: 0;
+                top: 55px;
             }
-        }
-    }
-}
 
+            .modal-button-bar {
+                @include single-transition(opacity, .6s);
+                @include border-radius(0 0 3px 3px);
+                @include opacity(0);
+                background-color: $black;
+                bottom: -40px;
+                left: 0;
+                line-height: 40px;
+                padding: 0 10px;
+                position: absolute;
+                right: 0;
 
-// Invite New Member
-.invite {
-    margin-right: 40px;
-}
+                &.footer--show {
+                    @include opacity(1);
+                }
 
-.row--invite {
-    @include clearfix;
-    margin-right: 40px;
+                .image-links {
+                    a,
+                    span {
+                        float: right;
+                    }
+                }
 
-    .col-sm-6 {
-        padding: 0 0 0 15px;
+                .text {
+                    bottom: 0;
+                    color: $white;
+                    margin-left: 5px;
+                    vertical-align: middle;
+                }
 
-        &:first-child {
-            padding-left: 0;
+                .public-link {
+                    margin-right: 5px;
+                }
+            }
         }
     }
-}
 
-.more-modal {
-    .user-list {
-        margin-top: 10px;
-        overflow-x: hidden;
-        overflow-y: auto;
-        position: relative;
-    }
 
-    .modal-body {
-        overflow-x: hidden;
-        padding: 10px 0 20px;
+    .invite {
+        margin-right: 40px;
     }
 
-    .filter-row {
+    .row--invite {
         @include clearfix;
-        margin: 10px 0;
-    }
+        margin-right: 40px;
 
-    .member-count {
-        @include opacity(.8);
-        float: right;
-        margin-top: 5px;
-    }
+        .col-sm-6 {
+            padding: 0 0 0 15px;
 
-    .more-purpose {
-        @include opacity(.7);
+            &:first-child {
+                padding-left: 0;
+            }
+        }
     }
-}
 
-.more-modal__list {
-    display: flex;
-    flex-direction: column;
-    overflow: auto;
+    .more-modal {
+        .user-list {
+            margin-top: 10px;
+            overflow-x: hidden;
+            overflow-y: auto;
+            position: relative;
+        }
 
-    .popover & {
-        font-size: .95em;
+        .modal-body {
+            overflow-x: hidden;
+            padding: 10px 0 20px;
+        }
 
-        .more-modal__row {
-            padding: 5px 10px;
+        .filter-row {
+            @include clearfix;
+            margin: 10px 0;
         }
 
-        .more-modal__name {
-            font-weight: normal;
+        .member-count {
+            @include opacity(.8);
+            float: right;
+            margin-top: 5px;
         }
-    }
 
-    .more-modal__image {
-        @include border-radius(60px);
-        flex-grow: 0;
-        flex-shrink: 0;
-        margin-right: 8px;
+        .more-purpose {
+            @include opacity(.7);
+        }
     }
 
-    .more-modal__details {
-        flex-grow: 1;
-        flex-shrink: 1;
-        overflow: hidden;
-        text-overflow: ellipsis;
-    }
+    .more-modal__list {
+        display: flex;
+        flex-direction: column;
+        overflow: auto;
 
-    .more-modal__actions {
-        flex-grow: 0;
-        flex-shrink: 0;
-        padding-left: 20px;
-    }
+        .popover & {
+            font-size: .95em;
 
-    .more-modal__name {
-        font-size: .95em;
-        font-weight: 600;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-    }
+            .more-modal__row {
+                padding: 5px 10px;
+            }
 
-    .more-modal__description {
-        @include opacity(.7);
-        display: block;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-    }
+            .more-modal__name {
+                font-weight: normal;
+            }
+        }
 
-    .more-modal__row {
-        border-bottom: 1px solid $light-gray;
-        display: flex;
-        padding: 8px 15px;
-    }
+        .more-modal__image {
+            @include border-radius(60px);
+            flex-grow: 0;
+            flex-shrink: 0;
+            margin-right: 8px;
+        }
 
-    p {
-        @include opacity(.8);
-        font-size: .9em;
-        margin: 5px 0;
-        overflow: hidden;
-        text-overflow: ellipsis;
-    }
-}
+        .more-modal__details {
+            flex-grow: 1;
+            flex-shrink: 1;
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
 
-.filtered-user-list {
-    display: flex;
-    flex-direction: column;
+        .more-modal__actions {
+            flex-grow: 0;
+            flex-shrink: 0;
+            padding-left: 20px;
+        }
 
-    .filter-row {
-        flex-grow: 0;
-        flex-shrink: 0;
+        .more-modal__name {
+            font-size: .95em;
+            font-weight: 600;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+        }
+
+        .more-modal__description {
+            @include opacity(.7);
+            display: block;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+        }
+
+        .more-modal__row {
+            border-bottom: 1px solid $light-gray;
+            display: flex;
+            padding: 8px 15px;
+        }
+
+        p {
+            @include opacity(.8);
+            font-size: .9em;
+            margin: 5px 0;
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
     }
 
-    .user-list {
-        flex-grow: 1;
-        flex-shrink: 1;
+    .filtered-user-list {
+        display: flex;
+        flex-direction: column;
+
+        .filter-row {
+            flex-grow: 0;
+            flex-shrink: 0;
+        }
+
+        .user-list {
+            flex-grow: 1;
+            flex-shrink: 1;
+        }
     }
+
 }
diff --git a/webapp/sass/components/_search.scss b/webapp/sass/components/_search.scss
index 98c27ecdc..a7ca8d540 100644
--- a/webapp/sass/components/_search.scss
+++ b/webapp/sass/components/_search.scss
@@ -6,14 +6,6 @@
     }
 }
 
-.sidebar--right {
-    &.move--left {
-        .search-bar__container {
-            padding-right: 42px;
-        }
-    }
-}
-
 .search-bar__container {
     @include flex(0 0 56px);
     padding: 12px 8px 0 0;
diff --git a/webapp/sass/responsive/_mobile.scss b/webapp/sass/responsive/_mobile.scss
index 7ed1e5b3e..e3fac21f7 100644
--- a/webapp/sass/responsive/_mobile.scss
+++ b/webapp/sass/responsive/_mobile.scss
@@ -251,138 +251,162 @@
         }
     }
 
-    .modal {
-        .info__label {
-            padding-bottom: 5px;
-            text-align: left;
-        }
-
-        .modal-header {
-            .modal-action {
-                margin-top: 10px;
+    .app__body {
+        .modal {
+            .info__label {
+                padding-bottom: 5px;
+                text-align: left;
             }
 
-            button.close {
-                font-size: 27px;
-                font-weight: normal;
-            }
+            .modal-image {
+                .modal-button-bar {
+                    line-height: 30px;
+                    padding: 5px;
+                }
 
-            .modal-title {
-                float: none;
-                max-width: 90%;
-            }
+                .image-wrapper {
+                    > div {
+                        font-size: 12px;
+                        min-width: 250px;
+                    }
 
-            .btn {
-                &.btn-primary {
-                    display: block;
-                    float: none;
-                    margin: 10px 0 6px;
-                    width: 100%;
+                    .modal-close {
+                        @include opacity(1);
+                    }
                 }
-            }
-        }
 
-        .settings-modal {
-            &.display--content {
-                .modal-header {
-                    display: none;
+                .modal-button-bar {
+                    @include opacity(1);
                 }
+            }
 
-                .settings-table {
-                    display: block;
+            .modal-header {
+                .modal-action {
+                    margin-top: 10px;
+                }
 
-                    .settings-content {
-                        &.minimize-settings {
-                            display: block;
-                        }
+                button.close {
+                    font-size: 27px;
+                    font-weight: normal;
+                }
 
-                        .section-min:hover {
-                            background: none;
-                        }
+                .modal-title {
+                    float: none;
+                    max-width: 90%;
+                }
 
-                        .no-padding--left {
-                            padding-left: 15px;
-                        }
+                .btn {
+                    &.btn-primary {
+                        display: block;
+                        float: none;
+                        margin: 10px 0 6px;
+                        width: 100%;
                     }
+                }
+            }
 
-                    .settings-links {
+            .settings-modal {
+                &.display--content {
+                    .modal-header {
                         display: none;
                     }
 
-                    .modal-header {
+                    .settings-table {
                         display: block;
-                        position: absolute;
-                        top: 0;
-                        width: 100%;
-                        z-index: 5;
 
-                        .modal-title {
-                            text-align: center;
-                            width: 100%;
+                        .settings-content {
+                            &.minimize-settings {
+                                display: block;
+                            }
+
+                            .section-min:hover {
+                                background: none;
+                            }
+
+                            .no-padding--left {
+                                padding-left: 15px;
+                            }
                         }
-                    }
 
-                    .user-settings {
-                        .tab-header {
+                        .settings-links {
                             display: none;
                         }
 
-                        .divider-dark.first {
-                            display: none;
+                        .modal-header {
+                            display: block;
+                            position: absolute;
+                            top: 0;
+                            width: 100%;
+                            z-index: 5;
+
+                            .modal-title {
+                                text-align: center;
+                                width: 100%;
+                            }
+                        }
+
+                        .user-settings {
+                            .tab-header {
+                                display: none;
+                            }
+
+                            .divider-dark.first {
+                                display: none;
+                            }
                         }
                     }
                 }
-            }
-
-            .settings-table {
-                padding: 0;
 
-                .nav {
-                    position: relative;
-                    top: auto;
-                    width: 100%;
+                .settings-table {
+                    padding: 0;
 
-                    &.position--top {
+                    .nav {
+                        position: relative;
                         top: auto;
+                        width: 100%;
+
+                        &.position--top {
+                            top: auto;
+                        }
                     }
-                }
 
-                .settings-content {
-                    .section-edit {
-                        position: absolute;
-                        top: 14px;
-                        right: 0;
-                        padding-right: 0;
+                    .settings-content {
+                        .section-edit {
+                            position: absolute;
+                            top: 14px;
+                            right: 0;
+                            padding-right: 0;
 
-                        .fa {
-                            display: inline-block;
+                            .fa {
+                                display: inline-block;
+                            }
                         }
-                    }
 
-                    &.minimize-settings {
-                        padding: 0;
-                        display: none;
+                        &.minimize-settings {
+                            padding: 0;
+                            display: none;
 
-                        .user-settings {
-                            padding: 70px 20px 30px;
+                            .user-settings {
+                                padding: 70px 20px 30px;
+                            }
                         }
-                    }
 
-                    .section-min:hover {
-                        background: none !important;
+                        .section-min:hover {
+                            background: none !important;
+                        }
                     }
-                }
 
-                .nav {
-                    > li {
-                        > a {
-                            border-top: 1px solid #dddddd;
-                            font-size: 1.1em;
-                            line-height: 2.7;
-                            color: #555555;
-
-                            .glyphicon {
-                                margin-left: 7px;
+                    .nav {
+                        > li {
+                            > a {
+                                border-top: 1px solid #dddddd;
+                                font-size: 1.1em;
+                                line-height: 2.7;
+                                color: #555555;
+
+                                .glyphicon {
+                                    margin-left: 7px;
+                                }
                             }
                         }
                     }
@@ -752,25 +776,6 @@
         }
     }
 
-    .modal {
-        .modal-image {
-            .image-wrapper {
-                > div {
-                    font-size: 12px;
-                    min-width: 250px;
-                }
-
-                .modal-close {
-                    @include opacity(1);
-                }
-            }
-
-            .modal-button-bar {
-                @include opacity(1);
-            }
-        }
-    }
-
     .app__content {
         padding-top: 45px;
         margin: 0;
@@ -798,36 +803,38 @@
 }
 
 @media screen and (max-width: 640px) {
-    .modal {
-        .about-modal {
-            .about-modal__content {
-                display: block;
-            }
+    .app__body {
+        .modal {
+            .about-modal {
+                .about-modal__content {
+                    display: block;
+                }
 
-            .about-modal__hash {
-                p {
-                    word-break: break-all;
+                .about-modal__hash {
+                    p {
+                        word-break: break-all;
 
-                    &:first-child {
-                        float: none;
+                        &:first-child {
+                            float: none;
+                        }
                     }
                 }
-            }
 
-            .about-modal__logo {
-                float: none;
-                padding: 0;
-                text-align: center;
-                width: 100%;
+                .about-modal__logo {
+                    float: none;
+                    padding: 0;
+                    text-align: center;
+                    width: 100%;
 
-                svg {
-                    height: 100px;
-                    width: 100px;
+                    svg {
+                        height: 100px;
+                        width: 100px;
+                    }
                 }
-            }
 
-            .about-modal__logo + div {
-                padding: 2em 0 0;
+                .about-modal__logo + div {
+                    padding: 2em 0 0;
+                }
             }
         }
     }
@@ -890,15 +897,27 @@
         }
     }
 
-    .modal {
-        .settings-modal {
-            .settings-table {
-                .security-links {
-                    display: block;
-                    margin-bottom: 10px;
+    .app__body {
+        .modal {
+            .settings-modal {
+                &.display--content {
+                    .modal-body {
+                        max-height: 90%;
+                    }
+                }
+
+                .modal-body {
+                    max-height: 70%;
+                }
 
-                    &:last-child {
-                        margin-bottom: 0;
+                .settings-table {
+                    .security-links {
+                        display: block;
+                        margin-bottom: 10px;
+
+                        &:last-child {
+                            margin-bottom: 0;
+                        }
                     }
                 }
             }
@@ -909,20 +928,6 @@
         min-height: 350px;
     }
 
-    .modal {
-        .modal-body {
-            max-height: 70%;
-        }
-
-        .settings-modal {
-            &.display--content {
-                .modal-body {
-                    max-height: 90%;
-                }
-            }
-        }
-    }
-
     .member-div {
         padding: 8px 0;
 
@@ -951,15 +956,6 @@
             @include translate3d(260px, 0, 0);
         }
     }
-
-    .modal {
-        .modal-image {
-            .modal-button-bar {
-                line-height: 30px;
-                padding: 5px;
-            }
-        }
-    }
 }
 
 @media screen and (max-height: 640px) {
diff --git a/webapp/sass/routes/_about-modal.scss b/webapp/sass/routes/_about-modal.scss
index 98119c8aa..43d04319d 100644
--- a/webapp/sass/routes/_about-modal.scss
+++ b/webapp/sass/routes/_about-modal.scss
@@ -1,78 +1,82 @@
 @charset 'UTF-8';
 
-.modal {
-    .about-modal {
-        .modal-header {
-            background: transparent;
-            border: none;
-            color: inherit;
-            padding: 20px 25px 0;
-
-            .close {
-                color: inherit;
-                font-weight: normal;
-                right: 15px;
-            }
+.app__body {
 
-            .modal-title {
+    .modal {
+        .about-modal {
+            .modal-header {
+                background: transparent;
+                border: none;
                 color: inherit;
-                font-size: 16px;
+                padding: 20px 25px 0;
+
+                .close {
+                    color: inherit;
+                    font-weight: normal;
+                    right: 15px;
+                }
+
+                .modal-title {
+                    color: inherit;
+                    font-size: 16px;
+                }
             }
-        }
 
-        .modal-body {
-            padding: 20px 25px 5px;
-        }
+            .modal-body {
+                padding: 20px 25px 5px;
+            }
 
-        .about-modal__content {
-            @include clearfix;
-            @include display-flex;
-            @include flex-direction(row);
-            padding: 1em 0 3em;
-        }
+            .about-modal__content {
+                @include clearfix;
+                @include display-flex;
+                @include flex-direction(row);
+                padding: 1em 0 3em;
+            }
 
-        .about-modal__copyright {
-            @include opacity(.6);
-            margin-top: .5em;
-        }
+            .about-modal__copyright {
+                @include opacity(.6);
+                margin-top: .5em;
+            }
 
-        .about-modal__footer {
-            font-size: 13.5px;
-        }
+            .about-modal__footer {
+                font-size: 13.5px;
+            }
 
-        .about-modal__title {
-            line-height: 1.5;
-            margin: 0 0 10px;
-        }
+            .about-modal__title {
+                line-height: 1.5;
+                margin: 0 0 10px;
+            }
 
-        .about-modal__subtitle {
-            @include opacity(.6);
-        }
+            .about-modal__subtitle {
+                @include opacity(.6);
+            }
 
-        .about-modal__hash {
-            @include opacity(.4);
-            font-size: .75em;
-            text-align: right;
+            .about-modal__hash {
+                @include opacity(.4);
+                font-size: .75em;
+                text-align: right;
 
-            p {
-                &:first-child {
-                    float: left;
+                p {
+                    &:first-child {
+                        float: left;
+                    }
                 }
             }
-        }
 
-        .about-modal__logo {
-            @include opacity(.9);
-            padding: 0 40px 0 20px;
+            .about-modal__logo {
+                @include opacity(.9);
+                padding: 0 40px 0 20px;
 
-            svg {
-                height: 125px;
-                width: 125px;
-            }
+                svg {
+                    height: 125px;
+                    width: 125px;
+                }
 
-            path {
-                fill: inherit;
+                path {
+                    fill: inherit;
+                }
             }
         }
     }
-}
+
+}
\ No newline at end of file
-- 
cgit v1.2.3-1-g7c22