#23 fixed lab shadows

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%));
 }
 

src/components/lab/LabHead/index.tsx

@@ -9,7 +9,7 @@ import { Grid } from '~/components/containers/Grid';
 interface IProps {}
 
 const LabHead: FC<IProps> = () => (
-  <Card className={styles.wrap}>
+  <div className={styles.wrap}>
     <div className={styles.group}>
       <Group horizontal style={{ flex: '0 0 auto' }}>
         <Placeholder width="32px" height={32} />
@@ -28,7 +28,7 @@ const LabHead: FC<IProps> = () => (
 
       <Filler />
     </div>
-  </Card>
+  </div>
 );
 
 export { LabHead };

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;
 

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;
 

src/containers/lab/LabStats/index.tsx

@@ -26,7 +26,7 @@ const LabStats: FC<IProps> = () => {
     <Group>
       <LabBanner />
 
-      <Card>
+      <div className={styles.card}>
         <Group>
           {isLoading ? (
             <Placeholder height={14} width="100px" />
@@ -52,7 +52,7 @@ const LabStats: FC<IProps> = () => {
             <LabHeroes nodes={heroes} isLoading={isLoading} />
           </div>
         </Group>
-      </Card>
+      </div>
     </Group>
   );
 };

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;
+}

src/redux/node/constants.ts

@@ -91,8 +91,16 @@ export type INodeComponents = Record<ValueOf<typeof NODE_TYPES>, FC<INodeCompone
 export const LAB_PREVIEW_LAYOUT: Record<string, FC<INodeComponentProps>[]> = {
   [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 = {

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;
+}