New styles for various empty states

stylesheets/_modules.scss

@@ -58,6 +58,11 @@
     width: 128px;
   }
 
+  &.module-img--80 {
+    height: 80px;
+    width: 80px;
+  }
+
   &.module-logo-blue {
     background-color: $color-ultramarine-icon;
   }
@@ -5312,41 +5317,6 @@ button.module-calling-participants-list__contact {
   }
 }
 
-.module-left-pane__empty {
-  align-items: center;
-  display: flex;
-  height: 100%;
-  justify-content: center;
-  padding-block: 0;
-  padding-inline: 32px;
-  text-align: center;
-
-  .module-left-pane--width-narrow & {
-    display: none;
-  }
-
-  &--composer_icon {
-    align-items: center;
-    background-color: $color-gray-05;
-    border-radius: 100%;
-    display: inline-flex;
-    height: 28px;
-    justify-content: center;
-    margin-bottom: -2px;
-    margin-inline-start: 4px;
-    vertical-align: bottom;
-    width: 28px;
-
-    &--icon {
-      $icon: '../images/icons/v3/compose/compose.svg';
-      @include color-svg($icon, $color-gray-90);
-      display: inline-block;
-      height: 16px;
-      width: 16px;
-    }
-  }
-}
-
 .module-left-pane__header {
   flex-grow: 0;
   flex-shrink: 0;

stylesheets/components/CallsTab.scss

@@ -44,11 +44,12 @@
   align-items: center;
   justify-content: center;
   flex-direction: column;
+  padding-block: 78px 28px;
 }
 
 .CallsTab__EmptyStateIcon {
-  width: 56px;
-  height: 56px;
+  width: 40px;
+  height: 40px;
   opacity: 0.7;
   @include light-theme {
     @include color-svg('../images/icons/v3/phone/phone.svg', $color-gray-60);
@@ -62,6 +63,7 @@
   margin-block: 12px 0;
   margin-inline: 0;
   opacity: 0.7;
+  text-align: center;
   @include light-theme {
     color: $color-gray-60;
   }
@@ -70,6 +72,26 @@
   }
 }
 
+.CallsTab__EmptyState__ActionIcon {
+  vertical-align: text-top;
+  display: inline-block;
+
+  width: 16px;
+  height: 16px;
+  @include light-theme {
+    @include color-svg(
+      '../images/icons/v3/phone/phone-plus-bold.svg',
+      $color-gray-60
+    );
+  }
+  @include dark-theme {
+    @include color-svg(
+      '../images/icons/v3/phone/phone-plus-bold.svg',
+      $color-gray-25
+    );
+  }
+}
+
 .CallsTab__ConversationCallDetails {
   display: block;
   overflow: auto;

stylesheets/components/Inbox.scss

@@ -35,6 +35,10 @@
   }
 }
 
+.Inbox__no-conversation-open .module-splash-screen__logo {
+  margin: 0;
+}
+
 .Inbox__logo {
   flex-shrink: 0;
 
@@ -78,3 +82,20 @@
     opacity: 1;
   }
 }
+
+.Inbox__welcome {
+  margin-block: 20px 6px;
+
+  @include font-title-medium;
+  line-height: 24px;
+}
+
+.Inbox__whatsnew {
+  margin: 0;
+}
+
+// To center the content relative left pane
+.Inbox__padding {
+  flex-grow: 1;
+  max-height: 28px;
+}

stylesheets/components/NavSidebar.scss

@@ -222,3 +222,41 @@
   margin-bottom: 8px;
   gap: 12px;
 }
+
+.NavSidebarEmpty {
+  position: absolute;
+  top: 0;
+  inset-inline-start: 0;
+  pointer-events: none; // since this is going to overlap with the navbar header
+  // we don't want it to capture any clicks.
+
+  align-items: center;
+  display: flex;
+  width: 100%;
+  height: 100%;
+  justify-content: center;
+  padding-block: 0;
+  padding-inline: 32px;
+  text-align: center;
+
+  .module-left-pane--width-narrow & {
+    display: none;
+  }
+}
+
+.NavSidebarEmpty__inner {
+  padding-block: 100px 28px;
+}
+
+.NavSidebarEmpty__title {
+  margin-block: 0px 6px;
+
+  @include font-title-medium;
+  color: $color-gray-45;
+}
+
+.NavSidebarEmpty__subtitle {
+  margin-block: 0;
+
+  color: $color-gray-45;
+}

stylesheets/components/Stories.scss

@@ -123,6 +123,8 @@
     flex: 1;
     justify-content: center;
     opacity: 0.7;
+    padding-block: 78px 28px;
+
     @include light-theme {
       color: $color-gray-60;
     }
@@ -130,23 +132,41 @@
       color: $color-gray-25;
     }
 
-    &__stories {
-      height: 56px;
-      margin-bottom: 22px;
-      width: 56px;
+    &__icon {
+      margin-bottom: 12px;
+      width: 40px;
+      height: 40px;
       @include light-theme {
         @include color-svg(
-          '../images/icons/v3/stories/stories-display.svg',
+          '../images/icons/v3/stories/stories-display-bold.svg',
           $color-gray-60
         );
       }
       @include dark-theme {
         @include color-svg(
-          '../images/icons/v3/stories/stories-display.svg',
+          '../images/icons/v3/stories/stories-display-bold.svg',
           $color-gray-25
         );
       }
     }
+
+    &__text {
+      text-align: center;
+    }
+
+    &__text__action {
+      vertical-align: text-top;
+      display: inline-block;
+
+      width: 16px;
+      height: 16px;
+      @include light-theme {
+        @include color-svg('../images/icons/v3/plus/plus.svg', $color-gray-60);
+      }
+      @include dark-theme {
+        @include color-svg('../images/icons/v3/plus/plus.svg', $color-gray-25);
+      }
+    }
   }
 
   &__hidden-stories {