fixed some dialogs

src/components/dialogs/CancelDialog.jsx

@@ -12,9 +12,6 @@ type Props = {
 export class CancelDialog extends React.Component<Props, void> {
   cancel = () => {
     this.props.stopEditing();
-    // editor.cancelEditing();
-    // this.props.setEditing(false);
-    // this.props.setMode(MODES.NONE);
   };
 
   proceed = () => {
@@ -31,6 +28,9 @@ export class CancelDialog extends React.Component<Props, void> {
             <Icon icon="icon-cancel-1" />
             <div className="big upper">Закрыть редактор?</div>
           </div>
+        </div>
+        <div className="helper cancel-helper">
+          <div className="helper__text" />
           <div className="helper__buttons">
             <div className="button router-helper__button" onClick={this.cancel}>
               Удалить измения

src/components/dialogs/RouterDialog.jsx

@@ -9,54 +9,71 @@ type Props = {
 }
 
 const noPoints = ({ routerCancel }: Props) => (
-  <div className="helper router-helper">
+  <React.Fragment>
-    <div className="helper__text">
+    <div className="helper router-helper">
-      <Icon icon="icon-pin-1" />
+      <div className="helper__text">
-      <div className="big white upper">
+        <Icon icon="icon-pin-1" />
-        Укажите первую точку на карте
+        <div className="big white upper">
+          Укажите первую точку на карте
+        </div>
       </div>
     </div>
-    <div className="helper__buttons">
+    <div className="helper router-helper">
-      <div className="button router-helper__button" onClick={routerCancel}>
+      <div className="helper__buttons flex_1">
-        Отмена
+        <div className="flex_1" />
+        <div className="button router-helper__button" onClick={routerCancel}>
+          Отмена
+        </div>
       </div>
     </div>
-  </div>
+  </React.Fragment>
 );
 
 const firstPoint = ({ routerCancel }: Props) => (
-  <div className="helper router-helper">
+  <React.Fragment>
-    <div className="helper__text">
+    <div className="helper router-helper">
-      <Icon icon="icon-pin-1" />
+      <div className="helper__text">
-      <div className="big white upper">УКАЖИТЕ СЛЕДУЮЩУЮ ТОЧКУ</div>
+        <Icon icon="icon-pin-1" />
-    </div>
+        <div className="big white upper">УКАЖИТЕ СЛЕДУЮЩУЮ ТОЧКУ</div>
-    <div className="helper__buttons">
-      <div className="button router-helper__button" onClick={routerCancel}>
-        Отмена
       </div>
     </div>
-  </div>
+    <div className="helper router-helper">
+      <div className="helper__buttons flex_1">
+        <div className="flex_1" />
+        <div className="button router-helper__button" onClick={routerCancel}>
+          Отмена
+        </div>
+      </div>
+    </div>
+  </React.Fragment>
 );
 
 const draggablePoints = ({ routerCancel, routerSubmit }: Props) => (
-  <div className="helper router-helper">
+  <React.Fragment>
-    <div className="helper__text success">
+    <div className="helper">
-      <Icon icon="icon-check-1" />
+      <div className="helper__text success">
-      <div className="big upper">Продолжайте маршрут</div>
+        <Icon icon="icon-check-1" />
-    </div>
+        <div className="big upper">Продолжайте маршрут</div>
-    <div className="helper__buttons button-group">
-      <div className="button button_red router-helper__button" onClick={routerCancel}>
-        Отмена
-      </div>
-      <div className="button primary router-helper__button" onClick={routerSubmit}>
-        Применить
       </div>
     </div>
-  </div>
+    <div className="helper router-helper">
+      <div className="helper__buttons button-group flex_1">
+        <div className="flex_1" />
+        <div className="button button_red router-helper__button" onClick={routerCancel}>
+          Отмена
+        </div>
+        <div className="button primary router-helper__button" onClick={routerSubmit}>
+          Применить
+        </div>
+      </div>
+    </div>
+  </React.Fragment>
 );
 
-export const RouterDialog = ({ routerPoints, routerCancel, routerSubmit, width }: Props) => (
+export const RouterDialog = ({
-  <div className="control-dialog control-dialog-big" style={{ width }}>
+  routerPoints, routerCancel, routerSubmit, width
+}: Props) => (
+  <div className="control-dialog" style={{ width }}>
     {!routerPoints && noPoints({ routerCancel })}
     {routerPoints === 1 && firstPoint({ routerCancel })}
     {routerPoints >= 2 && draggablePoints({ routerCancel, routerSubmit })}

src/components/dialogs/TrashDialog.jsx

@@ -13,13 +13,15 @@ type Props = {
 export const TrashDialog = ({
   clearPoly, clearStickers, clearAll, clearCancel, width,
 }: Props) => (
-  <div className="control-dialog control-dialog-big" style={{ width }}>
+  <div className="control-dialog" style={{ width }}>
     <div className="helper trash-helper">
       <div className="helper__text danger">
         <Icon icon="icon-trash-4" />
         <div className="big upper desktop-only">Удалить:</div>
       </div>
-      <div className="helper__buttons">
+    </div>
+    <div className="helper trash-helper">
+      <div className="helper__buttons flex_1">
         <div className="button-group">
           <div className="button router-helper__button" onClick={clearPoly}>
             Маршрут
@@ -31,6 +33,7 @@ export const TrashDialog = ({
             ВСЕ
           </div>
         </div>
+        <div className="flex_1" />
         <div className="button primary router-helper__button" onClick={clearCancel}>
           Отмена
         </div>

src/styles/panel.less

@@ -235,6 +235,18 @@
     }
   }
 
+  .helper:first-child {
+    border-radius: @panel_radius @panel_radius 0 0;
+  }
+
+  .helper:last-child {
+    border-radius: 0 0 @panel_radius @panel_radius;
+  }
+
+  .helper:only-child {
+    border-radius: @panel_radius;
+  }
+
 }
 
 .control-dialog-provider {
@@ -255,7 +267,7 @@
   display: flex;
 
   background: #222222;
-  border-radius: @panel_radius;
+  //border-radius: @panel_radius;
   box-shadow: @bar_shadow;
 
   @media (max-width: @mobile_breakpoint) {
@@ -304,6 +316,10 @@
   }
 }
 
+.flex_1 {
+  flex: 1;
+}
+
 .helper__buttons {
   display: flex;
   align-items: center;