From d1d68aa50ccac676ce14b37cc1fa1e0f2feae0ef Mon Sep 17 00:00:00 2001
From: MytsV <mytsvictoria@gmail.com>
Date: Fri, 27 Sep 2024 20:05:10 +0300
Subject: [PATCH] Fix legend positioning and padding

---
 src/component-library/outputtailwind.css      | 141 +-----------------
 .../pages/Dashboard/widgets/CustomLegend.tsx  |   2 +-
 2 files changed, 6 insertions(+), 137 deletions(-)

diff --git a/src/component-library/outputtailwind.css b/src/component-library/outputtailwind.css
index 68d82591..b6b341a9 100644
--- a/src/component-library/outputtailwind.css
+++ b/src/component-library/outputtailwind.css
@@ -687,15 +687,16 @@ html {
   margin-bottom: 0.5rem;
 }
 
+.my-3 {
+  margin-top: 0.75rem;
+  margin-bottom: 0.75rem;
+}
+
 .my-5 {
   margin-top: 1.25rem;
   margin-bottom: 1.25rem;
 }
 
-.-mb-2 {
-  margin-bottom: -0.5rem;
-}
-
 .mb-1 {
   margin-bottom: 0.25rem;
 }
@@ -848,10 +849,6 @@ html {
   height: 0.625rem;
 }
 
-.h-24 {
-  height: 6rem;
-}
-
 .h-3 {
   height: 0.75rem;
 }
@@ -916,10 +913,6 @@ html {
   height: var(--radix-select-trigger-height);
 }
 
