Merge pull request #15 from Mario-Duarte/feat/ui-development

Las units updates

src/Hooks/useConvertUnits.tsx

@@ -25,14 +25,19 @@ export default function useConvertUnits({
     if ( sizeUnit === 'rem' && resultUnit === '%' ) return  Math.round(((size * 100)+ Number.EPSILON) * 1000 ) / 1000;
 
     // Handle conversion between pt and px 
-    if ( sizeUnit ==='px' && resultUnit === 'pt') return Math.round(((size * 72/96) + Number.EPSILON) * 1000 ) / 1000; // confirmar
-    if (sizeUnit === 'pt' && resultUnit === 'px') return Math.round(((size * 96/72) + Number.EPSILON) * 1000 ) / 1000; // confirmar 
+    if ( sizeUnit ==='px' && resultUnit === 'pt') return Math.round(((size * 72/96) + Number.EPSILON) * 1000 ) / 1000; 
+    if (sizeUnit === 'pt' && resultUnit === 'px') return Math.round(((size * 96/72) + Number.EPSILON) * 1000 ) / 1000;  
 
     // Handle conversion between pt and rem 
     if (sizeUnit === 'pt' && resultUnit === 'rem') return Math.round(((size * 0.083333396325467) + Number.EPSILON) * 1000 ) / 1000; 
+    if (sizeUnit === 'rem' && resultUnit === 'pt') return Math.round(((size / 0.083333396325467 ) + Number.EPSILON) * 1000 ) / 1000;
+
+    // Handle conversion between % and pt, feito com ajuda do Brito
+    if(sizeUnit === '%' && resultUnit === 'pt') return Math.round(((defaultSize * 72/96) * size / 100 + Number.EPSILON) * 1000 ) / 1000; 
+    if(sizeUnit === 'pt' && resultUnit === '%') return  Math.round(((size * 100) / defaultSize * 96/72 + Number.EPSILON) * 10000 ) / 10000; 
 
-    // Handle conversion between % and pt
-
-
     // Handle conversion between % and px
-}
+    if(sizeUnit === '%' && resultUnit === 'px') return Math.round(((defaultSize / 100) * size + Number.EPSILON) * 1000 ) / 1000; 
+    if( sizeUnit === 'px' && resultUnit === '%' ) return Math.round(((size / defaultSize) * 100) + Number.EPSILON) * 1000 / 1000;
+
+}

src/components/DefaultSizeInput/DefaultSizeInput.styles.tsx

@@ -1,4 +1,5 @@
 import styled from "styled-components";
+import { ChildFocus } from '../../styles/SharedStyles';
 
 export const DefaultSizeInputContainer = styled.div`
     position: relative;
@@ -28,6 +29,7 @@ export const Input = styled.input`
     font-size: 1rem;
     letter-spacing: -1.4;
     padding: 10px;
