chore: remove daisyui and replace layout

components/LocationMenu.tsx

@@ -14,29 +14,59 @@
 // You should have received a copy of the GNU Affero General Public License
 // along with this program.  If not, see <https://www.gnu.org/licenses/>.
 
-import BrSelect from "./brickroom/BrSelect";
+import { Text } from "@bbtgnn/polaris-interfacer";
 import { useRouter } from "next/router";
+import { ChildrenProp } from "./brickroom/types";
+import TopbarPopover from "./partials/topbar/TopbarPopover";
 
 const LocationMenu = ({ className }: { className?: string }) => {
   const router = useRouter();
   const { pathname, asPath, query, locale } = router;
-  const handleSelect = (e: any) => {
-    e.preventDefault();
-    router.push({ pathname, query }, asPath, { locale: e.target.value });
+  const handleSelect = (loc: string) => {
+    router.push({ pathname, query }, asPath, { locale: loc });
   };
+  //locales with flag
+  const locales = [
+    { label: "en", flag: "🇬🇧" },
+    { label: "fr", flag: "🇫🇷" },
+    { label: "it", flag: "🇮🇹" },
+    { label: "de", flag: "🇩🇪" },
+  ];
+
   return (
-    <BrSelect
-      className={className}
-      array={[
-        { id: "en", name: "en" },
-        { id: "de", name: "de" },
-        { id: "fr", name: "fr" },
-        { id: "it", name: "it" },
-      ]}
-      handleSelect={handleSelect}
-      value={locale}
-      roundedLG
-    />
+    <TopbarPopover
+      id="user-menu"
+      buttonContent={
+        <Text as="p" variant="headingXl">
+          {locales.find(l => l.label === locale)?.flag}
+        </Text>
+      }
+    >
+      <div className="divide-y-1 divide-slate-200">
+        <div>
+          {locales.map(loc => (
+            <MenuLink onclick={() => handleSelect(loc.label)} key={loc.label}>
+              <Text as="p" variant="headingXl">
+                {loc.flag}
+              </Text>
+            </MenuLink>
+          ))}
+        </div>
+      </div>
+    </TopbarPopover>
   );
 };
 export default LocationMenu;
+
+function MenuLink(props: { onclick: () => void } & ChildrenProp) {
+  const { onclick, children } = props;
+  return (
+    <button onClick={onclick} className="block w-full">
+      <a>
+        <div className="hover:bg-slate-100 py-2 px-3">
+          <div className="">{children}</div>
+        </div>
+      </a>
+    </button>
+  );
+}

components/SearchBar.tsx

@@ -14,9 +14,9 @@
 // You should have received a copy of the GNU Affero General Public License
 // along with this program.  If not, see <https://www.gnu.org/licenses/>.
 
-import React, { useEffect, useState } from "react";
-import { useRouter } from "next/router";
 import { useTranslation } from "next-i18next";
+import { useRouter } from "next/router";
+import React, { useState } from "react";
 
 const SearchBar = () => {
   const router = useRouter();
@@ -34,7 +34,7 @@ const SearchBar = () => {
       <input
         type="text"
         placeholder={t("search") + "..."}
-        className="input rounded-xl input-bordered w-128"
+        className="p-3 rounded-xl input-bordered w-128 outline-offset-1 outline-primary"
         onKeyDown={handleKeyDown}
         onChange={e => setSearchString(e.target.value)}
       />

components/brickroom/IfSidebarItem.tsx

@@ -30,10 +30,10 @@ const IfSidebarItem = ({ text, tag, leftIcon, rightIcon, disabled = false, activ
   const classes = classNames({
     // Base styles
     "flex flex-row justify-between": true,
-    "btn btn-ghost font-medium normal-case rounded-lg border-2": true,
+    "font-medium normal-case rounded-lg border-2 p-4": true,
     // Disabled styles
     "text-primary hover:bg-amber-200": !disabled,
-    "btn-disabled text-gray-400 border-0": disabled,
+    "text-gray-400 border-0": disabled,
     // Active styles
     "border-none": !active,
     "border-amber-200": active,

components/layout/WithFilterLayout.tsx

@@ -1,5 +1,5 @@
+import { Button } from "@bbtgnn/polaris-interfacer";
 import { AdjustmentsIcon } from "@heroicons/react/outline";
-import cn from "classnames";
 import PTitleCounter from "components/polaris/PTitleCounter";
 import ProjectsFilters from "components/ProjectsFilters";
 import { useTranslation } from "next-i18next";
@@ -31,15 +31,14 @@ const WithFilterLayout = ({
         <div className="flex items-center justify-between py-5">
           {header ? <PTitleCounter title={header} titleTag="h2" length={length} /> : <div />}
           {!hideFilters && (
-            <button
+            <Button
               onClick={toggleFilter}
-              className={cn(
-                "gap-2 text-white-700 font-normal normal-case rounded-[4px] border-1 btn btn-sm btn-outline border-white-600 bg-white-100 hover:text-accent hover:bg-white-100",
-                { "bg-accent text-white-100": showFilter }
-              )}
+              outline={!showFilter}
+              pressed={showFilter}
+              icon={<AdjustmentsIcon className="w-5 h-5" />}
             >
-              <AdjustmentsIcon className="w-5 h-5" /> {t("Filter by")}
-            </button>
+              {t("Filter by")}
+            </Button>
           )}
         </div>
         <div className="flex flex-row flex-nowrap items-start space-x-8 w-full">

components/partials/topbar/Topbar.tsx

@@ -43,7 +43,11 @@ function Topbar({ search = true, children, userMenu = true, cta, burger = true }
       <div className="navbar-start">
         {children}
         {burger && (
-          <label htmlFor="my-drawer" className="btn btn-square btn-ghost drawer-button mr-2" id="sidebarOpener">
+          <label
+            htmlFor="my-drawer"
+            className="drawer-button hover:bg-amber-200 rounded-lg p-2 mr-3"
+            id="sidebarOpener"
+          >
             <svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
               <path
                 fillRule="evenodd"

package.json

@@ -54,7 +54,6 @@
     "base64url": "^3.0.1",
     "boring-avatars": "^1.7.0",
     "classnames": "^2.3.2",
-    "daisyui": "^2.41.0",
     "dayjs": "^1.11.6",
     "dexie": "^3.2.3",
     "dexie-react-hooks": "^1.1.3",