Update the designs of various components to current guidelines (#1570)

Author: musale

index.html

@@ -53,12 +53,13 @@
     <mgt-mock-provider></mgt-mock-provider>
 
     <mgt-login></mgt-login>
-    <mgt-person person-query="me" view="twoLines" person-card="hover" show-presence></mgt-person>
+    <mgt-person person-query="me" view="twoLines" person-card="click" show-presence></mgt-person>
     <mgt-people-picker></mgt-people-picker>
     <mgt-teams-channel-picker></mgt-teams-channel-picker>
     <mgt-tasks></mgt-tasks>
     <mgt-agenda group-by-day></mgt-agenda>
     <mgt-people show-presence></mgt-people>
     <mgt-todo></mgt-todo>
+    <mgt-file-list></mgt-file-list>
   </body>
 </html>

packages/mgt-components/src/components/mgt-agenda/mgt-agenda.scss

@@ -40,6 +40,7 @@ mgt-agenda .event {
   margin: var(--event-margin, 0px 10px 14px 10px);
   padding: var(--event-padding, 0px);
   display: flex;
+  border-radius: 8px;
 }
 
 :host .narrow .event,

packages/mgt-components/src/components/mgt-file-list/mgt-file-list.scss

@@ -23,8 +23,8 @@ $file-item-border-radius: var(--file-item-border-radius, 2px);
 $file-item-margin: var(--file-item-margin, 0 4px);
 $show-more-button-font-size: var(--show-more-button-font-size, 12px);
 $show-more-button-padding: var(--show-more-button-padding, 6px);
-$show-more-button-border-bottom-right-radius: var(--show-more-button-border-bottom-right-radius, 4px);
-$show-more-button-border-bottom-left-radius: var(--show-more-button-border-bottom-left-radius, 4px);
+$show-more-button-border-bottom-right-radius: var(--show-more-button-border-bottom-right-radius, 8px);
+$show-more-button-border-bottom-left-radius: var(--show-more-button-border-bottom-left-radius, 8px);
 $show-more-button-background-color: var(
   --show-more-button-background-color,
   set-var(background-color__sub2, $theme-default, $common)
@@ -50,6 +50,7 @@ mgt-file-item .file-list-wrapper {
   color: $color;
   display: flex;
   flex-direction: column;
+  border-radius: 8px;
 
   .file-list {
     display: flex;
@@ -74,6 +75,7 @@ mgt-file-item .file-list-wrapper {
       &:hover,
       &.focused {
         background-color: $file-item-background-color--hover;
+        border-radius: 4px;
 
         mgt-file {
           --file-background-color: $file-item-background-color--hover;

packages/mgt-components/src/components/mgt-login/mgt-login.scss

@@ -54,6 +54,7 @@ mgt-login .login-button {
     --color: #{$button__color--hover};
     background-color: $button__background-color--hover;
     --color-sub1: #{$button__color--hover};
+    border-radius: 4px;
   }
 
   &:focus {
@@ -84,6 +85,7 @@ mgt-login .popup {
   min-width: 240px;
   z-index: 1;
   color: set-var(popup__color, $theme-default, $login);
+  border-radius: 8px;
 
   mgt-person {
     --color-sub1: set-var(popup__color, $theme-default, $login);
@@ -95,6 +97,7 @@ mgt-login .popup-content {
   display: flex;
   flex-direction: column;
   padding: var(--popup-padding);
+  border-radius: 8px;
 }
 
 :host .popup-commands ul,

packages/mgt-components/src/components/mgt-people-picker/mgt-people-picker.scss

@@ -47,7 +47,6 @@ mgt-people-picker .root {
     display: flex;
     flex-wrap: wrap;
     vertical-align: middle;
-    margin: 0 8px;
     list-style-type: none;
     font-style: normal;
     font-weight: normal;
@@ -187,6 +186,7 @@ mgt-people-picker .root {
         list-style-type: none;
         background-color: $dropdown__background-color;
         max-height: var(--mgt-flyout-set-height, unset);
+        border-radius: 8px;
         li {
           cursor: pointer;
         }
@@ -200,7 +200,11 @@ mgt-people-picker .root {
             font-style: normal;
             font-weight: 600;
             font-size: 14px;
-            &:hover,
+            margin: var(--file-item-margin, 4px);
+            border-radius: 4px;
+            &:hover {
+              background-color: $dropdown-item__background-color--hover;
+            }
             &.focused {
               background-color: $dropdown-item__background-color--hover;
             }

packages/mgt-components/src/components/mgt-person-card/mgt-person-card.scss

@@ -24,14 +24,14 @@ $person-card-details-item-font-size: var(--person-card-details-item-font-size, 1
   overflow: hidden;
   user-select: none;
   box-shadow: set-var(box-shadow, $theme-default, $common);
-  border: 1px solid set-var(background-color__sub1, $theme-default, $common);
+  border-radius: 8px;
 
   .nav {
     height: 0px;
     position: relative;
     z-index: 100;
 
-    .nav__back {
+    &__back {
       padding: 8px;
       height: 32px;
       width: 32px;
@@ -96,11 +96,11 @@ $person-card-details-item-font-size: var(--person-card-details-item-font-size, 1
 
         span {
           margin-left: 8px;
-          color: #023B8F;
+          color: #023b8f;
         }
       }
       .icon:hover {
-        color: #012E7F;
+        color: #012e7f;
       }
     }
   }
@@ -117,6 +117,11 @@ $person-card-details-item-font-size: var(--person-card-details-item-font-size, 1
       height: 28px;
       background: $background-color;
       border-top: 1px solid set-var(line-seperator__color, $theme-default, $common);
+      svg {
+        path {
+          stroke: #1a1a1a;
+        }
+      }
     }
 
     .expanded-details-button:hover {
@@ -129,7 +134,7 @@ $person-card-details-item-font-size: var(--person-card-details-item-font-size, 1
     padding: 0 14px;
     border-bottom: 1px solid set-var(tab__line__color, $theme-default, $common);
 
-    .section-nav__icon {
+    &__icon {
       all: initial;
       box-sizing: border-box;
       width: 48px;
@@ -149,17 +154,21 @@ $person-card-details-item-font-size: var(--person-card-details-item-font-size, 1
 
       &:hover {
         background: set-var(tab__background-color--hover, $theme-default, $common);
-        border-color: set-var(tab__line__color--hover, $theme-default, $common);
       }
       &:focus {
         border-color: black;
       }
 
       &.active {
+        // border: none none none solid $icon--active;
         border-bottom-color: $icon--active;
-        border-left-color: transparent;
-        border-right-color: transparent;
-        border-top-color: transparent;
+        border-bottom-style: solid;
+        border-left-color: none;
+        border-right-color: none;
+        border-top-color: none;
+        border-top-style: none;
+        border-left-style: none;
+        border-right-style: none;
         svg {
           fill: $icon--active;
         }
@@ -187,7 +196,7 @@ $person-card-details-item-font-size: var(--person-card-details-item-font-size, 1
     border-bottom: 1px solid set-var(tab__line__color, $theme-default, $common);
     padding: 12px 10px 8px 10px;
 
-    .quick-message__input {
+    &__input {
       flex-grow: 1;
       padding-left: 8px;
       border: none;
@@ -196,7 +205,7 @@ $person-card-details-item-font-size: var(--person-card-details-item-font-size, 1
       background-color: set-var(background-color__sub2, $theme-default, $common);
     }
 
-    .quick-message__send {
+    &__send {
       all: initial;
       height: 32px;
       width: 32px;
@@ -235,20 +244,20 @@ $person-card-details-item-font-size: var(--person-card-details-item-font-size, 1
         bottom: 0;
       }
 
-      .section__header {
+      &__header {
         display: flex;
         flex-direction: row;
         padding: 0 20px;
       }
 
-      .section__title {
+      &__title {
         flex-grow: 1;
         color: set-var(title__color__subtitle, $theme-default, $common);
         font-size: 14px;
         font-weight: 600;
       }
 
-      .section__show-more {
+      &__show-more {
         color: $commblue_primary;
         font-size: 12px;
         font-weight: 600;
@@ -260,7 +269,7 @@ $person-card-details-item-font-size: var(--person-card-details-item-font-size, 1
         }
       }
 
-      .section__content {
+      &__content {
         margin-top: 14px;
       }
 

packages/mgt-components/src/components/mgt-person-card/sections/mgt-person-card-profile/mgt-person-card-profile.scss

@@ -36,7 +36,7 @@
       }
 
       .section__title {
-        font-size: 16px;
+        font-size: 14px;
         color: set-var(title__color__sub2, $theme-default, $common);
       }
 

packages/mgt-components/src/components/mgt-tasks-base/mgt-tasks-base.scss

@@ -157,6 +157,7 @@ $task-border-completed: var(--task-complete-border, 2px dotted inherit);
     padding: var(--task-padding, 0 0 0 0);
     background-color: $background-color;
     border: set-var(border, $theme-default, $tasks);
+    border-radius: 8px;
 
     .TaskContent {
       display: flex;

packages/mgt-components/src/components/mgt-tasks/mgt-tasks.ts

@@ -1213,7 +1213,6 @@ export class MgtTasks extends MgtTemplatedComponent {
           </div>
           ${taskOptions}
 
-          <div class="Divider"></div>
         </div>
       </div>
     `;

packages/mgt-components/src/components/mgt-teams-channel-picker/mgt-teams-channel-picker.scss

@@ -152,7 +152,7 @@
     padding-bottom: 11px;
     position: absolute;
     box-shadow: 0px 1.3289px 2.65781px rgba(180, 180, 180, 0.182), 0px 1.3289px 2.65781px rgba(68, 68, 68, 0.3);
-    border-radius: 2px;
+    border-radius: 8px;
     background-color: $dropdown__background-color;
     z-index: 1; /* Sit on top */
     width: 100%;
@@ -185,7 +185,8 @@
         flex-direction: row;
         align-items: center;
         padding: 5px 12px 6px 14px;
-        margin-top: 6px;
+        margin: 6px 4px 4px 4px;
+        border-radius: 4px;
         font-family: $font-family;
         font-style: normal;
         font-weight: 600;