JS-файлы React переименованы в формат JSX

frontend/src/components/FullScreenDialog.jsx

@@ -8,12 +8,12 @@ import './FullScreenDialog.css'
 import React from "react";
 
 const floatingActionButton = (
-    <md-fab>
+    <md-fab label="Добавить сообщение">
         <md-icon slot="icon">add</md-icon>
     </md-fab>
 )
 
-export default function ({
+export default function FullScreenDialog({
     setEditPoll,
     classList,
     children,

frontend/src/components/Scaffold.css

@@ -13,6 +13,7 @@
 .scaffold > .content {
     flex-grow: 1;
     flex-shrink: 1;
+    padding-bottom: 8rem !important;
     overflow-y: auto;
 }
 

frontend/src/screens/PollsScreen.css

@@ -1,39 +1,40 @@
-label,
-.messages-title,
-.title {
+.poll-edit .content label,
+.poll-edit .content .messages-title,
+.poll-edit .content .title {
     color: var(--md-sys-color-on-surface);
 }
 
-label {
+.poll-edit .content label {
     display: flex;
     align-items: center;
+    margin: 0;
 }
 
-.messages-title {
+.poll-edit .content .messages-title {
     margin: 1rem 0;
 }
 
-.title:not(:first-child) {
+.poll-edit .content .title:not(:first-child) {
     margin-top: 1rem;
 }
 
-.poll-options {
+.poll-edit .content .poll-options {
     display: flex;
     flex-direction: column;
 }
 
-.poll-options > .poll-option {
+.poll-edit .content .poll-options > .poll-option {
     flex-shrink: 0;
     display: flex;
     align-items: center;
 }
 
-.poll-options > .poll-option > .option-text {
+.poll-edit .content .poll-options > .poll-option > .option-text {
     flex-grow: 1;
     flex-shrink: 1;
 }
 
-.poll-options > .poll-option > .option-action {
+.poll-edit .content .poll-options > .poll-option > .option-action {
     flex-shrink: 0;
     margin-left: 1rem;
 }

frontend/src/screens/PollsScreen.jsx

@@ -4,7 +4,7 @@ import '@material/web/fab/fab'
 import '@material/web/icon/icon'
 import '@material/web/select/outlined-select'
 import '@material/web/select/select-option'
-import '@material/web/iconbutton/filled-icon-button'
+import '@material/web/iconbutton/icon-button'
 import '@material/web/checkbox/checkbox'
 
 import PollListItem from '../components/PollListItem'
@@ -18,7 +18,7 @@ const PollContext = React.createContext({
     fetchPolls: () => {},
 })
 
-const apiUrl = new URL(location)
+const apiUrl = new URL(window.location)
 apiUrl.pathname = '/api/polls'
 
 export default function PollsScreen() {
@@ -58,12 +58,13 @@ export default function PollsScreen() {
             </md-list>
 
             <FullScreenDialog
-                setEditPoll={setEditPoll}
-                classList={editPoll ? 'open' : 'close'}>
+                classList={`poll-edit ${editPoll ? 'open' : 'close'}`}
+                setEditPoll={setEditPoll}>
 
                 <md-outlined-text-field
                         label="Название"
                         value={editPoll ? editPoll.name : ''}
+                        supporting-text="Отображается в списке опросов"
                         required="required">
                     <md-icon slot="leading-icon">title</md-icon>
                 </md-outlined-text-field>
@@ -108,7 +109,43 @@ export default function PollsScreen() {
 
                     <Card>
 
-                        <div className="title md-typescale-title-small">Сообщение 1</div>
+                        <div className="title md-typescale-title-small">Общее</div>
+
+                        <md-outlined-text-field
+                            label="Название"
+                            value=""
+                            supporting-text="Позволяет идентифицировать сообщение"
+                            required="required">
+                            <md-icon slot="leading-icon">title</md-icon>
+                        </md-outlined-text-field>
+
+                        <md-outlined-text-field
+                            label="Время начала"
+                            value=""
+                            supporting-text="Время отправки сообщения"
+                            required="required">
+                            <md-icon slot="leading-icon">title</md-icon>
+                        </md-outlined-text-field>
+
+                        <md-outlined-text-field
+                            label="Время окончания"
+                            value=""
+                            supporting-text="Время прекращения обработки событий"
+                            required="required">
+                            <md-icon slot="leading-icon">title</md-icon>
+                        </md-outlined-text-field>
+
+                        <div>
+                            <label className="md-typescale-body-large">
+                                <md-checkbox touch-target="wrapper"></md-checkbox>
+                                Не отправлять уведомление
+                            </label>
+
+                            <label className="md-typescale-body-large">
+                                <md-checkbox touch-target="wrapper"></md-checkbox>
+                                Удалить после окончания
+                            </label>
+                        </div>
 
                         <md-outlined-select label="Тип" value="poll" required="required">
 
@@ -140,6 +177,8 @@ export default function PollsScreen() {
 
                         </md-outlined-select>
 
+                        <div className="title md-typescale-title-small">Опрос</div>
+
                         <md-outlined-text-field
                             label="Вопрос"
                             value=""
@@ -147,7 +186,7 @@ export default function PollsScreen() {
                             <md-icon slot="leading-icon">contact_support</md-icon>
                         </md-outlined-text-field>
 
-                        <div className="title md-typescale-title-small">Варианты ответа</div>
+                        <div className="title md-typescale-label-medium">Варианты ответа</div>
 
                         <div className="poll-options">
 
@@ -157,16 +196,16 @@ export default function PollsScreen() {
                                     label="Добавить ответ"
                                     value=""
                                     required="required"/>
-                                <md-filled-icon-button class="option-action">
-                                    <md-icon>arrow_forward</md-icon>
-                                </md-filled-icon-button>
+                                <md-icon-button class="option-action">
+                                    <md-icon>adjust</md-icon>
+                                </md-icon-button>
                             </div>
 
-
                         </div>
 
                         <div className="title md-typescale-title-small">Настройки</div>
 
+                        <div>
                             <label className="md-typescale-body-large">
                                 <md-checkbox touch-target="wrapper"></md-checkbox>
                                 Анонимное голосование
@@ -176,11 +215,7 @@ export default function PollsScreen() {
                                 <md-checkbox touch-target="wrapper"></md-checkbox>
                                 Выбор нескольких ответов
                             </label>
-
-                        <label className="md-typescale-body-large">
-                            <md-checkbox touch-target="wrapper"></md-checkbox>
-                            Не уведомлять получателей
-                        </label>
+                        </div>
 
                     </Card>