diff --git a/.github/pull_request_template.md b/.github/pull_request_template.md new file mode 100644 index 00000000..8e950a23 --- /dev/null +++ b/.github/pull_request_template.md @@ -0,0 +1,19 @@ +## Describe your changes + +Briefly describe the changes you made and their purpose. + +## Issue number + +Mention the issue number(s) this PR addresses (e.g., #123). + +## Please ensure all items are checked off before requesting a review: + +- [ ] I deployed the code locally. +- [ ] I have performed a self-review of my code. +- [ ] I have included the issue # in the PR. +- [ ] I have labelled the PR correctly. +- [ ] The issue I am working on is assigned to me. +- [ ] I didn't use any hardcoded values (otherwise it will not scale, and will make it difficult to maintain consistency across the application). +- [ ] I made sure font sizes, color choices etc are all referenced from the theme. +- [ ] My PR is granular and targeted to one specific feature. +- [ ] I took a screenshot or a video and attached to this PR if there is a UI change. diff --git a/README.md b/README.md index a7bf2ff9..2906a297 100644 --- a/README.md +++ b/README.md @@ -29,6 +29,87 @@ This is a work-in-progress application. The source code is available under GNU A - [Node.js](https://nodejs.org/en) - [PostgreSQL](https://postgresql.org) + +## Installation + +1. Make sure Docker is installed to your machine where the server will run. +2. Make sure git is installed to your machine Git. +3. Make sure nginx is installed. + +4. Clone GitHub Repository + +``` +cd ~ +git clone https://github.com/bluewave-labs/bluewave-onboarding.git +cd bluewave-onboarding +``` + +5. Configure Nginx + +Open the Nginx configuration file: + +``sudo nano /etc/nginx/sites-available/onboarding-demo`` + +Add the following configuration. Change YOUR_DOMAIN_NAME with your domain name: + +```server { + listen 80; + server_name YOUR_DOMAIN_NAME; + return 301 https://$host$request_uri; + } + +server { + listen 443 ssl; + server_name YOUR_DOMAIN_NAME; + ssl_certificate /etc/letsencrypt/live/YOUR_DOMAIN_NAME/fullchain.pem; + ssl_certificate_key /etc/letsencrypt/live/YOUR_DOMAIN_NAME/privkey.pem; + include /etc/letsencrypt/options-ssl-nginx.conf; + ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; + + location / { + proxy_pass http://localhost:4173; + proxy_set_header Host $host; + proxy_set_header X-Real-IP $remote_addr; + proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; + proxy_set_header X-Forwarded-Proto $scheme; + } + + location /api/ { + proxy_pass http://localhost:3000; + proxy_set_header Host $host; + proxy_set_header X-Real-IP $remote_addr; + proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; + proxy_set_header X-Forwarded-Proto $scheme; + } +} +``` + + +6. Create a symbolic link to enable the configuration: + +``sudo ln -s /etc/nginx/sites-available/onboarding-demo /etc/nginx/sites-enabled/`` + +7. Install Certbot and its Nginx plugin: + +``sudo apt install certbot python3-certbot-nginx`` + +8. Obtain SSL Certificate. Run Certbot to obtain a certificate for your domain: + +``sudo certbot --nginx`` + +9. Verify the Nginx configuration: + +``sudo nginx -t`` + +10. Restart Nginx to apply the changes: + +``sudo systemctl restart nginx`` + +11. Start the project + +``cd ~/bluewave-onboarding +docker compose up -d`` + ## Contributing Here's how you can contribute to the Onboarding product. diff --git a/frontend/src/components/RichTextEditor/Toolbar/EditorToolbar.jsx b/frontend/src/components/RichTextEditor/Toolbar/EditorToolbar.jsx index e477b800..c043b2c2 100644 --- a/frontend/src/components/RichTextEditor/Toolbar/EditorToolbar.jsx +++ b/frontend/src/components/RichTextEditor/Toolbar/EditorToolbar.jsx @@ -56,12 +56,18 @@ const Toolbar = ({ editor }) => { @@ -70,6 +76,10 @@ const Toolbar = ({ editor }) => { disabled={ !editor.can().chain().focus().toggleHeading({ level: 2 }).run() } + style = {{ + backgroundColor: editor.isActive("heading", {level:3}) + ? "#e0e0e0" : "transparent", + }} > </Button> @@ -79,12 +89,20 @@ const Toolbar = ({ editor }) => { <Button onClick={() => editor.chain().focus().toggleBulletList().run()} disabled={!editor.can().chain().focus().toggleBulletList().run()} + style = {{ + backgroundColor : editor.isActive("bulletList") ? "#e0e0e0" : "transparent", + + }} > <FormatListBulleted /> </Button> <Button onClick={() => editor.chain().focus().toggleOrderedList().run()} disabled={!editor.can().chain().focus().toggleOrderedList().run()} + + style = {{ + backgroundColor : editor.isActive("orderedList") ? "#e0e0e0" : "transparent", + }} > <FormatListNumbered /> </Button>