Refactor styles and class names in multiple components, update color variables, and adjust button and control styles.

- Simplify class names in the SingleAlert component and update color variables.
- Update class names and color variables in the Dialog component.
- Update color variables in the constants file.
- Update color variables and class names in the index.css file.
- Update class names and color variables in the PageComponent file.
- Add a color variable for shared blur styles.
- Update Tailwind CSS configuration to include new color variables.

Note: These changes improve code readability and maintain color consistency throughout the application.

src/frontend/tailwind.config.js

@@ -28,6 +28,7 @@ module.exports = {
         'btn-shadow': "var(--round-btn-shadow)",
         'build-trigger': "var(--build-trigger)",
         'chat-trigger': "var(--chat-trigger)",
+        'blur-shared': "var(--blur-shared)",
         'dark-blue': "var(--dark-blue)",
         'dark-gray': "var(--dark-gray)",
         'dark-red': "var(--dark-red)",
@@ -36,6 +37,8 @@ module.exports = {
         'high-dark-gray': "var(--high-dark-gray)",
         'high-indigo': "var(--high-indigo)",
         'high-light-gray': "var(--high-light-gray)",
+        'info-background': "var(--info-background)",
+        'info-foreground': "var(--info-foreground)",
         'light-blue': "var(--light-blue)",
         'light-gray': "var(--light-gray)",
         'light-slate': "var(--light-slate)",