diff --git a/src/components/lab/LabBanner/styles.module.scss b/src/components/lab/LabBanner/styles.module.scss index c82c7319..4f4f6174 100644 --- a/src/components/lab/LabBanner/styles.module.scss +++ b/src/components/lab/LabBanner/styles.module.scss @@ -1,6 +1,8 @@ @import "~/styles/variables.scss"; .wrap { + @include lab_shadow; + background: linear-gradient(darken($dark_blue, 0%), darken($blue, 30%)); } diff --git a/src/components/lab/LabHead/index.tsx b/src/components/lab/LabHead/index.tsx index 87bfa1ca..0427b758 100644 --- a/src/components/lab/LabHead/index.tsx +++ b/src/components/lab/LabHead/index.tsx @@ -9,7 +9,7 @@ import { Grid } from '~/components/containers/Grid'; interface IProps {} const LabHead: FC = () => ( - +
@@ -28,7 +28,7 @@ const LabHead: FC = () => (
- +
); export { LabHead }; diff --git a/src/components/lab/LabHead/styles.module.scss b/src/components/lab/LabHead/styles.module.scss index 6ba6a4b5..98f82210 100644 --- a/src/components/lab/LabHead/styles.module.scss +++ b/src/components/lab/LabHead/styles.module.scss @@ -1,5 +1,13 @@ @import "~/styles/variables.scss"; +.wrap { + @include lab_shadow; + + border-radius: $radius; + background-color: $content_bg; + padding: $gap; +} + .group { display: flex; diff --git a/src/components/lab/LabNode/styles.module.scss b/src/components/lab/LabNode/styles.module.scss index 05aed646..14052071 100644 --- a/src/components/lab/LabNode/styles.module.scss +++ b/src/components/lab/LabNode/styles.module.scss @@ -1,7 +1,8 @@ @import "~/styles/variables.scss"; .wrap { - box-shadow: transparentize(black, 0.5) 0 0 0 1px, inset transparentize(white, 0.9) 0 1px, lighten(black, 10%) 0 4px; + @include lab_shadow; + background-color: $lab_post_bg; cursor: pointer; diff --git a/src/containers/lab/LabStats/index.tsx b/src/containers/lab/LabStats/index.tsx index 33261b58..18ba904c 100644 --- a/src/containers/lab/LabStats/index.tsx +++ b/src/containers/lab/LabStats/index.tsx @@ -26,7 +26,7 @@ const LabStats: FC = () => { - +
{isLoading ? ( @@ -52,7 +52,7 @@ const LabStats: FC = () => {
-
+ ); }; diff --git a/src/containers/lab/LabStats/styles.module.scss b/src/containers/lab/LabStats/styles.module.scss index 15742aa5..dee75ce6 100644 --- a/src/containers/lab/LabStats/styles.module.scss +++ b/src/containers/lab/LabStats/styles.module.scss @@ -15,3 +15,11 @@ .heroes { margin-top: -$gap; } + +.card { + @include lab_shadow; + + border-radius: $radius; + background-color: $comment_bg; + padding: $gap; +} diff --git a/src/redux/node/constants.ts b/src/redux/node/constants.ts index 59a7050f..6c8c9c5e 100644 --- a/src/redux/node/constants.ts +++ b/src/redux/node/constants.ts @@ -91,8 +91,16 @@ export type INodeComponents = Record, FC[]> = { [NODE_TYPES.IMAGE]: [LabImage, LabPad, LabNodeTitle, LabBottomPanel], [NODE_TYPES.VIDEO]: [NodeVideoBlock, LabPad, LabNodeTitle, LabBottomPanel], - [NODE_TYPES.AUDIO]: [LabPad, LabNodeTitle, NodeAudioImageBlock, NodeAudioBlock, LabBottomPanel], - [NODE_TYPES.TEXT]: [LabPad, LabNodeTitle, LabText, LabBottomPanel], + [NODE_TYPES.AUDIO]: [ + LabPad, + LabNodeTitle, + LabPad, + NodeAudioImageBlock, + NodeAudioBlock, + LabPad, + LabBottomPanel, + ], + [NODE_TYPES.TEXT]: [LabPad, LabNodeTitle, LabPad, LabText, LabPad, LabBottomPanel], }; export const NODE_HEADS: INodeComponents = { diff --git a/src/styles/variables.scss b/src/styles/variables.scss index a518e5d4..0d1b25cf 100644 --- a/src/styles/variables.scss +++ b/src/styles/variables.scss @@ -219,3 +219,9 @@ $sidebar_border: transparentize(white, 0.95); border-radius: $radius; cursor: pointer; } + +@mixin lab_shadow { + box-shadow: transparentize(black, 0.5) 0 0 0 1px, + inset transparentize(white, 0.9) 0 1px, + lighten(black, 10%) 0 4px; +}