fix: Cal 3939 fix org banner

[Preetam078]

What does this PR do?

Fixes #15456
Fixes CAL-3939 (fix org banner)

This PR implemented the new UI for Banner upload in the Organisation profile.

https://www.loom.com/share/ede071daea1b4b2bad062672ded346b2

Since we cannot directly access the organisation profile page thats why have mimic the changes in the Team Profile page, (These are the changes which i build for the Organisation profile). for More clarity please go through the code implementation.

Mandatory Tasks (DO NOT REMOVE)

• I have self-reviewed the code (A decent size PR without self-review might be rejected)
• I have added a Docs issue here if this PR makes changes that would require a documentation change
• I have added or modified automated tests that prove my fix is effective or that my feature works (PRs might be rejected if logical changes are not properly tested)

How should this be tested?

• There was no as such tests need to run since this the minimal UI change for banner upload.

[vercel]

Someone is attempting to deploy a commit to the cal Team on Vercel.

A member of the Team first needs to authorize it.

[github-actions]

Hey there and thank you for opening this pull request! 👋🏼

We require pull request titles to follow the Conventional Commits specification and it looks like your proposed title needs to be adjusted.

Details:

No release type found in pull request title "fix:Cal 3939 fix org banner". Add a prefix to indicate what kind of release this pull request corresponds to. For reference, see https://www.conventionalcommits.org/

Available types:
 - feat: A new feature
 - fix: A bug fix
 - docs: Documentation only changes
 - style: Changes that do not affect the meaning of the code (white-space, formatting, missing semi-colons, etc)
 - refactor: A code change that neither fixes a bug nor adds a feature
 - perf: A code change that improves performance
 - test: Adding missing tests or correcting existing tests
 - build: Changes that affect the build system or external dependencies (example scopes: gulp, broccoli, npm)
 - ci: Changes to our CI configuration files and scripts (example scopes: Travis, Circle, BrowserStack, SauceLabs)
 - chore: Other changes that don't modify src or test files
 - revert: Reverts a previous commit

[socket-security]

New and removed dependencies detected. Learn more about Socket for GitHub ↗︎

