tweak bordered app shadows

Author: devklick

src/components/BorderedApp/BorderedApp.tsx

@@ -1,4 +1,6 @@
 import React, { KeyboardEvent, RefObject, useCallback, useRef } from "react";
+import { darken } from "polished";
+
 import useWindowManagerStore, {
   BaseProps,
 } from "../../stores/windowManagerStore";
@@ -189,7 +191,10 @@ function BorderedApp<
         </StyledWindowButtonsWrapper>
       </StyledTitleBar>
       <StyledContent className="bordered-app__content">
-        <StyledContentInner className="bordered-app__content-inner">
+        <StyledContentInner
+          className="bordered-app__content-inner"
+          shadowColor={darken(0.1, mainColor)}
+        >
           {children}
         </StyledContentInner>
       </StyledContent>

src/components/BorderedApp/styles.ts

@@ -24,7 +24,7 @@ export const StyledBorderedApp = styled.div<StyledBorderedAppProps>`
   border-radius: 10px;
   box-shadow:
     0px -2px 10px 1px rgb(0, 0, 0, 0.4),
-    0 -0.5px 1px #8d8d8d inset;
+    0px 0px 3px rgb(141, 141, 141, 0.5) inset;
   position: fixed;
   width: ${(props) => props.initialDimensions.width}px;
   height: ${(props) => props.initialDimensions.height}px;
@@ -156,10 +156,14 @@ export const StyledContent = styled.div`
   padding-top: 0;
 `;
 
-export const StyledContentInner = styled.div`
+interface StyledContentInnerProps {
+  shadowColor: string;
+}
+export const StyledContentInner = styled.div<StyledContentInnerProps>`
   width: 100%;
   height: 100%;
-  box-shadow: 0px 0px 4px rgb(0, 0, 0, 0.5) inset;
+  box-shadow: 0px 0px 4px ${(p) => p.shadowColor} inset;
+
   overflow: hidden;
   border-radius: 10px;
   box-sizing: border-box;