fix: change toggle style and improve responsiveness

client/src/assets/icons/Spacer.js

@@ -5,6 +5,7 @@ function Spacer(props) {
     <Fragment>
       <span className='sr-only'>Passed</span>
       <svg
+        className='tick'
         height='50'
         viewBox='-10 -45 200 200'
         width='50'

client/src/assets/icons/ToggleCheck.js

@@ -5,6 +5,7 @@ function ToggleCheck(props) {
     <Fragment>
       <span className='sr-only'>Passed</span>
       <svg
+        className='tick'
         height='50'
         viewBox='-10 -45 200 200'
         width='50'

client/src/components/helpers/toggle-button.css

@@ -17,9 +17,11 @@
   background-color: var(--secondary-color);
 }
 
-.btn .toggle-not-active,
+.btn-group .btn.toggle-not-active,
-.btn .toggle-active {
+.btn-group .btn.toggle-active {
-  border-color: var(--secondary-color);
+  border-color: var(--tertiary-color);
+  padding-left: 30px;
+  padding-right: 30px;
 }
 
 .btn-group .btn-primary,
@@ -27,3 +29,50 @@
 .btn-group .btn-primary:hover {
   border-color: var(--secondary-color);
 }
+
+.btn.toggle-active > .tick,
+.btn.toggle-not-active > .tick {
+  position: absolute;
+}
+
+.btn:first-child > .tick {
+  left: 9px;
+  top: calc(50% - 8pt);
+}
+
+.btn:last-child > .tick {
+  right: 6px;
+  top: calc(50% - 8pt);
+}
+
+.btn-group .btn + .btn {
+  margin-left: -2px;
+}
+
+label.toggle-label {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+@media (max-width: 550px) {
+  .btn:first-child > .tick {
+    left: 6px;
+  }
+
+  .btn:last-child > .tick {
+    right: 5px;
+  }
+}
+
+@media (max-width: 440px) {
+  .btn-group .btn + .btn {
+    margin-left: 0px;
+    margin-top: -2px;
+  }
+
+  .btn:first-child > .tick {
+    left: auto;
+    right: 5px;
+  }
+}

client/src/components/settings/Theme.js

@@ -13,7 +13,7 @@ const propTypes = {
 
 export default function ThemeSettings({ currentTheme, toggleNightMode }) {
   return (
-    <div id='theme-settings-container'>
+    <div className='toggle-setting-container' id='theme-settings-container'>
       <ControlLabel className='theme-label' htmlFor='night-mode'>
         <strong>Night Mode</strong>
       </ControlLabel>

client/src/components/settings/toggle-setting.css

@@ -3,6 +3,29 @@
   justify-content: space-between;
 }
 
-.toggle-setting-container .form-group label {
+.toggle-setting-container .btn-group {
-  max-width: 50%;
+  padding-left: 5px;
+}
+
+.toggle-setting-container > .form-group > * {
+  flex: 1 1 0;
+}
+
+.toggle-setting-container .btn-group {
+  display: flex;
+  justify-content: flex-end;
+  align-items: flex-start;
+}
+
+@media (max-width: 440px) {
+  .toggle-setting-container > .form-group > * {
+    flex: 0 1 auto;
+  }
+
+  .toggle-setting-container .btn-group,
+  .theme-setting-container .btn-group {
+    flex-direction: column;
+    align-items: stretch;
+    justify-content: flex-start;
+  }
 }

client/src/pages/index.css

@@ -41,6 +41,14 @@
 .underlined-link {
   text-decoration: underline;
 }
+
+/* Buttons with a lot of text can overflow and mess up formatting on small
+   screens, this stops that unless the word itself is too large. */
+
+.btn {
+  white-space: pre-line;
+}
+
 @media (min-width: 991px) and (max-width: 1199px) {
   .testimonial-copy {
     height: 150px;