added update ui checklist

Author: adamhindry

docs/customise_frontend.md

@@ -0,0 +1,75 @@
+Here’s a revised version of your README.md file:
+
+---
+
+# Project UI Customization Guide
+
+This guide provides a step-by-step checklist for updating key elements of the website UI, including color themes, example content, images, and disclaimer messages. Follow these instructions to tailor the interface to your project’s requirements.
+
+## 1. Updating the Website’s Color Theme
+
+The main color variables can be customized in `index.css`, located in the `frontend` directory. These variables control most of the color scheme throughout the site. Please note that it is recommended to keep the background color as is, as some elements may not respond to color changes while the code is in progress.
+
+### Key Color Variables:
+```css
+--primary-color: #3ce2db;
+--feedback-button: black;
+--disclaimer: #f5dfe3;
+--user-chat-bubble: #eaf5f7;
+--background: white;
+--example-container: #f7f7f7;
+--primary-dark: #2997b1;
+--link: #123bbb;
+```
+
+## 2. Replacing Images
+
+To update images, replace the existing image files with new images, ensuring they retain the same file names. This approach avoids the need for additional code changes.
+
+## 3. Modifying Example Questions, Capabilities, and Limitations
+
+Example questions, capabilities, and limitations are managed in `example.tsx`. Each list should include exactly three sentences for optimal UI alignment. Avoid overly long sentences, as they may impact layout and readability.
+
+## 4. Editing the Answer Disclaimer
+
+The answer disclaimer is currently set to:
+```html
+<b>IMPORTANT: </b>GovGPT is currently in a pilot stage and may include incomplete or incorrect content. Please ensure you check citations and verify answers with the relevant cited organizations.
+```
+To modify, edit the disclaimer text located at the bottom of `answer.tsx`.
+
+## 5. Customizing the Top Banner Disclaimer
+
+The top banner disclaimer currently reads:
+```html
+<b>IMPORTANT: </b> Responses from GovGPT may include incomplete or incorrect content. Make sure to check citations and verify answers with relevant cited organizations.
+```
+To change this, update the content at the bottom of `layout.tsx`.
+
+## 6. Updating the Terms & Conditions (T&C) Modal
+
+The T&C modal content is in `modal.tsx`. Customize the content within the `<DialogContent>` and `<DialogTitle>` tags.
+
+## 7. Editing the Subtitle Under the Logo
+
+The subtitle below the logo currently reads:
+```text
+Our pilot AI conversation tool. Experience the power of AI-generated answers to your small business questions—all grounded on public-facing government websites.
+```
+Edit this text in `chat.tsx`, lines 379-380.
+
+## 8. Updating the App Name in the Banner
+
+The app name displayed in the banner can be modified in `layout.tsx` on line 40.
+
+## 9. Changing the Placeholder Question
+
+The placeholder question is located in `chat.tsx` at line 455. Update it as needed.
+
+## 10. Updating the Website Title
+
+To change the website title, modify the `<title>` tag in `index.html`.
+
+---
+
+Following these steps will allow you to efficiently customize the UI for your specific project needs.