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

🎹 Add tablet styles #74

Merged
merged 5 commits into from
Jun 12, 2024
Merged

🎹 Add tablet styles #74

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
e7495c9
Adjust main sections
mrushkova Jun 11, 2024
5be7962
Add tablet styles for win form
mrushkova Jun 12, 2024
d621262
Add styles to transaction flow
mrushkova Jun 12, 2024
673c61c
Add styles to all bids page
mrushkova Jun 12, 2024
07b6ab9
Merge branch 'master' into maria/tablet-styles
mrushkova Jun 12, 2024
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
5 changes: 5 additions & 0 deletions packages/frontend/src/components/auction/Auction.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,11 @@ const Wrapper = styled.div`
padding: 0 115px;
background: ${Colors.GreyLight};

${MediaQueries.large} {
width: 60%;
padding: 0 48px;
}

${MediaQueries.medium} {
width: 100%;
padding: 0;
Expand Down
11 changes: 8 additions & 3 deletions packages/frontend/src/components/auction/AuctionTransaction.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,21 +59,26 @@ const Transaction = styled.div`
display: flex;
width: 100%;

${MediaQueries.medium} {
${MediaQueries.large} {
flex-direction: column-reverse;
align-items: center;
gap: 24px;
}

${MediaQueries.medium} {
row-gap: 16px;
}
`

const TransactionWrapper = styled(FormWrapper)`
flex: 1;
row-gap: 24px;
gap: 24px;
padding: 82px 54px;
width: fit-content;

${MediaQueries.medium} {
${MediaQueries.large} {
width: 100%;
max-width: 440px;
padding: 0;
}
`
Expand Down
5 changes: 5 additions & 0 deletions packages/frontend/src/components/auction/TransactionSuccess/TransactionSuccess.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ import { Form, InputLabel } from '@/components/form'
import { Colors } from '@/styles/colors'
import { shortenHexString } from '@/utils/formatters/shortenHexString'
import { Hex } from 'viem'
import { MediaQueries } from '@/styles/mediaQueries'

interface Props {
txHash: Hex | undefined
Expand Down Expand Up @@ -50,6 +51,10 @@ export const TransactionSuccess = ({ txHash, action, setView, onBackHome }: Prop

const Container = styled(Form)`
row-gap: 24px;

${MediaQueries.large} {
row-gap: 16px;
}
`

const TransactionIdWrapper = styled.div`
Expand Down
2 changes: 1 addition & 1 deletion packages/frontend/src/components/bids/allBids/AllBids.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,7 @@ const PageContainer = styled.div`
padding: 28px 0 56px;
background-color: ${Colors.White};

${MediaQueries.medium} {
${MediaQueries.large} {
padding: 24px 32px;
row-gap: 16px;
}
Expand Down
10 changes: 9 additions & 1 deletion packages/frontend/src/components/bids/allBids/Header.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,10 +64,18 @@ const Title = styled.h2`
background-color: ${Colors.White};
padding: 4px 20px;

${MediaQueries.large} {
font-size: 32px;
}

${MediaQueries.medium} {
font-size: 20px;
font-size: 24px;
padding: 0 10px;
}

${MediaQueries.small} {
font-size: 20px;
}
`

const ButtonWrapper = styled.div`
Expand Down
2 changes: 1 addition & 1 deletion packages/frontend/src/components/info/Accordion.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -203,7 +203,7 @@ const Wrapper = styled.div`
margin: 0 auto;
padding: 44px 90px 44px 32px;

${MediaQueries.medium} {
${MediaQueries.large} {
padding: 32px;
}
`
Expand Down
8 changes: 8 additions & 0 deletions packages/frontend/src/components/info/Header.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,10 @@ const StyledHeader = styled(HeaderBar)`
height: 225px;
padding: 16px 68px;

${MediaQueries.large} {
padding: 16px 32px;
}

${MediaQueries.medium} {
height: 128px;
padding: 12px 32px 8px;
Expand Down Expand Up @@ -77,6 +81,10 @@ const Title = styled.h1`
background-color: ${Colors.White};
padding: 0 10px;

${MediaQueries.large} {
font-size: 40px;
}

${MediaQueries.medium} {
font-size: 20px;
}
Expand Down
2 changes: 1 addition & 1 deletion packages/frontend/src/components/info/VoucherTimeLeft.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ const VoucherTimeBox = styled.div<TimeProps>`
padding: 8px 24px 8px 68px;
background: ${({ isPeriodExpired }) => (isPeriodExpired ? Colors.Red : Colors.Black)};

${MediaQueries.medium} {
${MediaQueries.large} {
width: 100%;
padding: 32px;
}
Expand Down
7 changes: 6 additions & 1 deletion packages/frontend/src/components/stepper/TransactionStepper.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,11 +65,16 @@ const StepperContainer = styled.div`
padding: 82px 20px 82px 0;
background-color: ${Colors.Pink};

${MediaQueries.medium} {
${MediaQueries.large} {
width: 100%;
max-width: 440px;
padding: 0;
}
`
const StepperHeader = styled.h3`
margin: 0 0 24px 24px;

${MediaQueries.large} {
margin: 0 0 16px 24px;
}
`
7 changes: 7 additions & 0 deletions packages/frontend/src/components/userActious/UserActionSection.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,6 +47,13 @@ const Wrapper = styled.div`
justify-content: center;
align-items: center;

${MediaQueries.large} {
width: calc(100% + 96px);
height: 500px;
margin-left: -48px;
padding: 0 40px;
}

${MediaQueries.medium} {
width: 100%;
height: 100%;
Expand Down
10 changes: 9 additions & 1 deletion packages/frontend/src/components/userActious/claim/WinForm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,6 +52,10 @@ export const WinForm = ({ userBid, withdrawalAmount, setView }: WinFormProps) =>
const WinFormWrapper = styled.div`
display: flex;

${MediaQueries.large} {
gap: 16px;
}

${MediaQueries.medium} {
flex-direction: column;
gap: 32px;
Expand All @@ -63,6 +67,10 @@ const WinBidFormWrapper = styled(FormWrapper)<{ $twoColumns?: boolean }>`
width: ${(props) => (props.$twoColumns ? '289px' : '431px')};
padding: 0;

${MediaQueries.large} {
width: ${(props) => (props.$twoColumns ? 'fit-content' : '431px')};
}

${MediaQueries.medium} {
width: 100%;
}
Expand All @@ -71,7 +79,7 @@ const WinBidFormWrapper = styled(FormWrapper)<{ $twoColumns?: boolean }>`
const Wrapper = styled.div`
padding: 0 35px;

${MediaQueries.medium} {
${MediaQueries.large} {
padding: 0;
}
`
2 changes: 1 addition & 1 deletion packages/frontend/src/styles/mediaQueries.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ export const breakPoints = {
extraSmall: 360,
small: 430,
medium: 768,
large: 1024,
large: 1100,
extraLarge: 1440,
} as const

Expand Down