Merge pull request #2368 from invoiceninja/INV2-1784

Fixes for upgrade button spacing
invoiceninja · Feb 18, 2025 · 8ba3d82 · 8ba3d82
2 parents d3e5f79 + bc006ba
commit 8ba3d82
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 6 deletions.
diff --git a/src/components/layouts/Default.tsx b/src/components/layouts/Default.tsx
@@ -455,7 +455,6 @@ export function Default(props: Props) {
               </h2>
 
               <QuickCreatePopover />
-
               <Search />
             </div>
 
@@ -483,9 +482,13 @@ export function Default(props: Props) {
                 >
                   <div className="absolute inset-x-0 top-0 h-1/2 bg-gradient-to-b from-white/20 to-transparent pointer-events-none"></div>
 
-                  <span className="relative z-10">
+                  <span className="relative z-10 hidden xl:block">
                     {isSelfHosted() ? t('white_label_button') : t('unlock_pro')}
                   </span>
+
+                  <span className="relative z-10 xl:hidden">
+                    {t('upgrade')}
+                  </span>
                 </button>
               )}
 

diff --git a/src/pages/dashboard/components/Search.tsx b/src/pages/dashboard/components/Search.tsx
@@ -33,6 +33,8 @@ import { OppositeArrows } from '$app/components/icons/OppositeArrows';
 import { ReturnKey } from './ReturnKey';
 import { ExternalLink } from '$app/components/icons/ExternalLink';
 import { SearchGroups } from './SearchGroups';
+import { BiSearch } from 'react-icons/bi';
+import { Icon } from '$app/components/icons/Icon';
 
 export function Search$() {
   const [t] = useTranslation();
@@ -287,8 +289,16 @@ export function Search$() {
 
   return (
     <>
+      <button
+        type="button"
+        onClick={() => setIsModalOpen(true)}
+        className="lg:hidden flex justify-end items-end"
+      >
+        <Icon element={BiSearch} size={22} style={{ color: colors.$3 }} />
+      </button>
+
       <div
-        className="flex items-center border rounded-md px-1 py-1 space-x-5"
+        className="hidden lg:flex items-center border rounded-md p-1.5 space-x-5"
         onClick={() => setIsModalOpen(true)}
         style={{ borderColor: colors.$5 }}
       >
@@ -322,7 +332,11 @@ export function Search$() {
           <div className="flex flex-col pb-3">
             <div className="flex items-center space-x-3">
               <div className="flex items-center space-x-1.5 py-2 px-4 flex-1 border-b">
-                <SearchIcon color={colors.$5} size="1.6rem" />
+                {isFetching ? (
+                  <Spinner />
+                ) : (
+                  <SearchIcon color={colors.$5} size="1.6rem" />
+                )}
 
                 <div className="flex-1">
                   <InputField
@@ -337,8 +351,6 @@ export function Search$() {
                   />
                 </div>
               </div>
-
-              {isFetching && <Spinner />}
             </div>
 
             <div