add styles to menu

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>

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;
+} 
+

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;
   }
 
+

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>

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)