Package	New capabilities	Transitives	Size	Publisher
npm/@getalby/lightning-tools@4.2.1	network	+3	23.7 MB	reneaaron
npm/@getalby/sdk@2.7.0	network	+9	6.41 MB	reneaaron
npm/@langchain/core@0.1.63	Transitive: environment, filesystem, network, shell	+42	27.2 MB	jacoblee93
npm/@langchain/openai@0.0.14	Transitive: environment, filesystem, network	+20	24.4 MB	jacoblee93
npm/@lexical/react@0.9.2	Transitive: environment	+25	8.03 MB	acywatson
npm/@playwright/test@1.44.1	None	+1	3.07 MB	yurys
npm/@t3-oss/env-nextjs@0.6.1	environment	+2	32.4 MB	juliusmarminge
npm/@tanstack/react-query@5.45.1	environment	+1	3.05 MB	tannerlinsley
npm/@tanstack/react-table@8.17.3	Transitive: environment	+3	8.65 MB	tannerlinsley
npm/@testing-library/react-hooks@8.0.1	Transitive: environment	+9	7.06 MB	testing-library-bot
npm/@trpc/client@11.0.0-next-beta.222	network	0	238 kB	katt
npm/@trpc/next@11.0.0-next-beta.222	Transitive: environment, filesystem, network, shell, unsafe	+13	1.19 GB	katt
npm/@trpc/react-query@11.0.0-next-beta.222	None	0	252 kB	katt
npm/@trpc/server@11.0.0-next-beta.222	None	0	596 kB	katt
npm/@types/mailparser@3.4.4	None	+1	360 kB	types
npm/@types/node-schedule@2.1.7	None	+1	2.1 MB	types
npm/@types/react@18.0.26	None	+1	184 kB	types
npm/@webbtc/webln-types@2.1.0	None	0	11.4 kB	rolznz
npm/autoprefixer@10.4.19	environment Transitive: filesystem, shell	+9	2.81 MB	ai
npm/eslint-plugin-react-hooks@4.6.2	environment Transitive: eval, filesystem, unsafe	+64	9.88 MB	react-bot
npm/eslint-plugin-react@7.34.2	filesystem Transitive: environment, eval, unsafe	+92	11.8 MB	ljharb
npm/ews-javascript-api@0.11.0	network Transitive: environment, eval, unsafe	+12	15 MB	gautamsi
npm/framer-motion@10.18.0	environment	+5	6.84 MB	popmotion
npm/ink-select-input@4.2.2	None	+3	79.8 kB	vdemedes
npm/ink-text-input@4.0.3	None	+3	144 kB	vdemedes
npm/ink@3.2.0	environment, filesystem Transitive: network, unsafe	+32	21.3 MB	vdemedes
npm/langchain@0.1.37	Transitive: environment, filesystem, network, shell	+69	38.4 MB	basproul
npm/lexical@0.9.2	environment	0	546 kB	acywatson
npm/mailparser@3.7.1	Transitive: environment, filesystem, network, shell	+29	4.99 MB	andris
npm/meow@9.0.0	Transitive: environment, filesystem	+35	682 kB	sindresorhus
npm/next@13.5.6	environment, filesystem, network, shell, unsafe	+18	1.11 GB	vercel-release-bot
npm/node-schedule@2.1.0	Transitive: eval, filesystem	+17	3.5 MB	kibertoad
npm/npm-run-all@4.1.5	environment Transitive: filesystem, shell	+82	4.05 MB	mysticatea
npm/postcss@8.4.38	environment, filesystem	+2	362 kB	ai
npm/react-hook-form@7.52.0	network	0	902 kB	bluebill1049
npm/react-qr-code@2.0.14	Transitive: environment	+7	507 kB	rtkhanas
npm/react-select@5.7.7	environment Transitive: filesystem, unsafe	+83	17.3 MB	react-select-release-bot
npm/react-sticky-box@2.0.5	None	0	17.8 kB	danielberndt
npm/react-virtual@2.10.4	environment	+1	187 kB	tannerlinsley
npm/superjson@1.9.1	environment	+2	268 kB	skn0tt
npm/supports-color@8.1.1	None	+1	12.9 kB	sindresorhus
npm/svix@0.85.1	network	+12	2.25 MB	tasn
npm/tailwindcss@3.4.4	environment, filesystem Transitive: network, shell, unsafe	+88	14.2 MB	adamwathan
npm/ts-node@10.9.2	environment, filesystem, unsafe	+14	1.94 MB	blakeembrey
npm/typescript@4.9.5	None	0	66.8 MB	typescript-bot
npm/vite-plugin-environment@1.1.3	environment	0	14 kB	elmassimo
npm/vite@4.5.3	environment, eval, filesystem, network, shell, unsafe	+25	214 MB	vitebot
npm/zod@3.23.8	None	0	667 kB	colinmcd94
npm/zustand@4.5.2	environment	+4	2.06 MB	daishi

