Improve visibility, add short description of the color picker to about

Author: NetroScript

html/src/App.svelte

@@ -116,7 +116,7 @@
   <div class="h-full mx-auto flex flex-row" transition:fade>
     {#if validTemplate}
       {#if $currentMemoryRegion != null && !('isPlaceHolder' in $currentMemoryRegion)}
-        <div out:fade={{ duration: 200 }} in:slide>
+        <div out:fade={{ duration: 200 }} in:slide class="w-full">
           <VisualizeMemoryRegion MemoryRegion={$currentMemoryRegion} />
         </div>
       {:else}

html/src/app.pcss

@@ -13,7 +13,7 @@ html:root {
 }
 
 .high-contrast-stroke {
-    -webkit-text-stroke: medium black;
+    -webkit-text-stroke: 1px black;
 }
 
 .high-contrast-text-shadow {

html/src/components/Layout.svelte

@@ -28,7 +28,7 @@
       type: 'alert',
       buttonTextCancel: 'Close',
       title: 'Information',
-      body: '<div class="overflow-y-auto">This is a Utility which allows you to visualize memory accesses on the GPU. Using a C++ Header only library you can export the necessary data. This is then visualized in the center screen. <br> You achieve the fastest loading times by dragging and dropping a <code>.json</code> into the empty window, as the parsing of just a file is much faster than using the HTML DOM parser on page load. <br><br>To the left side you can select the memory structure you want to visualize currently. On the bottom left, you can set a memory width, which will cause the cells to automatically align to that width, and break after this width. Y goes down. <br> When showing both read and write accesses, the upper part <div class="text-access-read inline">(blue)</div> are read accesses, the lower part <div class="text-access-write inline">(orange)</div> are write accesses. When toggling to total accesses, the <div class="text-access-all inline high-contrast-text-shadow-white">purple</div> block represents the combined read and write accesses.<br> When showing the index, it is visible to the left of the read/write counts. <br><br>On this top bar, you also have a few utility buttons to change what is visualized. They have tooltips on hover, but the best thing would be to just try out the different buttons. <br><br> This application is a single page app made with Svelte and skeleton.dev as UI framework.</div>'
+      body: '<div class="overflow-y-auto">This is a Utility which allows you to visualize memory accesses on the GPU. Using a C++ Header only library you can export the necessary data. This is then visualized in the center screen. <br> You achieve the fastest loading times by dragging and dropping a <code>.json</code> into the empty window, as the parsing of just a file is much faster than using the HTML DOM parser on page load. <br><br>To the left side you can select the memory structure you want to visualize currently. On the bottom left, you can set a memory width, which will cause the cells to automatically align to that width, and break after this width. Y goes down. <br> When showing both read and write accesses, the upper part <div class="text-access-read inline">(blue)</div> are read accesses, the lower part <div class="text-access-write inline">(orange)</div> are write accesses. When toggling to total accesses, the <div class="text-access-all inline high-contrast-text-shadow-white">purple</div> block represents the combined read and write accesses. You can also change the color from <div class="text-access-all inline high-contrast-text-shadow-white">purple</div> to a custom color mapping based on a cube helix mapping. For that click the colored icon in the top bar.<br> When showing the index, it is visible to the left of the read/write counts. <br><br>On this top bar, you also have a few utility buttons to change what is visualized. They have tooltips on hover, but the best thing would be to just try out the different buttons. <br><br> This application is a single page app made with Svelte and skeleton.dev as UI framework.</div>'
     });
   };
 

html/src/components/MemoryRegionBlock.svelte

@@ -42,7 +42,7 @@
   <div class="flex flex-col flex-1" title={'Index: ' + index}>
     {#if $pageState.showCombinedAccess}
       <div
-        class="flex-1 flex justify-center bg-access-all  font-black high-contrast-stroke items-center high-contrast-text-shadow content-cell"
+        class="!text-white flex-1 flex justify-center bg-access-all font-black high-contrast-stroke items-center high-contrast-text-shadow content-cell "
         style="--tw-bg-opacity: {totalOpacity};{$pageState.useCustomColorScheme
           ? 'background-color: ' + $cubeHelixLookup(totalOpacity) + ';'
           : ''}"