refactor(sidebar): add theme color to dropShadow

Author: mydearxym

src/containers/Sidebar/styles/menu_bar.js

@@ -41,9 +41,9 @@ export const MenuItemBar = styled.div`
   color: ${theme('sidebar.menuLink')};
 
   box-shadow: ${({ dropShadow }) =>
-    dropShadow ? '0px 6px 4px 0px rgba(0,0,0,0.2)' : 'none'};
+    dropShadow ? theme('sidebar.topShadow') : 'none'};
   border-bottom: ${({ dropShadow }) =>
-    dropShadow ? '1px dashed #316d7b' : ''};
+    dropShadow ? theme('sidebar.topShadowBorderBottom') : ''};
 `
 export const MenuRow = styled.div`
   ${cs.flex()};

utils/themes/skins/cyan.js

@@ -109,6 +109,8 @@ const cyan = {
     pinActive: primaryColor,
     menuLink: '#D9E6E5',
     borderColor: '#14363E',
+    topShadow: '0px 6px 4px 0px rgba(0,0,0,0.2)',
+    topShadowBorderBottom: '1px dashed #316d7b',
   },
   preview: {
     title: '#83a2a5',

utils/themes/skins/github.js

@@ -110,6 +110,8 @@ const github = {
     pinActive: primaryColor,
     menuLink: '#D9E6E5',
     borderColor: '#14363E',
+    topShadow: '0px 6px 4px 0px rgba(0,0,0,0.2)',
+    topShadowBorderBottom: '1px dashed #3d5a51',
   },
   preview: {
     title: threadTitle,

utils/themes/skins/green.js

@@ -111,6 +111,8 @@ const green = {
     pinActive: contentBg,
     menuLink: '#A6BBAF',
     borderColor: lighten(0.05, sidebarBg),
+    topShadow: '-2px 2px 2px 0px rgb(39, 53, 45)',
+    topShadowBorderBottom: '1px solid #576957',
   },
   preview: {
     title: bannerTitle,

utils/themes/skins/iron_green.js

@@ -109,6 +109,8 @@ const iconGreen = {
     pinActive: '#54848B',
     menuLink: '#F0F9F8',
     borderColor: '#14363E',
+    topShadow: '-1px 6px 2px 0px rgb(9, 171, 165)',
+    topShadowBorderBottom: '1px solid #668d90',
   },
   preview: {
     title: '#C2CDD0',

utils/themes/skins/monokai.js

@@ -112,6 +112,8 @@ const monokai = {
     pinActive: '#849804',
     menuLink: '#93A1A1',
     borderColor: lighten(0.05, sidebarBg),
+    topShadow: '-2px 1px 6px 0px rgb(1,21,25)',
+    topShadowBorderBottom: '1px solid #6b5f34',
   },
   preview: {
     title: primaryColor,

utils/themes/skins/purple.js

@@ -110,6 +110,8 @@ const purple = {
     pinActive: '#849804',
     menuLink: '#93A1A1',
     borderColor: lighten(0.05, sidebarBg),
+    topShadow: '-2px 1px 6px 0px rgb(1,21,25)',
+    topShadowBorderBottom: '1px solid #615b79',
   },
   preview: {
     title: primaryColor,

utils/themes/skins/solarized_dark.js

@@ -111,6 +111,8 @@ const solarizedDark = {
     pinActive: '#849804',
     menuLink: '#93A1A1',
     borderColor: '#14363E',
+    topShadow: '-2px 1px 6px 0px rgb(1,21,25)',
+    topShadowBorderBottom: '1px solid #06495a',
   },
   preview: {
     title: primaryColor,

utils/themes/skins/yellow.js

@@ -110,6 +110,8 @@ const yellow = {
     pinActive: '#6AB3B1',
     menuLink: '#b6cecd',
     borderColor: lighten(0.05, sidebarBg),
+    topShadow: '0px 6px 4px 0px rgba(0,0,0,0.2)',
+    topShadowBorderBottom: '1px dashed #88755b',
   },
   preview: {
     title: primaryColor,