fix: correctly style untitled resources

envelope-zero · Jan 27, 2024 · 08f60ae · 08f60ae
1 parent e618fd6
commit 08f60ae
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 6 deletions.
diff --git a/src/components/CategoryMonth.tsx b/src/components/CategoryMonth.tsx
@@ -9,6 +9,7 @@ import {
 import EnvelopeMonth from './EnvelopeMonth'
 import { ChevronDownIcon, ChevronUpIcon } from '@heroicons/react/20/solid'
 import { formatMoney } from '../lib/format'
+import { safeName } from '../lib/name-helper'
 
 type props = {
   category: CategoryMonthType
@@ -57,15 +58,17 @@ const CategoryMonth = ({
           scope="colgroup"
           className="px-4 py-2 text-left text-sm font-bold text-gray-900 dark:text-gray-300 sm:px-6 text-ellipsis"
         >
-          <span className="flex items-center">
+          <span
+            className={`flex items-center ${!category.name ? 'italic' : ''}`}
+          >
             <button>
               {showEnvelopes ? (
                 <ChevronUpIcon className="icon" />
               ) : (
                 <ChevronDownIcon className="icon" />
               )}
             </button>
-            {category.name}
+            {safeName(category, 'category', t('categories.category'))}
           </span>
         </th>
       </tr>

diff --git a/src/components/EnvelopeMonth.tsx b/src/components/EnvelopeMonth.tsx
@@ -74,7 +74,7 @@ const EnvelopeMonth = ({
         <Link
           to={`/envelopes/${envelope.id}`}
           className={`h-full block whitespace-nowrap py-4 pl-4 pr-1 text-sm font-medium text-gray-900 dark:text-gray-300 sm:pl-6 overflow-hidden text-ellipsis ${
-            !envelope.name && 'italic'
+            !envelope.name ? 'italic' : ''
           }`}
         >
           {safeName(envelope, 'envelope')}

diff --git a/src/components/ExternalAccountsList.tsx b/src/components/ExternalAccountsList.tsx
@@ -116,9 +116,7 @@ const ExternalAccountsList = ({ budget }: { budget: Budget }) => {
                               <div>
                                 <div
                                   className={`${
-                                    typeof account.name === 'undefined'
-                                      ? 'italic'
-                                      : ''
+                                    !account.name ? 'italic' : ''
                                   } text-sm font-medium text-gray-900 dark:text-gray-100 flex justify-between`}
                                 >
                                   <span className="full-centered">