Merge pull request #2202 from cardstack/eco-172-to-seed-realm

CRM styling update and to seed realm

Author: richardhjtan

packages/experiments-realm/crm-app.gts

@@ -111,7 +111,7 @@ const CONTACT_FILTERS: LayoutFilter[] = [
   {
     displayName: 'All Contacts',
     icon: ContactIcon,
-    cardTypeName: 'CRM Contact',
+    cardTypeName: 'Contact',
     createNewButtonText: 'Create Contact',
     sortOptions: [
       {
@@ -124,33 +124,33 @@ const CONTACT_FILTERS: LayoutFilter[] = [
   {
     displayName: 'Leads',
     icon: TargetArrowIcon,
-    cardTypeName: 'CRM Lead',
+    cardTypeName: 'Lead',
     createNewButtonText: 'Create Lead',
   },
   {
     displayName: 'Customers',
     icon: HeartHandshakeIcon,
-    cardTypeName: 'CRM Customer',
+    cardTypeName: 'Customer',
     createNewButtonText: 'Create Customer',
   },
   {
     displayName: 'Representatives',
     icon: PresentationAnalytics,
-    cardTypeName: 'CRM Representative',
+    cardTypeName: 'Representative',
     createNewButtonText: 'Create Representative',
   },
 ];
 const DEAL_FILTERS: LayoutFilter[] = [
   {
     displayName: 'All Deals',
     icon: ContactIcon,
-    cardTypeName: 'CRM Deal',
+    cardTypeName: 'Deal',
     createNewButtonText: 'Create Deal',
   },
   ...DEAL_STATUS_VALUES.map((status) => ({
     displayName: status.label,
     icon: status.icon,
-    cardTypeName: 'CRM Deal',
+    cardTypeName: 'Deal',
     createNewButtonText: 'Create Deal',
   })),
 ];
@@ -159,13 +159,13 @@ const ACCOUNT_FILTERS: LayoutFilter[] = [
   {
     displayName: 'All Accounts',
     icon: CalendarExclamation,
-    cardTypeName: 'CRM Account',
+    cardTypeName: 'Account',
     createNewButtonText: 'Create Account',
   },
   ...URGENCY_TAG_VALUES.map((tag) => ({
     displayName: tag.label,
     icon: tag.icon,
-    cardTypeName: 'CRM Account', // without cardTypeName, the filter is not applied
+    cardTypeName: 'Account', // without cardTypeName, the filter is not applied
     createNewButtonText: 'Create Account',
   })),
 ];
@@ -404,7 +404,7 @@ class CrmAppTemplate extends Component<typeof CrmApp> {
       },
     ];
 
-    // filter field value by CRM Account
+    // filter field value by Account
     const accountFilter =
       activeTabId === 'Account' && activeFilter.displayName !== 'All Accounts'
         ? [
@@ -417,7 +417,7 @@ class CrmAppTemplate extends Component<typeof CrmApp> {
           ]
         : [];
 
-    // filter field value by CRM Deal
+    // filter field value by Deal
     const dealFilter =
       activeTabId === 'Deal' && activeFilter.displayName !== 'All Deals'
         ? [

packages/experiments-realm/crm/account.gts

@@ -567,8 +567,6 @@ class IsolatedTemplate extends Component<typeof Account> {
       }
       .primary-contact-group {
         --entity-display-thumbnail-size: var(--boxel-icon-sm);
-        --profile-avatar-icon-size: var(--boxel-icon-sm);
-        --profile-avatar-icon-border: 0px;
         display: inline-flex;
         align-items: start;
         gap: var(--boxel-sp-xs);
@@ -634,15 +632,6 @@ class IsolatedTemplate extends Component<typeof Account> {
         color: var(--boxel-color-gray);
         margin-left: auto;
       }
-      .avatar {
-        --profile-avatar-icon-size: 25px;
-        --profile-avatar-icon-border: 0px;
-        flex-shrink: 0;
-      }
-      .info-atom {
-        --profile-avatar-icon-size: var(--boxel-font-size);
-        --profile-avatar-icon-border: 0px;
-      }
       /* Skeleton Placeholder */
       .skeleton-placeholder-deal-summary-highlight {
         --skeleton-width: 50%;
@@ -900,7 +889,6 @@ class EmbeddedTemplate extends Component<typeof Account> {
                 <@fields.primaryContact
                   @format='atom'
                   @displayContainer={{false}}
-                  class='info-atom'
                 />
               {{/if}}
             </:content>
@@ -955,12 +943,10 @@ class EmbeddedTemplate extends Component<typeof Account> {
             <article>
               <label>KEY CONTACT</label>
               {{#if @model.primaryContact}}
-                <div class='contact-display'>
-                  <@fields.primaryContact
-                    @format='atom'
-                    @displayContainer={{false}}
-                  />
-                </div>
+                <@fields.primaryContact
+                  @format='atom'
+                  @displayContainer={{false}}
+                />
               {{/if}}
             </article>
 
@@ -1052,8 +1038,10 @@ class EmbeddedTemplate extends Component<typeof Account> {
         flex-direction: column;
         gap: var(--boxel-sp-xl);
       }
-      article > * + * {
-        margin-top: var(--boxel-sp-xs);
+      article {
+        display: flex;
+        flex-direction: column;
+        gap: var(--boxel-sp-sm);
       }
       /* Summary */
       .summary-highlight {
@@ -1070,10 +1058,6 @@ class EmbeddedTemplate extends Component<typeof Account> {
         letter-spacing: var(--boxel-lsp-xxs);
         margin: 0;
       }
-      .contact-display {
-        --profile-avatar-icon-size: var(--boxel-icon-sm);
-        --profile-avatar-icon-border: 0px;
-      }
       .next-steps-display {
         --entity-display-icon-size: var(--boxel-icon-sm);
         --entity-display-content-gap: var(--boxel-sp-xs);
@@ -1101,10 +1085,6 @@ class EmbeddedTemplate extends Component<typeof Account> {
         --task-card-padding: var(--boxel-sp) 0;
         border-top: 1px solid var(--boxel-200);
       }
-      .info-atom {
-        --profile-avatar-icon-size: var(--boxel-font-size);
-        --profile-avatar-icon-border: 0px;
-      }
       /* Skeleton Placeholder */
       .skeleton-placeholder-task {
         --skeleton-height: 55px;

packages/experiments-realm/crm/contact.gts

@@ -476,8 +476,8 @@ class AtomTemplate extends Component<typeof Contact> {
         min-width: 0; /* Helps with text overflow */
       }
       .avatar {
-        --avatar-thumbnail-size: 20px;
-        --avatar-thumbnail-border: 0px;
+        --profile-avatar-icon-size: 20px;
+        --profile-avatar-icon-border: 0px;
         flex-shrink: 0;
       }
     </style>