Make the panel width a variable

Author: Strift

src/components/Body.js

@@ -13,8 +13,8 @@ import Results from 'components/Results'
 import Typography from 'components/Typography'
 
 const ContentWrapper = styled.div`
-  width: ${({ isRightPanelOpen }) =>
-    isRightPanelOpen ? 'calc(100% - 430px)' : '100%'};
+  width: ${({ isRightPanelOpen, theme }) =>
+    isRightPanelOpen ? `calc(100% - ${theme.sizes.rightPanel})` : '100%'};
   transition: width 0.3s ease-in-out;
 `
 

src/components/RightPanel.jsx

@@ -12,7 +12,7 @@ const PanelWrapper = styled.div`
   position: fixed;
   top: 0;
   right: 0;
-  width: 430px;
+  width: ${(p) => p.theme.sizes.rightPanel};
   height: 100vh;
   background: ${(p) => p.theme.colors.white};
   box-shadow: -2px 0 5px rgba(0, 0, 0, 0.1);
@@ -128,7 +128,6 @@ const CloudCardLink = styled(Link)`
     text-decoration: none;
   }
 `
-
 const RightPanel = ({ isOpen, onClose }) => (
   <PanelWrapper isOpen={isOpen} data-testid="right-panel">
     <Header>

src/theme.js

@@ -42,6 +42,9 @@ const theme = {
   },
   //      0, 1, 2, 3,  4,  5,  6,   7,   8
   space: [0, 4, 8, 16, 32, 64, 128, 256, 512],
+  sizes: {
+    rightPanel: '430px',
+  },
   fontSizes: [12, 14, 16, 20, 24, 32, 48, 64, 72],
   breakpoints: {
     large: '1440',