diff --git a/client/components/Nav.jsx b/client/components/Nav.jsx
index e349d062..ea759515 100644
--- a/client/components/Nav.jsx
+++ b/client/components/Nav.jsx
@@ -109,9 +109,9 @@ function Nav(props) {
{(() => {
if (!props.user.authenticated) {
return (
-
+
- Login or Sign Up
+ Login or Sign Up
);
diff --git a/client/styles/components/_nav.scss b/client/styles/components/_nav.scss
index 224fc45d..e84e7598 100644
--- a/client/styles/components/_nav.scss
+++ b/client/styles/components/_nav.scss
@@ -1,7 +1,6 @@
.nav {
width: 100%;
- padding: #{10 / $base-font-size}rem #{70 / $base-font-size}rem;
- padding-left: #{33 / $base-font-size}rem;
+ padding: #{10 / $base-font-size}rem #{32 / $base-font-size}rem 0 #{32 / $base-font-size}rem;
display: flex;
flex-direction: row;
justify-content: space-between;
@@ -15,15 +14,24 @@
display: flex;
flex-direction: row;
justify-content: flex-end;
- padding: #{5 / $base-font-size}rem #{10 / $base-font-size}rem;
+ padding: #{3 / $base-font-size}rem 0;
}
.nav__item {
position: relative;
- min-width: #{72 / $base-font-size}rem;
+ padding: 0 #{24 / $base-font-size}rem;
text-align: center;
}
+.nav__item:first-child {
+ padding-left: #{15 / $base-font-size}rem;
+}
+
+.nav__item:last-child {
+ padding-right: #{15 / $base-font-size}rem;
+}
+
+
.nav__dropdown {
@include themify() {
background-color: map-get($theme-map, 'background-color');
@@ -42,4 +50,14 @@
left: #{-10 / $base-font-size}rem;
height: auto;
}
+}
+
+.login__items {
+ @include themify() {
+ color: map-get($theme-map, 'inactive-text-color');
+ }
+}
+
+.login__items span.spacer {
+ padding: 0 #{15 / $base-font-size}rem;
}
\ No newline at end of file
diff --git a/client/styles/components/_toolbar.scss b/client/styles/components/_toolbar.scss
index b07a3974..3aa29ff5 100644
--- a/client/styles/components/_toolbar.scss
+++ b/client/styles/components/_toolbar.scss
@@ -60,7 +60,7 @@
}
.toolbar {
- padding: #{15 / $base-font-size}rem #{34 / $base-font-size}rem;
+ padding: #{20 / $base-font-size}rem #{34 / $base-font-size}rem;
display: flex;
align-items: center;
}