From 342246d77bd616960d1a2fbb7e810268b1cc4070 Mon Sep 17 00:00:00 2001
From: Fedorov Vladimir <vladimir.fodorow@gmail.com>
Date: Sun, 2 Jul 2023 22:34:05 +0700
Subject: [PATCH] update design

---
 src/App.vue                     | 4 +++-
 src/components/Button.vue       | 2 ++
 src/components/ButtonsBar.vue   | 2 +-
 src/components/Input.vue        | 4 ++--
 src/components/SidebarBlock.vue | 2 +-
 5 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 3242731..831ca6c 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -116,7 +116,9 @@ const rotatePage = () => {
             Повернуть
           </Button>
         </ButtonsBar>
-        <Button :click="savePng">Сохранить как png</Button>
+        <ButtonsBar>
+          <Button :click="savePng">Сохранить как png</Button>
+        </ButtonsBar>
       </SidebarBlock>
     </Sidebar>
   </div>
diff --git a/src/components/Button.vue b/src/components/Button.vue
index 727d4bb..3bbe0a6 100644
--- a/src/components/Button.vue
+++ b/src/components/Button.vue
@@ -31,6 +31,7 @@ withDefaults(defineProps<Props>(), {
   color: #22333B;
   background-color: #EAE0D5;
   border: 1px solid #5E503F;
+  width: 100%;
 }
 
 .button:hover {
@@ -42,5 +43,6 @@ withDefaults(defineProps<Props>(), {
   margin: 3px;
   padding: 2px 10px;
   font-size: 10pt;
+  width: auto;
 }
 </style>
diff --git a/src/components/ButtonsBar.vue b/src/components/ButtonsBar.vue
index 5dca330..7862c85 100644
--- a/src/components/ButtonsBar.vue
+++ b/src/components/ButtonsBar.vue
@@ -6,6 +6,6 @@
 
 <style scoped>
 .buttons-bar {
-  padding: 0 0 20px 5px;
+  padding: 15px 0 0 0;
 }
 </style>
diff --git a/src/components/Input.vue b/src/components/Input.vue
index 9e80ae0..5cb8e91 100644
--- a/src/components/Input.vue
+++ b/src/components/Input.vue
@@ -28,7 +28,7 @@ const modelValue = defineModel();
 
 <style scoped>
 .input-container {
-  margin: 10px;
+  margin: 10px 0 0 0;
 }
 
 input {
@@ -36,7 +36,7 @@ input {
 }
 
 .input {
-  margin: 10px 0;
+  margin: 10px 0 0 0;
   border: 1px solid #c6ac8f;
   padding: 10px;
   border-radius: 10px;
diff --git a/src/components/SidebarBlock.vue b/src/components/SidebarBlock.vue
index bf6f38a..d9dfde2 100644
--- a/src/components/SidebarBlock.vue
+++ b/src/components/SidebarBlock.vue
@@ -15,7 +15,7 @@ defineProps<{
 .sidebar-block {
   border: 1px solid #c6ac8f;
   border-radius: 10px;
-  margin: 0 0 30px 0;
+  margin: 0 0 10px 0;
   padding: 20px;
   background-color: white;
 }