chore: Refactor integrations pages for RTL (#6516)

* Refactor integrations

* Adjust spacing for integration item

---------

Co-authored-by: Nithin David <1277421+nithindavid@users.noreply.github.com>

app/javascript/dashboard/assets/scss/views/settings/integrations.scss

@@ -9,7 +9,6 @@
     .integration--image {
       display: flex;
       height: 10rem;
-      margin-right: $space-normal;
       width: 10rem;
 
       img {
@@ -18,12 +17,15 @@
       }
     }
 
-    .integration--title {
+    .integration--type {
-      font-size: $font-size-large;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      margin: 0 var(--space-normal);
     }
 
-    .integration--description {
+    .integration--title {
-      padding-right: $space-medium;
+      font-size: var(--font-size-large);
     }
 
     .button-wrap {

app/javascript/dashboard/routes/dashboard/settings/integrationapps/IntegrationItem.vue

@@ -3,11 +3,11 @@
     <div class="integration--image">
       <img :src="'/dashboard/images/integrations/' + integrationLogo" />
     </div>
-    <div class="column">
+    <div class="integration--type column">
       <h3 class="integration--title">
         {{ integrationName }}
       </h3>
-      <p class="integration--description">
+      <p>
         {{
           useInstallationName(
             integrationDescription,

app/javascript/dashboard/routes/dashboard/settings/integrationapps/SingleIntegrationHooks.vue

@@ -6,11 +6,11 @@
           <div class="integration--image">
             <img :src="'/dashboard/images/integrations/' + integration.logo" />
           </div>
-          <div class="column">
+          <div class="integration--type column">
             <h3 class="integration--title">
               {{ integration.name }}
             </h3>
-            <p class="integration--description">
+            <p>
               {{ integration.description }}
             </p>
           </div>

app/javascript/dashboard/routes/dashboard/settings/integrations/Integration.vue

@@ -3,11 +3,11 @@
     <div class="integration--image">
       <img :src="'/dashboard/images/integrations/' + integrationLogo" />
     </div>
-    <div class="column">
+    <div class="integration--type column">
       <h3 class="integration--title">
         {{ integrationName }}
       </h3>
-      <p class="integration--description">
+      <p>
         {{
           useInstallationName(
             integrationDescription,

app/javascript/dashboard/routes/dashboard/settings/integrations/IntegrationHelpText.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="row">
     <div class="column">
-      <div class="integration--description">
+      <div>
         <h5>{{ $t('INTEGRATION_SETTINGS.SLACK.HELP_TEXT.TITLE') }}</h5>
         <p>
           <span