🚮 Removed packages: npm/@calcom/ai@0.0.0-use.local, npm/@calcom/alby@0.0.0-use.local, npm/@calcom/amie@0.0.0-use.local, npm/@calcom/api-proxy@0.0.0-use.local, npm/@calcom/api-v2@0.0.0-use.local, npm/@calcom/api@0.0.0-use.local, npm/@calcom/app-store-cli@0.0.0-use.local, npm/@calcom/app-store@0.0.0-use.local, npm/@calcom/applecalendar@0.0.0-use.local, npm/@calcom/around@0.0.0-use.local, npm/@calcom/atoms@0.0.0-use.local, npm/@calcom/autocheckin@0.0.0-use.local, npm/@calcom/baa-for-hipaa@0.0.0-use.local, npm/@calcom/base@0.0.0-use.local, npm/@calcom/basecamp3@0.0.0-use.local, npm/@calcom/cal-ai@0.0.0-use.local, npm/@calcom/caldavcalendar@0.0.0-use.local, npm/@calcom/campfire@0.0.0-use.local, npm/@calcom/clic@0.0.0-use.local, npm/@calcom/closecom@0.0.0-use.local, npm/@calcom/config@0.0.0-use.local, npm/@calcom/console@0.0.0-use.local, npm/@calcom/core@0.0.0-use.local, npm/@calcom/cron@0.0.0-use.local, npm/@calcom/dailyvideo@0.0.0-use.local, npm/@calcom/dayjs@0.0.0-use.local, npm/@calcom/debugging@0.0.0-use.local, npm/@calcom/deel@0.0.0-use.local, npm/@calcom/demodesk@0.0.0-use.local, npm/@calcom/discord@0.0.0-use.local, npm/@calcom/ee@0.0.0-use.local, npm/@calcom/eightxeight@0.0.0-use.local, npm/@calcom/element-call@0.0.0-use.local, npm/@calcom/emails@0.0.0-use.local, npm/@calcom/embed-core@0.0.0-use.local, npm/@calcom/embed-react@0.0.0-use.local, npm/@calcom/embed-snippet@0.0.0-use.local, npm/@calcom/eslint-plugin-eslint@0.0.0-use.local, npm/@calcom/example-app-credential-sync@0.0.0-use.local, npm/@calcom/exchange2013calendar@0.0.0-use.local, npm/@calcom/exchange2016calendar@0.0.0-use.local, npm/@calcom/exchangecalendar@0.0.0-use.local, npm/@calcom/facetime@0.0.0-use.local, npm/@calcom/fathom@0.0.0-use.local, npm/@calcom/feature-auth@0.0.0-use.local, npm/@calcom/features@0.0.0-use.local, npm/@calcom/feishucalendar@0.0.0-use.local, npm/@calcom/ga4@0.0.0-use.local, npm/@calcom/giphy@0.0.0-use.local, npm/@calcom/googlecalendar@0.0.0-use.local, npm/@calcom/googlevideo@0.0.0-use.local, npm/@calcom/gtm@0.0.0-use.local, npm/@calcom/hubspot@0.0.0-use.local, npm/@calcom/huddle01video@0.0.0-use.local, npm/@calcom/ics-feed@0.0.0-use.local, npm/@calcom/intercom@0.0.0-use.local, npm/@calcom/jelly@0.0.0-use.local, npm/@calcom/jitsivideo@0.0.0-use.local, npm/@calcom/kysely@0.0.0-use.local, npm/@calcom/larkcalendar@0.0.0-use.local, npm/@calcom/lib@0.0.0-use.local, npm/@calcom/linear@0.0.0-use.local, npm/@calcom/make@0.0.0-use.local, npm/@calcom/matomo@0.0.0-use.local, npm/@calcom/metapixel@0.0.0-use.local, npm/@calcom/mirotalk@0.0.0-use.local, npm/@calcom/mock-payment-app@0.0.0-use.local, npm/@calcom/n8n@0.0.0-use.local, npm/@calcom/office365calendar@0.0.0-use.local, npm/@calcom/office365video@0.0.0-use.local, npm/@calcom/paypal@0.0.0-use.local, npm/@calcom/ping@0.0.0-use.local, npm/@calcom/pipedream@0.0.0-use.local, npm/@calcom/pipedrive-crm@0.0.0-use.local, npm/@calcom/platform-constants@0.0.0-use.local, npm/@calcom/platform-libraries-0.0.2@0.0.2, npm/@calcom/platform-libraries-0.0.4@0.0.4, npm/@calcom/platform-types@0.0.0-use.local, npm/@calcom/platform-utils@0.0.0-use.local, npm/@calcom/plausible@0.0.0-use.local, npm/@calcom/posthog@0.0.0-use.local, npm/@calcom/prisma@0.0.0-use.local, npm/@calcom/qr_code@0.0.0-use.local, npm/@calcom/raycast@0.0.0-use.local, npm/@calcom/riverside@0.0.0-use.local, npm/@calcom/roam@0.0.0-use.local, npm/@calcom/routing-forms@0.0.0-use.local, npm/@calcom/salesforce@0.0.0-use.local, npm/@calcom/salesroom@0.0.0-use.local, npm/@calcom/sdk@0.0.0-use.local, npm/@calcom/sendgrid@0.0.0-use.local, npm/@calcom/shimmer-video@0.0.0-use.local, npm/@calcom/signal@0.0.0-use.local, npm/@calcom/sirius_video@0.0.0-use.local, npm/@calcom/storybook@0.0.0-use.local, npm/@calcom/stripepayment@0.0.0-use.local, npm/@calcom/swagger@0.0.0-use.local, npm/@calcom/sylapsvideo@0.0.0-use.local, npm/@calcom/tandemvideo@0.0.0-use.local, npm/@calcom/telegram@0.0.0-use.local, npm/@calcom/trpc@0.0.0-use.local, npm/@calcom/tsconfig@0.0.0-use.local, npm/@calcom/typeform@0.0.0-use.local, npm/@calcom/types@0.0.0-use.local, npm/@calcom/ui@0.0.0-use.local, npm/@calcom/vimcal@0.0.0-use.local, npm/@calcom/vital@0.0.0-use.local, npm/@calcom/weather_in_your_calendar@0.0.0-use.local, npm/@calcom/web@0.0.0-use.local, npm/@calcom/webex@0.0.0-use.local, npm/@calcom/website@0.0.0-use.local, npm/@calcom/whatsapp@0.0.0-use.local, npm/@calcom/whereby@0.0.0-use.local, npm/@calcom/wordpress@0.0.0-use.local, npm/@calcom/zapier@0.0.0-use.local, npm/@calcom/zoho-bigin@0.0.0-use.local, npm/@calcom/zohocalendar@0.0.0-use.local, npm/@calcom/zohocrm@0.0.0-use.local, npm/@calcom/zoomvideo@0.0.0-use.local, npm/calcom-monorepo@0.0.0-use.local, npm/wipemycal@0.0.0-use.local

