Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

added Address below fund input + removed width=500 from fund and exec… #150

Merged
merged 8 commits into from
Jan 27, 2022
Merged

added Address below fund input + removed width=500 from fund and exec… #150

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
ce56718
added Address below fund input + removed width=500 from fund and exec…
alexchan0394 Jan 23, 2022
9b292bc
added label for adress
alexchan0394 Jan 25, 2022
97f5d95
make fund modal to 500 px dynamic
alexchan0394 Jan 26, 2022
632aebb
Merge branch 'main' of https://github.com/1Hive/quests into quests-112
alexchan0394 Jan 26, 2022
da3773d
added ternary modal size for small and normal
alexchan0394 Jan 27, 2022
6592690
Merge branch 'main' into quests-112
Corantin Jan 27, 2022
67b73a4
execute claim modal size small
alexchan0394 Jan 27, 2022
f833f8b
Merge branch 'quests-112' of https://github.com/1Hive/quests into que…
alexchan0394 Jan 27, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion packages/react-app/src/components/modals/execute-claim-modal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -156,7 +156,7 @@ export default function ExecuteClaimModal({ claim, questTotalBounty, onClose = n
}
onClose={() => closeModal(false)}
isOpen={opened}
width={500}
size="small"
>
<Outset gu16>
<AmountFieldInputFormik
Expand Down
9 changes: 8 additions & 1 deletion packages/react-app/src/components/modals/fund-modal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ import * as QuestService from '../../services/quest.service';
import { AmountFieldInputFormik } from '../field-input/amount-field-input';
import { Outset } from '../utils/spacer-util';
import ModalBase, { ModalCallback } from './modal-base';
import { AddressFieldInput } from '../field-input/address-field-input';
import { WalletBallance } from '../wallet-balance';

const FormStyled = styled(Form)`
Expand Down Expand Up @@ -131,7 +132,7 @@ export default function FundModal({ quest, onClose = noop }: Props) {
]}
onClose={() => closeModal(false)}
isOpen={opened}
width={500}
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The objective if this card is to dynamically have a width around 500 (fit-content) without having to set 500, live it's too big. The CSS have to be done in ModalBase
image

size="small"
>
<FormStyled id="form-fund" onSubmit={handleSubmit} ref={formRef}>
<Outset gu16>
Expand All @@ -146,6 +147,12 @@ export default function FundModal({ quest, onClose = noop }: Props) {
value={values.fundAmount}
wide
/>
<AddressFieldInput
id="address"
label="Quest address"
value={quest.address}
isLoading={loading}
/>
</Outset>
</FormStyled>
</ModalBase>
Expand Down
8 changes: 5 additions & 3 deletions packages/react-app/src/components/modals/modal-base.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ type Props = {
onClose?: Function;
isOpen: boolean;
css?: React.CSSProperties;
width?: number;
size?: 'small' | 'normal';
};

export default function ModalBase({
Expand All @@ -42,7 +42,7 @@ export default function ModalBase({
buttons,
onClose = noop,
isOpen = false,
width,
size = 'normal',
css,
}: Props) {
useEffect(() => {
Expand All @@ -68,7 +68,9 @@ export default function ModalBase({
<ModalStyled
visible={isOpen}
onClose={(e: any) => e && onClose()}
width={(viewport: VisualViewport) => width ?? Math.min(viewport.width - 48, 1200)}
width={(viewport: VisualViewport) =>
Math.min(viewport.width - 16, size === 'small' ? 500 : 1200)
}
style={css}
>
<Outset gu8>
Expand Down