INSTANCE: Add fontawesom

instance/index.html

@@ -8,6 +8,7 @@
         <script src="../style/bootstrap-4.5.2-dist/js/bootstrap.min.js"></script>
         <link rel="stylesheet" href="../style/bootstrap-4.5.2-dist/css/bootstrap.min.css">
         <link rel="stylesheet" href="../style/css/instance.css">
+        <link rel="stylesheet" href="../style/fontawesome-free-5.15.1-web/css/all.min.css">
         <script src="./main.js"></script>
         <style>
             ::-webkit-scrollbar {

instance/main.js

@@ -36,11 +36,11 @@ function createButtonList(list) {
     list.forEach( (btn) => {
         if (btn[0] == "left") {
             renderHtmlLeft = `${renderHtmlLeft}
-                              <button id="${btn[2]}" type="button" class="btn btn-outline-primary p-2 bd-highlight">${btn[1]}</button>`;
+                              <button id="${btn[2]}" type="button" class="btn btn-primary p-2 bd-highlight">${btn[1]}</button>`;
             logger.debug(`Create button for "${btn[1]}" with id "${btn[2]} at the left"`);
         } else if (btn[0] == "right") {
             renderHtmlRight = `${renderHtmlRight}
-                               <button id="${btn[2]}" type="button" class="btn btn-outline-primary p-2 bd-highlight">${btn[1]}</button>`;
+                               <button id="${btn[2]}" type="button" class="btn btn-primary p-2 bd-highlight">${btn[1]}</button>`;
             logger.debug(`Create button for "${btn[1]}" with id "${btn[2]} at the right"`);
         }
     });
@@ -61,6 +61,10 @@ ipcRenderer.on("reload-db-responce", (event, arg) => {
             <span class="karaElement text-uppercase p-2 bd-highlight badge badge-light"><b>${kara.cat}</b></span>
             <span class="karaElement text-uppercase p-2 bd-highlight badge badge-info"><b>${kara.type}</b></span>
             <div class="p-2 bd-highlight mr-auto">${kara.source}<br> ${kara.title} <i>[${kara.author}]</i></div>
+            <div class="p-2 bd-highlight">
+                <button class="btn btn-outline-light"><i class="fas fa-plus"></i></button>
+                <button class="btn btn-outline-light"><i class="fas fa-angle-double-up"></i></button>
+            </div>
             </div>`;
     });
     document.getElementById("panelLeft").innerHTML = karaList;

style/fontawesome-free-5.15.1-web/LICENSE.txt

+Font Awesome Free License
+-------------------------
+
+Font Awesome Free is free, open source, and GPL friendly. You can use it for
+commercial projects, open source projects, or really almost whatever you want.
+Full Font Awesome Free license: https://fontawesome.com/license/free.
+
+# Icons: CC BY 4.0 License (https://creativecommons.org/licenses/by/4.0/)
+In the Font Awesome Free download, the CC BY 4.0 license applies to all icons
+packaged as SVG and JS file types.
+
+# Fonts: SIL OFL 1.1 License (https://scripts.sil.org/OFL)
+In the Font Awesome Free download, the SIL OFL license applies to all icons
+packaged as web and desktop font files.
+
+# Code: MIT License (https://opensource.org/licenses/MIT)
+In the Font Awesome Free download, the MIT license applies to all non-font and
+non-icon files.
+
+# Attribution
+Attribution is required by MIT, SIL OFL, and CC BY licenses. Downloaded Font
+Awesome Free files already contain embedded comments with sufficient
+attribution, so you shouldn't need to do anything additional when using these
+files normally.
+
+We've kept attribution comments terse, so we ask that you do not actively work
+to remove them from files, especially code. They're a great way for folks to
+learn about Font Awesome.
+
+# Brand Icons
+All brand icons are trademarks of their respective owners. The use of these
+trademarks does not indicate endorsement of the trademark holder by Font
+Awesome, nor vice versa. **Please do not use brand logos for any purpose except
+to represent the company, product, or service to which they refer.**