diff --git a/frontend/src/activities/MainActivity.js b/frontend/src/activities/MainActivity.js index d3bea6d..169d478 100644 --- a/frontend/src/activities/MainActivity.js +++ b/frontend/src/activities/MainActivity.js @@ -12,7 +12,7 @@ const bottomBar = ( ) const floatingActionButton = ( - + add ) diff --git a/frontend/src/components/Card.css b/frontend/src/components/Card.css new file mode 100644 index 0000000..4747456 --- /dev/null +++ b/frontend/src/components/Card.css @@ -0,0 +1,12 @@ +.card { + display: flex; + flex-direction: column; + gap: 1rem; + padding: 1rem; + background-color: var(--md-sys-color-surface-container); + border-radius: 1rem; +} + +.card > * { + flex-shrink: 0; +} diff --git a/frontend/src/components/Card.js b/frontend/src/components/Card.js new file mode 100644 index 0000000..459254a --- /dev/null +++ b/frontend/src/components/Card.js @@ -0,0 +1,11 @@ +import './Card.css' + +export default function Card({ + children, +}) { + return ( +
+ {children} +
+ ) +} diff --git a/frontend/src/components/FullScreenDialog.css b/frontend/src/components/FullScreenDialog.css index 2723548..147af01 100644 --- a/frontend/src/components/FullScreenDialog.css +++ b/frontend/src/components/FullScreenDialog.css @@ -23,14 +23,16 @@ scale: 0; } -.full-screen-dialog > .content { +.full-screen-dialog > .scaffold > .content { flex-grow: 1; flex-shrink: 1; display: flex; flex-direction: column; + gap: 1rem; + padding: 1rem; overflow-y: auto; } -.full-screen-dialog > .content > * { - padding: 1rem; +.full-screen-dialog > .scaffold > .content > * { + flex-shrink: 0; } diff --git a/frontend/src/components/FullScreenDialog.js b/frontend/src/components/FullScreenDialog.js index 19ed8f2..6fd421f 100644 --- a/frontend/src/components/FullScreenDialog.js +++ b/frontend/src/components/FullScreenDialog.js @@ -1,22 +1,31 @@ -import '@material/web/iconbutton/icon-button.js' -import '@material/web/icon/icon.js' -import '@material/web/button/filled-button' +import '@material/web/fab/fab' +import '@material/web/icon/icon' +import Scaffold from './Scaffold' import TopAppBar from './TopAppBar' import './FullScreenDialog.css' +import React from "react"; + +const floatingActionButton = ( + + add + +) export default function ({ - setEditPoll, - classList, - children, + setEditPoll, + classList, + children, }) { return (
- setEditPoll(false)} /> -
- {children} -
+ setEditPoll(false)}/> + } + floatingActionButton={floatingActionButton} + content={children} />
) } diff --git a/frontend/src/components/NavigationBar.css b/frontend/src/components/NavigationBar.css index 7be013d..d34a503 100644 --- a/frontend/src/components/NavigationBar.css +++ b/frontend/src/components/NavigationBar.css @@ -1,6 +1,7 @@ nav { display: flex; flex-direction: column; + padding-bottom: .5rem; background-color: var(--md-sys-color-surface-container-high); } diff --git a/frontend/src/screens/PollsScreen.css b/frontend/src/screens/PollsScreen.css index e69de29..1ae8537 100644 --- a/frontend/src/screens/PollsScreen.css +++ b/frontend/src/screens/PollsScreen.css @@ -0,0 +1,39 @@ +label, +.messages-title, +.title { + color: var(--md-sys-color-on-surface); +} + +label { + display: flex; + align-items: center; +} + +.messages-title { + margin: 1rem 0; +} + +.title:not(:first-child) { + margin-top: 1rem; +} + +.poll-options { + display: flex; + flex-direction: column; +} + +.poll-options > .poll-option { + flex-shrink: 0; + display: flex; + align-items: center; +} + +.poll-options > .poll-option > .option-text { + flex-grow: 1; + flex-shrink: 1; +} + +.poll-options > .poll-option > .option-action { + flex-shrink: 0; + margin-left: 1rem; +} diff --git a/frontend/src/screens/PollsScreen.js b/frontend/src/screens/PollsScreen.js index ef5a7d4..ca2379c 100644 --- a/frontend/src/screens/PollsScreen.js +++ b/frontend/src/screens/PollsScreen.js @@ -1,14 +1,15 @@ -import React, {useEffect, useState} from "react" +import React, {useEffect, useState} from 'react' import '@material/web/textfield/outlined-text-field' 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/list/list' -import '@material/web/list/list-item' +import '@material/web/iconbutton/filled-icon-button' +import '@material/web/checkbox/checkbox' -import FullScreenDialog from "../components/FullScreenDialog" -import PollListItem from "../components/PollListItem" +import PollListItem from '../components/PollListItem' +import FullScreenDialog from '../components/FullScreenDialog' +import Card from '../components/Card' import './PollsScreen.css' @@ -102,33 +103,87 @@ export default function PollsScreen() {
-
Сообщения
- - - Fruits - - - - Apple - - - Banana - - -
Cucumber
-
Cucumbers are long green fruits that are just as long as this - multi-line description + +
Сообщения
+ + + +
Сообщение 1
+ + + + attach_file + + +
Текст
+
+ + +
Опрос
+
+ + +
Изображение
+
+ + +
Видео
+
+ + +
Аудио
+
+ + +
Файл
+
+ +
+ + + contact_support + + +
Варианты ответа
+ +
+ +
+ + + arrow_forward +
- - -
Shop for Kiwis
-
This will link you out in a new tab
- open_in_new -
- + + +
+ +
Настройки
+ + + + + + + +
+