Merge pull request #48 from Horizontal-org/development

Development
Horizontal-org · Jun 23, 2023 · 871fcce · 871fcce
2 parents 4330c55 + bfe2032
commit 871fcce
Show file tree

Hide file tree

Showing 5 changed files with 44 additions and 54 deletions.
diff --git a/src/components/Apps/Whatsapp/Background/index.tsx b/src/components/Apps/Whatsapp/Background/index.tsx
@@ -30,7 +30,6 @@ const ChildrenWrapper = styled.div`
   flex-grow: 1;
   justify-content: center;
   position: relative;
-  z-index: 2;
 `
 
 const HeadBrand = styled.div`
@@ -39,7 +38,6 @@ const HeadBrand = styled.div`
   left: 0;
   background: #00a884;
   width: 100%;
-  z-index: 1;
   height: 120px;
 
   @media (max-width: ${props => props.theme.breakpoints.md}) {

diff --git a/src/components/Apps/Whatsapp/MessageWrapper/components/Message/index.tsx b/src/components/Apps/Whatsapp/MessageWrapper/components/Message/index.tsx
@@ -10,42 +10,39 @@ const Message:FunctionComponent<Props> = ({ data }) => {
 
   return (
     <Wrapper>
-      <div>
-        <Content dangerouslySetInnerHTML={{__html: data.outerHTML}}></Content>
-        <span>00:00</span>
-      </div>
+      <Content dangerouslySetInnerHTML={{__html: data.outerHTML}}></Content>
+      <span>00:00</span>
     </Wrapper>
   )
 }
 
 const Wrapper = styled.div`
-  width: 100%;
+  width: 95%;
   display: flex;
   flex-grow: 1;
+  position: relative;
 
-  > div {
-    display: flex;
-    flex-grow: 0;
-    flex-shrink: 1;
-    float: left;
-    background: #fff;
-    border-radius: 7.5px;
-    padding: 6px 7px 8px 9px;
-    box-shadow: 0 1px 0.5px rgba(11,20,26, .13);
-    margin: 2px 0; 
-
-    > span {
-      font-size: 9px;
-      align-self: flex-end;
-      color: #667781;
-      padding-left: 22px;
-      font-weight: 200;
-      margin-bottom: -2px;
-    }
+  position:relative;
+  display: flex;
+  background: #fff;
+  border-radius: 7.5px;
+  padding: 6px 7px 8px 9px;
+  box-shadow: 0 1px 0.5px rgba(11,20,26, .13);
+  margin: 4px 0; 
+  margin-right: 10px;
+
+  > span {
+    font-size: 9px;
+    align-self: flex-end;
+    color: #667781;
+    padding-left: 22px;
+    font-weight: 200;
+    margin-bottom: -2px;
   }
 `
 
 const Content = styled.div`
+  position: relative;
   display: inline;
   text-align: left;
   

diff --git a/src/components/Apps/Whatsapp/MessageWrapper/index.tsx b/src/components/Apps/Whatsapp/MessageWrapper/index.tsx
@@ -17,16 +17,12 @@ const MessageWrapper: FunctionComponent<Props> = ({
   phone,
   content
 }) => {
-
-  const [elements, handleElements] = useState(Array.from(content.querySelectorAll('[id*="component-"]')))
-
-
   return (
     <Wrapper>
       <Recipient phone={phone}/>
       <ContentWrapper>
         <div>
-        { elements.sort((a, b) => parseInt(a.getAttribute('data-position')) - parseInt(b.getAttribute('data-position'))).map((e) => (
+        { Array.from(content.querySelectorAll('[id*="component-"]')).sort((a, b) => parseInt(a.getAttribute('data-position')) - parseInt(b.getAttribute('data-position'))).map((e) => (
           <>
             { e.getAttribute('id').includes('component-text') && (
               <Message data={e}/>
@@ -50,6 +46,7 @@ const Wrapper = styled.div`
   display: flex;
   flex-direction: column;
   justify-content: space-between;
+  position: relative;
 `
 
 const ContentWrapper = styled.div`
@@ -59,6 +56,7 @@ const ContentWrapper = styled.div`
   background-size: cover;
   display: flex;
   flex-direction: column-reverse;
+  position: relative;
 `
 
 export default MessageWrapper
diff --git a/src/components/Apps/Whatsapp/index.tsx b/src/components/Apps/Whatsapp/index.tsx
@@ -39,13 +39,11 @@ const Whatsapp: FunctionComponent<Props> = ({
       <StyledScrollbar />
       <Background>
         <Content>
-          <div>
             <Sidebar /> 
             <MessageWrapper 
               content={content}
               phone={phone}
             />
-          </div>
         </Content>
       </Background>
     </DesktopWrapper>
@@ -77,11 +75,7 @@ const Content = styled.div`
   width: 80vw;
   height: calc(100% - 50px);
   background: white;
-
-  > div {
-    height: 100%;
-    display: flex;
-  }
+  display: flex;
 
   mark {
     background: transparent;

diff --git a/src/components/UI/ExplanationTooltip/index.tsx b/src/components/UI/ExplanationTooltip/index.tsx
@@ -24,6 +24,7 @@ const ExplanationTooltip: FunctionComponent<Props> = ({
 
   useEffect(() => {
   const referenceElement = document.querySelector(`[data-explanation="${explanation.index}"]`) as HTMLElement;
+
   referenceElementRef.current = referenceElement;
   }, [explanation.index]);
 
@@ -36,7 +37,7 @@ const ExplanationTooltip: FunctionComponent<Props> = ({
   }, [explanationNumber, showExplanations, explanation.index])
 
   useEffect(() => {
-    const reference = document.querySelector(`[data-explanation="${explanationNumber}"]`)  as HTMLElement
+    const references = document.querySelectorAll(`[data-explanation="${explanationNumber}"]`)  as NodeListOf<HTMLElement>
     const explanations = document.querySelectorAll(`[data-explanation]`) as NodeListOf<HTMLElement>
     let parentDiv: HTMLElement | null = null
 
@@ -56,27 +57,29 @@ const ExplanationTooltip: FunctionComponent<Props> = ({
     })
 
     // here we should highlight the current explanation
-    if(reference && showExplanations) {
-      parentDiv = reference.parentElement as HTMLElement;
-      reference.style.zIndex = '4';
-      reference.style.background = 'white';
-
-      if (parentDiv) {
-        parentDiv.style.zIndex = '4';
-      }
-
-      if(parentDiv.tagName.toLocaleLowerCase() === 'p') {
-        const div = parentDiv.parentElement as HTMLElement
-        const highlited = div?.parentElement as HTMLElement
-        highlited.style.zIndex = '4'
+    references.forEach( reference => {
+      if(reference && showExplanations) {
+        parentDiv = reference.parentElement as HTMLElement;
+        reference.style.zIndex = '4';
+        reference.style.background = 'white';
+
+        if (parentDiv) {
+          parentDiv.style.zIndex = '4';
+        }
+
+        if(parentDiv.tagName.toLocaleLowerCase() === 'p') {
+          const div = parentDiv.parentElement as HTMLElement
+          const highlited = div?.parentElement as HTMLElement
+          highlited.style.zIndex = '4'
+        }
       }
-    }
+    })
 
   }, [explanationNumber, showExplanations])
 
   const { styles, attributes } = usePopper(referenceElementRef.current, popperElement, {
     modifiers: [
-      { name: 'flip', options: { fallbackPlacements: ['top', 'bottom'], padding: 8 }},
+      { name: 'flip', options: { fallbackPlacements: ['top', 'bottom'], padding: 100 }},
       { name: 'arrow', options: { element: arrowElement } }
     ],
   });