Improve list design

binary-koan · Mar 30, 2024 · 731db00 · 731db00
1 parent 229b79f
commit 731db00
Show file tree

Hide file tree

Showing 7 changed files with 97 additions and 87 deletions.
diff --git a/web/src/components/accounts/AccountsList.tsx b/web/src/components/accounts/AccountsList.tsx
@@ -27,44 +27,46 @@ const AccountsList: Component<{
   const defaultAccountId = () => props.currentUser?.currentUser?.defaultAccount?.id
 
   return (
-    <For each={props.data.accounts}>
-      {(account) => (
-        <div class="flex items-center bg-white px-4 py-2 shadow-sm">
-          <div class="mr-4 min-w-0 flex-1">
-            <h3 class="mb-1 truncate leading-none">{account.name}</h3>
-            <p class="text-xs leading-tight text-gray-600">{account.currency.code}</p>
+    <div class="flex flex-col gap-px bg-gray-100 shadow-sm">
+      <For each={props.data.accounts}>
+        {(account) => (
+          <div class="flex items-center bg-white px-4 py-2 shadow-sm">
+            <div class="mr-4 min-w-0 flex-1">
+              <h3 class="mb-1 truncate leading-none">{account.name}</h3>
+              <p class="text-xs leading-tight text-gray-600">{account.currency.code}</p>
+            </div>
+            <Button
+              size="sm"
+              variant="ghost"
+              colorScheme={account.id === defaultAccountId() ? "primary" : "neutral"}
+              class="ml-auto mr-2"
+              title={"Set default to " + account.name}
+              onClick={() => setDefaultAccount({ id: account.id })}
+            >
+              <IconAsterisk />
+            </Button>
+            <LinkButton
+              href={`/accounts/${account.id}`}
+              size="sm"
+              variant="ghost"
+              class="ml-auto mr-2"
+              title={"Edit account " + account.name}
+            >
+              <IconEdit />
+            </LinkButton>
+            <Button
+              size="sm"
+              variant="ghost"
+              colorScheme="danger"
+              title={"Delete account " + account.name}
+              onClick={() => onDeleteClick(account.id)}
+            >
+              <IconTrash />
+            </Button>
           </div>
-          <Button
-            size="sm"
-            variant="ghost"
-            colorScheme={account.id === defaultAccountId() ? "primary" : "neutral"}
-            class="ml-auto mr-2"
-            title={"Set default to " + account.name}
-            onClick={() => setDefaultAccount({ id: account.id })}
-          >
-            <IconAsterisk />
-          </Button>
-          <LinkButton
-            href={`/accounts/${account.id}`}
-            size="sm"
-            variant="ghost"
-            class="ml-auto mr-2"
-            title={"Edit account " + account.name}
-          >
-            <IconEdit />
-          </LinkButton>
-          <Button
-            size="sm"
-            variant="ghost"
-            colorScheme="danger"
-            title={"Delete account " + account.name}
-            onClick={() => onDeleteClick(account.id)}
-          >
-            <IconTrash />
-          </Button>
-        </div>
-      )}
-    </For>
+        )}
+      </For>
+    </div>
   )
 }
 

diff --git a/web/src/components/categories/CategoriesList.tsx b/web/src/components/categories/CategoriesList.tsx
@@ -85,24 +85,26 @@ export const CategoriesList: Component<{ data: CategoriesQuery }> = (props) => {
   })
 
   return (
-    <DragDropProviderFixed
-      onDragStart={onDragStart}
-      onDragEnd={onDragEnd}
-      collisionDetector={closestCenter}
-    >
-      <DragDropSensors />
-      <SortableProviderFixed ids={ids()}>
-        <For each={orderedCategories()}>
-          {(category) => <SortableCategory category={category} onDeleteClick={onDeleteClick} />}
-        </For>
-      </SortableProviderFixed>
-
-      <DragOverlayFixed>
-        <Show when={draggingItem()}>
-          <Category category={draggingItem()!} onDeleteClick={noop} />
-        </Show>
-      </DragOverlayFixed>
-    </DragDropProviderFixed>
+    <div class="flex flex-col gap-px bg-gray-100 shadow-sm">
+      <DragDropProviderFixed
+        onDragStart={onDragStart}
+        onDragEnd={onDragEnd}
+        collisionDetector={closestCenter}
+      >
+        <DragDropSensors />
+        <SortableProviderFixed ids={ids()}>
+          <For each={orderedCategories()}>
+            {(category) => <SortableCategory category={category} onDeleteClick={onDeleteClick} />}
+          </For>
+        </SortableProviderFixed>
+
+        <DragOverlayFixed>
+          <Show when={draggingItem()}>
+            <Category category={draggingItem()!} onDeleteClick={noop} />
+          </Show>
+        </DragOverlayFixed>
+      </DragDropProviderFixed>
+    </div>
   )
 }
 

