diff options
Diffstat (limited to 'src')
-rw-r--r-- | src/components/gameSettings.tsx | 5 | ||||
-rw-r--r-- | src/components/ui.tsx | 32 | ||||
-rw-r--r-- | src/global.css | 5 | ||||
-rw-r--r-- | src/pages/game.tsx | 7 |
4 files changed, 44 insertions, 5 deletions
diff --git a/src/components/gameSettings.tsx b/src/components/gameSettings.tsx index bd28221..13bb1cc 100644 --- a/src/components/gameSettings.tsx +++ b/src/components/gameSettings.tsx @@ -12,7 +12,7 @@ export function CurrentGameSettings(/*props: CurrentGameSettingsProps*/) { height: 80 }}> <p style={{ - opacity: .6, + opacity: .75, fontStyle: "italic", userSelect: "none", position: "absolute", @@ -40,7 +40,8 @@ export function CurrentGameSettings(/*props: CurrentGameSettingsProps*/) { width: 85, verticalAlign: "middle", textAlign: "center", - transform: "translateY(-50%)" + transform: "translateY(-50%)", + userSelect: "none" }}>Spelregels aanpassen</span> </Button> </div>; diff --git a/src/components/ui.tsx b/src/components/ui.tsx index d869151..2a7e950 100644 --- a/src/components/ui.tsx +++ b/src/components/ui.tsx @@ -53,3 +53,35 @@ export function Button(props: ButtonProps) { </div>; } +interface SearchBarProps { + label?: string; +} + +export function SearchBar(props: SearchBarProps) { + return <div style={{ + marginTop: 24, + borderRadius: 8, + overflow: "hidden", + width: "100%" + }}> + <input type="text" placeholder={props.label} spellCheck={false} style={{ + padding: 12, + border: 0, + width: "calc(100% - 24px - 40px)", + fontSize: 14, + backgroundColor: "var(--page-background)", + color: "var(--text-alt)", + borderBottomLeftRadius: 8, + borderTopLeftRadius: 8 + }}/> + <div style={{ + width: 40, + height: 40, + backgroundColor: "var(--disk-a)", + display: "inline-block", + verticalAlign: "top", + position: "relative" + }}></div> + </div> +} + diff --git a/src/global.css b/src/global.css index 5787cee..bf7c090 100644 --- a/src/global.css +++ b/src/global.css @@ -49,3 +49,8 @@ td, th { font-size: 15px; } +input::placeholder { + font-style: italic; + opacity: .8; +} + diff --git a/src/pages/game.tsx b/src/pages/game.tsx index b17c12a..1725d09 100644 --- a/src/pages/game.tsx +++ b/src/pages/game.tsx @@ -5,13 +5,13 @@ import { CenteredPage } from '../components/page'; import { VoerBord } from '../components/voerBord'; import { DialogBox } from '../components/dialogBox'; import { CurrentGameSettings } from '../components/gameSettings'; -import { Button } from '../components/ui'; +import { Button, SearchBar } from '../components/ui'; import WifiTetheringRoundedIcon from '@material-ui/icons/WifiTetheringRounded'; import LinkRoundedIcon from '@material-ui/icons/LinkRounded'; var InviteButtonStyle: CSSProperties = { - backgroundColor: "var(--text)", + backgroundColor: "var(--page-background)", height: 160, padding: 12 } @@ -30,7 +30,7 @@ var InviteButtonLabelStyle: CSSProperties = { left: "50%", transform: "translateX(-50%)", textAlign: "center", - color: "var(--background)", + color: "var(--text-alt)", width: 136, fontSize: 20 } @@ -64,6 +64,7 @@ export default function GamePage() { <h2 style={InviteButtonLabelStyle}>Uitnodigen via link</h2> </Button> </div> + <SearchBar label="Zoeken in vriendenlijst"/> </DialogBox> </CenteredPage> </div> |