From db5ddc2c055c371049341864866f4b088826b990 Mon Sep 17 00:00:00 2001 From: Zoltan Toth Date: Thu, 16 May 2019 15:22:02 -0400 Subject: [PATCH 01/97] Fix toggle buttons on m obile screens --- .../__snapshots__/Header.test.js.snap | 36 +++++++++++++++++-- .../__snapshots__/Toggle.test.js.snap | 36 ++++++++++++++++--- src/components/Header.jsx | 7 ++++ src/components/Toggle.jsx | 7 +++- 4 files changed, 79 insertions(+), 7 deletions(-) diff --git a/__tests__/components/__snapshots__/Header.test.js.snap b/__tests__/components/__snapshots__/Header.test.js.snap index 35aa018..e0701bc 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.5rem 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.5rem 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.5rem 0 0 1.5rem; + } +} +