Move to lucide from feather

the-clothing-loop · Apr 29, 2024 · 3456e0f · 3456e0f
1 parent 83ebef6
commit 3456e0f
Show file tree

Hide file tree

Showing 40 changed files with 158 additions and 145 deletions.
diff --git a/app/src/components/PrivateRoute/Offline.tsx b/app/src/components/PrivateRoute/Offline.tsx
@@ -2,11 +2,13 @@ import {
   IonButton,
   IonContent,
   IonHeader,
+  IonIcon,
   IonPage,
   IonTitle,
   IonToolbar,
 } from "@ionic/react";
 import { t } from "i18next";
+import { cloudOfflineOutline } from "ionicons/icons";
 
 export default function Offline() {
   const handleClickRefresh = () => window.location.reload();
@@ -21,7 +23,7 @@ export default function Offline() {
       <IonContent fullscreen color="light">
         <div className="tw-flex tw-items-center tw-h-full tw-justify-center">
           <div className="">
-            <span className="feather feather-offline" />
+            <IonIcon icon={cloudOfflineOutline} />
             <p>Offline</p>
 
             <IonButton onClick={handleClickRefresh}>Refresh</IonButton>

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -33,6 +33,7 @@
     "i18next-browser-languagedetector": "^7.2.0",
     "i18next-http-backend": "^2.5.0",
     "js-cookie": "^3.0.5",
+    "lucide-static": "^0.376.0",
     "mapbox-gl": "^2.11.0",
     "minisearch": "^6.3.0",
     "nanostores": "^0.10.0",

diff --git a/frontend/src/components/react/components/AddressForm.tsx b/frontend/src/components/react/components/AddressForm.tsx
@@ -331,7 +331,7 @@ export default function AddressForm(props: {
               {openCheckAddress ? (
                 loading ? (
                   <div className="flex items-center justify-center h-36">
-                    <div className="feather feather-loader animate-spin text-2xl py-12" />
+                    <div className="icon-loader animate-spin text-2xl py-12" />
                   </div>
                 ) : (
                   <div className="grid grid-cols-1 sm:grid-cols-2 gap-2 mt-4">

diff --git a/frontend/src/components/react/components/CategoriesDropdown.tsx b/frontend/src/components/react/components/CategoriesDropdown.tsx
@@ -48,8 +48,8 @@ export default function CategoriesDropdown({
       >
         <span className="truncate">{btnLabel}</span>
         <span
-          className={`pl-2 rtl:pl-0 rtl:pr-2 feather ${
-            dropdown.open ? "feather-arrow-up" : "feather-arrow-down"
+          className={`pl-2 rtl:pl-0 rtl:pr-2 ${
+            dropdown.open ? "icon-arrow-up" : "icon-arrow-down"
           }`}
         ></span>
       </label>

diff --git a/frontend/src/components/react/components/ChainDetailsForm.tsx b/frontend/src/components/react/components/ChainDetailsForm.tsx
@@ -377,8 +377,8 @@ export default function ChainDetailsForm({
             )}
             <button type="submit" className="btn btn-primary">
               {submitText}
-              <span className="feather feather-arrow-right ml-4 rtl:hidden"></span>
-              <span className="feather feather-arrow-left mr-4 ltr:hidden"></span>
+              <span className="icon-arrow-right ml-4 rtl:hidden"></span>
+              <span className="icon-arrow-left mr-4 ltr:hidden"></span>
             </button>
           </div>
         </form>

diff --git a/frontend/src/components/react/components/ChainsList.tsx b/frontend/src/components/react/components/ChainsList.tsx
@@ -216,19 +216,19 @@ export default function ChainsList({ chains, setChains }: Props) {
                       (!userChain && authUser?.is_root_admin) ? (
                         chain.published ? (
                           <div className="tooltip" data-tip="published">
-                            <span className="feather feather-eye text-lg text-green" />
+                            <span className="icon-eye text-lg text-green" />
                           </div>
                         ) : (
                           <div className="tooltip" data-tip="draft">
-                            <span className="feather feather-eye-off text-lg text-red" />
+                            <span className="icon-eye-off text-lg text-red" />
                           </div>
                         )
                       ) : (
                         <div
                           className="tooltip"
                           data-tip={t("pendingApproval")}
                         >
-                          <span className="feather btn-circle btn-lg feather-user-check text-yellow-darkest" />
+                          <span className="btn-circle btn-lg icon-user-check text-yellow-darkest" />
                         </div>
                       )}
                     </td>
@@ -245,8 +245,8 @@ export default function ChainsList({ chains, setChains }: Props) {
                             )}
                           >
                             <span className="max-xs:hidden">{t("view")}</span>
-                            <span className="feather feather-arrow-left sm:mr-3 ltr:hidden"></span>
-                            <span className="feather feather-arrow-right sm:ml-3 rtl:hidden"></span>
+                            <span className="icon-arrow-left sm:mr-3 ltr:hidden"></span>
+                            <span className="icon-arrow-right sm:ml-3 rtl:hidden"></span>
                             {hasNotification ? (
                               <div className="block bg-red rounded-full w-3.5 h-3.5 absolute -top-1.5 -right-1.5"></div>
                             ) : null}
@@ -259,7 +259,7 @@ export default function ChainsList({ chains, setChains }: Props) {
                               chains?.length > 5 ? "btn-sm" : ""
                             } ${userChain ? "" : "btn-disabled"}`}
                           >
-                            <span className="text-xl feather feather-more-vertical" />
+                            <span className="text-xl icon-more-vertical" />
                           </label>
                           {userChain ? (
                             <ul
@@ -319,7 +319,7 @@ export default function ChainsList({ chains, setChains }: Props) {
                                       <span className="opacity-50">
                                         {t("remindHost")}
                                       </span>
-                                      <i className="feather feather-slash ml-1 rtl:ml-0 rtl:mr-1"></i>
+                                      <i className="icon-slash ml-1 rtl:ml-0 rtl:mr-1"></i>
                                     </span>
                                     <span
                                       className="text-xs"

diff --git a/frontend/src/components/react/components/Counters/Counters.tsx b/frontend/src/components/react/components/Counters/Counters.tsx
@@ -106,8 +106,8 @@ export default function Counters() {
               className="btn btn-primary btn-circle"
               aria-label="our impact"
             >
-              <span className="feather feather-arrow-right rtl:hidden" />
-              <span className="feather feather-arrow-left ltr:hidden" />
+              <span className="icon-arrow-right rtl:hidden" />
+              <span className="icon-arrow-left ltr:hidden" />
             </a>
           </div>
           <div className="opacity-100 whitespace-normal">

diff --git a/frontend/src/components/react/components/DataExport.tsx b/frontend/src/components/react/components/DataExport.tsx
@@ -66,7 +66,7 @@ export function UserDataExport(props: {
       data-tip={t("exportToSpreadsheet")}
     >
       {t("exportData")}
-      <span className="feather feather-download ms-3" />
+      <span className="icon-download ms-3" />
     </CSVLink>
   );
 }
diff --git a/frontend/src/components/react/components/EventChangeForm.tsx b/frontend/src/components/react/components/EventChangeForm.tsx
@@ -414,7 +414,7 @@ export default function EventChangeForm(props: {
                     className="btn btn-error"
                     onClick={onImageDelete}
                   >
-                    <span className="feather feather-trash" />
+                    <span className="icon-trash" />
                   </button>
                 ) : null}
                 <button
@@ -424,7 +424,7 @@ export default function EventChangeForm(props: {
                   onClick={() => refFileInput.current?.click()}
                 >
                   {t("uploadImage")}
-                  <span className="feather feather-upload ltr:ml-4 rtl:mr-4"></span>
+                  <span className="icon-upload ltr:ml-4 rtl:mr-4"></span>
                 </button>
               </div>
               {values.image_url ? (
@@ -439,7 +439,7 @@ export default function EventChangeForm(props: {
           <div className="flex justify-end">
             <button type="submit" className="btn btn-primary">
               {t("submit")}
-              <span className="feather feather-arrow-right ltr:ml-4 rtl:mr-4"></span>
+              <span className="icon-arrow-right ltr:ml-4 rtl:mr-4"></span>
             </button>
           </div>
         </div>

diff --git a/frontend/src/components/react/components/FindChain/ChainDescription.tsx b/frontend/src/components/react/components/FindChain/ChainDescription.tsx
@@ -46,8 +46,8 @@ export default function ChainDescription(props: Props) {
         <button
           type="button"
           aria-label="expand"
-          className={"sticky bottom-0 btn btn-xs btn-secondary feather ".concat(
-            isOpenDesc ? "feather-chevron-up" : "feather-chevron-down",
+          className={"sticky bottom-0 btn btn-xs btn-secondary ".concat(
+            isOpenDesc ? "icon-chevron-up" : "icon-chevron-down",
           )}
           onClick={handleClickShortenedDesc}
         ></button>

diff --git a/frontend/src/components/react/components/FindChain/SearchBar.tsx b/frontend/src/components/react/components/FindChain/SearchBar.tsx
@@ -195,7 +195,7 @@ export default function SearchBar(props: Props) {
 
         <button type="submit" className="grow btn btn-primary" ref={refSubmit}>
           <span className="hidden sm:inline">{t("search")}</span>
-          <span className="sm:hidden inline feather feather-search"></span>
+          <span className="sm:hidden inline icon-search"></span>
         </button>
       </div>
     </form>

diff --git a/frontend/src/components/react/components/FindChain/Sidebar.tsx b/frontend/src/components/react/components/FindChain/Sidebar.tsx
@@ -141,9 +141,9 @@ export default function SideBar({
             onClick={handleClose}
             className="absolute top-0 sm:top-2 right-2 rtl:right-auto rtl:left-2 btn btn-md sm:btn-sm text-2xl btn-circle btn-accent tooltip tooltip-left flex justify-center"
           >
-            <span className="feather feather-arrow-left hidden sm:ltr:block"></span>
-            <span className="feather feather-arrow-right hidden sm:rtl:block"></span>
-            <span className="feather feather-x sm:hidden"></span>
+            <span className="icon-arrow-left hidden sm:ltr:block"></span>
+            <span className="icon-arrow-right hidden sm:rtl:block"></span>
+            <span className="icon-x sm:hidden"></span>
           </button>
         </div>
 
@@ -241,7 +241,7 @@ function SideBarChainItem(props: {
                   onClick={handleClickViewChain}
                 >
                   {t("viewLoop")}
-                  <span className="feather feather-shield ml-3"></span>
+                  <span className="icon-shield ml-3"></span>
                 </button>
               ) : null}
             </div>
@@ -252,12 +252,12 @@ function SideBarChainItem(props: {
           userChain.is_approved ? (
             <p className="bg-primary px-3 font-semibold text-sm border border-primary h-8 inline-flex items-center">
               {t("joined")}
-              <span className="feather feather-check ml-3"></span>
+              <span className="icon-check ml-3"></span>
             </p>
           ) : (
             <p className="px-3 font-semibold text-sm border border-secondary h-8 inline-flex items-center text-secondary">
               {t("pendingApproval")}
-              <span className="feather feather-user-check ml-3"></span>
+              <span className="icon-user-check ml-3"></span>
             </p>
           )
         ) : props.chain.open_to_new_members ? (
@@ -268,8 +268,8 @@ function SideBarChainItem(props: {
               className="btn btn-sm btn-primary"
             >
               {t("join")}
-              <span className="feather feather-arrow-right ml-3 rtl:hidden"></span>
-              <span className="feather feather-arrow-left mr-3 ltr:hidden"></span>
+              <span className="icon-arrow-right ml-3 rtl:hidden"></span>
+              <span className="icon-arrow-left mr-3 ltr:hidden"></span>
             </button>
           ) : (
             <p className="bg-primary px-3 font-semibold text-sm border border-primary h-8 inline-flex items-center">
@@ -279,7 +279,7 @@ function SideBarChainItem(props: {
         ) : (
           <p className="px-3 font-semibold text-sm border border-secondary h-8 inline-flex items-center text-secondary">
             {t("closed")}
-            <span className="feather feather-lock ml-3 rtl:ml-0 rtl:mr-3"></span>
+            <span className="icon-lock ml-3 rtl:ml-0 rtl:mr-3"></span>
           </p>
         )}
       </div>

diff --git a/frontend/src/components/react/components/Footer.tsx b/frontend/src/components/react/components/Footer.tsx
@@ -120,7 +120,7 @@ export default function Footer(props: { pathname: string }) {
                     <a
                       href="mailto:hello@clothingloop.org"
                       aria-label="Our email address"
-                      className="btn btn-circle btn-outline mr-3 rtl:mr-0 rtl:ml-3 flex justify-center hover:bg-[#b464a8] feather feather-mail text-lg"
+                      className="btn btn-circle btn-outline mr-3 rtl:mr-0 rtl:ml-3 flex justify-center hover:bg-[#b464a8] icon-mail text-lg"
                     ></a>
                     <span
                       {...addCopyAttributes(t, "footer-copy-email", "text-sm")}
@@ -133,7 +133,7 @@ export default function Footer(props: { pathname: string }) {
                       href="https://www.instagram.com/theclothingloop/"
                       target="_blank"
                       rel="noreferrer"
-                      className="btn btn-circle btn-outline feather feather-instagram text-lg mr-3 rtl:mr-0 rtl:ml-3 hover:bg-instagram"
+                      className="btn btn-circle btn-outline icon-instagram text-lg mr-3 rtl:mr-0 rtl:ml-3 hover:bg-instagram"
                       aria-label="link to our instagram account"
                     ></a>
                     <span
@@ -153,7 +153,7 @@ export default function Footer(props: { pathname: string }) {
                       aria-label="Our Facebook page"
                       className="flex flex-row items-center group"
                     >
-                      <span className="btn btn-circle btn-outline mr-3 rtl:mr-0 rtl:ml-3 flex justify-center group-hover:text-white group-hover:border-base-content group-hover:bg-facebook feather feather-facebook text-lg"></span>
+                      <span className="btn btn-circle btn-outline mr-3 rtl:mr-0 rtl:ml-3 flex justify-center group-hover:text-white group-hover:border-base-content group-hover:bg-facebook icon-facebook text-lg"></span>
                       <span className="text-sm lg:hidden">Facebook</span>
                     </a>
                   </li>
@@ -164,7 +164,7 @@ export default function Footer(props: { pathname: string }) {
                       aria-label="Our LinkedIn page"
                       className="flex flex-row items-center group"
                     >
-                      <span className="btn btn-circle btn-outline mr-3 rtl:mr-0 rtl:ml-3 flex justify-center group-hover:text-white group-hover:border-base-content group-hover:bg-[#0a66c2] feather feather-linkedin text-lg"></span>
+                      <span className="btn btn-circle btn-outline mr-3 rtl:mr-0 rtl:ml-3 flex justify-center group-hover:text-white group-hover:border-base-content group-hover:bg-[#0a66c2] icon-linkedin text-lg"></span>
                       <span className="text-sm lg:hidden">LinkedIn</span>
                     </a>
                   </li>

diff --git a/frontend/src/components/react/components/Navbar.tsx b/frontend/src/components/react/components/Navbar.tsx
@@ -37,8 +37,8 @@ function Navbar(props: { pathname: string }) {
           className="mr-3 btn-lg btn-circle btn-ghost hover:bg-base-200 peer-checked:text-secondary peer-checked:animate-[spin-quarter_150ms_linear] flex justify-center items-center lg:hidden relative z-[60] checked:ring-2 checked:ring-offset-2 ring-teal peer-[:checked_>:nth-of-type(1)]:hidden peer-[:checked_>:nth-of-type(2)]:block cursor-pointer"
           aria-label="Menu"
         >
-          <span className="feather feather-menu text-2xl block"></span>
-          <span className="feather feather-x text-2xl hidden"></span>
+          <span className="icon-menu text-2xl block"></span>
+          <span className="icon-x text-2xl hidden"></span>
         </label>
         <div className="hidden peer-checked:block fixed inset-0 lg:!hidden z-50 bg-white"></div>
         <div className="hidden peer-checked:block absolute inset-0 lg:!hidden z-50">
@@ -56,16 +56,16 @@ function Navbar(props: { pathname: string }) {
               href={localizePath("/loops/new/users/signup")}
               className="mb-3 btn btn-primary btn-outline"
             >
-              <span className="feather feather-arrow-left mr-3"></span>
+              <span className="icon-arrow-left mr-3"></span>
               {t("startNewLoop")}
             </a>
             <a
               href={localizePath("/loops/find")}
               className="mb-3 btn btn-primary btn-outline"
             >
               {t("findLoops")}
-              <span className="feather feather-arrow-right ml-3 rtl:hidden"></span>
-              <span className="feather feather-arrow-left mr-3 ltr:hidden"></span>
+              <span className="icon-arrow-right ml-3 rtl:hidden"></span>
+              <span className="icon-arrow-left mr-3 ltr:hidden"></span>
             </a>
 
             <a
@@ -129,8 +129,8 @@ function Navbar(props: { pathname: string }) {
                 className="ltr:mr-4 rtl:ml-4 btn btn-primary btn-outline"
               >
                 {t("findLoops")}
-                <span className="feather feather-arrow-right ml-4 rtl:hidden"></span>
-                <span className="feather feather-arrow-left mr-4 ltr:hidden"></span>
+                <span className="icon-arrow-right ml-4 rtl:hidden"></span>
+                <span className="icon-arrow-left mr-4 ltr:hidden"></span>
               </a>
             )}
 

diff --git a/frontend/src/components/react/components/Newsletter.tsx b/frontend/src/components/react/components/Newsletter.tsx
@@ -99,8 +99,8 @@ export const Newsletter = () => {
                 type="submit"
               >
                 {t("submit")}
-                <span className="feather feather-arrow-right ml-3 rtl:hidden"></span>
-                <span className="feather feather-arrow-left mr-3 ltr:hidden"></span>
+                <span className="icon-arrow-right ml-3 rtl:hidden"></span>
+                <span className="icon-arrow-left mr-3 ltr:hidden"></span>
               </button>
             </div>
           </div>

diff --git a/frontend/src/components/react/components/Popover.tsx b/frontend/src/components/react/components/Popover.tsx
@@ -13,7 +13,7 @@ export default function PopoverOnHover({ message, className }: IProps) {
       aria-label={message}
       data-tip={message}
     >
-      <span className="feather feather-help-circle text-lg" />
+      <span className="icon-help-circle text-lg" />
     </div>
   );
 }
diff --git a/frontend/src/components/react/components/PopupLegal.tsx b/frontend/src/components/react/components/PopupLegal.tsx
@@ -87,7 +87,7 @@ export default function PopupLegal({
                   className="absolute bottom-2 ltr:right-2 rtl:left-2 btn btn-circle btn-sm btn-secondary text-white opacity-50 hover:opacity-90 tooltip ltr:tooltip-left rtl:tooltip-right before:font-normal before:text-sm"
                   data-tip="Scroll to the bottom."
                 >
-                  <span className="feather feather-arrow-down font-bold" />
+                  <span className="icon-arrow-down font-bold" />
                 </button>
               </div>
             </>
@@ -112,7 +112,7 @@ export default function PopupLegal({
                   className="absolute bottom-2 ltr:right-2 rtl:left-2 btn btn-circle btn-sm btn-secondary text-white opacity-50 hover:opacity-90 tooltip ltr:tooltip-left rtl:tooltip-right before:font-normal before:text-sm"
                   data-tip="Scroll to the bottom."
                 >
-                  <span className="feather feather-arrow-down font-bold" />
+                  <span className="icon-arrow-down font-bold" />
                 </button>
               </div>
             </>