From 28fb6469a380941595065ce10919f5850a8e01a7 Mon Sep 17 00:00:00 2001
From: Sivin Varghese <64252451+sivin-git@users.noreply.github.com>
Date: Thu, 8 Apr 2021 19:42:03 +0530
Subject: [PATCH] Fix:  Alignment issue in activity message (#2057)

* Fixes alignment issue in activity message

* Codeclimate fixes

Co-authored-by: Nithin David Thomas <webofnithin@gmail.com>
---
 .../scss/widgets/_conversation-view.scss      | 28 +++++++++++++------
 .../widgets/conversation/bubble/Actions.vue   | 12 ++++++--
 2 files changed, 28 insertions(+), 12 deletions(-)

diff --git a/app/javascript/dashboard/assets/scss/widgets/_conversation-view.scss b/app/javascript/dashboard/assets/scss/widgets/_conversation-view.scss
index cd639b940..730cbb9b0 100644
--- a/app/javascript/dashboard/assets/scss/widgets/_conversation-view.scss
+++ b/app/javascript/dashboard/assets/scss/widgets/_conversation-view.scss
@@ -249,17 +249,27 @@
   }
 
   .activity-wrap {
-    @include flex;
-    @include margin($space-small auto);
-    @include padding($space-small $space-normal);
-    @include flex-align($x: center, $y: null);
-    background: lighten($warning-color, 32%);
-    border: 1px solid lighten($warning-color, 22%);
-    border-radius: $space-smaller;
-    font-size: $font-size-small;
+    background: var(--s-50);
+    border: 1px solid var(--s-100);
+    border-radius: var(--border-radius-medium);
+    display: flex;
+    font-size: var(--font-size-small);
+    justify-content: center;
+    margin: var(--space-small) var(--space-normal);
+    padding: var(--space-small) var(--space-normal);
 
-    .message-text__wrap {
+    @include breakpoint(xlarge up) {
+      margin: var(--space-small) auto;
+    }
+
+    .is-text {
       display: inline-block;
+      text-align: start;
+
+      @include breakpoint(xlarge up) {
+        display: flex;
+        text-align: center;
+      }
     }
   }
 }
diff --git a/app/javascript/dashboard/components/widgets/conversation/bubble/Actions.vue b/app/javascript/dashboard/components/widgets/conversation/bubble/Actions.vue
index f055b97cd..9c96d44a5 100644
--- a/app/javascript/dashboard/components/widgets/conversation/bubble/Actions.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/bubble/Actions.vue
@@ -95,6 +95,8 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+@import '~dashboard/assets/scss/app.scss';
+
 .right {
   .message-text--metadata {
     .time {
@@ -136,12 +138,16 @@ export default {
 
 .activity-wrap {
   .message-text--metadata {
-    display: inline-block;
-
     .time {
       color: var(--s-300);
+      display: flex;
+      text-align: center;
       font-size: var(--font-size-micro);
-      margin-left: var(--space-small);
+      margin-left: 0;
+
+      @include breakpoint(xlarge up) {
+        margin-left: var(--space-small);
+      }
     }
   }
 }