View full report↗︎

[socket-security]

🚨 Potential security issues detected. Learn more about Socket for GitHub ↗︎

To accept the risk, merge this PR and you will not be notified again.

Alert	Package	Note	Source	CI
Install scripts	npm/esbuild@0.18.20	Install script: postinstall Source: node install.js	packages/embeds/embed-core/package.json	🚫
Telemetry	npm/next@13.5.6	Note: Can be disabled by setting the environment variable NEXT_TELEMETRY_DISABLED=1 . See https://nextjs.org/telemetry for more information	apps/ai/package.json	🚫
Telemetry	npm/next@14.2.4	Note: Can be disabled by setting the environment variable NEXT_TELEMETRY_DISABLED=1 . See https://nextjs.org/telemetry for more information	packages/trpc/package.json	🚫

View full report↗︎

Next steps

What is an install script?

Install scripts are run when the package is installed. The majority of malware in npm is hidden in install scripts.

Packages should not be running non-essential scripts during install and there are often solutions to problems people solve with install scripts that can be run at publish time instead.

What is telemetry?

This package contains telemetry which tracks how it is used.

Most telemetry comes with settings to disable it. Consider disabling telemetry if you do not want to be tracked.

Take a deeper look at the dependency

Take a moment to review the security alert above. Review the linked package source code to understand the potential risk. Ensure the package is not malicious before proceeding. If you're unsure how to proceed, reach out to your security team or ask the Socket team for help at support [AT] socket [DOT] dev.

Remove the package

If you happen to install a dependency that Socket reports as Known Malware you should immediately remove it and select a different dependency. For other alert types, you may may wish to investigate alternative packages or consider if there are other ways to mitigate the specific risk posed by the dependency.

Mark a package as acceptable risk

To ignore an alert, reply with a comment starting with @SocketSecurity ignore followed by a space separated list of ecosystem/package-name@version specifiers. e.g. @SocketSecurity ignore npm/foo@1.0.0 or ignore all packages with @SocketSecurity ignore-all

• @SocketSecurity ignore npm/esbuild@0.18.20
• @SocketSecurity ignore npm/next@13.5.6
• @SocketSecurity ignore npm/next@14.2.4

[graphite-app]

Graphite Automations

"Add community label" took an action on this PR • (06/20/24)

1 label was added to this PR based on Keith Williams's automation.

"Add foundation team as reviewer" took an action on this PR • (06/20/24)

1 reviewer was added to this PR based on Keith Williams's automation.

"Add consumer team as reviewer" took an action on this PR • (06/20/24)

1 reviewer was added to this PR based on Keith Williams's automation.

[joeauyeung]

Great work so far @Preetam078. I would love to see some more even spacing when a banner isn't uploaded. It would also be great to see a placeholder banner when there isn't a banner set.

[joeauyeung]

If we're passing isBannerAvatar we should create a new BannerAvatar component. Thoughts @sean-brydon?

[Preetam078]

hii @joeauyeung is there any suggestions from your side which I can use as the placeholder may be like a Fallback image or a simple html container to control the CLS (content load shifting) in case there is no banner image is uploaded, Thoughts @sean-brydon ? also let me know if there is a separate component required for BannerAvatar.

[sean-brydon]

Yeah i'd suggest these being seperate components i think. They're pretty different from one another

[Preetam078]

@sean-brydon what about the placeholder, if in case there is no banner uploaded ?

[Preetam078]

hey @joeauyeung, @sean-brydon I have created a separate component for BannerAvatar in my local machine. Just wanted to know if their is any suggestion you guys have for placeholder for banner before PR update ?

[joeauyeung]

If you could find an image similar to this as the placeholder I think that would be great. It should have the same dimensions as the banner.

[Ryukemeister]

@Preetam078 it looks like you've pushed the changes for the yarn.lock file. We generally update the yarn.lock while updating or deleting packages and it doesn't seem like we're doing that here, can you revert the changes made to the yarn.lock file?