From b7806fc210fda02a3a00e34fa11d7c0a06a55c48 Mon Sep 17 00:00:00 2001
From: Pranav Raj S <pranav@chatwoot.com>
Date: Tue, 13 Jul 2021 18:54:33 +0530
Subject: [PATCH] fix: Update styles to fix the image resolution on smaller
 devices (#2618)

---
 .../assets/scss/views/settings/channel.scss         | 13 ++++++-------
 .../dashboard/components/widgets/ChannelItem.vue    |  2 +-
 .../dashboard/i18n/locale/en/inboxMgmt.json         |  4 ++--
 .../routes/dashboard/settings/inbox/ChannelList.vue |  7 ++++++-
 .../dashboard/settings/inbox/InboxChannels.vue      |  2 +-
 5 files changed, 16 insertions(+), 12 deletions(-)

diff --git a/app/javascript/dashboard/assets/scss/views/settings/channel.scss b/app/javascript/dashboard/assets/scss/views/settings/channel.scss
index 80400bb71..c22888ba5 100644
--- a/app/javascript/dashboard/assets/scss/views/settings/channel.scss
+++ b/app/javascript/dashboard/assets/scss/views/settings/channel.scss
@@ -8,12 +8,12 @@
   .channel {
     @include flex;
     @include padding($space-normal $zero);
-    @include margin($zero);
     @include background-white;
     @include border-light;
-    flex-direction: column;
+
     cursor: pointer;
-    border-right-color: $color-white;
+    flex-direction: column;
+    margin: -1px;
     transition: all 0.200s ease-in;
 
     &:last-child {
@@ -32,14 +32,13 @@
 
     img {
       @include margin($space-normal auto);
-      flex: 1;
       width: 50%;
     }
 
-    .channel__title{
-      font-size: $font-size-large;
-      text-align: center;
+    .channel__title {
       color: $color-body;
+      font-size: var(--font-size-default);
+      text-align: center;
       text-transform: capitalize;
     }
 
diff --git a/app/javascript/dashboard/components/widgets/ChannelItem.vue b/app/javascript/dashboard/components/widgets/ChannelItem.vue
index 8e9f1455e..e612fa14b 100644
--- a/app/javascript/dashboard/components/widgets/ChannelItem.vue
+++ b/app/javascript/dashboard/components/widgets/ChannelItem.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="small-3 columns channel"
+    class="small-6 medium-4 large-3 columns channel"
     :class="{ inactive: !isActive }"
     @click="onItemClick"
   >
diff --git a/app/javascript/dashboard/i18n/locale/en/inboxMgmt.json b/app/javascript/dashboard/i18n/locale/en/inboxMgmt.json
index 74203a4bb..aef8d1309 100644
--- a/app/javascript/dashboard/i18n/locale/en/inboxMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/en/inboxMgmt.json
@@ -173,8 +173,8 @@
         "FINISH_MESSAGE": "Start forwarding your emails to the following email address."
       },
       "AUTH": {
-        "TITLE": "Channels",
-        "DESC": "Currently, we support Website live chat widgets, Facebook Pages, Twitter profiles and Whatsapp as platforms. We have more platforms like Email, Telegram and Line in the works, which will be out soon."
+        "TITLE": "Choose a channel",
+        "DESC": "Chatwoot supports live-chat widget, Facebook page, Twitter profile, Whatsapp, Email etc., as channels. If you want to build a custom channel, you can create it using the API channel. Select one channel from the options below to proceed."
       },
       "AGENTS": {
         "TITLE": "Agents",
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/ChannelList.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/ChannelList.vue
index 0ee3b8f03..086b2f27a 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/ChannelList.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/ChannelList.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="wizard-body small-9 columns">
+  <div class="wizard-body small-12 medium-9 columns height-auto">
     <page-header
       :header-title="$t('INBOX_MGMT.ADD.AUTH.TITLE')"
       :header-content="$t('INBOX_MGMT.ADD.AUTH.DESC')"
@@ -77,3 +77,8 @@ export default {
   },
 };
 </script>
+<style scoped>
+.height-auto {
+  height: auto;
+}
+</style>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/InboxChannels.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/InboxChannels.vue
index ddc6f6e20..18bd8a6af 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/InboxChannels.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/InboxChannels.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="row content-box full-height">
     <woot-wizard
-      class="small-3 columns"
+      class="hide-for-small-only medium-3 columns"
       :global-config="globalConfig"
       :items="items"
     />