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

Unification buttons link in dapp #185

Merged
merged 7 commits into from
Jan 26, 2024
Merged

Unification buttons link in dapp #185

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
4a00783
Unification buttons link in dapp
ioay Jan 18, 2024
db84541
Button: updated styles for large size
ioay Jan 23, 2024
77f86db
borderRadius depending on size
ioay Jan 23, 2024
6779608
Update button styles
ioay Jan 25, 2024
9dc558a
Merge branch 'main' into dapp-unify-buttons-link
ioay Jan 26, 2024
d43e61b
Update import path for ButtonLink
ioay Jan 26, 2024
f6d285c
Update import path as relative for Typography
ioay Jan 26, 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
14 changes: 5 additions & 9 deletions dapp/src/components/Overview/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
import React from "react"
import { Button, Flex, Grid, HStack, Icon, Switch } from "@chakra-ui/react"
import { Flex, Grid, HStack, Switch } from "@chakra-ui/react"
import { useDocsDrawer } from "#/hooks"
import { TextSm } from "#/components/shared/Typography"
import { ArrowUpRight } from "#/assets/icons"
import { USD } from "#/constants"
import PositionDetails from "./PositionDetails"
import Statistics from "./Statistics"
import TransactionHistory from "./TransactionHistory"
import { TextSm } from "../shared/Typography"
import ButtonLink from "../shared/ButtonLink"
Copy link
Contributor

Choose a reason for hiding this comment

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

Non-blocking comment

I just noticed that we are not using aliases here. However, the TextSm component is already imported from #/components/shared/Typography. When should we use aliases in this case? It would be good to standardize it in code.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Yep, good catch, my IDE added imports automatically. Updated path for Typography. I think the IDE does it correctly and in case of child/parent nesting we should use a relative path.


export default function Overview() {
const { onOpen } = useDocsDrawer()
Expand All @@ -19,13 +19,9 @@ export default function Overview() {
<Switch size="sm" />
<TextSm fontWeight="bold">Show values in {USD.symbol}</TextSm>
</HStack>
<Button
variant="card"
onClick={onOpen}
leftIcon={<Icon as={ArrowUpRight} color="brand.400" boxSize={4} />}
>
<ButtonLink colorScheme="gold" bg="gold.200" onClick={onOpen}>
Docs
</Button>
</ButtonLink>
</Flex>
<Grid
templateAreas={`"position-details statistics"
Expand Down
1 change: 0 additions & 1 deletion dapp/src/components/shared/ButtonLink/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,6 @@ export default function ButtonLink({
<Button
variant={variant}
justifyContent="flex-start"
borderRadius="md"
leftIcon={
<Icon
as={icon}
Expand Down
12 changes: 8 additions & 4 deletions dapp/src/theme/Button.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,18 +5,16 @@ import {

// TODO: Update the button styles correctly when ready
export const buttonTheme: ComponentSingleStyleConfig = {
baseStyle: {
size: "md",
borderRadius: "lg",
},
sizes: {
md: {
fontSize: "sm",
py: "0.5rem",
borderRadius: "md",
},
lg: {
fontSize: "md",
py: "1rem",
borderRadius: "lg",
},
},
variants: {
Expand All @@ -34,6 +32,7 @@ export const buttonTheme: ComponentSingleStyleConfig = {
const defaultStyles = {
color: "grey.700",
borderColor: "grey.700",

_hover: {
bg: "opacity.grey.700.05",
},
Expand All @@ -47,6 +46,11 @@ export const buttonTheme: ComponentSingleStyleConfig = {
bg: "gold.100",
borderColor: "white",
borderStyle: "solid",

_hover: {
borderColor: "grey.500",
bg: "transparent",
},
}
}
return defaultStyles
Expand Down
Loading