diff --git a/.travis.yml b/.travis.yml
index 720a81c..4d11231 100644
--- a/.travis.yml
+++ b/.travis.yml
@@ -1,4 +1,11 @@
language: node_js
+node_js:
+ - 10.16.0
+
+addons:
+ apt:
+ packages:
+ - libgconf-2-4
branches:
only:
diff --git a/__tests__/components/__snapshots__/Header.test.js.snap b/__tests__/components/__snapshots__/Header.test.js.snap
index 35aa018..f2d9352 100644
--- a/__tests__/components/__snapshots__/Header.test.js.snap
+++ b/__tests__/components/__snapshots__/Header.test.js.snap
@@ -7,9 +7,10 @@ exports[` component renders with DARK theme 1`] = `
border-radius: 50%;
cursor: pointer;
height: 2.5rem;
- margin: 0 0 0 1rem;
+ margin: 0.5rem 1.5rem 0 0;
outline: 0;
width: 2.5rem;
+ z-index: 10;
}
.c5 svg,
@@ -89,6 +90,8 @@ exports[` component renders with DARK theme 1`] = `
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
display: inline-flex;
+ margin: 1rem 0;
+ width: 100%;
}
.c3 {
@@ -125,6 +128,12 @@ exports[` component renders with DARK theme 1`] = `
color: #FFFFFF;
}
+@media (min-width:769px) {
+ .c5 {
+ margin: 0 0 0 1.5rem;
+ }
+}
+
@media (min-width:769px) {
.c0 {
-webkit-box-pack: justify;
@@ -134,6 +143,13 @@ exports[` component renders with DARK theme 1`] = `
}
}
+@media (min-width:541px) {
+ .c4 {
+ margin: 0;
+ width: auto;
+ }
+}
+
component renders with LIGHT theme 1`] = `
border-radius: 50%;
cursor: pointer;
height: 2.5rem;
- margin: 0 0 0 1rem;
+ margin: 0.5rem 1.5rem 0 0;
outline: 0;
width: 2.5rem;
+ z-index: 10;
}
.c5 svg,
@@ -322,6 +339,8 @@ exports[`
component renders with LIGHT theme 1`] = `
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
display: inline-flex;
+ margin: 1rem 0;
+ width: 100%;
}
.c3 {
@@ -358,6 +377,12 @@ exports[`
component renders with LIGHT theme 1`] = `
color: #EDB8ED;
}
+@media (min-width:769px) {
+ .c5 {
+ margin: 0 0 0 1.5rem;
+ }
+}
+
@media (min-width:769px) {
.c0 {
-webkit-box-pack: justify;
@@ -367,6 +392,13 @@ exports[`
component renders with LIGHT theme 1`] = `
}
}
+@media (min-width:541px) {
+ .c4 {
+ margin: 0;
+ width: auto;
+ }
+}
+
renders JS toggle in DARK more 1`] = `
border-radius: 50%;
cursor: pointer;
height: 2.5rem;
- margin: 0 0 0 1rem;
+ margin: 0.5rem 1.5rem 0 0;
outline: 0;
width: 2.5rem;
+ z-index: 10;
}
.c0 svg,
@@ -36,6 +37,12 @@ exports[`
renders JS toggle in DARK more 1`] = `
fill: #F2E8F2;
}
+@media (min-width:769px) {
+ .c0 {
+ margin: 0 0 0 1.5rem;
+ }
+}
+
renders JS toggle in LIGHT more 1`] = `
border-radius: 50%;
cursor: pointer;
height: 2.5rem;
- margin: 0 0 0 1rem;
+ margin: 0.5rem 1.5rem 0 0;
outline: 0;
width: 2.5rem;
+ z-index: 10;
}
.c0 svg,
@@ -103,6 +111,12 @@ exports[`
renders JS toggle in LIGHT more 1`] = `
fill: #F2E8F2;
}
+@media (min-width:769px) {
+ .c0 {
+ margin: 0 0 0 1.5rem;
+ }
+}
+
renders the MODE toggle in DARK mode 1`] = `
border-radius: 50%;
cursor: pointer;
height: 2.5rem;
- margin: 0 0 0 1rem;
+ margin: 0.5rem 1.5rem 0 0;
outline: 0;
width: 2.5rem;
+ z-index: 10;
}
.c0 svg,
@@ -170,6 +185,12 @@ exports[`
renders the MODE toggle in DARK mode 1`] = `
fill: #F2E8F2;
}
+@media (min-width:769px) {
+ .c0 {
+ margin: 0 0 0 1.5rem;
+ }
+}
+
renders the MODE toggle in LIGHT mode 1`] = `
border-radius: 50%;
cursor: pointer;
height: 2.5rem;
- margin: 0 0 0 1rem;
+ margin: 0.5rem 1.5rem 0 0;
outline: 0;
width: 2.5rem;
+ z-index: 10;
}
.c0 svg,
@@ -231,6 +253,12 @@ exports[`
renders the MODE toggle in LIGHT mode 1`] = `
fill: #F2E8F2;
}
+@media (min-width:769px) {
+ .c0 {
+ margin: 0 0 0 1.5rem;
+ }
+}
+