Smaller changes to the styling, altered topology layout to use more space

app.jl

@@ -165,7 +165,7 @@ include("./julia_imzML_visual.jl")
     @out plotlayoutImgTComp=layoutImg
     # Interface Plot Spectrum
     layoutSpectra=PlotlyBase.Layout(
-        title="SUM Spectrum plot",
+        title="Spectrum plot",
         xaxis=PlotlyBase.attr(
             title="<i>m/z</i>",
             showgrid=true
@@ -193,15 +193,15 @@ include("./julia_imzML_visual.jl")
 
     # Interface Plot Surface
     layoutContour=PlotlyBase.Layout(
-        title="2D Topographic Map",
+        title="2D Topographic map",
         xaxis=PlotlyBase.attr(
-            title="X",
+            visible=false,
             scaleanchor="y"
         ),
         yaxis=PlotlyBase.attr(
-            title="Y"
+            visible=false
         ),
-        margin=attr(l=0,r=0,t=120,b=0,pad=0)
+        margin=attr(l=0,r=0,t=100,b=0,pad=0)
     )
     # Dummy 2D surface plot
     traceContour=PlotlyBase.scatter(x=[], y=[], mode="lines")
@@ -212,7 +212,7 @@ include("./julia_imzML_visual.jl")
     # Interface Plot 3d
     # Define the layout for the 3D plot
     layout3D=PlotlyBase.Layout(
-        title="3D Surface Plot",
+        title="3D Surface plot",
         scene=attr(
             xaxis_title="X",
             yaxis_title="Y",

app.jl.html

@@ -1,6 +1,6 @@
 <template>
   <header id="header">
-    <img src="/css/LABI_logo.jpeg" alt="Labi Logo Icon" id="imgLogo">
+    <img src="/css/LABI_logo.png" alt="Labi Logo Icon" id="imgLogo">
     <div>
       <h4>Julia mzML imzML analysis GUI&nbsp;</h4>
       <h6>Please make sure the ibd, the mzML and the imzML files are located in the same directory and have the same
@@ -166,7 +166,7 @@
           <q-tab-panel name="tab0">
             <!-- Content for Tab 0 -->
             <!-- Btn image changer -->
-            <h6>Image Visualizer</h6>
+            <h6>Image visualizer</h6>
             <div>
               <q-btn id="btnStyle" icon="arrow_back" class="q-my-sm" v-on:click="imgMinus=true"></q-btn>
               <q-btn id="btnStyle" icon="arrow_forward" class="q-my-sm on-right" v-on:click="imgPlus=true"></q-btn>
@@ -187,7 +187,7 @@
           <q-tab-panel name="tab1">
             <!-- Content for Tab 1 -->
             <!-- Triq Btn image changer -->
-            <h6>TrIQ Visualizer</h6>
+            <h6>TrIQ visualizer</h6>
             <div>
               <q-btn id="btnStyle" icon="arrow_back" class="q-my-sm" v-on:click="imgMinusT=true"></q-btn>
               <q-btn id="btnStyle" icon="arrow_forward" class="q-my-sm on-right" v-on:click="imgPlusT=true"></q-btn>
@@ -242,7 +242,7 @@
   <q-dialog v-model="CompareDialog" full-width>
     <q-card>
       <q-card-section class="row">
-        <div class="text-h6 q-ma-sm">Compare two diferent images or plots in a larger screen</div>
+        <div class="text-h6 q-ma-sm">Compare two diferent images or plots</div>
         <div class="q-mx-sm">
           <q-slider color="black" v-model="imgTrans" :min="0.0" :max="1" :step="0.1" :disable="btnOpticalDisable" />
           <q-badge style="background-color: #009f90;"> Transparency: {{ imgTrans }}</q-badge>

config/env/global.jl

@@ -1 +1 @@
-ENV["GENIE_ENV"] = "dev"
+ENV["GENIE_ENV"] = "prod"

julia_imzML_visual.jl

@@ -254,15 +254,15 @@ function loadContourPlot(interfaceImg::String)
     Y=repeat(reshape(y, length(y), 1), 1, length(x))
                 
     layout=PlotlyBase.Layout(
-        title="2D Topographic Map of $cleaned_img",
+        title="2D topographic map of $cleaned_img",
         xaxis=PlotlyBase.attr(
-            title="X",
+            visible=false,
             scaleanchor="y"
         ),
         yaxis=PlotlyBase.attr(
-            title="Y"
+            visible=false
         ),
-        margin=attr(l=0,r=0,t=120,b=0,pad=0)
+        margin=attr(l=0,r=0,t=100,b=0,pad=0)
     )
     trace=PlotlyBase.contour(
         z=elevation_smoothed,
@@ -307,7 +307,7 @@ function loadSurfacePlot(interfaceImg::String)
     aspect_ratio=attr(x=1, y=length(y) / length(x), z=0.5)
     # Define the layout for the 3D plot
     layout3D=PlotlyBase.Layout(
-        title="3D Surface Plot of $cleaned_img",
+        title="3D surface plot of $cleaned_img",
         scene=attr(
             xaxis_nticks=x_nticks,
             yaxis_nticks=y_nticks,

public/css/genieapp.css

@@ -1,6 +1,11 @@
 #btnStyle {
     background: #009f90;
     color: rgb(229, 236, 246);
+    transition: background-color 0.3s ease;
+}
+
+#btnStyle:hover {
+    background-color: #007f72;
 }
 
 #imgInt {
@@ -29,7 +34,6 @@
     padding-right: 10px;
     padding-bottom: 10px;
     padding-left: 10px;
-    background-color: #eff2f5;
 }
 
 .custom-standout {
@@ -40,3 +44,7 @@
 #tabHeader {
     color: #009f90;
 }
+
+*{
+    font-family: 'Roboto', 'Lato', sans-serif;
+}