Skip to content

Commit

Permalink
fix: form and popup style fixes
Browse files Browse the repository at this point in the history
OldStarchy committed Jul 7, 2024

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature.
1 parent dbb7675 commit 2641b93
Showing 6 changed files with 100 additions and 33 deletions.
66 changes: 41 additions & 25 deletions src/App.tsx
Original file line number Diff line number Diff line change
@@ -10,7 +10,7 @@ import {
faShuffle,
faStar,
} from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
import {
Dispatch,
SetStateAction,
@@ -20,17 +20,18 @@ import {
useState,
} from 'react';
import './App.css';
import { CardBase } from './components/CardBase';
import { DeckView } from './components/DeckView';
import { Popup } from './components/Popup';
import { Button } from './components/common/Button';
import { Input } from './components/common/Input';
import { H2 } from './components/common/Typography';
import { cities } from './data/cities';
import { Assortment, IAssortment } from './lib/Assortment';
import { Card } from './lib/Card';
import { Deck, IPossibleCard, IReadonlyPossibleCard } from './lib/Deck';
import { useMutable } from './lib/Mutable';
import {CardBase} from './components/CardBase';
import {DeckView} from './components/DeckView';
import {Popup} from './components/Popup';
import {Button} from './components/common/Button';
import {Input} from './components/common/Input';
import {Select} from './components/common/Select';
import {H2} from './components/common/Typography';
import {cities} from './data/cities';
import {Assortment, IAssortment} from './lib/Assortment';
import {Card} from './lib/Card';
import {Deck, IPossibleCard, IReadonlyPossibleCard} from './lib/Deck';
import {useMutable} from './lib/Mutable';

const cityCards = Object.keys(cities).map((city) => Card.get({ name: city }));
const shuffledCityCards = new Assortment(
@@ -185,7 +186,13 @@ function App() {
</section>
<section>
<H2>Draw Chance</H2>
<ol>
<ol
style={{
display: 'flex',
flexDirection: 'column',
gap: '0.25rem',
}}
>
{cardDrawProbabilities.map(
({ card, probability }, index) => {
const color = [...colors.entries()]
@@ -397,23 +404,32 @@ function App() {
infectionDeck.name = json.name;
setEditDeckFormVisible(false);
}}
style={{
flexDirection: 'column',
}}
>
<textarea
value={editDeckData}
style={{ width: '90vw', height: '80vh' }}
style={{
width: '90vw',
height: '80vh',
background: '#222',
}}
onChange={(e) => {
setEditDeckData(e.target.value);
}}
></textarea>
<button type="submit">Save</button>
<button
type="button"
onClick={() => {
setEditDeckFormVisible(false);
}}
>
Cancel
</button>
<div>
<Button type="submit">Save</Button>
<Button
type="button"
onClick={() => {
setEditDeckFormVisible(false);
}}
>
Cancel
</Button>
</div>
</form>
</Popup>
<Popup visible={topDrawFormVisible}>
@@ -497,7 +513,7 @@ function SelectCardForm({
onSelectCard(card);
}}
>
<select
<Select
value={cardName}
onChange={(e) => {
setCardName(e.target.value);
@@ -508,7 +524,7 @@ function SelectCardForm({
{card.name}
</option>
))}
</select>
</Select>
<Button type="submit">Draw</Button>
<Button type="button" onClick={onCancel}>
Done
11 changes: 10 additions & 1 deletion src/components/Popup.tsx
Original file line number Diff line number Diff line change
@@ -20,7 +20,16 @@ export function Popup({
alignItems: 'center',
}}
>
{children}
<div
style={{
background: 'black',
padding: '1rem',
borderRadius: '0.5rem',
boxShadow: '0 0 1rem black',
}}
>
{children}
</div>
</div>
);
}
1 change: 1 addition & 0 deletions src/components/common/Button.tsx
Original file line number Diff line number Diff line change
@@ -8,6 +8,7 @@ const StyledButton = styled.button`
align-items: center;
border: 1px solid currentColor;
line-height: 1;
background-color: black;
&:disabled {
color: gray;
5 changes: 1 addition & 4 deletions src/components/common/Input.tsx
Original file line number Diff line number Diff line change
@@ -14,9 +14,6 @@ const StyledInput = styled.input`
}
`;

export function Input({
children,
...props
}: React.JSX.IntrinsicElements['input']) {
export function Input(props: React.JSX.IntrinsicElements['input']) {
return <StyledInput {...props} />;
}
39 changes: 39 additions & 0 deletions src/components/common/Select.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
import React from 'react';
import styled from 'styled-components';

const StyledSelect = styled.select`
display: inline-block;
padding: 0.5rem 1.5rem 0.5rem 0.5rem;
justify-content: center;
align-items: center;
color: inherit;
border-bottom: 1px solid currentColor;
&:disabled {
color: gray;
}
`;

const StyledBox = styled.div`
display: inline-block;
position: relative;
background-color: black;
&::after {
content: '▼';
position: absolute;
right: 0.25rem;
top: 50%;
transform: translateY(-50%);
width: 1rem;
height: 1rem;
}
`;

export function Select(props: React.JSX.IntrinsicElements['select']) {
return (
<StyledBox>
<StyledSelect {...props} />
</StyledBox>
);
}
11 changes: 8 additions & 3 deletions src/index.css
Original file line number Diff line number Diff line change
@@ -27,14 +27,14 @@ input,
textarea,
select,
button {
background: black;
color: inherit;
background: black;
}

textarea,
select {
textarea {
min-width: 3rem;
min-height: 3rem;
line-height: 1.25;
}

input[type='checkbox'] {
@@ -46,6 +46,11 @@ button:not(:disabled) {
cursor: pointer;
}

form {
display: flex;
gap: 0.25rem;
}

ul,
ol {
list-style-type: none;

0 comments on commit 2641b93

Please sign in to comment.