added project buttons

frontend/src/components/Button.svelte

@@ -0,0 +1,84 @@
+<!-- Create a button -->
+
+<script lang=ts>
+    import { createEventDispatcher, onDestroy } from 'svelte';
+    import * as SoftwareVariables from '../stores.js';
+    import Tooltip from './Tooltip.svelte';
+    import { _ } from 'svelte-i18n'
+
+    export let icon = "bxs-heart"; // The icon wanted 
+    export let width = "10em"; // The button width
+    export let height = "5em";
+    export let radius = "2em";
+    export let text = "Default text";
+    export let fontSize = '2em';
+    export let tooltip = "Default tooltip"; // The description shown in the tooltip
+
+    let tooltipMessage = tooltip
+
+    // Import the main colors from the store
+    let firstColor, secondColor, thirdColor, fourthColor, okColor, nokColor
+    const unsubscribeFirstColor = SoftwareVariables.firstColor.subscribe((value) => (firstColor = value));
+    const unsubscribeSecondColor = SoftwareVariables.secondColor.subscribe((value) => (secondColor = value));
+    const unsubscribeThirdColor = SoftwareVariables.thirdColor.subscribe((value) => (thirdColor = value));
+    const unsubscribeFourthColor = SoftwareVariables.fourthColor.subscribe((value) => (fourthColor = value));
+    const unsubscribeOkColor = SoftwareVariables.okColor.subscribe((value) => (okColor = value));
+    const unsubscribeNokColor = SoftwareVariables.nokColor.subscribe((value) => (nokColor = value));
+
+    // Default values for background and foreground
+    $: background = secondColor
+    $: foreground = fourthColor
+
+    // Emit a click event when the button is clicked
+    const dispatch = createEventDispatcher();
+    function emitClick() {
+        dispatch('click');
+    }
+
+    // Show a tooltip on mouse hover
+    let tooltipShowing = false
+    function toggleTooltip(){
+        tooltipShowing = !tooltipShowing
+    }
+
+    // Unsubscribe for all variables used from the store
+    onDestroy(() => {
+        unsubscribeFirstColor();
+        unsubscribeSecondColor();
+        unsubscribeThirdColor();
+        unsubscribeFourthColor();
+        unsubscribeOkColor();
+        unsubscribeNokColor();
+    })
+</script>
+
+<div>
+    <Tooltip message={tooltipMessage} show={tooltipShowing}></Tooltip>
+    <button
+    style="background-color:{background}; color:{foreground}; width:auto; height:auto; border-radius:0.4em;"
+    on:mousedown={emitClick}
+    on:mouseenter={toggleTooltip}
+    on:mouseleave={toggleTooltip}>
+    <span style='font-size:{fontSize}'>{text}</span>
+</button>
+</div>
+
+<style>
+    div{
+        display: inline-block;
+        position:relative;
+    }
+
+    button{
+        display: inline-block;
+        margin: 0;
+        border:none;
+        padding:0.2em;
+    }
+    button:hover{
+        box-shadow: 1px 1px 3px 0px rgba(0, 0, 0, 0.25) inset;
+    }
+    button:active{
+        background-color: red;
+    }
+</style>

frontend/src/components/Settings.svelte

@@ -1 +1,14 @@
-<h1>Project settings</h1>
+<script lang=ts>
+    import Button from './Button.svelte'
+    import { _ } from 'svelte-i18n'
+
+</script>
+
+<div>
+    <Button icon='heart' text={$_("newProjectText")} radius="2em" fontSize='1em'/>
+    <Button icon='heart' text={$_("openProjectText")} radius="2em" fontSize='1em'/>
+</div>
+
+<style>
+
+</style>

frontend/src/components/Tooltip.svelte

@@ -26,19 +26,40 @@
     })
 </script>
 
-<div style="background-color:{fourthColor}; display:{mustBeDisplayed}">
-    <p style="color:{firstColor};">{message}</p>
+<div style="background-color:{fourthColor}; display:{mustBeDisplayed} color:{message}">
+    {message}
 </div>
 
 <style>
-    div {
+    /* div {
         position: absolute;
+        width:auto;
+        height:auto;
+        top:100%;
+        left:150%;
         border-radius: 15px;
-        transform: translate(0, 200%);
-    }
-
-    p{
-        margin:5px;
-        font-size: 10px;
+        transform: translateX(-50%);
+        white-space: nowrap;
+        margin-top: 5px;
+        z-index: 1;
+    } */
+    div:hover::after {
+        position: absolute;
+        opacity: 0;
+        left: 0%;
+        animation: fadeIn 100ms cubic-bezier(0.42, 0, 0.62, 1.32) forwards;
+        left: 50%;
+        animation-delay: 100ms;
+        color: #707070;
+        background: #ffffff;
+        border-radius: 20px;
+        min-width: 200px;
+        max-width: 100%;
+        font-weight: 700;
+        text-transform: uppercase;
+        text-align: center;
+        font-size: 12px;
+        padding: 10px;
+        box-shadow: 0px 10px 33px #3333332e;
     }
 </style>

frontend/src/lang/en.json

@@ -6,5 +6,10 @@
   "showMenuTooltip": "Show mapping",
   "consoleMenuTooltip": "General console",
   "stageRenderingToggleTooltip": "Show/hide the rendering view",
-  "showActivationToggleTooltip": "Activate/Deactivate the play mode"
+  "showActivationToggleTooltip": "Activate/Deactivate the play mode",
+
+  "newProjectText": "New",
+  "newProjectTooltip": "New",
+  "openProjectText": "Open",
+  "openProjectTooltip": "Open"
 }