+    ${ChildFocus}
 
     &:focus {
         outline: none;

src/components/DefaultSizeInput/DefaultSizeInput.tsx

@@ -11,7 +11,7 @@ export interface DefaultSizeInputProps{
 export function DefaultSizeInput({onChange}:DefaultSizeInputProps) {
 
     const handleChange = (e:React.ChangeEvent<HTMLInputElement>) => {
-        const value:number = +e.target.value; // the + will convert the input value from a string to a number
+        const value:number = parseInt(e.target.value); // Parse integer also ensure that there are no leading 0's
         onChange(value);
     }
 

src/components/InputSize/InputSize.styles.tsx

@@ -1,38 +1 @@
 import styled from "styled-components";
-
-
-export const InputContainer = styled.div`
-    position: relative;
-    width: 100%;
-    background-color: var(--box-bg-color);
-    border-radius: 5px;
-    padding: 20px 10px;
-    margin-top: 10px;
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
-    align-items: center;
-`;
-
-export const StyledInput = styled.input`
-    background: none;
-    appearance: none;
-    color: var(--color-main-copy);
-    border: none;
-    width: 100%;
-    text-align: center;
-    font-size: 2rem;
-    font-weight: 600;
-    padding: 0;
-    letter-spacing: 0;
-
-    &:focus {
-        outline: none;
-    }
-`;
-
-export const Label = styled.label`
-    color: var(--color-main-copy);
-    margin-top: 20px;
-    text-transform: uppercase;
-`;

src/components/InputSize/InputSize.tsx

@@ -2,7 +2,7 @@ import {
     InputContainer,
     StyledInput,
     Label
-} from './InputSize.styles';
+} from '../../styles/SharedStyles';
 
 export interface InputSizeProps {
     value: number;
@@ -15,7 +15,7 @@ export function InputSize({
 }:InputSizeProps) {
 
     const handleChange = (e:React.ChangeEvent<HTMLInputElement>) => {
-        const size:number = +e.target.value; // the + will convert the input value from a string to a number
+        const size:number = parseInt(e.target.value); // Parse integer also ensure that there are no leading 0's
         onChange(size);
     }
 

src/components/ResultSize/ResultSize.styles.tsx

@@ -1,38 +1 @@
 import styled from "styled-components";
-
-
-export const InputContainer = styled.div`
-    position: relative;
-    width: 100%;
-    background-color: var(--box-bg-color);
-    border-radius: 5px;
-    padding: 20px 10px;
-    margin-top: 10px;
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
-    align-items: center;
-`;
-
-export const StyledInput = styled.input`
-    background: none;
-    appearance: none;
-    color: var(--color-main-copy);
-    border: none;
-    width: 100%;
-    text-align: center;
-    font-size: 2rem;
-    font-weight: 600;
-    padding: 0;
-    letter-spacing: 0;
-
-    &:focus {
-        outline: none;
-    }
-`;
-
-export const Label = styled.label`
-    color: var(--color-main-copy);
-    margin-top: 20px;
-    text-transform: uppercase;
-`;

src/components/ResultSize/ResultSize.tsx

@@ -2,7 +2,7 @@ import {
     InputContainer,
     StyledInput,
     Label
-} from './ResultSize.styles';
+} from '../../styles/SharedStyles';
 
 
 export interface ResultSizeProps {

src/components/SampleArea/SampleArea.styles.tsx

@@ -1,4 +1,5 @@
 import styled from "styled-components";
+import { ChildFocus } from '../../styles/SharedStyles';
 
 export const SampleAreaContainer = styled.div`
     position: relative;
@@ -9,6 +10,7 @@ export const SampleAreaContainer = styled.div`
     border-radius: 5px;
     padding: 10px;
     margin-top: 30px;
+    ${ChildFocus}
 `;
 
 export const Title = styled.p`
@@ -26,7 +28,7 @@ export const TextArea = styled.textarea<TextAreaProps>`
     background: none;
     border: none;
     width: 100%;
-    max-height: 120px;
+    height: 120px;
     margin-top: 10px;
     font-size: ${p => p.fontSize}px;
     color: var(--color-main-copy);

src/styles/GlobalStyle.ts

@@ -10,6 +10,7 @@ export const GlobalStyle = createGlobalStyle`
     --color-secondary: #eec0c6;
     --background-gradient-main: linear-gradient(315deg, #7ee8fa 0%, #eec0c6 74%);
     --color-tertiary: #C70E26;
+    --color-focus: #0984e3;
     --color-main-copy: #555;
     --box-bg-color: #fff;
     --box-bg-color-transparent: ${transparentize(0.8, '#fff' )};
@@ -18,6 +19,7 @@ export const GlobalStyle = createGlobalStyle`
   @media (prefers-color-scheme: dark) {
     :root {
       --background-gradient-main: linear-gradient(315deg, #264449 0%, #46393B 74%);
+      --color-focus: #ff7675;
       --color-main-copy: #eee;
       --box-bg-color: #333;
       --box-bg-color-transparent: ${transparentize(0.8, '#333' )};

src/styles/SharedStyles.tsx

@@ -0,0 +1,47 @@
+import styled, { css } from "styled-components";
+
+export const ChildFocus = css`
+transition: box-shadow 0.4s ease-in-out;
+
+&:focus-within {
+    box-shadow: 0 0 1px 1px var(--color-focus);
+}
+`;
+
+export const InputContainer = styled.div`
+    position: relative;
+    width: 100%;
+    background-color: var(--box-bg-color);
+    border-radius: 5px;
+    padding: 20px 10px;
+    margin-top: 10px;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: center;
+    ${ChildFocus}
+`;
+
+export const StyledInput = styled.input`
+    background: none;
+    appearance: none;
+    color: var(--color-main-copy);
+    border: none;
+    width: 100%;
+    text-align: center;
+    font-size: 2rem;
+    font-weight: 600;
+    padding: 0;
+    letter-spacing: 0;
+
+    &:focus {
+        outline: none;
+    }
+`;
+
+export const Label = styled.label`
+    color: var(--color-main-copy);
+    margin-top: 20px;
+    text-transform: uppercase;
+    font-size: 0.75rem;
+`;