diff --git a/web/react/components/sidebar_header.jsx b/web/react/components/sidebar_header.jsx index 0d48c6f880..1bf70ce768 100644 --- a/web/react/components/sidebar_header.jsx +++ b/web/react/components/sidebar_header.jsx @@ -64,7 +64,8 @@ export default class SidebarHeader extends React.Component { screens.push(
-

{'Sending Messages'}

+

{'Main Menu'}

+

{'The '}{'Main Menu'}{' is where you can '} {', and set your '}{'Theme Color'}{'.'} -

+

+

{'Team administrators can also access their '}{teamSettingsLink}{' from this menu.'} +

); @@ -95,7 +98,7 @@ export default class SidebarHeader extends React.Component { ref='tip' placement='right' screens={screens} - overlayClass='tip-overlay--sidebar' + overlayClass='tip-overlay--header' /> ); diff --git a/web/react/components/tutorial/tutorial_tip.jsx b/web/react/components/tutorial/tutorial_tip.jsx index 118209599a..c85acb3462 100644 --- a/web/react/components/tutorial/tutorial_tip.jsx +++ b/web/react/components/tutorial/tutorial_tip.jsx @@ -70,7 +70,7 @@ export default class TutorialTip extends React.Component { } return ( -
+
this.refs.target} >
+
{this.props.screens[this.state.currentScreen]}
{dots}
diff --git a/web/sass-files/sass/partials/_responsive.scss b/web/sass-files/sass/partials/_responsive.scss index 8f353c4019..a49a989522 100644 --- a/web/sass-files/sass/partials/_responsive.scss +++ b/web/sass-files/sass/partials/_responsive.scss @@ -179,6 +179,15 @@ } @media screen and (max-width: 1140px) { + .tip-overlay { + &.tip-overlay--chat { + margin: -10px 0 0 -10px; + .arrow { + right: 15px; + left: auto; + } + } + } .inner__wrap { &.move--left { .file-overlay { @@ -266,6 +275,18 @@ } } @media screen and (max-width: 768px) { + .tip-div { + left: 15px; + right: auto; + } + .tip-overlay { + &.tip-overlay--chat { + margin-left: 10px; + .arrow { + left: 32px; + } + } + } .file-details__container { display: block; .file-details__preview { @@ -482,7 +503,6 @@ padding-bottom: 10px; display: table; width: 100%; - table-layout: fixed; .post-body__cell { display: table-cell; padding-left: 45px; diff --git a/web/sass-files/sass/partials/_tutorial.scss b/web/sass-files/sass/partials/_tutorial.scss index fa93e46bf0..42183d5998 100644 --- a/web/sass-files/sass/partials/_tutorial.scss +++ b/web/sass-files/sass/partials/_tutorial.scss @@ -16,38 +16,93 @@ @include border-radius(3px); padding: 20px; z-index: 1000; + + .arrow { + border-width: 10px; + position: absolute; + display: block; + width: 0; + height: 0; + border-color: transparent; + border-style: solid; + } + + &.tip-overlay--sidebar { + max-width: 75%; + margin: 50px 0 0 10px; + .arrow { + top: 80px; + left: -10px; + margin-top: -10px; + border-left-width: 0; + border-right-color: #fff; + } + } + + &.tip-overlay--header { + margin: 10px 0 0 10px; + .arrow { + top: 15px; + left: -10px; + border-left-width: 0; + border-right-color: #fff; + } + } + + &.tip-overlay--chat { + margin-top: -10px; + .arrow { + left: 50%; + margin-left: -10px; + border-bottom-width: 0; + border-top-color: #fff; + bottom: -10px; + } + } + h4 { font-size: em(16px); font-weight: 600; margin: 5px 0 15px; } + p { font-size: 13px; line-height: 1.6; + strong { font-weight: 600; } + } + .btn { background: #cccccc; color: #fff; @include border-radius(3px); border: none; margin-bottom: 10px; + &:hover, &:active, &:focus { color: #fff; border: none; background: #bbb; } + } + .tip-opt { font-size: 12px; + span { @include opacity(0.5); } + } + .tutorial__circles { margin: 1.5em 0px -1.7em -4px; + .circle { width: 7px; height: 7px; @@ -56,8 +111,11 @@ background: #000; @include opacity(0.4); } + } + } + } .tip-button { @@ -72,6 +130,16 @@ position:absolute; top:0px; right:0px; + + &.tip-overlay--header { + top: 20px; + } + + &.tip-overlay--sidebar { + left: 0; + top: -9px; + } + } .tutorial-steps__container { diff --git a/web/static/images/tutorialTip.gif b/web/static/images/tutorialTip.gif index 024dc3c09f..f185ff4b96 100644 Binary files a/web/static/images/tutorialTip.gif and b/web/static/images/tutorialTip.gif differ