Merge pull request #2266 from asaadmahmoodspin/ui-improvements

PLT-2151 - Fixing tutorial for other language

web/react/components/tutorial/tutorial_intro_screens.jsx

@@ -211,26 +211,28 @@ export default class TutorialIntroScreens extends React.Component {
                     <div className='tutorial__content'>
                         <div className='tutorial__steps'>
                             {screen}
-                            <button
+                            <div className='tutorial__footer'>
-                                className='btn btn-primary'
+                                <button
-                                tabIndex='1'
+                                    className='btn btn-primary'
-                                onClick={this.handleNext}
+                                    tabIndex='1'
-                            >
+                                    onClick={this.handleNext}
-                                <FormattedMessage
+                                >
-                                    id='tutorial_intro.next'
+                                    <FormattedMessage
-                                    defaultMessage='Next'
+                                        id='tutorial_intro.next'
-                                />
+                                        defaultMessage='Next'
-                            </button>
+                                    />
-                            <a
+                                </button>
-                                className='tutorial-skip'
+                                <a
-                                href='#'
+                                    className='tutorial-skip'
-                                onClick={this.skipTutorial}
+                                    href='#'
-                            >
+                                    onClick={this.skipTutorial}
-                                <FormattedMessage
+                                >
-                                    id='tutorial_intro.skip'
+                                    <FormattedMessage
-                                    defaultMessage='Skip tutorial'
+                                        id='tutorial_intro.skip'
-                                />
+                                        defaultMessage='Skip tutorial'
-                            </a>
+                                    />
+                                </a>
+                            </div>
                         </div>
                     </div>
                 </div>

web/sass-files/sass/partials/_modal.scss

@@ -46,7 +46,6 @@
 			}
 			td {
 				width: 100%;
-				white-space: nowrap;
 				@include legacy-pie-clearfix;
 				text-overflow: ellipsis;
 				padding: 8px 8px 8px 15px;

web/sass-files/sass/partials/_tutorial.scss

@@ -32,7 +32,7 @@
     &.tip-overlay--sidebar {
         max-width: 75%;
         margin: 50px 0 0 10px;
-        min-height: 310px;
+        min-height: 330px;
         .tutorial__footer {
             position: absolute;
             width: 100%;
@@ -165,17 +165,16 @@
         .tutorial__steps {
             position: relative;
             max-width: 310px;
-            min-height: 350px;
+            min-height: 370px;
             margin-bottom: 50px;
             text-align: left;
             display: inline-block;
-            padding-bottom: 30px;
-        }
-        .btn-primary {
-            position: absolute;
-            bottom: 0px;
         }
     }
+    .tutorial__footer {
+        position: absolute;
+        bottom: 0;
+    }
     h1 {
         font-size: em(40px);
         margin: -20px 0 30px;
@@ -191,9 +190,7 @@
         bottom: 40px;
     }
     .tutorial-skip {
-        position: absolute;
+        margin-left: 13px;
-        bottom: 7px;
-        left: 80px;
     }
 }