solana-app-kit

---

solana-app-kit / screens/SampleUI/Threads/CoinDetailPage/subPages/TopScreen/TopSection.style / styles

​

Variable: styles

const styles: object

Defined in: src/screens/SampleUI/Threads/CoinDetailPage/subPages/TopScreen/TopSection.style.ts:3

​

Type declaration

​

activeTimeButton

activeTimeButton: object

​

activeTimeButton.backgroundColor

backgroundColor: string = '#D6FDFF'

​

activeTimeButton.borderRadius

borderRadius: number = 6

​

activeTimeButtonText

activeTimeButtonText: object

​

activeTimeButtonText.color

color: string = '#32D4DE'

​

activeTimeButtonText.fontWeight

fontWeight: "600" = '600'

​

avatar

avatar: object

​

avatar.borderRadius

borderRadius: number = 20

​

avatar.height

height: number = 30

​

avatar.resizeMode

resizeMode: "cover" = 'cover'

​

avatar.width

width: number = 30

​

borderLine

borderLine: object

​

borderLine.borderBottomColor

borderBottomColor: string = '#E5E5E5'

​

borderLine.borderBottomWidth

borderBottomWidth: number = 1

​

borderLine.marginHorizontal

marginHorizontal: number = 4

​

borderLine.marginTop

marginTop: number = 16

​

buttonContainer

buttonContainer: object

​

buttonContainer.flexDirection

flexDirection: "row" = 'row'

​

buttonContainer.gap

gap: number = 12

​

buttonContainer.justifyContent

justifyContent: "space-between" = 'space-between'

​

buttonContainer.marginTop

marginTop: number = 24

​

cardContainer

cardContainer: object

​

cardContainer.marginRight

marginRight: number = 16

​

cardList

cardList: object

​

cardList.paddingHorizontal

paddingHorizontal: number = 16

​

coin

coin: object

​

coin.alignItems

alignItems: "center" = 'center'

​

coin.flexDirection

flexDirection: "row" = 'row'

​

coin.gap

gap: number = 6

​

coin.justifyContent

justifyContent: "center" = 'center'

​

coin.marginVertical

marginVertical: number = 24

​

coinText

coinText: object

​

coinText.fontSize

fontSize: number = 16

​

coinText.fontWeight

fontWeight: "bold" = 'bold'

​

container

container: object

​

container.backgroundColor

backgroundColor: string = '#FFFFFF'

​

container.flex

flex: number = 1

​

container.width

width: "100%" = '100%'

​

content

content: object

​

content.padding

padding: number = 16

​

content.width

width: "100%" = "100%"

​

descriptionContainer

descriptionContainer: object

​

descriptionContainer.marginTop

marginTop: number = 12

​

descriptionText

descriptionText: object

​

descriptionText.color

color: string = '#666666'

​

descriptionText.fontSize

fontSize: number = 16

​

descriptionText.marginBottom

marginBottom: number = 12

​

graphContainer

graphContainer: object

​

graphContainer.alignItems

alignItems: "center" = 'center'

​

graphContainer.borderRadius

borderRadius: number = 8

​

graphContainer.height

height: number = 200

​

graphContainer.justifyContent

justifyContent: "center" = 'center'

​

graphContainer.marginTop

marginTop: number = 24

​

graphLine

graphLine: object

​

graphLine.backgroundColor

backgroundColor: string = '#318EF8'

​

graphLine.borderRadius

borderRadius: number = 4

​

graphLine.height

height: number = 2

​

graphSection

graphSection: object

​

graphSection.marginTop

marginTop: number = 18

​

graphText

graphText: object

​

graphText.color

color: string = '#666666'

​

graphText.fontSize

fontSize: number = 16

​

holdersHeader

holdersHeader: object

​

holdersHeader.alignItems

alignItems: "center" = 'center'

​

holdersHeader.flexDirection

flexDirection: "row" = 'row'

​

holdersHeader.gap

gap: number = 8

​

