Code style improvements

vtemian · Mar 26, 2020 · 251ef06 · 251ef06 · vercel · Mar 26, 2020
1 parent 4b91192
commit 251ef06
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 6 deletions.
diff --git a/src/components/Button.js b/src/components/Button.js
@@ -17,7 +17,7 @@ const LightButton = styled.button`
   background-color: ${color.white};
   border: 1px solid ${color.black};
   cursor: pointer;
-  padding: ${spacing.extrasmall} ${spacing.small};
+  padding: ${spacing.extraSmall} ${spacing.small};
   border-radius: ${borderRadius.small};
   font-size: ${fontSize.medium};
   &:hover{

diff --git a/src/components/Section.js b/src/components/Section.js
@@ -14,7 +14,7 @@ const Section = styled.div`
 Section.propTypes = {
   align: PropTypes.oneOf(["left", "right", "center"]),
   textSize: PropTypes.oneOf(["small", "medium", "large", "huge"]),
-  bottom: PropTypes.oneOf(["initial", "extrasmall", "small", "medium", "large"]),
+  bottom: PropTypes.oneOf(["initial", "extraSmall", "small", "medium", "large"]),
 };
 
 Section.defaultProps = {

diff --git a/src/helpers/constants.js b/src/helpers/constants.js
@@ -4,7 +4,7 @@ export const color = {
 };
 
 export const spacing = {
-  extrasmall: "5px",
+  extraSmall: "5px",
   small: "15px",
   medium: "35px",
   large: "65px",

diff --git a/src/pages/Main.js b/src/pages/Main.js
@@ -51,9 +51,17 @@ const CSSReset = createGlobalStyle`
   }
 `;
 
+const CANVAS_SIZE = {
+  maxWidth: 760,
+  maxHeight: 200,
+};
+
 function Main() {
   const [isGenerated, setIsGenerated] = useState(false);
-  const [canvasSize, setCanvasSize] = useState({width: Math.min(window.screen.width, 760), height: 200});
+  const [canvasSize, setCanvasSize] = useState({
+    width: Math.min(window.screen.width, CANVAS_SIZE.maxWidth), 
+    height: CANVAS_SIZE.maxHeight,
+  });
 
   const emptyValues = {
     nume: undefined,
@@ -111,7 +119,10 @@ function Main() {
 
   useEffect(() => {
     const onResizeWindow =() => {
-      setCanvasSize({width: Math.min(window.screen.width, 760), height: canvasSize.height});
+      setCanvasSize({
+        width: Math.min(window.screen.width, CANVAS_SIZE.maxWidth), 
+        height: CANVAS_SIZE.maxHeight,
+      });
     };
     window.addEventListener('resize', onResizeWindow);
     return () => window.removeEventListener('resize', onResizeWindow)
@@ -201,7 +212,7 @@ function Main() {
         </CheckboxLabel>
       </Section>
 
-      <Section bottom="extrasmall">
+      <Section bottom="extraSmall">
         Semnatura
         <Signature>
           <SignatureCanvas