PLT-2549 - Improvements to theme stuff (#2657)

webapp/components/tutorial/tutorial_intro_screens.jsx

@@ -1,6 +1,7 @@
 // Copyright (c) 2015 Mattermost, Inc. All Rights Reserved.
 // See License.txt for license information.
 
+import $ from 'jquery';
 import UserStore from 'stores/user_store.jsx';
 import TeamStore from 'stores/team_store.jsx';
 import PreferenceStore from 'stores/preference_store.jsx';
@@ -34,6 +35,12 @@ export default class TutorialIntroScreens extends React.Component {
 
         this.state = {currentScreen: 0};
     }
+    componentDidMount() {
+        $('body').addClass('app__body');
+    }
+    componentWillUnmount() {
+        $('body').removeClass('app__body');
+    }
     handleNext() {
         if (this.state.currentScreen < 2) {
             this.setState({currentScreen: this.state.currentScreen + 1});

webapp/sass/components/_modal.scss

@@ -1,14 +1,16 @@
 @charset 'UTF-8';
 
-.browser--ie {
+.app__body {
+
+    &.browser--ie {
         .modal {
             .modal-dialog {
                 @include translateY(0);
             }
         }
-}
+    }
 
-.modal-body {
+    .modal-body {
         max-height: calc(90vh - 62px);
         overflow: auto;
         padding: 20px 15px;
@@ -20,14 +22,14 @@
                 max-height: 150px;
             }
         }
-}
+    }
 
-.more-table {
+    .more-table {
         margin: 0;
         table-layout: fixed;
-}
+    }
 
-.modal {
+    .modal {
         color: alpha-color($black, .9);
         width: 100%;
 
@@ -268,7 +270,8 @@
                     min-width: 330px;
                 }
 
-            pre, code {
+                pre,
+                code {
                     display: inline-block;
                 }
 
@@ -384,15 +387,14 @@
                 }
             }
         }
-}
+    }
 
 
-// Invite New Member
-.invite {
+    .invite {
         margin-right: 40px;
-}
+    }
 
-.row--invite {
+    .row--invite {
         @include clearfix;
         margin-right: 40px;
 
@@ -403,9 +405,9 @@
                 padding-left: 0;
             }
         }
-}
+    }
 
-.more-modal {
+    .more-modal {
         .user-list {
             margin-top: 10px;
             overflow-x: hidden;
@@ -432,9 +434,9 @@
         .more-purpose {
             @include opacity(.7);
         }
-}
+    }
 
-.more-modal__list {
+    .more-modal__list {
         display: flex;
         flex-direction: column;
         overflow: auto;
@@ -500,9 +502,9 @@
             overflow: hidden;
             text-overflow: ellipsis;
         }
-}
+    }
 
-.filtered-user-list {
+    .filtered-user-list {
         display: flex;
         flex-direction: column;
 
@@ -515,4 +517,6 @@
             flex-grow: 1;
             flex-shrink: 1;
         }
+    }
+
 }

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;

webapp/sass/responsive/_mobile.scss

@@ -251,12 +251,35 @@
         }
     }
 
+    .app__body {
         .modal {
             .info__label {
                 padding-bottom: 5px;
                 text-align: left;
             }
 
+            .modal-image {
+                .modal-button-bar {
+                    line-height: 30px;
+                    padding: 5px;
+                }
+
+                .image-wrapper {
+                    > div {
+                        font-size: 12px;
+                        min-width: 250px;
+                    }
+
+                    .modal-close {
+                        @include opacity(1);
+                    }
+                }
+
+                .modal-button-bar {
+                    @include opacity(1);
+                }
+            }
+
             .modal-header {
                 .modal-action {
                     margin-top: 10px;
@@ -390,6 +413,7 @@
                 }
             }
         }
+    }
 
     .post-create__container {
         .post-right__container & {
@@ -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,6 +803,7 @@
 }
 
 @media screen and (max-width: 640px) {
+    .app__body {
         .modal {
             .about-modal {
                 .about-modal__content {
@@ -831,6 +837,7 @@
                 }
             }
         }
+    }
 
     .access-history__table {
         > div {
@@ -890,8 +897,19 @@
         }
     }
 
+    .app__body {
         .modal {
             .settings-modal {
+                &.display--content {
+                    .modal-body {
+                        max-height: 90%;
+                    }
+                }
+
+                .modal-body {
+                    max-height: 70%;
+                }
+
                 .settings-table {
                     .security-links {
                         display: block;
@@ -904,25 +922,12 @@
                 }
             }
         }
+    }
 
     .tip-overlay.tip-overlay--sidebar {
         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) {

webapp/sass/routes/_about-modal.scss

@@ -1,6 +1,8 @@
 @charset 'UTF-8';
 
-.modal {
+.app__body {
+
+    .modal {
         .about-modal {
             .modal-header {
                 background: transparent;
@@ -75,4 +77,6 @@
                 }
             }
         }
+    }
+
 }