From cbe1b9b95a19218ff961c410d9696fc822578abd Mon Sep 17 00:00:00 2001
From: Alexander Midteide <alexander.midteide@digdir.no>
Date: Tue, 24 Sep 2024 09:56:39 +0200
Subject: [PATCH] fix: Updated according to PR comments

---
 packages/frontend/src/api/useDialogs.tsx           |  2 +-
 .../src/components/Header/SearchDropdown.tsx       |  2 +-
 .../src/components/InboxItem/InboxItem.tsx         | 14 +++++++-------
 .../src/components/InboxItem/InboxItemDetail.tsx   |  8 ++++----
 .../src/components/InboxItem/inboxItem.module.css  |  4 ++--
 .../InboxItem/inboxItemDetail.module.css           | 11 ++++++-----
 packages/frontend/src/pages/Inbox/Inbox.tsx        |  4 ++--
 .../frontend/src/pages/Inbox/InboxSkeleton.tsx     |  4 ++--
 8 files changed, 25 insertions(+), 24 deletions(-)

diff --git a/packages/frontend/src/api/useDialogs.tsx b/packages/frontend/src/api/useDialogs.tsx
index 6ac2ffab2..2b737a233 100644
--- a/packages/frontend/src/api/useDialogs.tsx
+++ b/packages/frontend/src/api/useDialogs.tsx
@@ -50,7 +50,7 @@ export function mapDialogDtoToInboxItem(
       id: item.id,
       party: item.party,
       title: getPropertyByCultureCode(titleObj),
-      description: getPropertyByCultureCode(summaryObj),
+      summary: getPropertyByCultureCode(summaryObj),
       sender: {
         name: serviceOwner?.name ?? '',
         isCompany: true,
diff --git a/packages/frontend/src/components/Header/SearchDropdown.tsx b/packages/frontend/src/components/Header/SearchDropdown.tsx
index 9c0416e20..05201894e 100644
--- a/packages/frontend/src/components/Header/SearchDropdown.tsx
+++ b/packages/frontend/src/components/Header/SearchDropdown.tsx
@@ -58,7 +58,7 @@ export const SearchDropdown: React.FC<SearchDropdownProps> = ({ showDropdownMenu
                 key={item.id}
                 checkboxValue={item.id}
                 title={item.title}
-                description={item.description}
+                summary={item.summary}
                 sender={item.sender}
                 receiver={item.receiver}
                 metaFields={item.metaFields}
diff --git a/packages/frontend/src/components/InboxItem/InboxItem.tsx b/packages/frontend/src/components/InboxItem/InboxItem.tsx
index f37892ced..04ed45eba 100644
--- a/packages/frontend/src/components/InboxItem/InboxItem.tsx
+++ b/packages/frontend/src/components/InboxItem/InboxItem.tsx
@@ -17,7 +17,7 @@ import styles from './inboxItem.module.css';
 interface InboxItemProps {
   checkboxValue: string;
   title: string;
-  description: string;
+  summary: string;
   sender: Participant;
   receiver: Participant;
   isChecked?: boolean;
@@ -50,7 +50,7 @@ export const OptionalLinkContent = ({
 
 /**
  * Represents an individual inbox item, displaying information such as the title,
- * description, sender, and receiver, along with optional tags. It includes a checkbox
+ * summary, sender, and receiver, along with optional tags. It includes a checkbox
  * to mark the item as checked/unchecked and can visually indicate if it is unread.
  * Should only be used as child of InboxItems
  *
@@ -58,7 +58,7 @@ export const OptionalLinkContent = ({
  * @param {Object} props - The properties passed to the component.
  * @param {string} props.checkboxValue - The value attribute for the checkbox input.
  * @param {string} props.title - The title of the inbox item.
- * @param {string} props.description - The description or content of the inbox item.
+ * @param {string} props.summary - The summary or content of the inbox item.
  * @param {Participant} props.sender - The sender of the inbox item, including label and optional icon.
  * @param {Participant} props.receiver - The receiver of the inbox item, including label and optional icon.
  * @param {boolean} props.isChecked - Whether the inbox item is checked. This can support batch operations.
@@ -72,7 +72,7 @@ export const OptionalLinkContent = ({
  * <InboxItem
  *   checkboxValue="item1"
  *   title="Meeting Reminder"
- *   description="Don't forget the meeting tomorrow at 10am."
+ *   summary="Don't forget the meeting tomorrow at 10am."
  *   sender={{ label: "Alice", icon: <MailIcon /> }}
  *   receiver={{ label: "Bob", icon: <PersonIcon /> }}
  *   isChecked={false}
@@ -83,7 +83,7 @@ export const OptionalLinkContent = ({
  */
 export const InboxItem = ({
   title,
-  description,
+  summary,
   sender,
   receiver,
   metaFields = [],
@@ -149,7 +149,7 @@ export const InboxItem = ({
                 />
               )}
             </header>
-            <p className={styles.description}>{description}</p>
+            <p className={styles.summary}>{summary}</p>
           </section>
         </OptionalLinkContent>
       </div>
@@ -209,7 +209,7 @@ export const InboxItem = ({
               <span className={styles.participantLabel}>{`${t('word.to')} ${receiver?.name}`}</span>
             </div>
           </div>
-          <p className={styles.description}>{description}</p>
+          <p className={styles.summary}>{summary}</p>
           <MetaDataFields metaFields={metaFields || []} viewType={viewType} />
         </section>
       </OptionalLinkContent>
diff --git a/packages/frontend/src/components/InboxItem/InboxItemDetail.tsx b/packages/frontend/src/components/InboxItem/InboxItemDetail.tsx
index face5e317..ff99be987 100644
--- a/packages/frontend/src/components/InboxItem/InboxItemDetail.tsx
+++ b/packages/frontend/src/components/InboxItem/InboxItemDetail.tsx
@@ -15,9 +15,9 @@ interface InboxItemDetailProps {
 }
 
 /**
- * Displays detailed information about an inbox item, including title, description, sender, receiver, attachments, tags, and GUI actions.
+ * Displays detailed information about an inbox item, including title, summary, sender, receiver, attachments, tags, and GUI actions.
  * This component is intended to be used for presenting a full view of an inbox item, with comprehensive details not shown in the summary view.
- * It supports rendering both text and React node descriptions, and dynamically lists attachments with links.
+ * It supports rendering both text and React node summarys, and dynamically lists attachments with links.
  * Dynamically rendered action buttons are implemented through the `GuiActions` component.
  *
  * @component
@@ -48,7 +48,7 @@ export const InboxItemDetail = ({ dialog }: InboxItemDetailProps): JSX.Element =
         <header className={styles.header} data-id="dialog-header">
           <h1 className={styles.title}>{t('error.dialog.not_found')}</h1>
         </header>
-        <p className={styles.description}>{t('dialog.error_message')}</p>
+        <p className={styles.summary}>{t('dialog.error_message')}</p>
       </section>
     );
   }
@@ -87,7 +87,7 @@ export const InboxItemDetail = ({ dialog }: InboxItemDetailProps): JSX.Element =
           <span className={styles.participantLabel}>{receiver?.name}</span>
         </div>
       </div>
-      <div className={styles.sectionWithStatus} data-id="dialog-description">
+      <div className={styles.sectionWithStatus} data-id="dialog-summary">
         <p className={styles.createdLabel}>{format(createdAt, 'do MMMM yyyy HH:mm')}</p>
         <p className={styles.summary}>{summary}</p>
         <MainContentReference args={mainContentReference} dialogToken={dialogToken} />
diff --git a/packages/frontend/src/components/InboxItem/inboxItem.module.css b/packages/frontend/src/components/InboxItem/inboxItem.module.css
index 4ead28102..bc935ca07 100644
--- a/packages/frontend/src/components/InboxItem/inboxItem.module.css
+++ b/packages/frontend/src/components/InboxItem/inboxItem.module.css
@@ -124,7 +124,7 @@
   }
 }
 
-.description {
+.summary {
   color: #000;
   font-size: 1rem;
   font-weight: 400;
@@ -136,7 +136,7 @@
   margin-bottom: 1rem;
 }
 
-.minimalistic .description {
+.minimalistic .summary {
   color: rgba(0, 0, 0, 0.75);
   font-size: 12px;
   font-style: normal;
diff --git a/packages/frontend/src/components/InboxItem/inboxItemDetail.module.css b/packages/frontend/src/components/InboxItem/inboxItemDetail.module.css
index d20379606..b0ade4989 100644
--- a/packages/frontend/src/components/InboxItem/inboxItemDetail.module.css
+++ b/packages/frontend/src/components/InboxItem/inboxItemDetail.module.css
@@ -2,7 +2,7 @@
   display: flex;
   flex-direction: column;
   background: #fff;
-  padding: 16px;
+  padding: 1rem;
 }
 
 @media (max-width: 1024px) {
@@ -167,10 +167,11 @@
 }
 
 .attachmentIcon {
-  min-height: 1.25rem;
-  min-width: 1.25rem;
-  max-height: 1.25rem;
-  max-width: 1.25rem;
+  --icon-size: 1.25rem;
+  min-height: var(--icon-size);
+  min-width: var(--icon-size);
+  max-height: var(--icon-size);
+  max-width: var(--icon-size);
 }
 
 .attachmentItemIcon {
diff --git a/packages/frontend/src/pages/Inbox/Inbox.tsx b/packages/frontend/src/pages/Inbox/Inbox.tsx
index 8fde996e2..e3d884e42 100644
--- a/packages/frontend/src/pages/Inbox/Inbox.tsx
+++ b/packages/frontend/src/pages/Inbox/Inbox.tsx
@@ -44,7 +44,7 @@ export interface InboxItemInput {
   id: string;
   party: string;
   title: string;
-  description: string;
+  summary: string;
   sender: Participant;
   receiver: Participant;
   metaFields: InboxItemMetaField[];
@@ -336,7 +336,7 @@ export const Inbox = ({ viewType }: InboxProps) => {
                   key={item.id}
                   checkboxValue={item.id}
                   title={item.title}
-                  description={item.description}
+                  summary={item.summary}
                   sender={item.sender}
                   receiver={item.receiver}
                   isChecked={selectedItems[item.id]}
diff --git a/packages/frontend/src/pages/Inbox/InboxSkeleton.tsx b/packages/frontend/src/pages/Inbox/InboxSkeleton.tsx
index 1518e704e..f512bbeb5 100644
--- a/packages/frontend/src/pages/Inbox/InboxSkeleton.tsx
+++ b/packages/frontend/src/pages/Inbox/InboxSkeleton.tsx
@@ -40,8 +40,8 @@ export const InboxSkeleton: React.FC<InboxSkeletonProps> = ({
                   <Skeleton.Text width="400px" height="24px" />
                 </h2>
               </header>
-              <Skeleton.Text width="40%" height="36px" className={styles.description} />
-              <Skeleton.Text width="100%" className={styles.description} />
+              <Skeleton.Text width="40%" height="36px" className={styles.summary} />
+              <Skeleton.Text width="100%" className={styles.summary} />
               <div className={styles.participants}>
                 <div className={styles.sender}>
                   <span>