fix draw and add new design

src/App.vue

@@ -27,11 +27,17 @@ const savePng = async () => {
 <template>
   <div class="container">
     <Sidebar>
-      <Input v-model="hMargin">Отступ для горизонтальных линий, мм</Input>
-      <Input v-model="vMargin">Отступ для вертикальных линии, мм</Input>
-      <Input v-model="imageWidth">Высота изображения, мм</Input>
-      <Input v-model="imageHeight">Ширина изображения, мм</Input>
-      <button @click="savePng">Сохранить png</button>
+      <div class="l-sidebar-block">
+        <h1>Линии</h1>
+        <Input v-model="vMargin">Отступ по горизонтали, мм</Input>
+        <Input v-model="hMargin">Отступ по вертикали, мм</Input>
+      </div>
+      <div class="l-sidebar-block">
+        <h1>Изображение</h1>
+        <Input v-model="imageHeight">Высота, мм</Input>
+        <Input v-model="imageWidth">Ширина, мм</Input>
+        <button class="l-button" @click="savePng">Сохранить как png</button>
+      </div>
     </Sidebar>
     <Page>
       <Canvas :vMargin="vMargin" :hMargin="hMargin" :imageWidth="imageWidth" :imageHeight="imageHeight" />
@@ -53,9 +59,37 @@ html {
   align-items: center;
   height: 100vh;
   width: 100vw;
+  font-family: MPLUS1p, sans-serif;
 }
 
 body {
   background-color: aqua;
 }
+
+.l-button {
+  color: #22333B;
+  background-color: #EAE0D5;
+  border: 1px solid #5E503F;
+  border-radius: 10px;
+  margin: 5px;
+  padding: 10px;
+}
+
+@font-face {
+  font-family: 'MPLUS1p';
+  font-style: normal;
+  src: local('MPLUS1p'), url(/fonts/ttf/MPLUS1p-Light.ttf) format('truetype');
+}
+
+h1 {
+  color: #C6AC8F;
+}
+
+.l-sidebar-block {
+  border: 1px solid #C6AC8F;
+  border-radius: 10px;
+  margin: 0 0 30px 0;
+  padding: 20px;
+  background-color: white;
+}
 </style>