Merge pull request #133 from miksrv/develop

Refactoring UI component, upgraded main page

CHANGELOG.md

@@ -1,5 +1,23 @@
 # Changelog
 
+## 3.3.1
+
+### Path Changes
+
+-   Added animated weather icons
+-   Created SECURITY.md
+-   Updated UI libraries
+-   Removed unused UI Container component
+-   Removed unused UI Badge Component
+-   Updated locales
+-   Improved UI styles and themes
+-   Improved UI components styles
+-   Removed UI convertWindDirection function
+-   Changed main screen image
+-   Upgrade index page
+-   Updated UI WeatherIcon, Chart, WidgetSummary and WindDirection
+-   Updated README.md
+
 ## 3.3.0
 
 ### Minor Changes
@@ -17,4 +35,4 @@
 -   Improved Widgets, AppBar and Layouts components
 -   Removed unused UI components and install Simple React UI Kit library
 -   Added new UI ComparisonIcon Component
--   Added CI/CD release action
+-   Added CI/CD release action

README.md

@@ -7,8 +7,7 @@ Arduino Weather Station is an automated weather monitoring project built on Ardu
   <img src="https://miksoft.pro/_next/static/media/project-meteostation.3b4b51cb.jpg" alt="Arduino Weather Station" width="150" height="150">
 
 <h3>Arduino Weather Station</h3>
-<a href="https://github.com/miksrv/arduino-weather-station/blob/main/README.md"><strong>Explore the docs »</strong></a>
-<br /><br />
+
 <a href="https://meteo.miksoft.pro" target="_blank">Demo</a>
 ·
 <a href="https://github.com/miksrv/arduino-weather-station/issues/new?assignees=miksrv&labels=bug&projects=&template=1-bug.yml&title=%5BBug%5D%3A+">Report Bug</a>
@@ -196,7 +195,6 @@ cd arduino-weather-station
 
 ### 4. Arduino Setup
 
-
 1. Open [Arduino Readme](./arduino/README.md)
 2. Open the Arduino sketch from the `arduino` -> `main` folder in the Arduino IDE.
 3. Connect your Arduino microcontroller and upload the sketch.
@@ -368,6 +366,8 @@ This section is dedicated to recognizing the resources and individuals that have
 
 1. [CodeIgniter](https://codeigniter.com/user_guide/helpers/date_helper.html)
 2. [Simple React UI](https://github.com/miksrv/simple-react-ui-kit)
+3. [Weather Icons](https://erikflowers.github.io/weather-icons/)
+4. [Meteocons](https://bas.dev/work/meteocons)
 
 <p align="right">
   (<a href="#top">Back to top</a>)

SECURITY.md

@@ -0,0 +1,34 @@
+# Security Policy
+
+## Supported Versions
+
+This section lists the versions of the project that are currently supported with security updates.
+
+| Version | Supported          |
+| ------- | ------------------ |
+| 2.1.x   | :white_check_mark: |
+| 2.0.x   | :x:                |
+| 1.0.x   | :x:                |
+
+We only support the latest stable versions (2.1.x). If you are using an older version, please upgrade to receive the latest security patches.
+
+## Reporting a Vulnerability
+
+If you discover a vulnerability in the project, we would appreciate it if you could report it to us.
+
+### How to report a vulnerability:
+
+1. Email us at: `[email protected]` (replace with your actual email).
+2. Please provide as much detail as possible:
+   - A description of the vulnerability.
+   - Steps to reproduce it.
+   - Potential impact.
+   - The version of the project where you found the vulnerability.
+
+3. You can expect a confirmation of your report within 48 hours.
+4. We will investigate the issue, and if the vulnerability is confirmed, we will issue a fix as soon as possible. You will be kept informed throughout the process.
+5. We follow a policy of disclosing vulnerabilities only after a solution is ready and a fix is released. For critical issues, we may suggest temporary mitigations until the fix is deployed.
+
+## Acknowledgements
+
+We appreciate the community's help in improving the security of our project. Your reports make the project more secure and reliable.

client/components/app-bar/styles.module.sass

@@ -1,5 +1,3 @@
-@import ../../styles/variables
-
 .appBar
     color: var(--text-color-primary)
     height: 50px
@@ -19,7 +17,7 @@
     .wrapper
         display: flex
         max-width: var(--width-max)
-        background-color: var(--container-background)
+        background-color: var(--container-background-color)
         border-radius: var(--border-radius)
         box-shadow: var(--container-shadow)
         margin: 0 auto
@@ -52,7 +50,7 @@
             fill: var(--text-color-primary)
 
     .timeAgo
-        font-size: $fontSizeCaption
+        font-size: var(--font-size-small)
         color: var(--text-color-secondary)
 
     .online, .offline

client/components/app-layout/styles.module.sass

@@ -1,8 +1,6 @@
 @import ../../styles/variables
 @import ../../styles/animations
 
-$sideBarWidth: 280px
-
 @keyframes animation-sideBar-slideIn
     0%
         left: -$sideBarWidth
@@ -78,7 +76,7 @@ $sideBarWidth: 280px
         height: 100%
         width: 100%
         z-index: 500
-        background: $overlayBackground
+        background: var(--overlay-background)
         transition: opacity 167ms ease-out
 
         &.hidden
@@ -93,7 +91,7 @@ $sideBarWidth: 280px
 
     .sidebar
         position: fixed
-        background-color: var(--modal-background)
+        background-color: var(--container-background-color)
         width: $sideBarWidth
         height: 100vh
         z-index: 600

client/components/footer/styles.module.sass

@@ -1,7 +1,5 @@
-@import ../../styles/variables
-
 .footer
     text-align: left
     margin-top: 10px
-    font-size: $fontSizeCaption
+    font-size: var(--font-size-small)
     color: var(--text-color-secondary)

client/components/language-switcher/styles.module.sass

@@ -1,5 +1,3 @@
-@import ../../styles/variables
-
 .languageSwitcher
     display: flex