Merge pull request #55 from ParkTrack-Project/AnalyticsPanel

style: polish analytics refresh and fullscreen camera previews

Author: 666mxvbee

src/pages/AnalyticsPage.tsx

@@ -1097,9 +1097,22 @@ function AnalyticsFiltersPanel({
       <div className="section-panel analytics-controls-panel">
         <div className="analytics-toolbar">
           <div className="analytics-refresh-control">
-            <Button type="button" variant="ghost" className="analytics-refresh-button" onClick={onRefresh} disabled={loading}>
-              <span className="analytics-refresh-icon" aria-hidden="true">↻</span>
-              <span>Обновить</span>
+            <Button
+              type="button"
+              variant="ghost"
+              className="analytics-refresh-button"
+              onClick={onRefresh}
+              disabled={loading}
+              aria-label={loading ? 'Обновление данных' : 'Обновить данные'}
+              title={loading ? 'Обновление данных' : 'Обновить данные'}
+            >
+              <svg
+                className={`analytics-refresh-icon${loading ? ' loading' : ''}`}
+                viewBox="0 0 24 24"
+                aria-hidden="true"
+              >
+                <path d="M20 11a8.1 8.1 0 0 0-15.5-2M4 4v5h5M4 13a8.1 8.1 0 0 0 15.5 2M20 20v-5h-5" />
+              </svg>
             </Button>
             <Select
               className="analytics-toolbar-select analytics-refresh-select"

src/styles.css

@@ -70,13 +70,38 @@ body { background: var(--bg); color: var(--text); font-family: Inter, system-ui,
 }
 
 .analytics-refresh-button {
+  width: 46px;
+  min-width: 46px;
   min-height: 42px;
+  padding: 0;
   border-radius: 8px 0 0 8px;
+  color: var(--accent);
+  background: #f1f8f3;
+}
+
+.analytics-refresh-button:hover:not(:disabled) {
+  color: #fff;
+  background: var(--accent);
 }
 
 .analytics-refresh-icon {
-  font-size: 21px;
-  line-height: 1;
+  width: 22px;
+  height: 22px;
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 2;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+
+.analytics-refresh-icon.loading {
+  animation: analytics-refresh-spin 0.9s linear infinite;
+}
+
+@keyframes analytics-refresh-spin {
+  to {
+    transform: rotate(360deg);
+  }
 }
 
 .analytics-toolbar-select {
@@ -585,13 +610,23 @@ body { background: var(--bg); color: var(--text); font-family: Inter, system-ui,
 .analytics-snapshot-fullscreen-stage {
   min-height: 0;
   display: grid;
-  place-items: center;
+  place-items: stretch;
   overflow: hidden;
 }
 
+.analytics-snapshot-fullscreen-stage img {
+  width: 100%;
+  height: 100%;
+  max-width: none;
+  max-height: none;
+  object-fit: cover;
+}
+
 .analytics-snapshot-fullscreen-state {
   color: #fff;
   font-weight: 700;
+  align-self: center;
+  justify-self: center;
 }
 
 .fullscreen-close {
@@ -1675,7 +1710,7 @@ hr { border: none; height: 1px; background: var(--border); margin: 10px 0; }
   width: 100%;
   height: 100%;
   min-height: 0;
-  object-fit: contain;
+  object-fit: cover;
   border-color: rgba(255, 255, 255, 0.18);
 }