update web app config in docs

Author: clovis

docs/configure_web_app.md

@@ -9,36 +9,36 @@ title: Configuring the Web Application
 
 # <a name="layout"></a>Layout of a PhiloLogic Web Application Instance
 
-This database directory contains:
-
--   The indexes and other data strutures
--   The web application, which includes server-side Python runtime functions and the AngularJS client application
-
-Here is what the database directory looks like after a load:
+Each loaded database contains its own copy of the web application and data. Here is what the database directory looks like after a load:
 
 <pre><code>
 database/
-├── app
-├── data
-│   ├── db.locals.py
-│   ├── frequencies
-│   ├── index
-│   ├── index.1
-│   ├── load_config.py
-│   ├── src
-│   ├── TEXT
-│   ├── toms.db
-│   └── web_config.cfg
-├── reports
-└── scripts
+├── app/                    # Vue.js client application
+│   ├── src/
+│   │   └── assets/styles/
+│   │       └── theme.module.scss
+│   ├── dist/               # Built frontend (generated by npm run build)
+│   ├── appConfig.json
+│   ├── package.json
+│   └── vite.config.js
+├── data/
+│   ├── db.locals.py        # Database-level settings
+│   ├── web_config.cfg      # Web application configuration
+│   ├── load_config.py      # Load-time configuration (read-only after load)
+│   ├── frequencies/        # Word frequency data
+│   ├── words.lmdb          # Word index (LMDB)
+│   ├── toms.db             # Metadata (SQLite)
+│   ├── TEXT/               # Source XML files
+│   └── hitlists/           # Cached query results
+├── custom_functions/       # User-defined Python functions
+└── favicon.ico
 </code></pre>
 
-There are four distinct sections inside the application:
+There are three main sections:
 
--   The `app/` directory: this contains the web client, and is organized according to functionality and shared components.
--   The `data/`directory contains all the indexes and SQLite tables needing for search and retrieval, as well as database and web configuration files.
--   The `reports/` directory, which contains the major search reports which fetch data from the database by interfacing with the core library, and then return a specialized results report as a JSON object. These reports include concordance, KWIC (Key Word In Context), collocation, and time series.
--   The `scripts/` directory, which contains standalone CGI scripts that are called directly from JavaScript code on the client side. These functions have a very specialized purpose, such as returning the total number of hits for any given query.
+-   The `app/` directory contains the Vue.js web client. The `src/` subdirectory has the source code, and `dist/` contains the built production files served to browsers.
+-   The `data/` directory contains all indexes, LMDB databases, SQLite tables, and configuration files needed for search and retrieval.
+-   The `custom_functions/` directory allows you to override or extend the default server-side behavior with custom Python functions.
 
 # <a name="ui"></a>Modifying the behavior of the Web Application
 
@@ -58,8 +58,20 @@ Once access control has been turned on, PhiloLogic will check the `access_file`
 ## <a name="changing-theme"></a>Changing the Web Application theme
 Changing the Web Application theme requires editing the `theme.module.scss` file which can be found in the database directory under `app/src/assets/styles/`.
 
-The `theme.module.scss` file is a Sass stylesheet which makes use of global variables to define the main colors used in the web app. All you should need to do is edit `$header-color`, `$button-color`, `$button-color-active`, `$link-color`. Once you've edited the theme file, you will need to rebuild the web application. In order to do so, go to the `app/` directory and run the following command in the terminal:
+The `theme.module.scss` file is a Sass stylesheet which uses global variables to define the main colors used in the web app. The key variables are:
+
+```scss
+$header-color: rgb(95, 2, 2);          // Navigation bar background
+$button-color: rgb(173, 66, 66);       // Primary buttons, form elements
+$button-color-active: rgba(160, 55, 55, 0.9);  // Active/hover state
+$link-color: rgb(156, 60, 60);         // Hyperlinks and text accents
+$passage-color: rgb(155, 65, 55);      // Search result highlights
+$card-header-color: rgb(173, 66, 66);  // Card and table headers
 ```
+
+Once you've edited the theme file, rebuild the web application by running the following command from the `app/` directory:
+
+```bash
 npm run build
 ```
 
@@ -137,4 +149,3 @@ aggregation_config = [
     },
 ]
 ```
-