fix(task): OutdialCall CSS

[brain-frog]

COMPLETES https://jira-eng-sjc12.cisco.com/jira/browse/CAI-7509

This pull request addresses

Previous changes to the Outdial Call CSS have misaligned the containers within.

by making the following changes

Adjusting the HTML tags and class usage inside OutdialCall, as well as adding back some CSS properties to containers that lost them.

BEFORE

AFTER

Change Type

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to change)
• Documentation update
• Tooling change
• Internal code refactor

The following scenarios were tested

• The testing is done with the amplify link
  < ENUMERATE TESTS PERFORMED, WHETHER MANUAL OR AUTOMATED >

The GAI Coding Policy And Copyright Annotation Best Practices

• GAI was not used (or, no additional notation is required)
• Code was generated entirely by GAI
• GAI was used to create a draft that was subsequently customized or modified
• Coder created a draft manually that was non-substantively modified by GAI (e.g., refactoring was performed by GAI on manually written code)
• Tool used for AI assistance (GitHub Copilot / Other - specify)
  • Github Copilot
  • Other - Please Specify
• This PR is related to
  • Feature
  • Defect fix
  • Tech Debt
  • Automation

Checklist before merging

• I have not skipped any automated checks
• All existing and new tests passed
• I have updated the testing document
• I have tested the functionality with amplify link

---

Make sure to have followed the contributing guidelines before submitting.

[aws-amplify-us-east-2]

This pull request is automatically being deployed by Amplify Hosting (learn more).

Access this pull request here: https://pr-589.d1b38q61t1z947.amplifyapp.com

[mkesavan13]

Let's update the PR title to reflect the change as the PR title is what sits in the commit history.

[akulakum]

Could you please clarify which Figma design we are following to address the Outdial component design issue? Also, please attach the corresponding Figma link in the PR description.

[rsarika]

Fix the PR title and make sure the pipeline successful

[akulakum]

@brain-frog, the changes look good overall. To fully match the Figma design, the Address Book and Dialpad tab labels are missing, and the Dialpad tab background color needs to be updated. If you have bandwidth, please address these as well so the implementation aligns with Figma.

[Shreyas281299]

PR looks good.

[akulakum]

@brain-frog, the changes look good overall. To fully match the Figma design, the Address Book and Dialpad tab labels are missing, and the Dialpad tab background color needs to be updated. If you have bandwidth, please address these as well so the implementation aligns with Figma.

As per the design, we are intentionally not including text for the tabs. However, could we update the background color of the Dialpad tab? The current background does not match the Figma design.