refactor: Use mantine components for visual consistency (#460)

* refactor: Make search bar visually consistent

Use mantine components to make the search bar on the users page consistent with the rest of the ui

* refactor: Update buttons in UpsertUserDialog

* refactor: Old test inconsistencies

* test: fix failing test by adding aria label

* style: file search results per page should have same border radius as search field

* refactor: re-add the "clear search" button

---------

Co-authored-by: Hendrik Schawe <[email protected]>

Author: Johardt

backend/src/utils/testUtils.ts

@@ -33,17 +33,4 @@ export async function initAppWithDataBaseAndValidUser(
   return { dataSource, app };
 }
 
-export const logo = `<svg width="192" height="26" viewBox="0 0 192 26" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <path d="M176.581 5.35737V3.26611H191.181V5.35737H185.06V22.7338H182.702V5.35737H176.581Z" fill="#B0E572"/>
-  <path d="M160.654 22.7338V3.26611H167.232C168.759 3.26611 170.007 3.54178 170.977 4.09311C171.953 4.6381 172.675 5.37638 173.144 6.30794C173.613 7.2395 173.848 8.27879 173.848 9.42581C173.848 10.5728 173.613 11.6153 173.144 12.5532C172.681 13.4911 171.965 14.2389 170.996 14.7965C170.026 15.3479 168.784 15.6235 167.27 15.6235H162.555V13.5323H167.194C168.239 13.5323 169.079 13.3517 169.713 12.9904C170.346 12.6292 170.806 12.1413 171.091 11.5266C171.382 10.9055 171.528 10.2053 171.528 9.42581C171.528 8.64634 171.382 7.94926 171.091 7.33455C170.806 6.71985 170.343 6.23823 169.703 5.88969C169.063 5.53481 168.214 5.35737 167.155 5.35737H163.011V22.7338H160.654Z" fill="#B0E572"/>
-  <path d="M154.068 9.34981C153.859 8.70976 153.584 8.13625 153.241 7.62928C152.906 7.11597 152.503 6.67871 152.034 6.31749C151.572 5.95627 151.046 5.68061 150.456 5.49049C149.867 5.30038 149.221 5.20532 148.517 5.20532C147.364 5.20532 146.315 5.50317 145.371 6.09886C144.426 6.69455 143.676 7.57224 143.118 8.73194C142.56 9.89164 142.281 11.3143 142.281 13C142.281 14.6857 142.563 16.1084 143.127 17.2681C143.691 18.4278 144.455 19.3054 145.418 19.9011C146.381 20.4968 147.465 20.7947 148.669 20.7947C149.785 20.7947 150.767 20.557 151.616 20.0817C152.471 19.6001 153.137 18.9221 153.612 18.0475C154.094 17.1667 154.335 16.1305 154.335 14.9392L155.057 15.0913H149.202V13H156.616V15.0913C156.616 16.6945 156.274 18.0887 155.589 19.2738C154.911 20.4588 153.973 21.3777 152.776 22.0304C151.584 22.6768 150.215 23 148.669 23C146.946 23 145.431 22.5944 144.125 21.7833C142.826 20.9721 141.812 19.8188 141.084 18.3232C140.361 16.8276 140 15.0532 140 13C140 11.4601 140.206 10.0754 140.618 8.84601C141.036 7.61027 141.625 6.5583 142.386 5.69011C143.146 4.82193 144.046 4.15653 145.086 3.69392C146.125 3.23131 147.269 3 148.517 3C149.544 3 150.501 3.15526 151.388 3.46578C152.281 3.76996 153.077 4.20406 153.774 4.76806C154.477 5.32573 155.063 5.9943 155.532 6.77376C156.001 7.5469 156.324 8.40558 156.502 9.34981H154.068Z" fill="#B0E572"/>
-  <g clip-path="url(#clip0_61_1119)">
-  <path d="M10.3055 7.61619H5.73833C5.08819 7.65958 4.44573 7.4556 3.93946 7.04526C3.50628 6.62998 3.27718 6.0458 3.3118 5.44663C3.31527 5.04131 3.37273 4.63782 3.48308 4.24767C3.58092 3.87012 3.72479 3.50581 3.91133 3.16289H15.0731V13.9921L15.0727 15.9234C15.0727 18.2071 14.4162 20.0006 13.103 21.3043C11.7899 22.6079 9.99139 23.2595 7.70765 23.2599C6.62405 23.266 5.54613 23.1072 4.5104 22.7891C3.55086 22.499 2.64458 22.0556 1.827 21.4759C1.08779 20.9591 0.465519 20.2926 0 19.5199L3.28293 16.6937C3.68103 17.3957 4.25042 17.9849 4.93865 18.4066C5.64889 18.818 6.4588 19.0255 7.27949 19.0065C8.28808 19.0065 9.04437 18.7351 9.54871 18.1927C10.0531 17.6503 10.305 16.7984 10.3055 15.6379V7.61619ZM27.8425 23.2595C26.4202 23.2702 25.0098 23.0034 23.6889 22.4743C21.1646 21.4611 19.1427 19.491 18.0648 16.9933C17.5179 15.7175 17.2411 14.3423 17.2518 12.9542C17.2416 11.566 17.5183 10.1908 18.0652 8.91492C19.1435 6.41769 21.165 4.44754 23.6898 3.43392C25.0098 2.90529 26.4202 2.63845 27.8425 2.64905C29.2649 2.63845 30.6753 2.90529 31.9962 3.43392C34.5202 4.44791 36.5418 6.41769 37.6197 8.91492C38.1669 10.1908 38.4437 11.566 38.4336 12.9542C38.4446 14.3423 38.1669 15.7179 37.6197 16.9937C36.5418 19.491 34.5202 21.4611 31.9962 22.4747C30.6753 23.0034 29.2649 23.2702 27.8425 23.2595ZM107.773 23.032C106.992 23.032 106.17 23.0174 105.332 22.9893C104.52 22.9615 103.762 22.9227 103.077 22.8751C102.409 22.8275 101.914 22.7841 101.607 22.746V5.7036C101.579 5.11175 101.753 4.5282 102.099 4.04788C102.478 3.60027 103 3.29763 103.577 3.19148C104.183 3.05975 104.798 2.97873 105.418 2.94904C106.174 2.90145 107.12 2.87742 108.23 2.87742C110.381 2.82344 112.517 3.23222 114.496 4.07684C116.148 4.80189 117.544 6.00506 118.506 7.5306C119.471 9.16193 119.955 11.032 119.906 12.9259C119.932 14.4012 119.667 15.8674 119.124 17.2399C118.612 18.4743 117.808 19.5656 116.78 20.4194C115.657 21.3298 114.358 21.9966 112.965 22.378C111.273 22.8374 109.526 23.0575 107.773 23.032ZM47.9779 23.0315C47.4754 23.0315 46.878 23.0224 46.1509 23.003C45.3762 22.9817 44.6811 22.9581 44.0243 22.9318C43.309 22.9029 42.6558 22.8694 42.0831 22.8317C41.4263 22.7883 41.0051 22.7594 40.8124 22.746V5.7036C40.7822 5.10791 40.9421 4.51834 41.2691 4.01929C41.6482 3.55916 42.1899 3.26264 42.7819 3.19148C43.3802 3.07044 43.9859 2.99389 44.5943 2.96311C45.3982 2.90638 46.2486 2.87742 47.121 2.87742C48.5981 2.86034 50.0734 2.97151 51.5314 3.20938C52.5847 3.36925 53.6032 3.70605 54.5432 4.20546C55.2685 4.60393 55.8687 5.19542 56.2779 5.91444C56.678 6.67648 56.8763 7.52796 56.8562 8.38847C56.8744 9.29522 56.668 10.1926 56.256 11.0007C55.8687 11.7384 55.2859 12.3555 54.5724 12.7852C55.4503 13.12 56.2003 13.7245 56.7137 14.512C57.2517 15.4004 57.5194 16.4265 57.4837 17.4649C57.5038 18.3255 57.3102 19.1781 56.9192 19.9454C56.5237 20.666 55.939 21.2643 55.2283 21.6762C54.3148 22.1842 53.3191 22.5284 52.2878 22.6928C50.8636 22.9356 49.4212 23.049 47.9779 23.0315ZM65.3718 22.746H60.7185V5.70324C60.6883 5.10261 60.8619 4.5092 61.2117 4.01929C61.5872 3.57396 62.1124 3.27981 62.6889 3.19148C63.3813 3.06286 64.0819 2.98174 64.7863 2.94868C65.6148 2.90145 66.6279 2.87742 67.7981 2.87742C69.0834 2.86034 70.365 3.00759 71.6128 3.31635C72.6305 3.56793 73.5887 4.01518 74.4355 4.63289C75.1837 5.18592 75.783 5.91562 76.1803 6.75641C76.5813 7.65503 76.7796 8.63063 76.7622 9.61447C76.7924 10.74 76.5293 11.8541 75.9985 12.8472C75.4596 13.7737 74.6639 14.5246 73.7084 15.0099C74.1076 15.639 74.5543 16.3977 75.0348 17.2647C75.5162 18.1318 76.0086 19.0509 76.5055 20.0052C77.0016 20.9594 77.451 21.879 77.8466 22.746H72.3948C72.224 22.311 71.9837 21.7686 71.6804 21.133C71.3772 20.4974 71.051 19.8411 70.7103 19.1777C70.3549 18.4877 70.0416 17.8946 69.7529 17.3648C69.4606 16.8278 69.2259 16.4292 69.0541 16.1803C68.8623 16.1997 68.6403 16.2142 68.3982 16.2229C68.1552 16.2317 67.8172 16.237 67.3705 16.237C67.1741 16.237 66.9284 16.2324 66.6425 16.2229C66.3566 16.2134 66.077 16.1994 65.8286 16.1803C65.6751 16.1742 65.5225 16.1551 65.3718 16.1232V22.746ZM83.4984 22.746H78.56C78.9628 21.6906 79.4488 20.4566 80.0015 19.0776C80.5596 17.6857 81.1817 16.1685 81.8431 14.5676C82.5145 12.9477 83.2106 11.3003 83.9122 9.6712C84.6284 8.01055 85.3345 6.38754 86.0105 4.84683C86.2718 4.17157 86.723 3.58693 87.3095 3.16289C87.9444 2.79219 88.6733 2.6137 89.4078 2.64905C89.7312 2.65745 90.0527 2.70541 90.3642 2.79183C90.7214 2.88245 91.074 2.99207 91.4202 3.1195C91.6705 3.19449 91.9007 3.32659 92.0917 3.50545C92.2844 3.85294 92.5813 4.4628 92.9759 5.31802C93.3706 6.17332 93.8346 7.20669 94.3617 8.40107C94.8897 9.60233 95.4415 10.8847 96.0023 12.2123C96.5605 13.535 97.1269 14.8881 97.6868 16.2374C98.2395 17.5745 98.7392 18.8185 99.1713 19.9344C99.6079 21.0671 99.9642 22.013 100.226 22.746H94.9737C94.7454 22.0811 94.5015 21.404 94.2457 20.7333C93.9936 20.0714 93.7012 19.325 93.3751 18.5207H85.0687C84.8257 19.0811 84.5809 19.6961 84.3406 20.3477C84.1013 20.9994 83.8154 21.8123 83.4984 22.746ZM45.4658 14.9813V18.7495C45.6558 18.7686 45.96 18.7929 46.3646 18.8211C46.7794 18.8504 47.2169 18.8744 47.6636 18.8923C48.1204 18.9113 48.5223 18.9212 48.8631 18.9212C50.2653 18.9212 51.2491 18.7579 51.789 18.4359C52.328 18.1158 52.6431 17.5205 52.6029 16.8944C52.6385 16.3364 52.3919 15.7974 51.9461 15.4598C51.3542 15.1009 50.6663 14.9338 49.9757 14.9813H45.4658ZM27.8425 7.10199C26.8286 7.08454 25.8292 7.35128 24.9595 7.8728C24.1273 8.38244 23.4431 9.10109 22.9754 9.95703C22.4803 10.8774 22.23 11.9096 22.2474 12.9545C22.2327 13.9947 22.483 15.0213 22.9754 15.9378C23.4404 16.8 24.1246 17.5239 24.9595 18.0362C25.8292 18.5573 26.8286 18.8245 27.8425 18.8066C28.8611 18.823 29.8641 18.5562 30.7392 18.0362C31.5787 17.5289 32.2648 16.8037 32.7243 15.9378C33.2066 15.0183 33.4523 13.9929 33.4377 12.9545C33.4551 11.9112 33.2103 10.8805 32.7243 9.95703C31.7633 8.1632 29.8769 7.06015 27.8425 7.10199ZM108.772 7.1599C108.311 7.1599 107.816 7.1694 107.302 7.1884C106.991 7.18685 106.68 7.21544 106.375 7.27409V18.5211C106.622 18.539 106.946 18.5615 107.388 18.5919C107.793 18.6209 108.182 18.6353 108.544 18.6353C109.465 18.6495 110.383 18.5257 111.267 18.2676C112.006 18.0484 112.688 17.672 113.268 17.1638C113.816 16.6721 114.238 16.0569 114.5 15.3692C114.786 14.587 114.925 13.7588 114.91 12.9259C114.923 12.1027 114.786 11.2839 114.503 10.5102C114.24 9.81738 113.823 9.19354 113.283 8.68654C112.726 8.16969 112.063 7.7788 111.342 7.54083C110.511 7.2752 109.644 7.14667 108.772 7.1599ZM89.2653 7.84384C89.1027 8.2625 88.8798 8.81937 88.5518 9.6427C88.2595 10.3712 87.9562 11.1461 87.6237 12.0117C87.2876 12.8871 87.0117 13.6061 86.7815 14.2099H91.7491C91.581 13.7443 91.381 13.2122 91.1352 12.5826C90.9041 11.9919 90.6638 11.3722 90.4209 10.7412C90.1843 10.126 89.9586 9.55473 89.7504 9.04317C89.522 8.47836 89.3703 8.10804 89.2653 7.84384ZM67.6839 6.93107C67.2701 6.93107 66.8325 6.94066 66.3849 6.95967C66.046 6.96953 65.708 6.99813 65.3718 7.04571V12.07C65.6833 12.1198 65.9985 12.1529 66.3136 12.1696C66.7302 12.1982 67.2591 12.2127 67.8839 12.2127C69.2103 12.2127 70.2179 11.9964 70.8811 11.5706C71.5379 11.1565 71.9207 10.4195 71.8805 9.6438C71.9234 8.82622 71.5224 8.04901 70.8318 7.6098C70.1357 7.15908 69.0761 6.93107 67.6839 6.93107ZM48.5196 6.95967C48.2419 6.95967 47.9057 6.9688 47.4919 6.98816C47.0927 7.00763 46.7072 7.02662 46.3363 7.04526C46.044 7.05631 45.7535 7.08491 45.4648 7.13095V10.842H49.6048C50.2434 10.8801 50.8773 10.7152 51.4172 10.3712C51.8493 10.0461 52.0905 9.5266 52.0594 8.98644C52.0822 8.3649 51.7579 7.78218 51.2181 7.47387C50.659 7.13286 49.751 6.95967 48.5196 6.95967Z" fill="#B0E572"/>
-  </g>
-  <line x1="131" y1="4.15258e-08" x2="131" y2="26" stroke="#B0E572" stroke-width="2"/>
-  <defs>
-  <clipPath id="clip0_61_1119">
-  <rect width="120" height="22" fill="white" transform="translate(0 2)"/>
-  </clipPath>
-  </defs>
-  </svg>`;
+export const logo = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000" xml:space="preserve"><linearGradient id="a" gradientUnits="userSpaceOnUse" x1="39.446" y1="801.241" x2="182.915" y2="944.694" gradientTransform="matrix(5.2695 0 0 -5.2695 -85.79 5100.133)"><stop offset=".05" stop-color="#07b0d3"/><stop offset=".229" stop-color="#4bb8cf"/><stop offset=".744" stop-color="#93ccb9"/><stop offset="1" stop-color="#a8d2af"/></linearGradient><path d="M533.1 834.4c-8.5-8.5-22.1-9.3-32.3-2.5-42.9 29.5-93.7 45.3-145.8 45.5-147.5 0-267.1-121.6-263.1-270.3 3.4-143.7 124.5-257.2 268.3-257.2h282.3c26.8 0 51 19.7 54.4 45.9 3.7 29.2-16.9 55.8-46.1 59.5-2.2.3-4.4.4-6.7.4H359.2c-77 0-142.9 60-145.8 136.8-2.9 80.8 62.1 148 142.5 148H639c193 0 355-152.6 358.4-345.7C1001 199.4 845.5 38 650.1 34.4c-1.7 0-3.4-.1-5.1-.1-60 0-136 14.4-204.5 65-12.3 8.2-13.6 27.2-2.9 37.8l29.3 29.3c8.5 8.5 22.1 9.3 32.3 2.5 42.9-29.5 93.7-45.3 145.8-45.5 147.5 0 267.1 121.6 263.1 269.9-3.4 143.7-124.5 257.2-268.3 257.2H357.6c-26.8 0-51-19.2-54.4-45.9-3.7-29.2 16.9-55.8 46.1-59.5 2.2-.3 4.4-.4 6.7-.4h284.8c77 0 142.9-60 145.8-136.8 2.9-80.8-62.1-148-142.5-148H360.9c-193-.3-354.5 152.4-358.4 345.4-3.6 195.4 151.9 356.8 347.3 360.4 1.7 0 3.4.1 5.1.1 60 0 136-14.4 204.5-65 12.3-8.2 13.6-27.2 2.9-37.8l-29.2-28.6z" fill="url(#a)"/></svg>`;

frontend/src/components/Search.tsx

@@ -1,10 +1,10 @@
-import { ChangeEvent, InputHTMLAttributes, KeyboardEvent, useEffect, useState } from 'react';
+import { CloseButton, TextInput } from '@mantine/core';
+import { IconSearch } from '@tabler/icons-react';
+import { ChangeEvent, KeyboardEvent, useEffect, useState } from 'react';
 import { useEventCallback } from 'src/hooks';
-import { cn } from 'src/lib';
 import { texts } from 'src/texts';
-import { Icon } from './Icon';
 
-interface SearchProps extends InputHTMLAttributes<HTMLInputElement> {
+interface SearchProps {
   // The actual value.
   value?: string;
 
@@ -13,7 +13,7 @@ interface SearchProps extends InputHTMLAttributes<HTMLInputElement> {
 }
 
 export const Search = (props: SearchProps) => {
-  const { onSearch, value, ...other } = props;
+  const { onSearch, value } = props;
 
   const [search, setSearch] = useState<string>();
 
@@ -44,21 +44,22 @@ export const Search = (props: SearchProps) => {
   });
 
   const doClear = useEventCallback(() => {
-    if (hasChanged(value, '') && onSearch) {
-      onSearch('');
-    }
+    setSearch('');
+    onSearch('');
   });
 
   return (
-    <label className="input input-bordered flex items-center gap-2 rounded-full pr-2">
-      <Icon icon="search" size={18} className="text-gray-500" />
-
-      <input {...other} value={search || ''} onChange={doChange} onKeyUp={doPress} placeholder={texts.common.search} />
-
-      <button type="button" className={cn('btn btn-ghost btn-sm rounded-full px-2', { invisible: !search })} onClick={doClear}>
-        <Icon icon="close" size={16} className="text-gray-500" />
-      </button>
-    </label>
+    <TextInput
+      leftSection={<IconSearch />}
+      rightSectionPointerEvents="all"
+      rightSection={
+        <CloseButton aria-label={texts.common.clearSearch} onClick={doClear} style={{ display: search ? undefined : 'none' }} />
+      }
+      placeholder={texts.common.search}
+      value={search || ''}
+      onChange={doChange}
+      onKeyUp={doPress}
+    />
   );
 };
 

frontend/src/pages/admin/files/FilesPage.tsx

@@ -230,7 +230,6 @@ export function FilesPage() {
               <Search value={globalFilter ?? ''} onSearch={(value) => setGlobalFilter(String(value))} />
               <NativeSelect
                 size="sm"
-                radius="lg"
                 data={['10', '15', '20', '25', '30']}
                 onChange={(e) => table.setPageSize(Number(e.target.value))}
                 value={String(table.getState().pagination.pageSize)}