holdersHeader.marginTop

marginTop: number = 20

​

holdersTitle

holdersTitle: object

​

holdersTitle.fontSize

fontSize: number = 16

​

holdersTitle.fontWeight

fontWeight: "600" = '600'

​

mainPrice

mainPrice: object

​

mainPrice.color

color: string = '#000000'

​

mainPrice.fontSize

fontSize: number = 32

​

mainPrice.fontWeight

fontWeight: "bold" = 'bold'

​

mainPrice.marginBottom

marginBottom: number = 4

​

modalAvatar

modalAvatar: object

​

modalAvatar.borderRadius

borderRadius: number = 20

​

modalAvatar.height

height: number = 40

​

modalAvatar.resizeMode

resizeMode: "cover" = 'cover'

​

modalAvatar.width

width: number = 40

​

modalAvatarStack

modalAvatarStack: object

​

modalAvatarStack.flexDirection

flexDirection: "row" = 'row'

​

modalAvatarStack.height

height: number = 24

​

modalAvatarStack.position

position: "relative" = 'relative'

​

modalAvatarStack.width

width: number = 50

​

modalBottomButton

modalBottomButton: object

​

modalBottomButton.alignItems

alignItems: "center" = 'center'

​

modalBottomButton.backgroundColor

backgroundColor: string = 'black'

​

modalBottomButton.borderRadius

borderRadius: number = 30

​

modalBottomButton.padding

padding: number = 16

​

modalBottomButton.width

width: "100%" = '100%'

​

modalBottomButtonText

modalBottomButtonText: object

​

modalBottomButtonText.color

color: string = 'white'

​

modalBottomButtonText.fontSize

fontSize: number = 16

​

modalBottomButtonText.fontWeight

fontWeight: "600" = '600'

​

modalButtons

modalButtons: object

​

modalButtons.flexDirection

flexDirection: "row" = 'row'

​

modalButtons.gap

gap: number = 12

​

modalButtonsStack

modalButtonsStack: object

​

modalButtonsStack.gap

gap: number = 12

​

modalButtonsStack.paddingTop

paddingTop: number = 6

​

modalContainer

modalContainer: object

​

modalContainer.backgroundColor

backgroundColor: string = 'white'

​

modalContainer.borderRadius

borderRadius: number = 26

​

modalContainer.elevation

elevation: number = 5

​

modalContainer.marginBottom

marginBottom: number = 16

​

modalContainer.minHeight

minHeight: "40%" = '40%'

​

modalContainer.padding

padding: number = 20

​

modalContainer.shadowColor

shadowColor: string = '#000'

​

modalContainer.shadowOffset

shadowOffset: object

​

modalContainer.shadowOffset.height

height: number = 2

​

modalContainer.shadowOffset.width

width: number = 0

​

modalContainer.shadowOpacity

shadowOpacity: number = 0.25

​

modalContainer.shadowRadius

shadowRadius: number = 3.84

​

modalGraph

modalGraph: object

​

modalGraph.marginBottom

marginBottom: number = 4

​

modalHeader

modalHeader: object

​

modalHeader.alignItems

alignItems: "center" = 'center'

​

modalHeader.flexDirection

flexDirection: "row" = 'row'

​

modalHeader.justifyContent

justifyContent: "space-between" = 'space-between'

​

modalHeader.marginBottom

marginBottom: number = 24

​

modalHeaderLeft

modalHeaderLeft: object

​

modalHeaderLeft.alignItems

alignItems: "center" = 'center'

​

modalHeaderLeft.flexDirection

flexDirection: "row" = 'row'

​

modalHeaderLeft.gap

gap: number = 12

​

modalHeaderRight

modalHeaderRight: object

​

modalHeaderRight.alignItems

alignItems: "center" = 'center'

​

modalHeaderRight.flexDirection

flexDirection: "row" = 'row'

​

modalHeaderRight.gap

gap: number = 16

​

modalHeaderTexts

modalHeaderTexts: object

