PLT-6987 User access token UI (#7007)

* Add user access token UI

* Fix enter press and update mattermost-redux

* Updating UI for access token stuff (#7066)

* Revert segment key

7 files changed, 159 insertions, 57 deletions

diff --git a/webapp/sass/components/_alerts.scss b/webapp/sass/components/_alerts.scss
index cb4c9c9e1..e0444de39 100644
--- a/webapp/sass/components/_alerts.scss
+++ b/webapp/sass/components/_alerts.scss
@@ -11,3 +11,4 @@
     margin: 1px 0 0 10px;
     padding: 4px 10px;
 }
+
diff --git a/webapp/sass/layout/_content.scss b/webapp/sass/layout/_content.scss
index 933f57c32..7bf6c08ad 100644
--- a/webapp/sass/layout/_content.scss
+++ b/webapp/sass/layout/_content.scss
@@ -87,3 +87,9 @@
 .delete-message-text {
     margin-top: 10px;
 }
+
+.col-sm-auto {
+    padding-left: 15px;
+    padding-right: 15px;
+}
+
diff --git a/webapp/sass/layout/_forms.scss b/webapp/sass/layout/_forms.scss
index 143879e2c..a49acf3e3 100644
--- a/webapp/sass/layout/_forms.scss
+++ b/webapp/sass/layout/_forms.scss
@@ -91,35 +91,3 @@
         }
     }
 }
-
-.padding-top {
-    padding-top: 7px;
-
-    &.x2 {
-        padding-top: 14px;
-    }
-
-    &.x3 {
-        padding-top: 21px;
-    }
-}
-
-.padding-bottom {
-    padding-bottom: 7px;
-
-    &.x2 {
-        padding-bottom: 14px;
-    }
-
-    &.x3 {
-        padding-bottom: 21px;
-    }
-
-    .control-label {
-        font-weight: 600;
-
-        &.text-left {
-            text-align: left;
-        }
-    }
-}
diff --git a/webapp/sass/responsive/_tablet.scss b/webapp/sass/responsive/_tablet.scss
index ef4c2e8e5..ef68d5175 100644
--- a/webapp/sass/responsive/_tablet.scss
+++ b/webapp/sass/responsive/_tablet.scss
@@ -212,12 +212,14 @@
             }
         }
     }
