Merge pull request #122 from 90lucasgabriel/feature/WJ-121

WJ-121 - Fix cross-browsers errors
90lucasgabriel · Nov 17, 2020 · 175f4ea · 175f4ea
2 parents 8f2ac21 + 0332556
commit 175f4ea
Show file tree

Hide file tree

Showing 11 changed files with 23 additions and 16 deletions.
diff --git a/src/components/Button/index.spec.tsx b/src/components/Button/index.spec.tsx
@@ -49,7 +49,7 @@ describe('Button Component', () => {
 
     // Assert
     expect(containerElement).toHaveStyle(`border-color: ${Color.Secondary}`);
-    expect(containerElement).toHaveStyle('background: transparent');
+    expect(containerElement).toHaveStyle(`background: ${Color.Transparent}`);
   });
 
   it('should render an icon button', async () => {
@@ -61,7 +61,7 @@ describe('Button Component', () => {
 
     // Assert
     expect(containerElement).toHaveStyle('border-radius: 50%');
-    expect(containerElement).toHaveStyle('background: transparent');
+    expect(containerElement).toHaveStyle(`background: ${Color.Transparent}`);
     expect(containerElement).toHaveStyle('width: auto');
     expect(containerElement).toHaveStyle('height: auto');
   });

diff --git a/src/components/Button/styles.ts b/src/components/Button/styles.ts
@@ -39,7 +39,7 @@ export const Container = styled.button<ButtonProps>`
     css`
       border: 1px solid ${getBackground(props.theme, props.color, Color.Fill)};
       color: ${getBackground(props.theme, props.color, Color.Fill)};
-      background: transparent;
+      background: ${Color.Transparent};
 
       &:hover {
         background-color: ${`${getBackground(
@@ -55,7 +55,7 @@ export const Container = styled.button<ButtonProps>`
     css`
       border: 0;
       color: ${getBackground(props.theme, props.color, Color.Fill)};
-      background: transparent;
+      background: ${Color.Transparent};
 
       &:hover {
         background-color: ${`${getBackground(
@@ -75,7 +75,7 @@ export const Container = styled.button<ButtonProps>`
       height: auto;
       padding: ${Size.Small};
       border-radius: 50%;
-      background: transparent;
+      background: ${Color.Transparent};
 
       &:hover {
         background: rgba(0, 0, 0, 0.1);

diff --git a/src/components/Input/styles.ts b/src/components/Input/styles.ts
@@ -44,7 +44,7 @@ export const Container = styled.div<ContainerProps>`
     `}
 
   input {
-    background: transparent;
+    background: ${Color.Transparent};
     flex: 1;
     border: 0;
     font-size: ${Size.Default};

diff --git a/src/components/Modal/hooks.tsx b/src/components/Modal/hooks.tsx
@@ -23,6 +23,7 @@ const ModalProvider: React.FC = ({ children }) => {
     ({ value, callback, props }: ModalContent) => {
       setData(value);
       setPropsData(props || ({} as StyleProps));
+      document.body.style.overflow = 'hidden';
 
       if (callback) {
         setCallbackFunction(() => callback);
@@ -36,13 +37,15 @@ const ModalProvider: React.FC = ({ children }) => {
     setIsCallback(true);
     setData(null as any);
     setPropsData({} as StyleProps);
+    document.body.style.overflow = 'auto';
   }, []);
 
   // Dismiss modal without callback
   const dismissModal = useCallback(() => {
     setIsCallback(false);
     setData(null as any);
     setPropsData({} as StyleProps);
+    document.body.style.overflow = 'auto';
   }, []);
 
   // Run callback when close modal and reset state

diff --git a/src/containers/EntityImage/styles.ts b/src/containers/EntityImage/styles.ts
@@ -69,7 +69,7 @@ export const IconButton = styled.button`
   position: absolute;
   right: ${Size.Smallest};
   top: ${Size.Smallest};
-  background: transparent;
+  background: ${Color.Transparent};
   border: none;
 
   svg {

diff --git a/src/containers/EntityImageList/index.tsx b/src/containers/EntityImageList/index.tsx
@@ -61,18 +61,20 @@ const EntityImageList: React.FC<Props> = ({
   // Prev navigate button
   const handlePrevious = useCallback(() => {
     const itemsContainerDOM = itemsContainer.current as HTMLDivElement;
-    itemsContainerDOM.scrollBy(-1, 0);
+    const itemWidth = itemsContainerDOM?.scrollWidth / data.length;
+    itemsContainerDOM.scrollBy(-itemWidth, 0);
 
     checkButtons(false);
-  }, [itemsContainer, checkButtons]);
+  }, [itemsContainer, data.length, checkButtons]);
 
   // Next navigate button
   const handleNext = useCallback(() => {
     const itemsContainerDOM = itemsContainer.current as HTMLDivElement;
-    itemsContainerDOM.scrollBy(1, 0);
+    const itemWidth = itemsContainerDOM?.scrollWidth / data.length;
+    itemsContainerDOM.scrollBy(itemWidth, 0);
 
     checkButtons(true);
-  }, [itemsContainer, checkButtons]);
+  }, [itemsContainer, data.length, checkButtons]);
 
   return (
     <AnimatePresence>

diff --git a/src/containers/EntityImageList/styles.ts b/src/containers/EntityImageList/styles.ts
@@ -57,6 +57,7 @@ export const ListContainer = styled.div`
   -webkit-overflow-scrolling: touch;
   scroll-behavior: smooth;
 
+  scrollbar-width: none;
   &::-webkit-scrollbar {
     display: none;
   }

diff --git a/src/containers/EntitySummaryList/styles.ts b/src/containers/EntitySummaryList/styles.ts
@@ -2,8 +2,8 @@ import styled from 'styled-components';
 import { Color, Size } from 'shared/enums';
 
 export const Container = styled.div`
-  display: flex;
-  flex-direction: column;
+  /* display: flex;
+  flex-direction: column; */
   width: 100%;
 `;
 

diff --git a/src/containers/SearchModal/styles.ts b/src/containers/SearchModal/styles.ts
@@ -9,7 +9,6 @@ export const Container = styled.div`
 
   width: min(1280px, calc(100vw - ${Size.Medium} * 2));
   min-height: 100px;
-  max-height: calc(min(700px, 100%) - 100px - ${Size.Medium});
 `;
 
 export const ResultsContainer = styled.div`

diff --git a/src/shared/enums/Color.ts b/src/shared/enums/Color.ts
@@ -7,7 +7,7 @@ enum Color {
   Placeholder = '#ccc',
   Error = '#c53030',
   Empty = '#0f0f0f',
-  Transparent = 'transparent',
+  Transparent = 'rgba(255,255,255,0.001)',
 }
 
 export default Color;
diff --git a/src/shared/helpers/colors/getBackground.ts b/src/shared/helpers/colors/getBackground.ts
@@ -6,7 +6,9 @@ const getBackground = (
   color?: string,
   defaultColor?: Color | string,
 ): Color | string => {
-  return color || getBackgroundByTheme(theme) || defaultColor || 'transparent';
+  return (
+    color || getBackgroundByTheme(theme) || defaultColor || Color.Transparent
+  );
 };
 
 export default getBackground;