Create a Dial Pad Screen #159
Description
🚀 Welcome Contributors!
Your task is to create a functional, high-fidelity Mobile Dial Pad with interactive feedback, mimicking the look and feel of a real phone interface, following the method shown in the provided tutorial.
The Design & Behavior:
-
Visual: A sleek, dark-themed mobile dialer featuring a grid of circular buttons, a call button, and a dynamic number display area.
-
States:
-
Default: The dial pad is ready for input with all numbers clearly visible.
-
Pressed/Tapped: Buttons should provide immediate visual feedback (such as a color change or subtle scaling) when clicked.
-
Active Input: The display area at the top should update in real-time as numbers are "dialed."
-
Interaction:
-
Use Interactive Components to handle the hover and press states for each individual key.
-
Feel: Create a tactile and responsive interface that feels like a functional utility, paying close attention to the spacing and alignment typical of iOS or Android dialers.
📝 Submission Guidelines
To successfully merge your contribution, please follow these rules strictly:
- The Folder: Navigate to the folder named:
8-dial-pad - The File: Create a new text file named
<your-github-username>.txt. - The Content: The file must contain your Figma link in the following format:
Figma link - <your-live-figma-link> - Permissions: Ensure your Figma link permissions are set to "Anyone with the link can view" so the maintainers can review your work.
Example of how johndoe.txt should look:
Figma link - https://www.figma.com/file/xxxxxxxxxxxxxxxxxxxxxxxx
Directory Structure Example:
Repo Root
└── 8-dial-pad/
└── <your-github-username>.txt
Happy Prototyping! 💫