From d54d5b509419278ddd925416e81b47071f119c90 Mon Sep 17 00:00:00 2001
From: Chris Kankiewicz <Chris@ChrisKankiewicz.com>
Date: Wed, 30 Dec 2020 15:36:44 -0700
Subject: [PATCH] Changed theme toggle to vertical

---
 app/views/components/header.twig | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/app/views/components/header.twig b/app/views/components/header.twig
index 9be4124..216a665 100644
--- a/app/views/components/header.twig
+++ b/app/views/components/header.twig
@@ -17,15 +17,15 @@
             <i class="fas fa-ellipsis-v fa-lg fa-fw" v-else></i>
         </button>
 
-        <div class="flex items-center flex-grow flex-shrink-0 w-full pt-4 space-x-2 md:flex md:max-w-xs md:p-0" v-bind:class="{ 'hidden': ! menuOpen }">
+        <div class="flex items-center flex-grow flex-shrink-0 w-full pt-4 space-x-3 md:flex md:max-w-xs md:p-0" v-bind:class="{ 'hidden': ! menuOpen }">
             {% if path and files is not empty and config('zip_downloads') %}
                 <a href="{{ zip_url(path) }}" title="{{ translate('download') }}" class="inline-block text-white p-1 hover:text-gray-300">
                     <i class="fas fa-download fa-lg"></i>
                 </a>
             {% endif %}
 
-            <div class="w-8 h-4 flex justify-center items-center bg-gray-900 bg-opacity-30 rounded-full cursor-pointer p-1 duration-300 ease-in-out" title="{{ translate('toggle_theme') }}" v-on:click="toggleTheme">
-                <div class="flex justify-center items-center bg-white w-5 h-5 rounded-full shadow-md transform duration-300 ease-in-out" v-bind:class="{ '-translate-x-2': darkMode, 'translate-x-2': lightMode }">
+            <div class="w-4 h-8 flex flex-col justify-center items-center bg-gray-900 bg-opacity-30 rounded-full cursor-pointer duration-300 ease-in-out" title="{{ translate('toggle_theme') }}" v-on:click="toggleTheme">
+                <div class="flex justify-center items-center bg-white w-5 h-5 rounded-full shadow-md transform duration-300 ease-in-out" v-bind:class="{ '-translate-y-2': lightMode, 'translate-y-2': darkMode }">
                     <i class="fas fa-lightbulb fa-xs" v-bind:class="{ 'text-gray-600': darkMode, 'text-yellow-400': lightMode }"></i>
                 </div>
             </div>