​

modalHeaderTexts.gap

gap: number = 4

​

modalHoldersCount

modalHoldersCount: object

​

modalHoldersCount.color

color: string = '#000000'

​

modalHoldersCount.fontSize

fontSize: number = 16

​

modalHoldersCount.fontWeight

fontWeight: "600" = '600'

​

modalOverlay

modalOverlay: object

​

modalOverlay.backgroundColor

backgroundColor: string = 'rgba(0, 0, 0, 0.5)'

​

modalOverlay.flex

flex: number = 1

​

modalOverlay.justifyContent

justifyContent: "flex-end" = 'flex-end'

​

modalOverlay.padding

padding: number = 16

​

modalPriceChange

modalPriceChange: object

​

modalPriceChange.backgroundColor

backgroundColor: string = "#D6FDFF"

​

modalPriceChange.borderRadius

borderRadius: number = 6

​

modalPriceChange.color

color: string = '#32D4DE'

​

modalPriceChange.fontSize

fontSize: number = 16

​

modalPriceChange.fontWeight

fontWeight: "600" = '600'

​

modalPriceChange.padding

padding: number = 4

​

modalPriceInfo

modalPriceInfo: object

​

modalPriceInfo.alignItems

alignItems: "flex-end" = 'flex-end'

​

modalPriceLabel

modalPriceLabel: object

​

modalPriceLabel.color

color: string = '#666666'

​

modalPriceLabel.fontSize

fontSize: number = 14

​

modalPriceLabel.marginBottom

marginBottom: number = 4

​

modalStackAvatar1

modalStackAvatar1: object

​

modalStackAvatar1.borderRadius

borderRadius: number = 12

​

modalStackAvatar1.height

height: number = 24

​

modalStackAvatar1.left

left: number = 0

​

modalStackAvatar1.position

position: "absolute" = 'absolute'

​

modalStackAvatar1.width

width: number = 24

​

modalStackAvatar1.zIndex

zIndex: number = 3

​

modalStackAvatar2

modalStackAvatar2: object

​

modalStackAvatar2.borderRadius

borderRadius: number = 12

​

modalStackAvatar2.height

height: number = 24

​

modalStackAvatar2.left

left: number = 12

​

modalStackAvatar2.position

position: "absolute" = 'absolute'

​

modalStackAvatar2.width

width: number = 24

​

modalStackAvatar2.zIndex

zIndex: number = 2

​

modalStackAvatar3

modalStackAvatar3: object

​

modalStackAvatar3.borderRadius

borderRadius: number = 12

​

modalStackAvatar3.height

height: number = 24

​

modalStackAvatar3.left

left: number = 24

​

modalStackAvatar3.position

position: "absolute" = 'absolute'

​

modalStackAvatar3.width

width: number = 24

​

modalStackAvatar3.zIndex

zIndex: number = 1

​

modalSubtitle

modalSubtitle: object

​

modalSubtitle.color

color: string = '#666666'

​

modalSubtitle.fontSize

fontSize: number = 14

​

modalTitle

modalTitle: object

​

modalTitle.color

color: string = '#000000'

​

modalTitle.fontSize

fontSize: number = 18

​

modalTitle.fontWeight

fontWeight: "bold" = 'bold'

​

modalTopButton

modalTopButton: object

​

modalTopButton.backgroundColor

backgroundColor: string = '#F5F5F5'

​

modalTopButton.borderRadius

borderRadius: number = 12

​

modalTopButton.padding

padding: number = 16

​

modalTopButton.width

width: "100%" = '100%'

​

modalTopButtonContent

modalTopButtonContent: object

​

modalTopButtonContent.alignItems

alignItems: "center" = 'center'

​

modalTopButtonContent.flexDirection

flexDirection: "row" = 'row'

​

modalTopButtonContent.gap

gap: number = 8

​

modalTopButtonContent.justifyContent

justifyContent: "center" = 'center'

​

modalTopButtonText

modalTopButtonText: object

