From 066353f2678e52622560af6f57fe7c11e7ec84f0 Mon Sep 17 00:00:00 2001
From: Anton <mail@antontranelis.de>
Date: Sat, 2 Sep 2023 10:20:04 +0200
Subject: [PATCH] ui theming

---
 src/Components/AppShell/NavBar.tsx            |  2 +-
 .../Map/Subcomponents/AddButton.tsx           | 32 +++++++++----------
 .../Map/Subcomponents/FilterControl.tsx       |  2 +-
 .../ItemPopupComponents/HeaderView.tsx        |  6 ++--
 .../Map/Subcomponents/ItemViewPopup.tsx       |  2 +-
 src/Components/Map/UtopiaMap.css              |  6 ++++
 src/index.css                                 | 12 +++++++
 tailwind.config.js                            |  3 ++
 8 files changed, 42 insertions(+), 23 deletions(-)

diff --git a/src/Components/AppShell/NavBar.tsx b/src/Components/AppShell/NavBar.tsx
index 9b1f65f2..ec58330b 100644
--- a/src/Components/AppShell/NavBar.tsx
+++ b/src/Components/AppShell/NavBar.tsx
@@ -95,7 +95,7 @@ export default function NavBar({ appName, useAuth }: { appName: string, useAuth:
           <div className="tw-flex-none">
             {user.avatar ? <div className="tw-avatar">
               <div className="tw-w-10 tw-rounded-full">
-                <img src={"https://map.api.free-planet-earth.org/assets/" + user?.avatar + "?access_token=" + token} />
+                <img src={"https://api.utopia-lab.org/assets/" + user?.avatar + "?access_token=" + token} />
               </div>
             </div> : <></>}
             <div className='tw-ml-2 tw-mr-2'>{user?.first_name}</div>
diff --git a/src/Components/Map/Subcomponents/AddButton.tsx b/src/Components/Map/Subcomponents/AddButton.tsx
index 53c79e10..0254af0a 100644
--- a/src/Components/Map/Subcomponents/AddButton.tsx
+++ b/src/Components/Map/Subcomponents/AddButton.tsx
@@ -3,39 +3,37 @@ import DynamicHeroIcon from '../../../Utils/DynamicHeroIcon'
 import { useLayers } from '../hooks/useLayers'
 
 
-export default function AddButton({setSelectMode} : {setSelectMode: React.Dispatch<React.SetStateAction<any>>}) {
+export default function AddButton({ setSelectMode }: { setSelectMode: React.Dispatch<React.SetStateAction<any>> }) {
 
     const layers = useLayers();
-  
+
     return (
         <div className="tw-dropdown tw-dropdown-top tw-dropdown-end tw-dropdown-hover tw-z-500 tw-absolute tw-right-5 tw-bottom-5" >
-            <button tabIndex={0} className="tw-z-500 tw-btn tw-btn-circle tw-shadow-2xl">
-                <svg viewBox="0 0 20 20" enableBackground="new 0 0 20 20" className="tw-w-6 tw-h-6 tw-inline-block">
-                    <path fill="#2e8555" d="M16,10c0,0.553-0.048,1-0.601,1H11v4.399C11,15.951,10.553,16,10,16c-0.553,0-1-0.049-1-0.601V11H4.601
-                C4.049,11,4,10.553,4,10c0-0.553,0.049-1,0.601-1H9V4.601C9,4.048,9.447,4,10,4c0.553,0,1,0.048,1,0.601V9h4.399
-                C15.952,9,16,9.447,16,10z" />
+            <label tabIndex={0} className="tw-z-500 tw-btn tw-btn-circle tw-shadow tw-bg-base-100">
+                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth="2" stroke="currentColor" className="tw-w-5 tw-h-5">
+                    <path strokeLinecap="round" strokeLinejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
                 </svg>
-            </button>
-                <ul tabIndex={0} className="tw-dropdown-content tw-pr-2 tw-mb-0 tw-list-none">
-                    {layers.map((layer) => (
-                        layer.api?.createItem && (
-                            <li key={layer.name} >
+            </label>
+            <ul tabIndex={0} className="tw-dropdown-content tw-pr-2 tw-mb-0 tw-list-none">
+                {layers.map((layer) => (
+                    layer.api?.createItem && (
+                        <li key={layer.name} >
                             <a>
                                 <div className="tw-tooltip tw-tooltip-left" data-tip={layer.menuText}>
                                     <button tabIndex={0}
                                         className="tw-z-500  tw-border-0 tw-pl-2 tw-p-0 tw-mb-2 tw-mt-2 tw-w-10 tw-h-10 tw-cursor-pointer tw-rounded-full tw-mouse tw-drop-shadow-md tw-transition tw-ease-in tw-duration-200 focus:tw-outline-none"
                                         style={{ backgroundColor: layer.menuColor }}
                                         onClick={() => { setSelectMode(layer) }}>
-                                        <DynamicHeroIcon icon={layer.menuIcon} /> 
+                                        <DynamicHeroIcon icon={layer.menuIcon} />
                                     </button>
                                 </div>
                             </a>
                         </li>
-                        )
+                    )
+
+                ))}
+            </ul>
 
-                    ))}
-                </ul>
-            
         </div>
     )
 }
diff --git a/src/Components/Map/Subcomponents/FilterControl.tsx b/src/Components/Map/Subcomponents/FilterControl.tsx
index f6edc3e1..6fdf08d9 100644
--- a/src/Components/Map/Subcomponents/FilterControl.tsx
+++ b/src/Components/Map/Subcomponents/FilterControl.tsx
@@ -8,7 +8,7 @@ export const FilterControl = () => {
     const removeFilterTag = useRemoveFilterTag();
     const setSearchPhrase = useSetSearchPhrase();
     return (
-        <div className='tw-flex tw-flex-col tw-absolute tw-top-4 tw-left-4 tw-z-1000 tw-right-4'>
+        <div className='tw-flex tw-flex-col tw-absolute tw-top-4 tw-left-4 tw-z-[699] tw-right-4'>
             <input type="text" placeholder="search ..." className="tw-input tw-input-bordered tw-w-full tw-max-w-sm tw-shadow-xl tw-rounded-2xl" onChange={(e) => setSearchPhrase(e.target.value)} />
             <div className='tw-flex tw-flex-wrap tw-mt-4'>
                 {
diff --git a/src/Components/Map/Subcomponents/ItemPopupComponents/HeaderView.tsx b/src/Components/Map/Subcomponents/ItemPopupComponents/HeaderView.tsx
index 2ce07570..a19f9665 100644
--- a/src/Components/Map/Subcomponents/ItemPopupComponents/HeaderView.tsx
+++ b/src/Components/Map/Subcomponents/ItemPopupComponents/HeaderView.tsx
@@ -43,14 +43,14 @@ export function HeaderView({ item, setItemFormPopup }: {
       <div className='tw-col-span-1'>
         {item.layer.api &&
           <div className="tw-dropdown tw-dropdown-bottom">
-            <label tabIndex={0} className="tw-btn tw-m-1 tw-bg-white hover:tw-bg-white tw-text-gray-500 hover:tw-text-gray-700 tw-leading-3 tw-border-none tw-min-h-0 tw-h-4">
+            <label tabIndex={0} className="tw-bg-base-100 tw-btn tw-m-1 tw-leading-3 tw-border-none tw-min-h-0 tw-h-4">
               <svg xmlns="http://www.w3.org/2000/svg" className="tw-h-5 tw-w-5" viewBox="0 0 20 20" fill="currentColor">
                 <path d="M10 6a2 2 0 110-4 2 2 0 010 4zM10 12a2 2 0 110-4 2 2 0 010 4zM10 18a2 2 0 110-4 2 2 0 010 4z" />
               </svg>
             </label>
             <ul tabIndex={0} className="tw-dropdown-content tw-menu tw-p-2 tw-shadow tw-bg-base-100 tw-rounded-box">
               {item.layer.api.updateItem && <li>
-                <a className='tw-bg-white hover:tw-bg-gray-300 !tw-text-blue-800 hover:tw-text-gray-700' onClick={openEditPopup}>
+                <a className="!tw-text-base-content" onClick={openEditPopup}>
                   <svg xmlns="http://www.w3.org/2000/svg" className="tw-h-5 tw-w-5" viewBox="0 0 20 20" fill="currentColor">
                     <path d="M13.586 3.586a2 2 0 112.828 2.828l-.793.793-2.828-2.828.793-.793zM11.379 5.793L3 14.172V17h2.828l8.38-8.379-2.83-2.828z" />
                   </svg>
@@ -58,7 +58,7 @@ export function HeaderView({ item, setItemFormPopup }: {
               </li>}
 
               {item.layer.api.deleteItem && <li>
-                <a className='tw-bg-white hover:tw-bg-gray-300 !tw-text-red-800 hover:tw-text-red-950' onClick={removeItemFromMap}>
+                <a className=' !tw-text-error' onClick={removeItemFromMap}>
                   {loading ? <span className="tw-loading tw-loading-spinner tw-loading-sm"></span>
                     :
                     <svg xmlns="http://www.w3.org/2000/svg" className="tw-h-5 tw-w-5" viewBox="0 0 20 20" fill="currentColor">
diff --git a/src/Components/Map/Subcomponents/ItemViewPopup.tsx b/src/Components/Map/Subcomponents/ItemViewPopup.tsx
index 9e03428b..9d6a7fb1 100644
--- a/src/Components/Map/Subcomponents/ItemViewPopup.tsx
+++ b/src/Components/Map/Subcomponents/ItemViewPopup.tsx
@@ -16,7 +16,7 @@ export const ItemViewPopup = (props: ItemViewPopupProps) => {
 
   return (
     <LeafletPopup maxHeight={377} minWidth={275} maxWidth={275} autoPanPadding={[20, 80]}>
-      <div>
+      <div className='tw-bg-base-100 tw-text-base-content'>
         <HeaderView item={props.item} setItemFormPopup={props.setItemFormPopup} />
         <div className='tw-overflow-y-auto tw-max-h-72'>
           {props.children ?
diff --git a/src/Components/Map/UtopiaMap.css b/src/Components/Map/UtopiaMap.css
index de1e35b3..3072b073 100644
--- a/src/Components/Map/UtopiaMap.css
+++ b/src/Components/Map/UtopiaMap.css
@@ -47,4 +47,10 @@
   
   .leaflet-popup-scrolled {
     overflow-x: hidden;
+  }
+
+  .leaflet-popup-content-wrapper, .leaflet-popup-tip{
+    background-color: theme('colors.base-100');
+    color: theme('colors.base-content');
+
   }
\ No newline at end of file
diff --git a/src/index.css b/src/index.css
index 762e2fa5..2c6c5d11 100644
--- a/src/index.css
+++ b/src/index.css
@@ -26,5 +26,17 @@
   margin-left: 1rem;
   margin-right: 1rem;
   margin-bottom: 1rem;
+  background-color: theme('colors.base-100');
+  color: theme('colors.base-content');
+
+
+}
+
+:root {
+
+  --toastify-color-info: theme('colors.info');
+  --toastify-color-success: theme('colors.success');
+  --toastify-color-warning: theme('colors.warning');
+  --toastify-color-error: theme('colors.error');
 
 }
\ No newline at end of file
diff --git a/tailwind.config.js b/tailwind.config.js
index d7aa9e4a..ed0b1e99 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -34,4 +34,7 @@ module.exports = {
   prefix: 'tw-',
   content: ['./src/**/*.{js,jsx,ts,tsx}'],
   darkMode: 'class',
+  daisyui: {
+    themes: ["light", "dark", "cupcake", "forest", "cyberpunk"],
+  }
 }