segmented buttons states and styles

src/features/history-chart/HistoryChartAvgLineModeControl.tsx

@@ -8,19 +8,19 @@ type HistoryChartAvgLineModeControlProps = {
 const AVG_LINE_MODES: Array<{ value: AvgLineMode; label: string }> = [
   { value: 'auto', label: 'Авто' },
   { value: 'show', label: 'Рисовать' },
-  { value: 'hide', label: 'Не рисовать' },
+  { value: 'hide', label: 'Скрывать' },
 ];
 
 export function HistoryChartAvgLineModeControl({ value, onChange }: HistoryChartAvgLineModeControlProps) {
   return (
-    <div className="archive-avgline-mode-control" aria-label="Режим соединительной линии avg">
-      <span>Линия avg</span>
+    <div className="archive-toolbar-segmented-control archive-avgline-mode-control" aria-label="Режим соединительной линии avg">
+      <span>Соединительная линия</span>
       <div className="segmented history-chart-line-mode">
         {AVG_LINE_MODES.map((mode) => (
           <button
             key={mode.value}
             type="button"
-            className={mode.value === value ? 'history-chart-line-mode__button--active' : undefined}
+            className={mode.value === value ? 'segmented__button--active' : undefined}
             onClick={() => onChange(mode.value)}
             aria-pressed={mode.value === value}
           >