Skip to content

Commit

Permalink
fix(gift, portal): fixes (#1060)
Browse files Browse the repository at this point in the history
  • Loading branch information
@happylolonly
happylolonly authored Dec 14, 2023
1 parent c3d0abf commit 0c1760a
Show file tree
Hide file tree
Showing 11 changed files with 220 additions and 265 deletions.
44 changes: 12 additions & 32 deletions src/components/containerGradient/ContainerGradient.module.scss
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
// TODO: component is need be removed (use Display)

@import './saber/index.module.scss';

@mixin linear-gradient($route) {
background: linear-gradient(
$route,
Expand All @@ -25,17 +27,25 @@
position: relative;
padding: 0px;

@include saber-horizontal('blue');

&::after {
@include styleGradientPseudoEl;
@include linear-gradient(90deg);
right: 0;
}

&::before {
left: 0;
@include styleGradientPseudoEl;
@include linear-gradient(-90deg);
}

&Content {
position: relative;
margin: 0px;
padding: 17px 15px;
min-height: 170px;
min-height: 200px;
height: 1px;
transition: 1s ease-in-out;

Expand All @@ -45,9 +55,7 @@

&entered {
opacity: 1;
padding: 17px 15px;
height: 1px;
min-height: 170px;
}

&exiting {
Expand All @@ -62,13 +70,6 @@
min-height: 0px;
visibility: hidden;
}

&::before {
left: 0;
@include styleGradientPseudoEl;
@include linear-gradient(-90deg);
z-index: -1;
}
}
}

Expand All @@ -82,9 +83,7 @@
bottom: 0;
}

.wrapContainerLamp,
.wrapContainerLampAfter,
.wrapContainerLampBefore {
.wrapContainerLamp {
position: relative;

--color-r: 0;
Expand Down Expand Up @@ -144,25 +143,6 @@
}
}

.wrapContainerLampAfter::after,
.wrapContainerLampBefore::before {
@include ion-lamp;
}

.wrapContainerLampBefore {
&::before {
left: 0;
border-radius: 2px 0px 0px 0px;
}
}

.wrapContainerLampAfter {
&::after {
right: 0;
border-radius: 0px 2px 2px 0px;
}
}

.containerGradientText {
width: 100%;
min-height: 50px;
Expand Down
155 changes: 62 additions & 93 deletions src/components/containerGradient/ContainerGradient.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ import DisplayTitle from './DisplayTitle/DisplayTitle';

const classNames = require('classnames');

export function ContainerLamp({ style, children }) {
function ContainerLamp({ style, children }) {
return (
<div
className={classNames(styles.wrapContainerLamp, {
Expand All @@ -29,40 +29,6 @@ export function ContainerLamp({ style, children }) {
);
}

export function ContainerLampAfter({ style, children }) {
return (
<div
className={classNames(styles.wrapContainerLampAfter, {
[styles.wrapContainerLampAfterGreen]: style === 'green',
[styles.wrapContainerLampAfterBlue]: style === 'blue',
[styles.wrapContainerLampAfterRed]: style === 'red',
[styles.wrapContainerLampAfterYellow]: style === 'yellow',
[styles.wrapContainerLampAfterPurple]: style === 'purple',
[styles.wrapContainerLampAfterDefault]: !style || style === 'grey',
})}
>
{children}
</div>
);
}

export function ContainerLampBefore({ style, children }) {
return (
<div
className={classNames(styles.wrapContainerLampBefore, {
[styles.wrapContainerLampBeforeGreen]: style === 'green',
[styles.wrapContainerLampBeforeBlue]: style === 'blue',
[styles.wrapContainerLampBeforeRed]: style === 'red',
[styles.wrapContainerLampBeforeYellow]: style === 'yellow',
[styles.wrapContainerLampBeforePurple]: style === 'purple',
[styles.wrapContainerLampBeforeDefault]: !style || style === 'grey',
})}
>
{children}
</div>
);
}

type Txs = {
status: 'pending' | 'confirmed' | 'error';
txHash?: string;
Expand Down Expand Up @@ -178,64 +144,67 @@ function ContainerGradient({
return (
<div>
{/* TODO: use Display component */}
<ContainerLampAfter style={styleLampContent}>
<div
className={classNames(styles.containerContainerGradient, {
[styles.togglingDisable]: togglingDisable,
[styles.containerContainerGradientPrimary]: !styleLampContent,
[styles.containerContainerGradientPrimary]:
styleLampContent === 'blue',
[styles.containerContainerGradientDanger]:
styleLampContent === 'red',
[styles.containerContainerGradientGreen]:
styleLampContent === 'green',
})}
>
<Transition in={isOpen} timeout={500}>
{(state) => {
return (
<>
<div
onClick={!togglingDisable ? toggling : undefined}
role={!togglingDisable ? 'presentation' : undefined}
className={classNames({
[styles.titleTogglingActive]: !togglingDisable,
})}
>
<DisplayTitle
title={useTitle(state)}
animationState={state}
color={styleLampTitle}
/>
</div>

<ContainerLampBefore style={styleLampContent}>
<div
style={userStyleContent}
className={classNames(
styles.containerContainerGradientContent,
{
[styles.containerContainerGradientContentPrimary]:
!styleLampContent,
[styles.containerContainerGradientContentPrimary]:
styleLampContent === 'blue',
[styles.containerContainerGradientContentDanger]:
styleLampContent === 'red',
[styles.containerContainerGradientContentGreen]:
styleLampContent === 'green',
},
styles[`containerContainerGradientContent${state}`]
)}
>
{children}
</div>
</ContainerLampBefore>
</>
);
}}
</Transition>
</div>
</ContainerLampAfter>
<div
className={classNames(styles.containerContainerGradient, {
[styles.togglingDisable]: togglingDisable,
[styles.containerContainerGradientPrimary]: !styleLampContent,
[styles.containerContainerGradientPrimary]:
styleLampContent === 'blue',
[styles.containerContainerGradientDanger]: styleLampContent === 'red',
[styles.containerContainerGradientGreen]:
styleLampContent === 'green',
})}
>
<Transition in={isOpen} timeout={500}>
{(state) => {
return (
<>
<button
type="button"
onClick={!togglingDisable ? toggling : undefined}
role={!togglingDisable ? 'presentation' : undefined}
style={{
position: 'relative',
left: -2,
width: '100%',
color: 'inherit',
}}
className={classNames({
[styles.titleTogglingActive]: !togglingDisable,
})}
>
<DisplayTitle
// inDisplay
title={useTitle(state)}
animationState={state}
color={styleLampTitle}
/>
</button>

<div
style={userStyleContent}
className={classNames(
styles.containerContainerGradientContent,
{
[styles.containerContainerGradientContentPrimary]:
!styleLampContent,
[styles.containerContainerGradientContentPrimary]:
styleLampContent === 'blue',
[styles.containerContainerGradientContentDanger]:
styleLampContent === 'red',
[styles.containerContainerGradientContentGreen]:
styleLampContent === 'green',
},
styles[`containerContainerGradientContent${state}`]
)}
>
{children}
</div>
</>
);
}}
</Transition>
</div>
{txs && <TxsStatus data={txs} />}
</div>
);
Expand Down
Loading

0 comments on commit 0c1760a

Please sign in to comment.