From 708714b3a50e6bab4e0014dfde3d0888e078bd41 Mon Sep 17 00:00:00 2001
From: lana-k <skochetova89@gmail.com>
Date: Mon, 21 Sep 2020 14:06:19 +0200
Subject: [PATCH] add styles for disabled buttons

---
 src/assets/styles/buttons.css   | 12 ++++++++++--
 src/assets/styles/variables.css | 26 ++++++++++++++++++++------
 src/components/MainMenu.vue     |  2 +-
 3 files changed, 31 insertions(+), 9 deletions(-)

diff --git a/src/assets/styles/buttons.css b/src/assets/styles/buttons.css
index 15d6dbc..f0ae8ef 100644
--- a/src/assets/styles/buttons.css
+++ b/src/assets/styles/buttons.css
@@ -6,7 +6,7 @@ button.primary {
   height: 36px;
   padding: 0 12px;
   min-width: 83px;
-  color: var(--color-text-white);
+  color: var(--color-text-light);
   text-shadow: var(--shadow);
   font-size: 14px;
   font-weight: 600;
@@ -16,9 +16,17 @@ button.primary {
 button.primary:hover {
   background: var(--color-accent-shade);
   border: 1px solid var(--color-accent-shade);
-  color: var(--color-text-white);
+  color: var(--color-text-light);
   text-shadow: var(--shadow);
   font-size: 14px;
   font-weight: 600;
+}
+
+button.primary:disabled {
+  background: var(--color-bg-light-2);
+  border: 1px solid var(--color-border);
+  color: var(--color-text-light-2);
+  text-shadow: none;
+  cursor: default;
 } 
 
diff --git a/src/assets/styles/variables.css b/src/assets/styles/variables.css
index 4e9c9d2..5055214 100644
--- a/src/assets/styles/variables.css
+++ b/src/assets/styles/variables.css
@@ -1,10 +1,24 @@
 :root {
-    --color-bg-light: #F3F6FA;
-    --color-accent: #119DFF;
-    --color-accent-shade: #0D76BF;
-    --color-border-light: #DFE8F3;
-    --color-text-base: #506784;
-    --color-text-white: #ffffff;
+    --color-white: #ffffff;
+    --color-gray-light: #F3F6FA;
+    --color-gray-light-2: #DFE8F3;
+    --color-gray-light-3: #C8D4E3;
+    --color-gray-medium: #A2B1C6;
+    --color-gray-dark: #506784;
+    --color-blue-medium: #119DFF;
+    --color-blue-dark: #0D76BF;
+
+
+    --color-bg-light: var(--color-gray-light);
+    --color-bg-light-2: var(--color-gray-light-2);
+    --color-accent: var(--color-blue-medium);
+    --color-accent-shade: var(--color-blue-dark);
+    --color-border-light: var(--color-gray-light-2);
+    --color-border: var(--color-gray-light-3);
+    --color-text-light: var(--color-white);
+    --color-text-light-2: var(--color-gray-medium);
+    --color-text-base: var(--color-gray-dark);
+    --color-text-medium: var(--color-gray-medium);
 
     --shadow: 0 1px 2px rgba(42, 63, 95, 0.7);
 
diff --git a/src/components/MainMenu.vue b/src/components/MainMenu.vue
index 3249733..f2e1d0e 100644
--- a/src/components/MainMenu.vue
+++ b/src/components/MainMenu.vue
@@ -5,7 +5,7 @@
       <router-link to="/my-queries">My queries</router-link>
     </div>
     <div>
-      <button class="primary">Save</button>
+      <button class="primary" disabled>Save</button>
       <button class="primary">Create</button>
     </div>
   </nav>