From 2249eda8297c5f49fe6045f604a7c8d06908cff7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Denis=20Duli=C3=A7i?= <denisdulici@gmail.com>
Date: Mon, 1 Aug 2022 00:07:01 +0300
Subject: [PATCH] styling toggle of summary reports

---
 .../reports/summary/chart.blade.php           | 19 ++++++++++++++++---
 1 file changed, 16 insertions(+), 3 deletions(-)

diff --git a/resources/views/components/reports/summary/chart.blade.php b/resources/views/components/reports/summary/chart.blade.php
index 50cca6cf2..61d476cf7 100644
--- a/resources/views/components/reports/summary/chart.blade.php
+++ b/resources/views/components/reports/summary/chart.blade.php
@@ -8,9 +8,22 @@
                 <h2 x-show="toggle === 'bar'">{{ trans('general.distribution') }}</h2>
             </div>
 
-            <div class="w-8 h-8 flex items-center justify-center px-2 py-2 hover:bg-gray-100 rounded-xl text-purple text-sm font-medium leading-6 cursor-pointer" x-on:click="toggle === 'bar' ? toggle = 'donut' : toggle = 'bar'">
-                <span class="material-icons-outlined" x-bind:class="toggle === 'donut' ? 'block': 'hidden'" title="{{ trans('general.distribution') }}">donut_small</span>
-                <span class="material-icons" x-bind:class="toggle === 'bar' ? 'block': 'hidden'" title="{{ trans('general.timeline') }}">signal_cellular_alt</span>
+            <div class="flex items-center bg-gray-200 p-1 rounded-lg">
+                <button type="button"
+                    class="w-18 flex justify-center px-2"
+                    x-bind:class="toggle === 'donut' ? 'bg-white rounded-lg' : 'btn-outline-primary'"
+                    x-on:click="toggle = 'donut'"
+                >
+                    <span class="material-icons" title="{{ trans('general.timeline') }}">signal_cellular_alt</span>
+                </button>
+
+                <button type="button"
+                    class="w-18 flex justify-center px-2"
+                    x-bind:class="toggle === 'bar' ? 'bg-white rounded-lg' : 'btn-outline-primary'"
+                    x-on:click="toggle = 'bar'"
+                >
+                    <span class="material-icons-outlined" title="{{ trans('general.distribution') }}">donut_small</span>
+                </button>
             </div>
         </div>