From cb113c4bdb762b7efb98c4ac6a8e506f35f4cdfc Mon Sep 17 00:00:00 2001
From: artoscinote <85488244+artoscinote@users.noreply.github.com>
Date: Mon, 11 Jul 2022 10:54:18 +0200
Subject: [PATCH] Change reordering icons [SCI-6953] (#4208)

---
 app/assets/stylesheets/shared/icons.scss                | 5 +++++
 app/javascript/vue/protocol/container.vue               | 2 +-
 app/javascript/vue/protocol/step.vue                    | 2 +-
 app/javascript/vue/protocol/step_elements/checklist.vue | 2 +-
 app/javascript/vue/protocol/step_elements/table.vue     | 2 +-
 app/javascript/vue/protocol/step_elements/text.vue      | 2 +-
 6 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/app/assets/stylesheets/shared/icons.scss b/app/assets/stylesheets/shared/icons.scss
index 385095033..30d510e12 100644
--- a/app/assets/stylesheets/shared/icons.scss
+++ b/app/assets/stylesheets/shared/icons.scss
@@ -15,3 +15,8 @@
     fill: inherit;
   }
 }
+
+.fas-rotated-90 {
+  display: inline-block;
+  transform: rotate(90deg);
+}
diff --git a/app/javascript/vue/protocol/container.vue b/app/javascript/vue/protocol/container.vue
index ced78aa9e..37f936525 100644
--- a/app/javascript/vue/protocol/container.vue
+++ b/app/javascript/vue/protocol/container.vue
@@ -82,7 +82,7 @@
            @click="startStepReorder"
            @keyup.enter="startStepReorder"
            tabindex="0" >
-            <span class="fas fa-arrows-alt-v" aria-hidden="true"></span>
+            <i class="fas fas-rotated-90 fa-exchange-alt" aria-hidden="true"></i>
             <span>{{ i18n.t("protocols.reorder_steps.button") }}</span>
         </a>
       </div>
diff --git a/app/javascript/vue/protocol/step.vue b/app/javascript/vue/protocol/step.vue
index 4078b639f..2f4c346bf 100644
--- a/app/javascript/vue/protocol/step.vue
+++ b/app/javascript/vue/protocol/step.vue
@@ -102,7 +102,7 @@
                 {{ i18n.t('protocols.steps.options_dropdown.title') }}
               </li>
               <li v-if="urls.reorder_elements_url" class="action"  @click="openReorderModal" :class="{ 'disabled': elements.length < 2 }">
-                <i class="fas fa-arrows-alt-v"></i>
+                <i class="fas fas-rotated-90 fa-exchange-alt"></i>
                 {{ i18n.t('protocols.steps.options_dropdown.rearrange') }}
               </li>
               <li v-if="urls.delete_url" class="action" @click="showDeleteModal">
diff --git a/app/javascript/vue/protocol/step_elements/checklist.vue b/app/javascript/vue/protocol/step_elements/checklist.vue
index 58ea68ccb..d99490e79 100644
--- a/app/javascript/vue/protocol/step_elements/checklist.vue
+++ b/app/javascript/vue/protocol/step_elements/checklist.vue
@@ -2,7 +2,7 @@
   <div class="step-checklist-container">
     <div class="step-element-header" :class="{ 'locked': locked, 'editing-name': editingName }">
       <div v-if="reorderElementUrl" class="step-element-grip" @click="$emit('reorder')">
-        <i class="fas fa-grip-vertical"></i>
+        <i class="fas fas-rotated-90 fa-exchange-alt"></i>
       </div>
       <div class="step-element-name">
         <InlineEdit
diff --git a/app/javascript/vue/protocol/step_elements/table.vue b/app/javascript/vue/protocol/step_elements/table.vue
index e8ae78286..d450b7a09 100644
--- a/app/javascript/vue/protocol/step_elements/table.vue
+++ b/app/javascript/vue/protocol/step_elements/table.vue
@@ -2,7 +2,7 @@
   <div class="step-table-container">
      <div class="step-element-header" :class="{ 'editing-name': editingName }">
       <div v-if="reorderElementUrl" class="step-element-grip" @click="$emit('reorder')">
-        <i class="fas fa-grip-vertical"></i>
+        <i class="fas fas-rotated-90 fa-exchange-alt"></i>
       </div>
       <div class="step-element-name">
         <InlineEdit
diff --git a/app/javascript/vue/protocol/step_elements/text.vue b/app/javascript/vue/protocol/step_elements/text.vue
index fd3485da5..5a1118e27 100644
--- a/app/javascript/vue/protocol/step_elements/text.vue
+++ b/app/javascript/vue/protocol/step_elements/text.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="step-text-container" :class="{ 'edit': inEditMode }" @keyup.enter="enableEditMode($event)" tabindex="0">
     <div v-if="reorderElementUrl" class="element-grip" @click="$emit('reorder')">
-      <i class="fas fa-grip-vertical"></i>
+      <i class="fas fas-rotated-90 fa-exchange-alt"></i>
     </div>
     <div class="buttons-container">
       <button v-if="element.attributes.orderable.urls.update_url" class="btn icon-btn btn-light" tabindex="-1" @click="enableEditMode($event)">