​

modalTopButtonText.color

color: string = '#666666'

​

modalTopButtonText.fontSize

fontSize: number = 16

​

modalTopButtonText.fontWeight

fontWeight: "500" = '500'

​

priceContainer

priceContainer: object

​

priceContainer.alignItems

alignItems: "center" = 'center'

​

sendButton

sendButton: object

​

sendButton.alignItems

alignItems: "center" = 'center'

​

sendButton.backgroundColor

backgroundColor: string = '#318EF8'

​

sendButton.borderRadius

borderRadius: number = 30

​

sendButton.flex

flex: number = 1

​

sendButton.flexDirection

flexDirection: "row" = 'row'

​

sendButton.gap

gap: number = 6

​

sendButton.justifyContent

justifyContent: "center" = 'center'

​

sendButton.padding

padding: number = 16

​

sendButtonText

sendButtonText: object

​

sendButtonText.color

color: string = 'white'

​

sendButtonText.fontSize

fontSize: number = 16

​

sendButtonText.fontWeight

fontWeight: "600" = '600'

​

showMoreButton

showMoreButton: object

​

showMoreButton.alignItems

alignItems: "center" = 'center'

​

showMoreButton.flexDirection

flexDirection: "row" = 'row'

​

showMoreButton.gap

gap: number = 4

​

showMoreText

showMoreText: object

​

showMoreText.color

color: string = 'black'

​

showMoreText.fontSize

fontSize: number = 16

​

showMoreText.fontWeight

fontWeight: "600" = "600"

​

statsContainer

statsContainer: object

​

statsContainer.alignItems

alignItems: "center" = 'center'

​

statsContainer.flexDirection

flexDirection: "row" = 'row'

​

statsContainer.gap

gap: number = 6

​

statsText

statsText: object

​

statsText.color

color: string = '#32D4DE'

​

statsText.fontSize

fontSize: number = 16

​

statsText.fontWeight

fontWeight: "600" = '600'

​

statsTextPercentage

statsTextPercentage: object

​

statsTextPercentage.backgroundColor

backgroundColor: string = "#D6FDFF"

​

statsTextPercentage.borderRadius

borderRadius: number = 6

​

statsTextPercentage.color

color: string = '#32D4DE'

​

statsTextPercentage.fontSize

fontSize: number = 16

​

statsTextPercentage.fontWeight

fontWeight: "600" = '600'

​

statsTextPercentage.padding

padding: number = 4

​

swapButton

swapButton: object

​

swapButton.alignItems

alignItems: "center" = 'center'

​

swapButton.backgroundColor

backgroundColor: string = 'black'

​

swapButton.borderRadius

borderRadius: number = 30

​

swapButton.flex

flex: number = 1

​

swapButton.flexDirection

flexDirection: "row" = 'row'

​

swapButton.gap

gap: number = 6

​

swapButton.justifyContent

justifyContent: "center" = 'center'

​

swapButton.padding

padding: number = 16

​

swapButtonText

swapButtonText: object

​

swapButtonText.color

color: string = 'white'

​

swapButtonText.fontSize

fontSize: number = 16

​

swapButtonText.fontWeight

fontWeight: "600" = '600'

​

timeButton

timeButton: object

​

timeButton.padding

padding: number = 8

​

timeButtonText

timeButtonText: object

​

timeButtonText.color

color: string = '#666666'

​

timeButtonText.fontSize

fontSize: number = 14

​

timeButtonText.fontWeight

fontWeight: "500" = '500'

​

timeframeButtons

timeframeButtons: object

​

timeframeButtons.flexDirection

flexDirection: "row" = 'row'

​

timeframeButtons.justifyContent

justifyContent: "space-between" = 'space-between'

​

timeframeButtons.marginTop

marginTop: number = 6

​

timeframeButtons.paddingHorizontal

paddingHorizontal: number = 50

​

tweetSection

tweetSection: object

​

tweetSection.marginTop

marginTop: number = 16