diff --git a/web/src/components/currencies/Currencies.tsx b/web/src/components/currencies/Currencies.tsx
@@ -49,29 +49,33 @@ export const CurrenciesList: Component<{
         <div class="text-center italic">No favourite currencies</div>
       </Show>
 
-      <For each={favouriteCurrencies()}>
-        {(currency) => (
-          <Currency
-            currency={currency}
-            isFavorite={true}
-            onFavorite={() => unfavouriteCurrency({ id: currency.id })}
-            onSetDefault={() => setDefaultCurrency({ id: currency.id })}
-          />
-        )}
-      </For>
+      <div class="flex flex-col gap-px bg-gray-100 shadow-sm">
+        <For each={favouriteCurrencies()}>
+          {(currency) => (
+            <Currency
+              currency={currency}
+              isFavorite={true}
+              onFavorite={() => unfavouriteCurrency({ id: currency.id })}
+              onSetDefault={() => setDefaultCurrency({ id: currency.id })}
+            />
+          )}
+        </For>
+      </div>
 
       <div class="mb-6" />
 
-      <For each={otherCurrencies()}>
-        {(currency) => (
-          <Currency
-            currency={currency}
-            isFavorite={false}
-            onFavorite={() => favouriteCurrency({ id: currency.id })}
-            onSetDefault={() => setDefaultCurrency({ id: currency.id })}
-          />
-        )}
-      </For>
+      <div class="flex flex-col gap-px bg-gray-100 shadow-sm">
+        <For each={otherCurrencies()}>
+          {(currency) => (
+            <Currency
+              currency={currency}
+              isFavorite={false}
+              onFavorite={() => favouriteCurrency({ id: currency.id })}
+              onSetDefault={() => setDefaultCurrency({ id: currency.id })}
+            />
+          )}
+        </For>
+      </div>
     </div>
   )
 }

diff --git a/web/src/components/transactions/TransactionItem.tsx b/web/src/components/transactions/TransactionItem.tsx
@@ -39,7 +39,7 @@ const TransactionItem: Component<{
   return (
     <>
       <div
-        class="flex cursor-pointer items-center bg-white py-2 pr-4 shadow-sm"
+        class="flex cursor-pointer items-center bg-white py-2 pr-4"
         classList={{
           "pl-10": !!props.parent,
           "pl-4": !props.parent
@@ -87,7 +87,7 @@ const TransactionItem: Component<{
         {(child) => (
           <div
             onClick={navigateToTransaction}
-            class="flex cursor-pointer items-center bg-white py-2 pl-10 pr-4 shadow-sm"
+            class="-mt-px flex cursor-pointer items-center bg-white py-2 pl-10 pr-4"
           >
             <CategoryIndicator
               class="mr-4 h-6 w-6 flex-none"

diff --git a/web/src/components/transactions/TransactionsList.tsx b/web/src/components/transactions/TransactionsList.tsx
@@ -103,9 +103,11 @@ export const TransactionsList: Component<{
                 {formatDate(date, "fullDateWithoutYear")}
               </div>
 
-              <For each={transactions}>
-                {(transaction) => <TransactionItem transaction={transaction} />}
-              </For>
+              <div class="flex flex-col gap-px bg-gray-100 shadow-sm">
+                <For each={transactions}>
+                  {(transaction) => <TransactionItem transaction={transaction} />}
+                </For>
+              </div>
             </>
           )
         }}

diff --git a/web/src/components/user/FavouriteCurrencies.tsx b/web/src/components/user/FavouriteCurrencies.tsx
@@ -5,7 +5,7 @@ import { CurrentUserQuery } from "../../graphql-types"
 import { useSetDefaultCurrency } from "../../graphql/mutations/setDefaultCurrency"
 import { Button } from "../base/Button"
 
-export const favouriteCurrencies: Component<{
+export const FavouriteCurrencies: Component<{
   data: CurrentUserQuery
 }> = (props) => {
   const currentUser = () => props.data.currentUser!
@@ -15,13 +15,13 @@ export const favouriteCurrencies: Component<{
   })
 
   return (
-    <div class="bg-white px-4 shadow-sm">
+    <div class="flex flex-col gap-px bg-gray-100 shadow-sm">
       <Show when={currentUser().favouriteCurrencies.length === 0}>
         <div class="italic">No favourite currencies</div>
       </Show>
       <For each={currentUser().favouriteCurrencies}>
         {(currency) => (
-          <div class="flex items-center justify-between py-1">
+          <div class="flex items-center justify-between bg-white px-4 py-1">
             {currency.code} ({currency.name})
             <Button
               size="sm"

diff --git a/web/src/pages/SettingsPage.tsx b/web/src/pages/SettingsPage.tsx
@@ -11,7 +11,7 @@ import { Button, LinkButton } from "../components/base/Button"
 import { PageHeader } from "../components/base/PageHeader"
 import { CategoriesList } from "../components/categories/CategoriesList"
 import { CurrentUserProfile } from "../components/user/CurrentUserProfile"
-import { favouriteCurrencies } from "../components/user/FavouriteCurrencies"
+import { FavouriteCurrencies } from "../components/user/FavouriteCurrencies"
 import {
   AccountsQuery,
   AccountsQueryVariables,
@@ -97,12 +97,12 @@ const SettingsPage: Component = () => {
         </Button>
       </PageHeader>
 
-      <div class="flex items-center gap-2 bg-white py-2 px-4 shadow-sm">
+      <div class="flex items-center gap-2 bg-white px-4 py-2 shadow-sm">
         <IconKey /> Password
       </div>
       <For each={data.currentUser()?.currentUser?.registeredCredentials}>
         {(credential) => (
-          <div class="flex items-center gap-2 bg-white  py-2 px-4 shadow-sm">
+          <div class="flex items-center gap-2 bg-white  px-4 py-2 shadow-sm">
             <IconFingerprint /> {credential.device} (created on {credential.createdAt})
             <Button
               size="sm"
@@ -124,7 +124,7 @@ const SettingsPage: Component = () => {
         </LinkButton>
       </PageHeader>
 
-      <Cell data={data.currentUser} success={favouriteCurrencies} />
+      <Cell data={data.currentUser} success={FavouriteCurrencies} />
 
       <PageHeader size="lg" class="mt-4">
         Categories