fix: icon visibility and add up and down icons

[Sahillather002]

What does this PR do?

Fixed the dropdown icon visibility and added the icon which changes on state of dropdown opens or not.

• Fixes #15542(GitHub issue number)
• Fixes CAL-XXXX (Linear issue number - should be visible at the bottom of the GitHub issue description)

Mandatory Tasks (DO NOT REMOVE)

• [x] 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?

• Are there environment variables that should be set?
• What are the minimal test data to have?
• What is expected (happy path) to have (input and output)?
• Any other important info that could help to test that PR

Checklist

• I haven't read the contributing guide
• My code doesn't follow the style guidelines of this project
• I haven't commented my code, particularly in hard-to-understand areas
• I haven't checked if my changes generate no new warnings

[vercel[bot]]

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

A member of the Team first needs to authorize it.

[CLAassistant]

All committers have signed the CLA.

[github-actions[bot]]

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 "fixed the icons visibility and added up and down icon". 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

[graphite-app[bot]]

Graphite Automations

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

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

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

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

[github-actions[bot]]

📦 Next.js Bundle Analysis for @calcom/web

This analysis was generated by the Next.js Bundle Analysis action. 🤖

Eighty Pages Changed Size

The following pages changed size from the code in this PR compared to its base branch:

Page	Size (compressed)	First Load	% of Budget (350 KB)
/apps	276.93 KB	504.55 KB	144.16% (🟢 -2.08%)
/apps/[slug]	294.49 KB	522.11 KB	149.18% (🟢 -2.09%)
/apps/[slug]/[...pages]	586.73 KB	814.35 KB	232.67% (🟢 -1.69%)
/apps/categories	254.24 KB	481.86 KB	137.68% (🟢 -1.81%)
/apps/categories/[category]	259.05 KB	486.67 KB	139.05% (🟢 -2.07%)
/apps/installation/[[...step]]	466.93 KB	694.55 KB	198.44% (🔴 +85.50%)
/apps/installed/[category]	278.17 KB	505.8 KB	144.51% (🟢 -1.83%)
/auth/saml-idp	12.22 KB	239.85 KB	68.53% (🟢 -20.80%)
/availability	426.34 KB	653.97 KB	186.85% (🟢 -1.74%)
/availability/[schedule]	410.25 KB	637.87 KB	182.25% (🟢 -1.73%)
/bookings/[status]	324.23 KB	551.86 KB	157.67% (🟢 -1.70%)
/enterprise	254.29 KB	481.92 KB	137.69% (🟢 -1.80%)
/event-types	559.39 KB	787.01 KB	224.86% (🟢 -1.71%)
/event-types/[type]	435.76 KB	663.38 KB	189.54% (🟢 -1.65%)
/getting-started/[[...step]]	447.92 KB	675.55 KB	193.01% (🟡 +10.66%)
/insights	474.24 KB	701.86 KB	200.53% (🟢 -1.80%)
/more	253.8 KB	481.43 KB	137.55% (🟢 -1.80%)
/settings/admin	260.24 KB	487.86 KB	139.39% (🟢 -1.79%)
/settings/admin/apps	273.6 KB	501.23 KB	143.21% (🟢 -1.78%)
/settings/admin/apps/[category]	273.59 KB	501.21 KB	143.20% (🟢 -1.78%)
/settings/admin/flags	264.07 KB	491.69 KB	140.48% (🟢 -1.78%)
/settings/admin/impersonation	260.63 KB	488.25 KB	139.50% (🟢 -1.79%)
/settings/admin/lockedSMS	281.72 KB	509.35 KB	145.53% (🟢 -1.76%)
/settings/admin/oAuth	272.35 KB	499.97 KB	142.85% (🟢 -1.78%)
/settings/admin/orgMigrations/_OrgMigrationLayout	249.17 KB	476.79 KB	136.23% (🟢 -1.79%)
/settings/admin/orgMigrations/moveTeamToOrg	298.92 KB	526.55 KB	150.44% (🟢 -1.76%)
/settings/admin/orgMigrations/moveUserToOrg	318.75 KB	546.38 KB	156.11% (🟢 -1.74%)
/settings/admin/orgMigrations/removeTeamFromOrg	298.69 KB	526.31 KB	150.38% (🟢 -1.77%)
/settings/admin/orgMigrations/removeUserFromOrg	298.7 KB	526.32 KB	150.38% (🟢 -1.77%)
/settings/admin/organizations	262.12 KB	489.75 KB	139.93% (🟢 -1.79%)
/settings/admin/organizations/[id]/edit	260.79 KB	488.41 KB	139.55% (🟢 -1.79%)
/settings/admin/users	262.89 KB	490.52 KB	140.15% (🟢 -1.79%)
/settings/admin/users/[id]/edit	392.08 KB	619.71 KB	177.06% (🟢 -1.75%)
/settings/admin/users/add	391.75 KB	619.37 KB	176.96% (🟢 -1.75%)
/settings/billing	260.44 KB	488.07 KB	139.45% (🟢 -1.79%)
/settings/developer/api-keys	264.84 KB	492.46 KB	140.70% (🟢 -1.78%)
/settings/developer/webhooks	265.01 KB	492.64 KB	140.75% (🟢 -1.78%)
/settings/developer/webhooks/[id]	265.99 KB	493.62 KB	141.03% (🟢 -1.77%)
/settings/developer/webhooks/new	266.02 KB	493.64 KB	141.04% (🟢 -1.77%)
/settings/my-account/appearance	313.44 KB	541.06 KB	154.59% (🟢 -1.78%)
/settings/my-account/calendars	271.86 KB	499.49 KB	142.71% (🟢 -1.82%)
/settings/my-account/conferencing	272.77 KB	500.39 KB	142.97% (🟢 -1.82%)
/settings/my-account/general	375.94 KB	603.57 KB	172.45% (🟢 -1.78%)
/settings/my-account/out-of-office	265.47 KB	493.1 KB	140.88% (🟢 -1.78%)
/settings/my-account/profile	408.38 KB	636 KB	181.72% (🟢 -1.79%)
/settings/organizations/[id]/about	159.66 KB	387.29 KB	110.65% (🟡 +0.47%)
/settings/organizations/[id]/add-teams	159.65 KB	387.28 KB	110.65% (🟡 +0.47%)
/settings/organizations/admin-api	260.4 KB	488.02 KB	139.43% (🟢 -1.78%)
/settings/organizations/appearance	122.33 KB	349.95 KB	99.99% (🟢 -48.03%)
/settings/organizations/billing	260.48 KB	488.1 KB	139.46% (🟢 -1.79%)
/settings/organizations/dsync	293.1 KB	520.73 KB	148.78% (🟢 -1.79%)
/settings/organizations/general	348.79 KB	576.41 KB	164.69% (🟢 -1.78%)
/settings/organizations/members	399.96 KB	627.59 KB	179.31% (🟢 -1.77%)
/settings/organizations/new	159.66 KB	387.29 KB	110.65% (🟡 +0.48%)
/settings/organizations/privacy	265.99 KB	493.62 KB	141.03% (🟢 -1.78%)
/settings/organizations/profile	413.25 KB	640.88 KB	183.11% (🟡 +1.75%)
/settings/organizations/sso	271.07 KB	498.69 KB	142.48% (🟢 -1.78%)
/settings/organizations/teams/other	261.31 KB	488.93 KB	139.70% (🟢 -1.79%)
/settings/organizations/teams/other/[id]/appearance	273.21 KB	500.83 KB	143.10% (🟢 -1.74%)
/settings/organizations/teams/other/[id]/members	267.91 KB	495.53 KB	141.58% (🟢 -1.79%)
/settings/organizations/teams/other/[id]/profile	471.63 KB	699.25 KB	199.79% (🟢 -1.78%)
/settings/platform	258.9 KB	486.53 KB	139.01% (🟢 -1.80%)
/settings/platform/new	120.67 KB	348.3 KB	99.51% (🟡 +0.51%)
/settings/platform/oauth-clients/[clientId]/edit	257.21 KB	484.83 KB	138.52% (🟢 -1.80%)
/settings/platform/oauth-clients/create	256.35 KB	483.97 KB	138.28% (🟢 -1.80%)
/settings/security/impersonation	265.65 KB	493.27 KB	140.94% (🟢 -1.79%)
/settings/security/password	303.82 KB	531.44 KB	151.84% (🟢 -1.77%)
/settings/security/sso	270.52 KB	498.14 KB	142.33% (🟢 -1.79%)
/settings/security/two-factor-auth	269.13 KB	496.75 KB	141.93% (🟢 -1.79%)
/settings/teams	259.98 KB	487.6 KB	139.31% (🟢 -1.78%)
/settings/teams/[id]/appearance	273.2 KB	500.82 KB	143.09% (🟢 -1.74%)
/settings/teams/[id]/billing	260.48 KB	488.11 KB	139.46% (🟢 -1.79%)
/settings/teams/[id]/members	378.03 KB	605.65 KB	173.04% (🟢 -1.78%)
/settings/teams/[id]/profile	472.41 KB	700.03 KB	200.01% (🟢 -1.78%)
/settings/teams/new	193 KB	420.62 KB	120.18% (🟢 -1.83%)
/teams	254.03 KB	481.65 KB	137.62% (🟢 -1.81%)
/upgrade	254.15 KB	481.78 KB	137.65% (🟢 -1.80%)
/video/[uid]	291.18 KB	518.81 KB	148.23% (🟢 -0.18%)
/workflows	286.05 KB	513.68 KB	146.77% (🟢 -1.75%)
/workflows/[workflow]	414.32 KB	641.95 KB	183.41% (🟢 -1.52%)

Details

Only the gzipped size is provided here based on an expert tip.

First Load is the size of the global bundle plus the bundle for the individual page. If a user were to show up to your website and land on a given page, the first load size represents the amount of javascript that user would need to download. If next/link is used, subsequent page loads would only need to download that page's bundle (the number in the "Size" column), since the global bundle has already been downloaded.

Any third party scripts you have added directly to your app using the <script> tag are not accounted for in this analysis

The "Budget %" column shows what percentage of your performance budget the First Load total takes up. For example, if your budget was 100kb, and a given page's first load size was 10kb, it would be 10% of your budget. You can also see how much this has increased or decreased compared to the base branch of your PR. If this percentage has increased by 20% or more, there will be a red status indicator applied, indicating that special attention should be given to this. If you see "+/-

[emrysal]

Drafting as making a little style update.

[emrysal]

Hey @Sahillather002 - I've updated the code to incorporate @Ryukemeister's observations and did a minor re-organisation in order to optimise the component & make it less complex. With these changes the re-render is isolated to the dropdown and certain input is cached (like i18n) whenever the dropdown is opened.