Add settings menu

[Evomatic]

We want to add a settings menu that will allow users to do the following:

• Set a custom time for 'pomodoro focus', 'short break', and 'long break'
• Set preference for fonts - Kumbh Sans, Roboto Slab, Space Mono
• Set preference for color - Red, aqua, purple

See figma for the design.

Lets break up the settings menu into smaller components to simplify the process (separate PRs). Having modules will also make it easier to add and remove different options for future features. So the implementation could flow in the following order:

1. Create the Settings modal with the 'Apply' button and open/close ability. This will not include any of the settings (time, font, color).
2. Create each setting as an individual component that can easily be added to the settings modal component. (separate PRs)
   • Timer component
   • Font component
   • Color component
3. Responsive design for desktop and mobile

└── components
        └── settings-menu
            ├── settings-modal.tsx
            ├── time-setting.tsx
            ├── font-setting.tsx
            ├── color-setting.tsx

[Evomatic]

@blue2wo For this I will handle the time setting component, as it kind of fits in with the toggle menu. So I am counting on you to build the settings menu in a modular way, so I can easily add the time settings component. 😉