From 200fd7cdc298037564e1bb06d839092be850d417 Mon Sep 17 00:00:00 2001
From: Devin Binnie <52460000+devinbinnie@users.noreply.github.com>
Date: Wed, 19 Aug 2020 10:22:14 -0400
Subject: [PATCH] [MM-27159] Button States for Cloud Onboarding (#6189)

* [MM-27159] Button States

* PR feedback
---
 .../next_steps_view.test.tsx.snap             |  1 +
 .../next_steps_view/next_steps_tips.tsx       | 10 +--
 .../next_steps_view/next_steps_view.scss      | 76 +++++++++++++++----
 .../next_steps_view/next_steps_view.tsx       |  1 +
 .../complete_profile_step.test.tsx.snap       |  2 +-
 .../complete_profile_step.tsx                 |  2 +-
 .../invite_members_step.test.tsx.snap         |  6 +-
 .../invite_members_step.scss                  | 29 +------
 .../invite_members_step.tsx                   |  6 +-
 .../team_profile_step.test.tsx.snap           |  2 +-
 .../team_profile_step/team_profile_step.tsx   |  2 +-
 11 files changed, 79 insertions(+), 58 deletions(-)

diff --git a/components/next_steps_view/__snapshots__/next_steps_view.test.tsx.snap b/components/next_steps_view/__snapshots__/next_steps_view.test.tsx.snap
index 2151c71268d6..b08705b33f1f 100644
--- a/components/next_steps_view/__snapshots__/next_steps_view.test.tsx.snap
+++ b/components/next_steps_view/__snapshots__/next_steps_view.test.tsx.snap
@@ -56,6 +56,7 @@ exports[`components/next_steps_view should match snapshot 1`] = `
           className="NextStepsView__skipGettingStarted"
         >
           <button
+            className="NextStepsView__button tertiary"
             onClick={[Function]}
           >
             <FormattedMessage
diff --git a/components/next_steps_view/next_steps_tips.tsx b/components/next_steps_view/next_steps_tips.tsx
index d92cecdd8e74..b5f26ba2ef62 100644
--- a/components/next_steps_view/next_steps_tips.tsx
+++ b/components/next_steps_view/next_steps_tips.tsx
@@ -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'
@@ -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
@@ -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
@@ -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
diff --git a/components/next_steps_view/next_steps_view.scss b/components/next_steps_view/next_steps_view.scss
index 8df5dbfcc616..14d9bf3f49ae 100644
--- a/components/next_steps_view/next_steps_view.scss
+++ b/components/next_steps_view/next_steps_view.scss
@@ -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;
@@ -389,10 +440,6 @@
     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;
 }
 
@@ -400,11 +447,8 @@
     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 {
diff --git a/components/next_steps_view/next_steps_view.tsx b/components/next_steps_view/next_steps_view.tsx
index 0aabcfefe170..9adcd6c7e33a 100644
--- a/components/next_steps_view/next_steps_view.tsx
+++ b/components/next_steps_view/next_steps_view.tsx
@@ -225,6 +225,7 @@ export default class NextStepsView extends React.PureComponent<Props, State> {
                         </Accordion>
                         <div className='NextStepsView__skipGettingStarted'>
                             <button
+                                className='NextStepsView__button tertiary'
                                 onClick={this.showFinalScreen}
                             >
                                 <FormattedMessage
diff --git a/components/next_steps_view/steps/complete_profile_step/__snapshots__/complete_profile_step.test.tsx.snap b/components/next_steps_view/steps/complete_profile_step/__snapshots__/complete_profile_step.test.tsx.snap
index 4fdefeea3ec1..1d93078b3a4b 100644
--- a/components/next_steps_view/steps/complete_profile_step/__snapshots__/complete_profile_step.test.tsx.snap
+++ b/components/next_steps_view/steps/complete_profile_step/__snapshots__/complete_profile_step.test.tsx.snap
@@ -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]}
     >
diff --git a/components/next_steps_view/steps/complete_profile_step/complete_profile_step.tsx b/components/next_steps_view/steps/complete_profile_step/complete_profile_step.tsx
index acf8c3274ba6..5f1d47bba8d4 100644
--- a/components/next_steps_view/steps/complete_profile_step/complete_profile_step.tsx
+++ b/components/next_steps_view/steps/complete_profile_step/complete_profile_step.tsx
@@ -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()}
                     >
diff --git a/components/next_steps_view/steps/invite_members_step/__snapshots__/invite_members_step.test.tsx.snap b/components/next_steps_view/steps/invite_members_step/__snapshots__/invite_members_step.test.tsx.snap
index cfbbd58f8404..4f3bdd2b34cd 100644
--- a/components/next_steps_view/steps/invite_members_step/__snapshots__/invite_members_step.test.tsx.snap
+++ b/components/next_steps_view/steps/invite_members_step/__snapshots__/invite_members_step.test.tsx.snap
@@ -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]}
         >
@@ -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]}
         >
@@ -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
diff --git a/components/next_steps_view/steps/invite_members_step/invite_members_step.scss b/components/next_steps_view/steps/invite_members_step/invite_members_step.scss
index 679c29cf81e1..366b6cc64b72 100644
--- a/components/next_steps_view/steps/invite_members_step/invite_members_step.scss
+++ b/components/next_steps_view/steps/invite_members_step/invite_members_step.scss
@@ -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);
         }
 
@@ -58,12 +55,6 @@
             }
         }
 
-        &:hover {
-            background: var(--button-bg-08);
-        }
-        &:active {
-            background: var(--button-bg-08);
-        }
         span {
             display: inline-block;
             margin-left: 4px;
@@ -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;
@@ -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);
-        }
     }
 }
 
diff --git a/components/next_steps_view/steps/invite_members_step/invite_members_step.tsx b/components/next_steps_view/steps/invite_members_step/invite_members_step.tsx
index 03855609cd22..1b2bff2b0099 100644
--- a/components/next_steps_view/steps/invite_members_step/invite_members_step.tsx
+++ b/components/next_steps_view/steps/invite_members_step/invite_members_step.tsx
@@ -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}
                             >
@@ -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'
                             >
@@ -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
diff --git a/components/next_steps_view/steps/team_profile_step/__snapshots__/team_profile_step.test.tsx.snap b/components/next_steps_view/steps/team_profile_step/__snapshots__/team_profile_step.test.tsx.snap
index 706e9d8f3bc2..c926cd98dcc0 100644
--- a/components/next_steps_view/steps/team_profile_step/__snapshots__/team_profile_step.test.tsx.snap
+++ b/components/next_steps_view/steps/team_profile_step/__snapshots__/team_profile_step.test.tsx.snap
@@ -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]}
     >
diff --git a/components/next_steps_view/steps/team_profile_step/team_profile_step.tsx b/components/next_steps_view/steps/team_profile_step/team_profile_step.tsx
index 858973633e4c..ece2f387435a 100644
--- a/components/next_steps_view/steps/team_profile_step/team_profile_step.tsx
+++ b/components/next_steps_view/steps/team_profile_step/team_profile_step.tsx
@@ -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()}
                     >