enhance capsule list UI for better view of preview links

assets/styles/app.scss

@@ -100,6 +100,7 @@ $orange-button-bt: #FA772E;
   text-decoration: none;
   text-transform: uppercase;
   font-size: 18px;
+  color: $link-color;
 }
 
 .remove-link {

templates/capsule/index.html.twig

@@ -50,9 +50,9 @@
         <div class="capsule-item pb-4 col-12 col-sm-11 col-md-10 col-xxl-8">
             <div class="d-flex flex-column flex-md-row justify-content-center align-items-center mt-sm-4">
                 <div class="list-item">
-                    <a href="{{ path('preview_capsule', { 'path': capsule.getLinkPath() } ) }}" class="capsule-title">
+                    <div class="capsule-title">
                         {{ capsule.getName() }}
-                    </a>
+                    </div>
                 </div>
                 <div class="list-item text-capitalize">
                     {{ 'capsule.by'|trans }}
@@ -72,7 +72,15 @@
                 </div>
 
                 <div class="d-flex flex-column justify-content-center m-2 pe-2">
-                <i class="fa-thin fa-gears"></i>
+                    <div class="list-item text-nowrap">
+                        <a href="{{ path('preview_capsule', { 'path': capsule.getLinkPath() }) }}"
+                           class="links text-decoration-none"
+                           target="_blank">
+                            <i class="fas fa-eye m-2"></i>
+                            {{ 'capsule.preview.link'|trans }}
+                        </a>
+                    </div>
+
 
                     <div class="list-item text-nowrap">
                         <a href="{{ path('edit_capsule_editors', {'capsule_id': capsule.getId()}) }}"
@@ -123,6 +131,8 @@
                             {{ 'capsule.edit.link'|trans }}
                         </button>
                     </a>
+
+
                 </div>
             </div>
         </div>

translations/messages.en.yaml

@@ -92,6 +92,8 @@ capsule:
     text: Do you really want to delete the capsule %capsule_name%?
     success: Capsule capsule_name was deleted successfully
     error: You don't have the permission to delete this capsule
+  preview:
+    link: Preview
 
 project:
   already_exists: Project capsule_name already exists so the capsule could not be created

translations/messages.fr.yaml

@@ -91,6 +91,8 @@ capsule:
     text: Souhaitez-vous vraiment supprimer la capsule %capsule_name% ?
     success: La capsule capsule_name a bien été supprimée
     error: Vous n'avez pas les droits nécessaires pour supprimer cette capsule
+  preview:
+    link: Visualiser
 
 project:
   already_exists: Le projet capsule_name existe déjà. La capsule n'a pas pu être créée