+
     .post {
         .attachment {
             .attachment__image {
                 &.attachment__image--openraph {
                     max-height: 70px;
                     max-width: 300px;
+
                     &.loading {
                         height: 70px;
                     }
@@ -229,6 +231,10 @@
 
 // Tablet and desktop
 @media screen and (min-width: 768px) {
+    .col-sm-auto {
+        float: left;
+    }
+
     .second-bar {
         display: none;
     }
diff --git a/webapp/sass/routes/_admin-console.scss b/webapp/sass/routes/_admin-console.scss
index 4fe45d9b8..2d4ca6be1 100644
--- a/webapp/sass/routes/_admin-console.scss
+++ b/webapp/sass/routes/_admin-console.scss
@@ -78,7 +78,7 @@
 
     .log__panel {
         background-color: white;
-        border: 1px solid #ddd;
+        border: $border-gray;
         height: calc(100vh - 200px);
         margin-top: 10px;
         overflow: scroll;
@@ -180,7 +180,7 @@
 
     .banner {
         background: $white;
-        border: 1px solid #ddd;
+        border: $border-gray;
         font-size: .95em;
         margin: 2em 0;
         padding: .8em 1.5rem;
@@ -535,11 +535,34 @@
 .manage-teams {
     .manage-teams__user {
         align-items: center;
-        border-bottom-color: lightgray;
-        border-bottom-style: solid;
-        border-bottom-width: 1px;
         display: flex;
-        padding-bottom: 15px;
+    }
+
+    .manage-teams__teams {
+        border-top: $border-gray;
+        margin: 1em 0 .3em;
+
+        .btn-link {
+            &.danger {
+                color: #c55151;
+            }
+        }
+    }
+
+    .member-row--padded {
+        padding-left: 20px;
+
+        strong {
+            margin-right: 10px;
+        }
+    }
+
+    .manage-row--inner {
+        padding: 15px 0 4px;
+
+        & + div {
+            border-top: $border-gray;
+        }
     }
 
     .manage-teams__profile-picture {
@@ -573,21 +596,31 @@
         padding-right: 10px;
     }
 
+    .manage-teams__teams {
+        margin-top: 1em;
+
+        .manage-row__empty {
+            padding: 9px 0;
+        }
+    }
+
     .manage-teams__team {
         align-items: center;
+        border-bottom: $border-gray;
         display: flex;
-        padding: 10px;
-    }
+        padding: 7px 10px;
 
-    .manage-teams__team + .manage-teams__team {
-        border-top-color: lightgray;
-        border-top-style: solid;
-        border-top-width: 1px;
+        .btn {
+            font-size: .9em;
+        }
+
+        .dropdown {
+            padding: 6px 0;
+        }
     }
 
     .manage-teams__team-name {
         flex: 1;
-        font-weight: bold;
         overflow: hidden;
         text-overflow: ellipsis;
     }
diff --git a/webapp/sass/routes/_settings.scss b/webapp/sass/routes/_settings.scss
index 3c5565194..f33417200 100644
--- a/webapp/sass/routes/_settings.scss
+++ b/webapp/sass/routes/_settings.scss
@@ -360,6 +360,22 @@
                     padding: 0;
                 }
 
+                .setting-box__item {
+                    &:first-child {
+                        padding-top: 3px;
+                    }
+
+                    &:last-child {
+                        hr {
+                            display: none;
+                        }
+                    }
+                }
+
+                .setting-box__token-id {
+                    margin: 4px 0;
+                }
+
                 .setting-list__hint {
                     margin-top: 20px;
                 }
diff --git a/webapp/sass/utils/_modifiers.scss b/webapp/sass/utils/_modifiers.scss
index aa89fc107..467b9a086 100644
--- a/webapp/sass/utils/_modifiers.scss
+++ b/webapp/sass/utils/_modifiers.scss
@@ -1,33 +1,105 @@
 @charset 'UTF-8';
 
-.margin--right {
-    margin-right: 5px;
+.padding-top {
+    padding-top: 7px;
 
     &.x2 {
-        margin-right: 10px;
+        padding-top: 14px;
+    }
+
+    &.x3 {
+        padding-top: 21px;
+    }
+}
+
+.padding-bottom {
+    padding-bottom: 7px;
+
+    &.x2 {
+        padding-bottom: 14px;
+    }
+
+    &.x3 {
+        padding-bottom: 21px;
+    }
+
+    .control-label {
+        font-weight: 600;
+
+        &.text-left {
+            text-align: left;
+        }
     }
 }
 
-.margin--left {
-    margin-left: 5px;
+.padding-left {
+    padding-left: 7px;
 
     &.x2 {
-        margin-left: 10px;
+        padding-left: 14px;
+    }
+
+    &.x3 {
+        padding-left: 21px;
     }
 }
 
-.padding--right {
-    padding-right: 5px;
+.padding-right {
+    padding-right: 7px;
 
     &.x2 {
-        padding-right: 10px;
+        padding-right: 14px;
+    }
+
+    &.x3 {
+        padding-right: 21px;
     }
 }
 
-.padding--left {
-    padding-left: 5px;
+.margin-right {
+    margin-right: 7px;
 
     &.x2 {
-        padding-left: 10px;
+        margin-right: 14px;
+    }
+
+    &.x3 {
+        margin-right: 21px;
+    }
+}
+
+.margin-left {
+    margin-left: 7px;
+
+    &.x2 {
+        margin-left: 14px;
+    }
+
+    &.x3 {
+        margin-left: 21px;
+    }
+}
+
+.margin-top {
+    margin-top: 7px;
+
+    &.x2 {
+        margin-top: 14px;
+    }
+
+    &.x3 {
+        margin-top: 21px;
+    }
+}
+
+.margin-bottom {
+    margin-bottom: 7px;
+
+    &.x2 {
+        margin-bottom: 14px;
+    }
+
+    &.x3 {
+        margin-bottom: 21px;
     }
 }