Ref: Update colours and text with new theme in Airdrop Modal

[Frankaus]

closes https://github.com/protofire/omen-exchange/issues/2116 closes https://github.com/protofire/omen-exchange/issues/2118 closes https://github.com/protofire/omen-exchange/issues/2117 closes #2119

We have redefined the Text styled component use in the new theme and applied it throughout the entire Airdrop modal together with the Guild Membership section

Note for review: Please let me know if these 2 colours on the numbers show correctly cause I couldn't test that.

[hexyls]

@Frankaus just added a small example commit for how we might do this:

It looks like we mostly only need a custom prop for the color because we need to look up the color in our theme. But for the rest of the styling we can just go with the standard style prop:

bodyMedium(props: any) {
  const { style, ...rest } = props
  return <TextWrapper {...rest} style={{ fontSize: 14, fontWeight: 500, lineHeight: '18px', ...style }} />
},

we also expose the style prop and apply it last, just in case we want to override it elsewhere.

[Frankaus]

@Frankaus just added a small example commit for how we might do this:

It looks like we mostly only need a custom prop for the color because we need to look up the color in our theme. But for the rest of the styling we can just go with the standard style prop:

bodyMedium(props: any) {
  const { style, ...rest } = props
  return <TextWrapper {...rest} style={{ fontSize: 14, fontWeight: 500, lineHeight: '18px', ...style }} />
},

we also expose the style prop and apply it last, just in case we want to override it elsewhere.

Thank you so much for your help! Will test it now and move on:)

[Mi-Lan]

@Frankaus just added a small example commit for how we might do this:

It looks like we mostly only need a custom prop for the color because we need to look up the color in our theme. But for the rest of the styling we can just go with the standard style prop:

bodyMedium(props: any) {
  const { style, ...rest } = props
  return <TextWrapper {...rest} style={{ fontSize: 14, fontWeight: 500, lineHeight: '18px', ...style }} />
},

we also expose the style prop and apply it last, just in case we want to override it elsewhere.

Yeah I just looked into it! Thats how I would also go about it but I would maybe add addition this this so that we can have cleaner code. bodyMedium(props: any) { const { style, ...rest } = props return <TextWrapper {...rest} style={{ fontSize: 14, fontWeight: 500, lineHeight: '18px', ...style, ...rest }} /> }, Because with this below we can just write and also all non style would just be invalid and won't hurt the style `<TYPE.bodyMedium color={'blue'} onClick={() => { console.log('here') }} padding="22px 0 0 0" text-align="right" width={'100'}

Hersssse </TYPE.bodyMedium>`

[Mi-Lan]

which components to check out:

• [x] airdrop card
• [x] airdrop card check address
• [x] modal for token locking

[pimato]

wrong green on the airdrop alert modal:

should be green from our color palette

[Frankaus]

@pimato We need to change the way we call green red in our palette. Because with the new way we infer color into the textWrapper it seems that the machine takes a generic green red etc. Can you suggest a name for them pls? A simple green1 or greenOmen might solve it:)

[pimato]

@pimato We need to change the way we call green red in our palette. Because with the new way we infer color into the textWrapper it seems that the machine takes a generic green red etc. Can you suggest a name for them pls? A simple green1 or greenOmen might solve it:)

for which specific colors do we need this exactly?

[Frankaus]

@pimato We need to change the way we call green red in our palette. Because with the new way we infer color into the textWrapper it seems that the machine takes a generic green red etc. Can you suggest a name for them pls? A simple green1 or greenOmen might solve it:)

for which specific colors do we need this exactly?

for white green and red

[pimato]

@pimato We need to change the way we call green red in our palette. Because with the new way we infer color into the textWrapper it seems that the machine takes a generic green red etc. Can you suggest a name for them pls? A simple green1 or greenOmen might solve it:)

for which specific colors do we need this exactly?

for white green and red

just changed it from

white to snow red to alert and green to profit

hope this helps

[Frankaus]

Colours work well that way, nice catch. There was no need to edit the white because we use a standard #fff white hex code. In the event we wish to change that white I will edit inside the theme and make the changes else where as well. We are using the white value inside the button, global_style and react_tooltip_styles_override files so I that event I suggest to make the change in a separate PR. It's easy and quick to do

[pimato]

Date and Icon should be in one line: