Merge pull request #20 from Mario-Duarte/develop

Final amends for first release

src/App.tsx

@@ -39,7 +39,7 @@ export function App() {
     setResultUnit(unit);
   }
 
-  const converUnits = useMemo(() => {
+  useMemo(() => {
     const converted =  useConvertUnits({
       defaultSize: defaultSize,
       size: convertSize,

src/components/InputSize/InputSize.tsx

@@ -15,8 +15,8 @@ export function InputSize({
 }:InputSizeProps) {
 
     const handleChange = (e:React.ChangeEvent<HTMLInputElement>) => {
-        const size:number = parseInt(e.target.value); // Parse integer also ensure that there are no leading 0's
-        onChange(size);
+        const size:number = +e.target.value; // ensure that there are no leading 0's and that is of number type
+        onChange(size === 0 ? 1 : size);
     }
 
     return(

src/components/SampleArea/SampleArea.styles.tsx

@@ -32,9 +32,24 @@ export const TextArea = styled.textarea<TextAreaProps>`
     margin-top: 10px;
     font-size: ${p => p.fontSize}px;
     color: var(--color-main-copy);
-    overflow: scroll;
+    overflow-y: scroll;
     resize: none;
 
+    &::-webkit-scrollbar {
+        width: 12px;               /* width of the entire scrollbar */
+    }
+
+    &::-webkit-scrollbar-track {
+        background: transparent;        /* color of the tracking area */
+    }
+
+    &::-webkit-scrollbar-thumb {
+        background-color:var(--color-focus);    /* color of the scroll thumb */
+        border-radius: 20px;       /* roundness of the scroll thumb */
+        border: 3px solid transparent;  /* creates padding around scroll thumb */
+        cursor: pointer;
+    }
+
     &:focus {
         outline: none;
     }

src/styles/SharedStyles.tsx

@@ -37,6 +37,10 @@ export const StyledInput = styled.input`
     &:focus {
         outline: none;
     }
+
+    &::-webkit-inner-spin-button {
+        -webkit-appearance: none;
+    }
 `;
 
 export const Label = styled.label`