Clean up 2 (#28)

* Remove some predefined companies.

* Sort cards/companies.

* Add some icons.

* Add white color.

* Remove white color.

* Adjust margins/paddings for input, add to button.

app/(homescreens)/add-cards/predefined-companies-list.tsx

@@ -3,6 +3,7 @@
 import { getNameFilter } from '@/app/lib/filters';
 import { predefinedCompanies } from '@/app/lib/predefined-companies';
 import { Routes } from '@/app/lib/shared';
+import { sortAlphabetically } from '@/app/lib/sorts';
 import Image from 'next/image';
 import Link from 'next/link';
 import { useSearchParams } from 'next/navigation';
@@ -16,20 +17,28 @@ export function PredefinedCompaniesList() {
     : predefinedCompanies;
   return (
     <ul className="menu menu-lg rounded-box text-base-content">
-      {companies.map(company => (
-        <li key={company.name}>
-          <Link
-            href={{
-              pathname: Routes.CreateCard,
-              query: { predefinedCompany: company.name },
-            }}
-            prefetch={false}
-          >
-            <Image {...company.svg} alt={company.name} className="w-10 h-10" />
-            <span className="text-xl">{company.name}</span>
-          </Link>
-        </li>
-      ))}
+      {companies
+        .sort(({ name: nameA }, { name: nameB }) =>
+          sortAlphabetically(nameA, nameB)
+        )
+        .map(company => (
+          <li key={company.name}>
+            <Link
+              href={{
+                pathname: Routes.CreateCard,
+                query: { predefinedCompany: company.name },
+              }}
+              prefetch={false}
+            >
+              <Image
+                {...company.svg}
+                alt={company.name}
+                className="w-10 h-10"
+              />
+              <span className="text-xl">{company.name}</span>
+            </Link>
+          </li>
+        ))}
     </ul>
   );
 }

app/(homescreens)/my-cards/my-cards-page.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import { CardsList } from '@/app/(homescreens)/my-cards/cards-list';
+import { sortAlphabetically } from '@/app/lib/sorts';
 import {
   AppActionTypes,
   AppState,
@@ -96,7 +97,12 @@ export default function MyCardsPage() {
           description="No cards found for given filter. Adjust your filter to see other cards."
         />
       ) : (
-        <CardsList cards={visibleCards} dispatch={dispatch} />
+        <CardsList
+          cards={visibleCards.sort(({ name: nameA }, { name: nameB }) =>
+            sortAlphabetically(nameA, nameB)
+          )}
+          dispatch={dispatch}
+        />
       )}
     </PageTemplate>
   );

app/lib/predefined-companies.ts

@@ -80,22 +80,6 @@ export const predefinedCompanies: {
       height: 2500,
     },
   },
-  {
-    name: 'O2',
-    svg: {
-      src: '/company-logos/o2.svg',
-      width: 2500,
-      height: 2500,
-    },
-  },
-  {
-    name: 'Rossmann',
-    svg: {
-      src: '/company-logos/rossmann.svg',
-      width: 116.6,
-      height: 14.3,
-    },
-  },
   {
     name: 'Tesco',
     svg: {

app/lib/shared.ts

@@ -14,6 +14,7 @@ import {
   IconPaperclip,
   IconPaw,
   IconPlane,
+  IconShirt,
   IconShoppingCart,
   IconTheater,
   IconTicket,
@@ -56,14 +57,16 @@ export enum CardIcon {
   Office = 'Office',
   Gaming = 'Gaming',
   Entertainment = 'Entertainment',
+  Clothes = 'Clothes',
 }
 export const iconsMap = {
   [CardIcon.Grocery]: IconShoppingCart,
+  [CardIcon.Clothes]: IconShirt,
   [CardIcon.Retail]: IconPaperBag,
   [CardIcon.Pharmacy]: IconFirstAidKit,
-  [CardIcon.Gas]: IconGasStation,
   [CardIcon.Restaurant]: IconToolsKitchen2,
   [CardIcon.Cafes]: IconCoffee,
+  [CardIcon.Gas]: IconGasStation,
   [CardIcon.Accommodation]: IconBed,
   [CardIcon.Airlines]: IconPlane,
   [CardIcon.Car]: IconCar,

app/lib/sorts.ts

@@ -0,0 +1,3 @@
+export function sortAlphabetically(a: string, b: string): number {
+  return a.toLocaleLowerCase() > b.toLocaleLowerCase() ? 1 : -1;
+}

app/ui/dropdown-field.tsx

@@ -49,11 +49,11 @@ export function DropdownField<T extends FieldValues, U = string>({
               <span className="label-text">{label}</span>
             </div>
             <div className={clsx('dropdown', dropdownClassName)} key="dropdown">
-              <div className="input input-bordered w-full flex items-center">
+              <div className="input input-bordered w-full flex items-center px-0">
                 <div
                   tabIndex={0}
                   role="button"
-                  className="btn btn-ghost w-full text-right px-0 justify-start"
+                  className="btn btn-ghost w-full text-right justify-start"
                 >
                   {currentOption ? currentOption.label : ''}
                 </div>