Improve capsules preview links with icons

package-lock.json

@@ -6,6 +6,7 @@
         "": {
             "license": "UNLICENSED",
             "dependencies": {
+                "@fortawesome/fontawesome-free": "^5.15.4",
                 "autoprefixer": "^10.4.0",
                 "postcss-loader": "^6.2.0",
                 "pubsub-js": "^1.9.4"
@@ -2329,6 +2330,15 @@
                 "punycode": "^2.1.0"
             }
         },
+        "node_modules/@fortawesome/fontawesome-free": {
+            "version": "5.15.4",
+            "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free/-/fontawesome-free-5.15.4.tgz",
+            "integrity": "sha512-eYm8vijH/hpzr/6/1CJ/V/Eb1xQFW2nnUKArb3z+yUWv7HTwj6M7SP957oMjfZjAHU6qpoNc2wQvIxBLWYa/Jg==",
+            "hasInstallScript": true,
+            "engines": {
+                "node": ">=6"
+            }
+        },
         "node_modules/@humanwhocodes/config-array": {
             "version": "0.9.2",
             "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.9.2.tgz",
@@ -14259,6 +14269,11 @@
                 }
             }
         },
+        "@fortawesome/fontawesome-free": {
+            "version": "5.15.4",
+            "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free/-/fontawesome-free-5.15.4.tgz",
+            "integrity": "sha512-eYm8vijH/hpzr/6/1CJ/V/Eb1xQFW2nnUKArb3z+yUWv7HTwj6M7SP957oMjfZjAHU6qpoNc2wQvIxBLWYa/Jg=="
+        },
         "@humanwhocodes/config-array": {
             "version": "0.9.2",
             "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.9.2.tgz",

package.json

@@ -29,6 +29,7 @@
         "lint": "eslint --config .eslintrc --ext .js capsule-prototype"
     },
     "dependencies": {
+        "@fortawesome/fontawesome-free": "^5.15.4",
         "autoprefixer": "^10.4.0",
         "postcss-loader": "^6.2.0",
         "pubsub-js": "^1.9.4"

templates/capsule/index.html.twig

@@ -57,24 +57,28 @@
                         </iframe>
                     </div>
 
-                <div class="d-flex flex-column justify-content-center m-2">
+                <div class="d-flex flex-column justify-content-center m-2 pe-2">
+                    <i class="fa-thin fa-gears"></i>
 
-                    <div class="list-item">
-                        <a href="" class="links">
+                    <div class="list-item text-nowrap">
+                        <a href="" class="links text-decoration-none">
+                            <i class="fas fa-cog m-2"></i>
                             Edit permissions
                         </a>
                     </div>
-                    <div class="list-item">
-                        <a href="" class="links">
+                    <div class="list-item text-nowrap">
+                        <a href="" class="links text-decoration-none">
+                            <i class="far fa-clone m-2"></i>
                             Duplicate capsule
                         </a>
                     </div>
-                    <div class="list-item">
-                        <a href="" class="links">
+                    <div class="list-item text-nowrap">
+                        <a href="/delete_capsule" class="links text-decoration-none">
+                            <i class="fas fa-trash m-2"></i>
                             Delete capsule
                         </a>
                     </div>
-                    <a href="capsule/edit/{{ capsule.getLinkPath() }}" class="list-item text-nowrap pe-2 ps-2 lh-md">
+                    <a href="capsule/edit/{{ capsule.getLinkPath() }}" class="list-item text-nowrap lh-md">
                         <button class="standard-button p-2">
                             Edit capsule
                         </button>

templates/layout.html.twig

@@ -8,6 +8,8 @@
       {{ encore_entry_link_tags('app') }}
     {% endblock %}
 
+    <script src="https://kit.fontawesome.com/1291d95447.js" crossorigin="anonymous"></script>
+
   {% block javascripts %}
     {{ encore_entry_script_tags('app') }}
   {% endblock %}
@@ -34,7 +36,6 @@
           </div>
         {% endif %}
     </div>
-
   </div>
 
 {%  block connexion %} {% endblock %}