feat(frontend): refresh UI with warm fintech redesign

frontend/src/components/PeriodSelector.tsx

@@ -85,13 +85,13 @@ export function PeriodSelector({ period, onChange }: Props) {
   };
 
   return (
-    <div className="period-selector">
-      <div className="period-modes">
+    <div className="period-picker">
+      <div className="segmented-control">
         {(['week', 'month', 'year', 'custom'] as PeriodMode[]).map(
           (m) => (
             <button
               key={m}
-              className={`btn-preset ${period.mode === m ? 'active' : ''}`}
+              className={`segmented-control__button ${period.mode === m ? 'segmented-control__button--active' : ''}`}
               onClick={() => setMode(m)}
             >
               {MODE_LABELS[m]}
@@ -100,13 +100,18 @@ export function PeriodSelector({ period, onChange }: Props) {
         )}
       </div>
 
-      <div className="period-nav">
+      <div className="period-picker__nav">
         {period.mode !== 'custom' && (
-          <button className="btn-page" onClick={() => navigate(-1)}>
+          <button
+            className="icon-button"
+            onClick={() => navigate(-1)}
+            aria-label="Предыдущий период"
+            title="Предыдущий период"
+          >
             &larr;
           </button>
         )}
-        <div className="period-dates">
+        <div className="period-picker__dates">
           <input
             type="date"
             value={period.from}
@@ -114,7 +119,7 @@ export function PeriodSelector({ period, onChange }: Props) {
               onChange({ ...period, mode: 'custom', from: e.target.value })
             }
           />
-          <span className="filter-separator">&mdash;</span>
+          <span className="period-picker__separator">&mdash;</span>
           <input
             type="date"
             value={period.to}
@@ -124,7 +129,12 @@ export function PeriodSelector({ period, onChange }: Props) {
           />
         </div>
         {period.mode !== 'custom' && (
-          <button className="btn-page" onClick={() => navigate(1)}>
+          <button
+            className="icon-button"
+            onClick={() => navigate(1)}
+            aria-label="Следующий период"
+            title="Следующий период"
+          >
             &rarr;
           </button>
         )}