From 50e88ee146588aa926c5877f2d34362b33e00cf9 Mon Sep 17 00:00:00 2001
From: Anton Tranelis <mail@antontranelis.de>
Date: Thu, 20 Mar 2025 21:33:31 +0000
Subject: [PATCH] more layout fixing

---
 src/Components/AppShell/NavBar.tsx                   |  5 +++--
 src/Components/Map/Subcomponents/AddButton.tsx       |  5 ++++-
 .../Map/Subcomponents/Controls/LayerControl.tsx      |  2 +-
 .../Map/Subcomponents/Controls/SearchControl.tsx     |  4 ++--
 src/Components/Templates/AttestationForm.tsx         |  8 ++++----
 src/Components/Templates/EmojiPicker.tsx             | 12 +++++++++---
 src/Components/Templates/SelectUser.tsx              |  8 ++++----
 7 files changed, 27 insertions(+), 17 deletions(-)

diff --git a/src/Components/AppShell/NavBar.tsx b/src/Components/AppShell/NavBar.tsx
index 49976fd7..33a09816 100644
--- a/src/Components/AppShell/NavBar.tsx
+++ b/src/Components/AppShell/NavBar.tsx
@@ -130,13 +130,14 @@ export default function NavBar({ appName }: { appName: string }) {
                     <Link to={'/user-settings'}>Settings</Link>
                   </li>
                   <li>
-                    <a
+                    <Link
+                      to={'/'}
                       onClick={() => {
                         void onLogout()
                       }}
                     >
                       Logout
-                    </a>
+                    </Link>
                   </li>
                 </ul>
               </div>
diff --git a/src/Components/Map/Subcomponents/AddButton.tsx b/src/Components/Map/Subcomponents/AddButton.tsx
index 48afa52c..5781a1ab 100644
--- a/src/Components/Map/Subcomponents/AddButton.tsx
+++ b/src/Components/Map/Subcomponents/AddButton.tsx
@@ -32,7 +32,10 @@ export default function AddButton({
     <>
       {canAddItems() ? (
         <div className='tw:dropdown tw:dropdown-top tw:dropdown-end tw:dropdown-hover tw:z-500 tw:absolute tw:right-4 tw:bottom-4'>
-          <label tabIndex={0} className='tw:z-500 tw:btn tw:btn-circle tw:shadow tw:bg-base-100'>
+          <label
+            tabIndex={0}
+            className='tw:z-500 tw:btn tw:btn-circle tw:btn-lg  tw:shadow tw:bg-base-100'
+          >
             <SVG src={PlusSVG} className='tw:h-5 tw:w-5' />
           </label>
           <ul tabIndex={0} className='tw:dropdown-content tw:pr-1 tw:list-none'>
diff --git a/src/Components/Map/Subcomponents/Controls/LayerControl.tsx b/src/Components/Map/Subcomponents/Controls/LayerControl.tsx
index ada85f8a..64d60b95 100644
--- a/src/Components/Map/Subcomponents/Controls/LayerControl.tsx
+++ b/src/Components/Map/Subcomponents/Controls/LayerControl.tsx
@@ -32,7 +32,7 @@ export function LayerControl() {
                   <li key={layer.name}>
                     <label
                       htmlFor={layer.name}
-                      className='tw:label tw:justify-normal tw:pt-1 tw:pb-1'
+                      className='tw:label tw:justify-normal tw:pt-1 tw:pb-1 tw:text-base-content'
                     >
                       <input
                         id={layer.name}
diff --git a/src/Components/Map/Subcomponents/Controls/SearchControl.tsx b/src/Components/Map/Subcomponents/Controls/SearchControl.tsx
index fdc0bda4..dcbdca36 100644
--- a/src/Components/Map/Subcomponents/Controls/SearchControl.tsx
+++ b/src/Components/Map/Subcomponents/Controls/SearchControl.tsx
@@ -118,7 +118,7 @@ export const SearchControl = () => {
                 placeholder='search ...'
                 autoComplete='off'
                 value={value}
-                className='tw:input tw:input-bordered tw:h-12 tw:grow tw:shadow-xl tw:rounded-lg tw:pr-12'
+                className='tw:input tw:input-bordered tw:h-12 tw:grow tw:shadow-xl tw:rounded-lg tw:pr-12 tw:w-69'
                 ref={searchInput}
                 onChange={(e) => setValue(e.target.value)}
                 onFocus={() => {
@@ -146,7 +146,7 @@ export const SearchControl = () => {
           value.length === 0 ? (
             ''
           ) : (
-            <div className='tw:card tw:card-body tw:bg-base-100 tw:p-4 tw:mt-2 tw:shadow-xl tw:overflow-y-auto tw:max-h-[calc(100dvh-152px)] tw:absolute tw:z-3000'>
+            <div className='tw:card tw:card-body tw:bg-base-100 tw:p-4 tw:mt-2 tw:shadow-xl tw:overflow-y-auto tw:max-h-[calc(100dvh-152px)] tw:absolute tw:z-3000 tw:w-83'>
               {tagsResults.length > 0 && (
                 <div className='tw:flex tw:flex-wrap'>
                   {tagsResults.slice(0, 3).map((tag) => (
diff --git a/src/Components/Templates/AttestationForm.tsx b/src/Components/Templates/AttestationForm.tsx
index e23a2aff..3ed1e6c7 100644
--- a/src/Components/Templates/AttestationForm.tsx
+++ b/src/Components/Templates/AttestationForm.tsx
@@ -96,8 +96,8 @@ export const AttestationForm = ({ api }: { api?: ItemsApi<unknown> }) => {
           (u, k) => (
             <div key={k} className='tw:flex tw:items-center tw:space-x-3 tw:mx-2 tw:my-1'>
               {u.image ? (
-                <div className='avatar'>
-                  <div className='mask mask-circle tw:w-8 tw:h-8'>
+                <div className='tw:avatar'>
+                  <div className='tw:mask tw:mask-circle tw:w-8 tw:h-8'>
                     <img
                       src={appState.assetsApi.url + u.image + '?width=40&heigth=40'}
                       alt='Avatar'
@@ -105,7 +105,7 @@ export const AttestationForm = ({ api }: { api?: ItemsApi<unknown> }) => {
                   </div>
                 </div>
               ) : (
-                <div className='mask mask-circle tw:text-xl tw:md:text-2xl tw:bg-slate-200 tw:rounded-full tw:w-8 tw:h-8'></div>
+                <div className='tw:mask tw:mask-circle tw:text-xl tw:md:text-2xl tw:bg-slate-200 tw:rounded-full tw:w-8 tw:h-8'></div>
               )}
               <div>
                 <div className='tw:font-bold'>{u.name}</div>
@@ -141,7 +141,7 @@ export const AttestationForm = ({ api }: { api?: ItemsApi<unknown> }) => {
         </div>
       </div>
       <div className='tw:w-full tw:grid tw:mt-4'>
-        <button onClick={sendAttestation} className='btn tw:place-self-center tw:px-8'>
+        <button onClick={sendAttestation} className='tw:btn tw:place-self-center tw:px-8'>
           Next
         </button>
       </div>
diff --git a/src/Components/Templates/EmojiPicker.tsx b/src/Components/Templates/EmojiPicker.tsx
index 58e57ada..b012f034 100644
--- a/src/Components/Templates/EmojiPicker.tsx
+++ b/src/Components/Templates/EmojiPicker.tsx
@@ -97,7 +97,8 @@ export const EmojiPicker = ({
     <>
       <div
         onClick={toggleDropdown}
-        className={`tw:cursor-pointer ${selectedEmoji === 'select badge' ? 'tw:text-sm tw:p-9! tw:text-center ' : 'tw:text-6xl'} mask mask-${selectedShape} tw:p-6 bg-[${selectedColor}]`}
+        className={`tw:cursor-pointer ${selectedEmoji === 'select badge' ? 'tw:text-sm tw:p-9! tw:text-center ' : 'tw:text-6xl'} tw:mask tw:mask-${selectedShape} tw:p-6`}
+        style={{ backgroundColor: selectedColor }}
       >
         {selectedEmoji}
       </div>
@@ -123,7 +124,9 @@ export const EmojiPicker = ({
                 className={`tw:cursor-pointer tw:hover:bg-base-200 tw:rounded-md tw:p-2 ${shape === selectedShape ? 'tw:bg-base-300' : ''}`}
                 onClick={() => selectShape(shape)}
               >
-                <div className={`tw:h-12 mask mask-${shape} tw:bg-neutral-content`}></div>
+                <div
+                  className={`tw:h-12 tw:w-full tw:mask ${shape === 'squircle' ? 'tw:mask-squircle' : shape === 'circle' ? 'tw:mask-circle' : 'tw:mask-hexagon-2'}  tw:bg-neutral-content`}
+                ></div>
               </div>
             ))}
           </div>
@@ -135,7 +138,10 @@ export const EmojiPicker = ({
                 className={`tw:cursor-pointer tw:hover:bg-base-200 tw:rounded-md tw:p-2 tw:flex tw:justify-center tw:items-center  ${color === selectedColor ? 'tw:bg-base-300' : ''}`}
                 onClick={() => selectColor(color)}
               >
-                <div className={`tw:h-8 tw:w-8 tw:rounded-full bg-[${color}]`}></div>
+                <div
+                  className={`tw:h-8 tw:w-8 tw:rounded-full`}
+                  style={{ backgroundColor: color }}
+                ></div>
               </div>
             ))}
           </div>
diff --git a/src/Components/Templates/SelectUser.tsx b/src/Components/Templates/SelectUser.tsx
index af851393..8f1083c2 100644
--- a/src/Components/Templates/SelectUser.tsx
+++ b/src/Components/Templates/SelectUser.tsx
@@ -38,8 +38,8 @@ export const SelectUser = () => {
                   <td>
                     <div className='tw:flex tw:items-center tw:space-x-3'>
                       {u.image ? (
-                        <div className='avatar'>
-                          <div className='mask mask-circle tw:w-8 tw:h-8'>
+                        <div className='tw:avatar'>
+                          <div className='tw:mask tw:mask-circle tw:w-8 tw:h-8'>
                             <img
                               src={appState.assetsApi.url + u.image + '?width=40&heigth=40'}
                               alt='Avatar'
@@ -47,7 +47,7 @@ export const SelectUser = () => {
                           </div>
                         </div>
                       ) : (
-                        <div className='mask mask-circle tw:text-xl tw:md:text-2xl tw:bg-slate-200 tw:rounded-full tw:w-8 tw:h-8'></div>
+                        <div className='tw:mask tw:mask-circle tw:text-xl tw:md:text-2xl tw:bg-slate-200 tw:rounded-full tw:w-8 tw:h-8'></div>
                       )}
                       <div>
                         <div className='tw:font-bold'>{u.name}</div>
@@ -65,7 +65,7 @@ export const SelectUser = () => {
           className='tw:place-self-center '
           to={'/attestation-form' + '?to=' + selectedUsers.map((u) => u, ',')}
         >
-          <button className='btn tw:px-8'>Next</button>
+          <button className='tw:btn tw:px-8'>Next</button>
         </Link>
       </div>
     </MapOverlayPage>