Update Collective profile prototype

Author: gustavlrsn

components/crowdfunding-redesign/CollectiveHeader.tsx

@@ -23,10 +23,10 @@ import { ProfileModal } from './ProfileModal';
 import { ArrowRight } from 'lucide-react';
 import { Progress } from '../ui/Progress';
 import FormattedMoneyAmount from '../FormattedMoneyAmount';
-import { StackedAvatars } from '../Avatar';
+
 import { Button } from '../ui/Button';
 import { FormattedMessage } from 'react-intl';
-import { TabsList, TabsTrigger } from './DumbTabs';
+import { TabsList, TabsTrigger } from './Tabs';
 import { ThemeColor } from './ThemeColor';
 import ProfileLayout from './ProfileLayout';
 import { Goals } from './Goals';
@@ -101,14 +101,14 @@ export function FundraiserLayout({ children, activeTab }) {
                     </div>
 
                     <p>
-                      {account.type === 'EVENT' ? 'Event' : 'Fundraiser'} by{' '}
+                      {account.type === 'EVENT' ? 'Event' : 'Project'} by{' '}
                       <Link
                         className="font-semibold text-primary hover:underline"
                         href={`/preview/${mainAccount.slug}`}
-                        onClick={e => {
-                          e.preventDefault();
-                          showModal(ProfileModal, { account: mainAccount });
-                        }}
+                        // onClick={e => {
+                        //   e.preventDefault();
+                        //   showModal(ProfileModal, { account: mainAccount });
+                        // }}
                       >
                         {mainAccount.name} <ArrowRight className="inline align-middle" size={16} />
                       </Link>
@@ -133,6 +133,9 @@ export function FundraiserLayout({ children, activeTab }) {
                   <TabsTrigger href={baseRoute} value="fundraiser" activeTab={activeTab}>
                     Fundraiser
                   </TabsTrigger>
+                  <TabsTrigger href={`${baseRoute}/finances`} value="finances" activeTab={activeTab}>
+                    Finances
+                  </TabsTrigger>
                   <TabsTrigger
                     href={`${baseRoute}/updates`}
                     value="updates"
@@ -141,26 +144,10 @@ export function FundraiserLayout({ children, activeTab }) {
                   >
                     Updates
                   </TabsTrigger>
-                  <TabsTrigger
-                    href={`${baseRoute}/contributions`}
-                    value="contributions"
-                    activeTab={activeTab}
-                    count={account.contributionTransactions?.totalCount}
-                  >
-                    Contributions
-                  </TabsTrigger>
-                  <TabsTrigger
-                    href={`${baseRoute}/expenses`}
-                    value="expenses"
-                    activeTab={activeTab}
-                    count={account.expenses?.totalCount}
-                  >
-                    Expenses
-                  </TabsTrigger>
                 </TabsList>
               </div>
             </div>
-            {children}
+            <div className="flex-1">{children}</div>
 
             <ThemeColor color={fundraiser.primaryColor} />
           </React.Fragment>

components/crowdfunding-redesign/ContributionsList.tsx

@@ -58,22 +58,22 @@ export function FundraisingPage() {
             allowAttributes
             transform={node => {
               // Allow some iframes
-              const attrs = [].slice.call(node.attributes);
-              if (node.tagName === 'iframe') {
+              if (node.tagName.toLowerCase() === 'iframe') {
                 const src = node.getAttribute('src');
                 const parsedUrl = new URL(src);
                 const hostname = parsedUrl.hostname;
                 if (['youtube-nocookie.com', 'www.youtube-nocookie.com', 'anchor.fm'].includes(hostname)) {
-                  const attributes = merge({}, ...attrs.map(({ name, value }) => ({ [name]: value })));
                   return (
                     <iframe
-                      {...pick(attributes, ['width', 'height', 'frameborder', 'allowfullscreen'])}
-                      title={attributes.title || 'Embed content'}
+                      width={node.getAttribute('width')}
+                      height={node.getAttribute('height')}
+                      allowFullScreen={node.getAttribute('allowfullscreen') as any}
+                      title={node.getAttribute('title') || 'Embed content'}
                       src={src}
                     />
                   );
                 }
-              } else if (node.tagName === 'a') {
+              } else if (node.tagName.toLowerCase() === 'a') {
                 // Open links in new tab
                 node.setAttribute('target', '_blank');
                 node.setAttribute('rel', 'noopener noreferrer');