website: quickview file loading page revised

Author: huiwanpnnl

docs/.vitepress/theme/style.css

@@ -0,0 +1,6 @@
+.img-right {
+  float: right;
+  margin-left: 12px;
+  margin-bottom: 8px;   /* adds space below so text doesn’t hug the bottom edge */
+  width: var(--img-width, 10%);
+}

docs/guides/quickview/file_selection.md

@@ -1,19 +1,26 @@
 # Selecting Files for Analysis
 
 QuickView can be used in two modes:
-a **new-viz mode** for starting a new visualization or
-a **resume mode** for continuing an earlier analysis saved in a state file.
+- a **new-viz mode** for starting a new visualization or
+- a **resume mode** for continuing an earlier analysis saved in a state file.
 
 ## New-viz mode: starting a new visualization
 
-![File loading window](./screenshots/file-upload-outline.svg){ width="8%", align=right }
+<!-- ![File loading window](./screenshots/file-upload-outline.svg){ width="8%", align=right } -->
+
+<img src="file-upload-outline.svg"
+     alt="File loading window"
+     class="img-right"
+     style="--img-width: 5%;" />
+
 When QuickView is launched using a shell command or the desktop bundle,
-or when the user clicks the "File loading" icon on the toolbar (or `F` key),
+or when the user clicks the "File loading" icon on the toolbar,
 the a dialogue window like the screenshot below will be brought up.
 The user is expected to select a connecitivy file and at least one a simulation data file
 from the file system.
 
-![File loading window](./screenshots/file_loading_dialogue.png){ width="50%", align=right }
+![File loading window](./screenshots/file_loading_dialogue.png){ width="80%", align=center }
+
 The user can single-click a file name and then click the "simulation" or "connectivity"
 button to clarify file type, and repeat these two clicks to have both files specified.
 
@@ -31,34 +38,33 @@ on the left showing a list of recognized variables in the simulation file
 and the viewport on the right showing the landing page.
 The user can now start to search for and load variables to inspect.
 
+![File loaded](./screenshots/file_loaded.png){ width="80%", align=center }
+
 
 ## Resume mode: pick up where you left off
 
 ::: error TO-DO: check and explain state file download and upload
 :::
 
-::: info "Info: What's in a State File?"
-
-    A state file is a JSON file that contains the paths and names of
-    the connectivity and data files being used as well as the settings
-    the user has chosen for the visualization; the *contents* of the
-    connectivity and simulation files are *not* included.
-
-    If a state file is shared among multiple users or used across different
-    file systems, or if a user wants to apply the same visualization settings
-    to a different simulation data file, then the file names and paths
-    at the beginning of the state file need to be edited before the state
-    file is loaded in the app.
+::: info Info: What's in a State File?
+A state file is a JSON file that contains the paths and names of
+the connectivity and data files being used as well as the settings
+the user has chosen for the visualization; the *contents* of the
+connectivity and simulation files are *not* included.
+
+If a state file is shared among multiple users or used across different
+file systems, or if a user wants to apply the same visualization settings
+to a different simulation data file, then the file names and paths
+at the beginning of the state file need to be edited before the state
+file is loaded in the app.
 :::
 
-::: warning "Tip: State File Loading Error"
-
-    If the app seems nonresponsive after a state file has been chosen
-    and the `Open` button in the dialogue window has been clicked,
-    there is a high chance that the paths and names of
-    the connectivity and simulation data files contain errors.
-    The user should consider using a text editor to inspect the first
-    few lines of the state file and verify correctness.
+::: warning Tip: State File Loading Error
+If the app seems nonresponsive after a state file has been chosen
+and the `Open` button in the dialogue window has been clicked,
+there is a high chance that the paths and names of
+the connectivity and simulation data files contain errors.
+The user should consider using a text editor to inspect the first
+few lines of the state file and verify correctness.
 :::
 
-