From fdf77a7161eff9d8a8b4c703ebf452443dc9b741 Mon Sep 17 00:00:00 2001
From: lana-k <skochetova89@gmail.com>
Date: Sun, 20 Sep 2020 23:40:52 +0200
Subject: [PATCH] add styles to menu

---
 src/App.vue                                   |  8 ++++---
 src/assets/styles/buttons.css                 | 24 +++++++++++++++++++
 .../styles/{colors.css => variables.css}      |  9 +++----
 src/components/MainMenu.vue                   | 18 ++++++++++++--
 src/main.js                                   |  3 ++-
 5 files changed, 52 insertions(+), 10 deletions(-)
 create mode 100644 src/assets/styles/buttons.css
 rename src/assets/styles/{colors.css => variables.css} (72%)

diff --git a/src/App.vue b/src/App.vue
index 18c0f02..047a181 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -5,10 +5,12 @@
 </template>
 
 <style>
-#app {
-  font-family: Avenir, Helvetica, Arial, sans-serif;
+#app, * {
+  font-family: Open-Sans, Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  color: #2c3e50;
+}
+body {
+  margin: 0;
 }
 </style>
diff --git a/src/assets/styles/buttons.css b/src/assets/styles/buttons.css
new file mode 100644
index 0000000..15d6dbc
--- /dev/null
+++ b/src/assets/styles/buttons.css
@@ -0,0 +1,24 @@
+button.primary {
+  background: var(--color-accent);
+  border: 1px solid var(--color-accent-shade);
+  box-sizing: border-box;
+  border-radius: var(--border-radius-big);
+  height: 36px;
+  padding: 0 12px;
+  min-width: 83px;
+  color: var(--color-text-white);
+  text-shadow: var(--shadow);
+  font-size: 14px;
+  font-weight: 600;
+  cursor: pointer;
+}
+
+button.primary:hover {
+  background: var(--color-accent-shade);
+  border: 1px solid var(--color-accent-shade);
+  color: var(--color-text-white);
+  text-shadow: var(--shadow);
+  font-size: 14px;
+  font-weight: 600;
+} 
+
diff --git a/src/assets/styles/colors.css b/src/assets/styles/variables.css
similarity index 72%
rename from src/assets/styles/colors.css
rename to src/assets/styles/variables.css
index bc18745..4e9c9d2 100644
--- a/src/assets/styles/colors.css
+++ b/src/assets/styles/variables.css
@@ -5,9 +5,10 @@
     --color-border-light: #DFE8F3;
     --color-text-base: #506784;
     --color-text-white: #ffffff;
-    --shadow: 0 1px 2px rgba(43, 63, 95, 0.7);
-  }
-  body {
-    margin: 0;
+
+    --shadow: 0 1px 2px rgba(42, 63, 95, 0.7);
+
+    --border-radius-big: 5px;
   }
 
+
diff --git a/src/components/MainMenu.vue b/src/components/MainMenu.vue
index fd1cd4b..3249733 100644
--- a/src/components/MainMenu.vue
+++ b/src/components/MainMenu.vue
@@ -5,8 +5,8 @@
       <router-link to="/my-queries">My queries</router-link>
     </div>
     <div>
-      <button>Save</button>
-      <button>Create</button>
+      <button class="primary">Save</button>
+      <button class="primary">Create</button>
     </div>
   </nav>
 </template>
@@ -29,5 +29,19 @@ nav {
   top: 0;
   left: 0;
   width: 100vw;
+  padding: 0 52px;
+}
+a {
+  font-size: 18px;
+  color: var(--color-text-base);
+  text-transform: none;
+  text-decoration: none;
+  margin-right: 28px;
+}
+a.router-link-active {
+  color: var(--color-accent);
+}
+button {
+  margin-left: 16px;
 }
 </style>
diff --git a/src/main.js b/src/main.js
index b3a4cb3..8f6f76c 100644
--- a/src/main.js
+++ b/src/main.js
@@ -5,7 +5,8 @@ import store from './store'
 import VueReact from 'vue-react'
 import PlotlyEditor from 'react-chart-editor'
 
-import '@/assets/styles/colors.css'
+import '@/assets/styles/variables.css'
+import '@/assets/styles/buttons.css'
 
 Vue.use(VueReact)
 Vue.react('PlotlyEditor', PlotlyEditor)