-.h-auto {
-  height: auto;
-}
-
 .h-fit {
   height: -moz-fit-content;
   height: fit-content;
@@ -997,10 +990,6 @@ html {
   width: 8rem;
 }
 
-.w-36 {
-  width: 9rem;
-}
-
 .w-4 {
   width: 1rem;
 }
@@ -1017,10 +1006,6 @@ html {
   width: 1.25rem;
 }
 
-.w-56 {
-  width: 14rem;
-}
-
 .w-6 {
   width: 1.5rem;
 }
@@ -1037,10 +1022,6 @@ html {
   width: 18rem;
 }
 
-.w-8 {
-  width: 2rem;
-}
-
 .w-\[35rem\] {
   width: 35rem;
 }
@@ -1170,12 +1151,6 @@ html {
           user-select: none;
 }
 
-.select-all {
-  -webkit-user-select: all;
-     -moz-user-select: all;
-          user-select: all;
-}
-
 .resize {
   resize: both;
 }
@@ -1268,10 +1243,6 @@ html {
   gap: 1rem;
 }
 
-.gap-y-0 {
-  row-gap: 0px;
-}
-
 .gap-y-2 {
   row-gap: 0.5rem;
 }
@@ -1540,11 +1511,6 @@ html {
   border-color: rgb(229 231 235 / var(--tw-border-opacity));
 }
 
-.border-gray-300 {
-  --tw-border-opacity: 1;
-  border-color: rgb(209 213 219 / var(--tw-border-opacity));
-}
-
 .border-gray-700 {
   --tw-border-opacity: 1;
   border-color: rgb(55 65 81 / var(--tw-border-opacity));
@@ -1793,11 +1759,6 @@ html {
   background-color: rgb(249 250 251 / var(--tw-bg-opacity));
 }
 
-.bg-gray-700 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(55 65 81 / var(--tw-bg-opacity));
-}
-
 .bg-gray-800 {
   --tw-bg-opacity: 1;
   background-color: rgb(31 41 55 / var(--tw-bg-opacity));
@@ -2052,10 +2013,6 @@ html {
   padding-left: 0.5rem;
 }
 
-.pl-5 {
-  padding-left: 1.25rem;
-}
-
 .pl-8 {
   padding-left: 2rem;
 }
@@ -2256,11 +2213,6 @@ html {
   color: rgb(120 53 15 / var(--tw-text-opacity));
 }
 
-.text-black {
-  --tw-text-opacity: 1;
-  color: rgb(0 0 0 / var(--tw-text-opacity));
-}
-
 .text-blue-100 {
   --tw-text-opacity: 1;
   color: rgb(219 234 254 / var(--tw-text-opacity));
@@ -2587,11 +2539,6 @@ html {
   background-color: rgb(241 245 249 / var(--tw-bg-opacity));
 }
 
-.odd\:bg-stone-100:nth-child(odd) {
-  --tw-bg-opacity: 1;
-  background-color: rgb(245 245 244 / var(--tw-bg-opacity));
-}
-
 .hover\:cursor-default:hover {
   cursor: default;
 }
@@ -2758,11 +2705,6 @@ html {
   color: rgb(124 58 237 / var(--tw-text-opacity));
 }
 
-.hover\:text-brand-700:hover {
-  --tw-text-opacity: 1;
-  color: rgb(109 40 217 / var(--tw-text-opacity));
-}
-
 .hover\:text-red-700:hover {
   --tw-text-opacity: 1;
   color: rgb(185 28 28 / var(--tw-text-opacity));
@@ -3032,10 +2974,6 @@ html {
   border-width: 1px;
 }
 
-.dark .dark\:border-0 {
-  border-width: 0px;
-}
-
 .dark .dark\:border-2 {
   border-width: 2px;
 }
@@ -3317,11 +3255,6 @@ html {
   color: rgb(252 165 165 / var(--tw-text-opacity));
 }
 
-.dark .dark\:text-base-error-500 {
-  --tw-text-opacity: 1;
-  color: rgb(239 68 68 / var(--tw-text-opacity));
-}
-
 .dark .dark\:text-base-success-200 {
   --tw-text-opacity: 1;
   color: rgb(187 247 208 / var(--tw-text-opacity));
@@ -3347,11 +3280,6 @@ html {
   color: rgb(221 214 254 / var(--tw-text-opacity));
 }
 
-.dark .dark\:text-brand-400 {
-  --tw-text-opacity: 1;
-  color: rgb(167 139 250 / var(--tw-text-opacity));
-}
-
 .dark .dark\:text-extra-emerald-300 {
   --tw-text-opacity: 1;
   color: rgb(110 231 183 / var(--tw-text-opacity));
@@ -3448,11 +3376,6 @@ html {
   background-color: rgb(139 92 246 / var(--tw-bg-opacity));
 }
 
-.dark .odd\:dark\:bg-neutral-800:nth-child(odd) {
-  --tw-bg-opacity: 1;
-  background-color: rgb(30 41 59 / var(--tw-bg-opacity));
-}
-
 .dark .dark\:hover\:bg-base-error-500:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(239 68 68 / var(--tw-bg-opacity));
@@ -3547,20 +3470,10 @@ html {
   background-color: rgb(71 85 105 / var(--tw-bg-opacity));
 }
 
-.dark .hover\:dark\:bg-neutral-900:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(15 23 42 / var(--tw-bg-opacity));
-}
-
 .dark .dark\:hover\:bg-opacity-70:hover {
   --tw-bg-opacity: 0.7;
 }
 
-.dark .dark\:hover\:text-brand-300:hover {
-  --tw-text-opacity: 1;
-  color: rgb(196 181 253 / var(--tw-text-opacity));
-}
-
 .dark .dark\:hover\:text-brand-400:hover {
   --tw-text-opacity: 1;
   color: rgb(167 139 250 / var(--tw-text-opacity));
@@ -3652,18 +3565,6 @@ html {
     top: auto;
   }
 
-  .sm\:ml-2 {
-    margin-left: 0.5rem;
-  }
-
-  .sm\:mt-2 {
-    margin-top: 0.5rem;
-  }
-
-  .sm\:mt-2\.5 {
-    margin-top: 0.625rem;
-  }
-
   .sm\:block {
     display: block;
   }
@@ -3676,14 +3577,6 @@ html {
     display: none;
   }
 
-  .sm\:w-24 {
-    width: 6rem;
-  }
-
-  .sm\:w-36 {
-    width: 9rem;
-  }
-
   .sm\:w-48 {
     width: 12rem;
   }
@@ -3709,10 +3602,6 @@ html {
     flex-grow: 1;
   }
 
-  .sm\:grow-0 {
-    flex-grow: 0;
-  }
-
   .sm\:flex-row {
     flex-direction: row;
   }
@@ -3725,10 +3614,6 @@ html {
     align-items: flex-start;
   }
 
-  .sm\:items-end {
-    align-items: flex-end;
-  }
-
   .sm\:justify-between {
     justify-content: space-between;
   }
@@ -3797,10 +3682,6 @@ html {
     display: flex;
   }
 
-  .md\:table {
-    display: table;
-  }
-
   .md\:grid {
     display: grid;
   }
@@ -3861,18 +3742,10 @@ html {
     width: 1.5rem;
   }
 
-  .md\:w-60 {
-    width: 15rem;
-  }
-
   .md\:w-\[400px\] {
     width: 400px;
   }
 
-  .md\:w-full {
-    width: 100%;
-  }
-
   .md\:max-w-\[600px\] {
     max-width: 600px;
   }
@@ -3979,10 +3852,6 @@ html {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
 
-  .lg\:grid-cols-3 {
-    grid-template-columns: repeat(3, minmax(0, 1fr));
-  }
-
   .lg\:gap-x-2 {
     -moz-column-gap: 0.5rem;
          column-gap: 0.5rem;
diff --git a/src/component-library/pages/Dashboard/widgets/CustomLegend.tsx b/src/component-library/pages/Dashboard/widgets/CustomLegend.tsx
index 02a91d76..de67a7ca 100644
--- a/src/component-library/pages/Dashboard/widgets/CustomLegend.tsx
+++ b/src/component-library/pages/Dashboard/widgets/CustomLegend.tsx
@@ -15,7 +15,7 @@ const CustomLegend: React.FC<CustomLegendProps> = ({ legendOptions }) => {
     const commonCircleClasses = 'bg-opacity-70 h-6 w-6';
 
     return (
-        <div className="flex justify-center space-x-10 text-sm text-neutral-900 dark:text-neutral-100">
+        <div className="flex space-x-10 text-sm text-neutral-900 dark:text-neutral-100 py-3">
             {legendOptions.map((option, index) => (
                 <div key={index} className="flex space-x-2 items-center">
                     <CircleWithText text="" className={cn(commonCircleClasses, option.color)} />