Skip to content
This repository has been archived by the owner on Mar 13, 2024. It is now read-only.

[MM-27159] Button States for Cloud Onboarding #6189

Merged
merged 2 commits into from
Aug 19, 2020
Merged

[MM-27159] Button States for Cloud Onboarding #6189

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
1ea7f92
[MM-27159] Button States
devinbinnie Aug 18, 2020
c704fc3
PR feedback
devinbinnie Aug 18, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions components/next_steps_view/__snapshots__/next_steps_view.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,6 +56,7 @@ exports[`components/next_steps_view should match snapshot 1`] = `
className="NextStepsView__skipGettingStarted"
>
<button
className="NextStepsView__button tertiary"
onClick={[Function]}
>
<FormattedMessage
Expand Down
10 changes: 5 additions & 5 deletions components/next_steps_view/next_steps_tips.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -94,7 +94,7 @@ export default function NextStepsTips(props: {showFinalScreen: boolean; animatin
/>
<MenuWrapper>
<button
className='NextStepsView__button confirm'
className='NextStepsView__button NextStepsView__finishButton primary'
>
<FormattedMessage
id='next_steps_view.tips.configureLogin.button'
Expand Down Expand Up @@ -132,7 +132,7 @@ export default function NextStepsTips(props: {showFinalScreen: boolean; animatin
defaultMessage='Visit the Plugins Marketplace to install and configure plugins.'
/>
<button
className='NextStepsView__button confirm'
className='NextStepsView__button NextStepsView__finishButton primary'
onClick={() => openPluginMarketplace(dispatch)}
>
<FormattedMessage
Expand Down Expand Up @@ -174,13 +174,13 @@ export default function NextStepsTips(props: {showFinalScreen: boolean; animatin
</h3>
<div className='NextStepsView__downloadButtons'>
<button
className='NextStepsView__downloadForPlatformButton'
className='NextStepsView__button NextStepsView__downloadForPlatformButton secondary'
onClick={downloadLatest}
>
{getDownloadButtonString()}
</button>
<button
className='NextStepsView__downloadAnyButton'
className='NextStepsView__button NextStepsView__downloadAnyButton tertiary'
onClick={seeAllApps}
>
<FormattedMessage
Expand Down Expand Up @@ -233,7 +233,7 @@ export default function NextStepsTips(props: {showFinalScreen: boolean; animatin
defaultMessage='Let us show you around with a guided tour of the interface.'
/>
<button
className='NextStepsView__button confirm'
className='NextStepsView__button NextStepsView__finishButton primary'
onClick={() => {}}
>
<FormattedMessage
Expand Down
76 changes: 60 additions & 16 deletions components/next_steps_view/next_steps_view.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -220,38 +220,89 @@
margin-top: 12px;

button {
border: none;
background: none;
padding: 10px 16px;
font-weight: 600;
font-size: 12px;
line-height: 9px;
color: var(--button-bg);
}
}

.NextStepsView__button {
.NextStepsView__finishButton {
padding: 12px 20px;
line-height: 14px;
font-size: 14px;
font-weight: 600;
}

.NextStepsView__button {
border: none;
border-radius: 4px;

&.cancel {
&.secondary {
background: var(--center-channel-bg);
color: var(--button-bg);
box-shadow: inset 0 0 0 1px var(--button-bg);

&:hover:not(.disabled) {
background: rgba(var(--button-bg-rgb), 0.04);
}

&:active {
background: rgba(var(--button-bg-rgb), 0.08);
}

&:focus {
box-shadow: inset 0 0 0 2px var(--button-bg);
}

&.disabled {
color: rgba(var(--center-channel-color-rgb), 0.32);
box-shadow: inset 0 0 0 1px rgba(var(--center-channel-color-rgb), 0.32);
}
}

&.confirm {
&.primary {
background: var(--button-bg);
border-radius: 4px;
color: var(--button-color);

&:hover:not(.disabled) {
background: linear-gradient(0deg, rgba(var(--center-channel-color-rgb), 0.16), rgba(var(--center-channel-color-rgb), 0.16)), var(--button-bg);
}

&:active {
background: linear-gradient(0deg, rgba(var(--center-channel-color-rgb), 0.32), rgba(var(--center-channel-color-rgb), 0.32)), var(--button-bg);
}

&:focus {
box-shadow: inset 0 0 0 2px var(--sidebar-text-active-border);
}

&.disabled {
color: rgba(var(--center-channel-color-rgb), 0.32);
background: rgba(var(--center-channel-color-rgb), 0.08);
}
}

&.tertiary {
background: none;
color: var(--button-bg);

&:hover:not(.disabled) {
background: rgba(var(--button-bg-rgb), 0.04);
}

&:active {
background: rgba(var(--button-bg-rgb), 0.08);
}

&:focus {
box-shadow: inset 0 0 0 2px var(--button-bg);
}

&.disabled {
color: rgba(var(--center-channel-color-rgb), 0.32);
}
}
}
.NextStepsView__wizardButtons {
display: flex;
Expand Down Expand Up @@ -389,22 +440,15 @@
font-size: 12px;
line-height: 9px;
font-weight: 600;
color: var(--button-bg);
border-radius: 4px;
background: none;
border: 1px solid var(--button-bg);
padding: 10px 16px;
}

.NextStepsView__downloadAnyButton {
font-size: 12px;
line-height: 9px;
font-weight: 600;
color: var(--button-bg);
border: none;
background: none;
padding: 0;
margin-left: 24px;
padding: 10px 16px;
margin-left: 8px;
}

.NextStepsView__tipsMobileMessage {
Expand Down
1 change: 1 addition & 0 deletions components/next_steps_view/next_steps_view.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -235,6 +235,7 @@ export default class NextStepsView extends React.PureComponent<Props, State> {
</Accordion>
<div className='NextStepsView__skipGettingStarted'>
<button
className='NextStepsView__button tertiary'
onClick={this.showFinalScreen}
>
<FormattedMessage
Expand Down
2 changes: 1 addition & 1 deletion ..._steps_view/steps/complete_profile_step/__snapshots__/complete_profile_step.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,7 @@ exports[`components/next_steps_view/steps/complete_profile_step should match sna
className="NextStepsView__wizardButtons"
>
<button
className="NextStepsView__button confirm disabled"
className="NextStepsView__button NextStepsView__finishButton primary disabled"
disabled={true}
onClick={[Function]}
>
Expand Down
2 changes: 1 addition & 1 deletion components/next_steps_view/steps/complete_profile_step/complete_profile_step.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -157,7 +157,7 @@ export default class CompleteProfileStep extends React.PureComponent<Props, Stat
/>
</button> */}
<button
className={classNames('NextStepsView__button confirm', {disabled: this.isFinishDisabled()})}
className={classNames('NextStepsView__button NextStepsView__finishButton primary', {disabled: this.isFinishDisabled()})}
onClick={this.onFinish}
disabled={this.isFinishDisabled()}
>
Expand Down
6 changes: 3 additions & 3 deletions ...next_steps_view/steps/invite_members_step/__snapshots__/invite_members_step.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@ exports[`components/next_steps_view/steps/invite_members_step should match snaps
className="InviteMembersStep__send"
>
<button
className="InviteMembersStep__sendButton disabled"
className="NextStepsView__button InviteMembersStep__sendButton secondary disabled"
disabled={true}
onClick={[Function]}
>
Expand Down Expand Up @@ -86,7 +86,7 @@ exports[`components/next_steps_view/steps/invite_members_step should match snaps
value="http://localhost:8065/signup_user_complete/?id="
/>
<button
className="InviteMembersStep__shareLinkInputButton"
className="NextStepsView__button InviteMembersStep__shareLinkInputButton secondary"
data-testid="shareLinkInputButton"
onClick={[Function]}
>
Expand All @@ -106,7 +106,7 @@ exports[`components/next_steps_view/steps/invite_members_step should match snaps
className="NextStepsView__wizardButtons"
>
<button
className="NextStepsView__button confirm"
className="NextStepsView__button NextStepsView__finishButton primary"
onClick={[Function]}
>
<FormattedMessage
Expand Down
29 changes: 2 additions & 27 deletions components/next_steps_view/steps/invite_members_step/invite_members_step.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,18 +35,15 @@
align-items: center;
justify-content: center;
flex-grow: 0;
border: 1px solid var(--button-bg);
color: var(--button-bg);
border-radius: 0 4px 4px 0;
font-size: 12px;
line-height: 16px;
font-weight: 600;
padding: 8px 16px;
background: none;
min-width: 108px;

&.copied {
border-color: var(--online-indicator);
box-shadow: inset 0 0 0 1px var(--online-indicator);
color: var(--online-indicator);
}

Expand All @@ -58,12 +55,6 @@
}
}

&:hover {
background: var(--button-bg-08);
}
&:active {
background: var(--button-bg-08);
}
span {
display: inline-block;
margin-left: 4px;
Expand Down Expand Up @@ -128,14 +119,10 @@
align-items: center;
justify-content: center;
flex-grow: 0;
border: 1px solid var(--button-bg);
color: var(--button-bg);
border-radius: 4px;
font-size: 12px;
line-height: 16px;
font-weight: 600;
padding: 8px 16px;
background: none;

i {
font-size: 14px;
Expand All @@ -145,25 +132,13 @@
}
}

&:hover:not(.disabled) {
background: var(--button-bg-08);
}
&:active {
background: var(--button-bg-08);
}
span {
display: inline-block;
margin-left: 4px;
}

&.disabled {
border-color: 1px solid var(--center-channel-color);
&.disabled i {
color: 1px solid var(--center-channel-color);
opacity: 0.32;

i {
color: 1px solid var(--center-channel-color);
}
}
}

Expand Down
6 changes: 3 additions & 3 deletions components/next_steps_view/steps/invite_members_step/invite_members_step.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -197,7 +197,7 @@ export default class InviteMembersStep extends React.PureComponent<Props, State>
/>
<div className='InviteMembersStep__send'>
<button
className={classNames('InviteMembersStep__sendButton', {disabled: !this.state.emails.length || Boolean(this.state.emailsSent) || this.state.emailError})}
className={classNames('NextStepsView__button InviteMembersStep__sendButton secondary', {disabled: !this.state.emails.length || Boolean(this.state.emailsSent) || this.state.emailError})}
disabled={!this.state.emails.length || Boolean(this.state.emailsSent) || Boolean(this.state.emailError)}
onClick={this.sendEmailInvites}
>
Expand Down Expand Up @@ -245,7 +245,7 @@ export default class InviteMembersStep extends React.PureComponent<Props, State>
data-testid='shareLinkInput'
/>
<button
className={classNames('InviteMembersStep__shareLinkInputButton', {copied: this.state.copiedLink})}
className={classNames('NextStepsView__button InviteMembersStep__shareLinkInputButton secondary', {copied: this.state.copiedLink})}
onClick={this.copyLink}
data-testid='shareLinkInputButton'
>
Expand Down Expand Up @@ -273,7 +273,7 @@ export default class InviteMembersStep extends React.PureComponent<Props, State>
</div>
<div className='NextStepsView__wizardButtons'>
<button
className={'NextStepsView__button confirm'}
className={'NextStepsView__button NextStepsView__finishButton primary'}
onClick={this.onFinish}
>
<FormattedMessage
Expand Down
2 changes: 1 addition & 1 deletion ...nts/next_steps_view/steps/team_profile_step/__snapshots__/team_profile_step.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,7 @@ exports[`components/next_steps_view/steps/team_profile_step should match snapsho
className="NextStepsView__wizardButtons"
>
<button
className="NextStepsView__button confirm"
className="NextStepsView__button NextStepsView__finishButton primary"
disabled={false}
onClick={[Function]}
>
Expand Down
2 changes: 1 addition & 1 deletion components/next_steps_view/steps/team_profile_step/team_profile_step.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -189,7 +189,7 @@ export default class TeamProfileStep extends React.PureComponent<Props, State> {
/>
</button> */}
<button
className={classNames('NextStepsView__button confirm', {disabled: this.isFinishDisabled()})}
className={classNames('NextStepsView__button NextStepsView__finishButton primary', {disabled: this.isFinishDisabled()})}
onClick={this.onFinish}
disabled={this.isFinishDisabled()}
>
Expand Down