Сделать дизайн для новой страницы в приложении

Есть приложение для Windows. Необходимо создать дизайн(только дизайн, без верстки) новой странички в этом приложении. Обязательно нужно сделать так, чтобы новая страница гармонично смотрелась вместе со старыми. Пользователи будут видеть новую страницу очень часто, поэтому очень важно чтобы работа была сделана максимально качественно. Мы готовы платить больше, но иметь возможность вносить дополнительные правки.

Новая страница выглядит так:

https://i.imgur.com/Jr7jyTb.png

Основное приложение:

https://i.imgur.com/xY9JJE7.png

Его можно скачать по этой ссылке

Чтобы увидеть основной интерфейс, нужно нажать на красную кнопку "запись" в центре окна. Сейчас интерфейс приложения меняется, и некоторые элементы устарели. Лучше всего если новая страница будет выполнена в таком стиле:

https://i.imgur.com/q50akEC.png

Если рассказывать о функциональной части кратко, то само приложение представляет собой что-то вроде визуальной среды программирования, а новая страница предоставляет пользователю удобный метод выбора и поиска переменных.

Для более подробной информации, вот ТЗ по функциональной части на английском. Реализовывать его не нужно, это, только чтобы посмотреть как работает функционал.

Purpose

Right now finding variable, resource or function name may be tedious. Selecting variable requires huge number of clicks.

General

Current dialog must be reimplemented. New dialog must fill all available space.

This ticket requires implementing functionality only. For now, look and feel should be made as much more simple as possible because it will be the subject of change later.

Following ticket requires changing both "Select Variable", "Select Resource" and "Select Function" dialogs, but description will be provided only for "Select Variable". Other dialogs should look and work absolutely similar.

Functionality

• User can open dialog by clicking on following button. Procedure remains the same as before.
• Dialog must be closed if user press Esc button or if user clicks on (2).
• Search must be performed if user starts input in field (3). If search input is empty, all variables must be shown. Search functionality must be implemented with toLowerCase and indexOf methods. If search is active, found results parts must be highlighted.
• Results must be sorted alphabetically and grouped by first letter.
• If there are no variables, which start from certain letter, that letter must be hidden.
• Variables must have green color(same as in other interface) and converted to upper case.
• Several columns with variables are allowed depending on client width. No limits regarding column number must be used, if 10 columns fits the screen, then 10 columns should be used.
• Dialog must react on screen size changes and correct column number accordingly.
• Depending on screen width, Recent variables panel (6) must be shown or not shown. If screen width is limited - panel must be hidden. Use media queries. Please calculate exact width value to show panel experimentally.
• User can click on (1) button to toggle Recent variables panel (6) visibility explicitly. Icon for this panel will be a subject of change.
• In order to search for variables manually, scroll can be used (7).
• Scroll position must be preserved across dialog run. If user scrolls down main panel up to 100px, selects variable or closes dialog and then opens dialog again, it must open on the same position - 100px scroll.
• There should not be horizontal scroll bar on any circumstances.
• Recent variables panel (6) and toggle button (1) must be hidden if there are no recent action to show.
• Recent variables panel (6) must also contain vertical scroll bar if it is required.
• Variable can get to recent panel if it was selected or if a new action was created, which outputs that variable. For example, if "Current Url" action is used, then CURRENT_URL variable must be added to recent list.
• If variable that should be added already exists in recent list, old occurrence must be removed. Presence of variable in the list must be unique.
• Recent variable list must be preserved on hard drive. API to do that will be added later. This means, that recent variable list must be restored after BAS restart.
• Each variable can have a small description line (5). This description line is present if that variable is default for certain action, and it should contain action name. For example, for variable FILEINFO_BASE_DIRECTORY, description line must contain File/Folder Info, for variable MY_VAR - no description line should be present.
• When user clicks on variable name or description, this variable must be selected and dialog is closed. Try to make hit box as much as possible.