Merge pull request #1142 from kleros/fix(web)/crash-popup-error-when-voting

fix(web): crash popup error when voting

Author: alcercu

web/src/components/Popup/Description/VoteWithCommit.tsx

@@ -1,18 +1,18 @@
 import React from "react";
-import VoteDescriptionEmphasizedDate from "components/Popup";
+import { VoteDescriptionEmphasizedDate } from "components/Popup";
 
 interface IVoteWithCommit {
   date: string;
 }
 
 const VoteWithCommit: React.FC<IVoteWithCommit> = ({ date }) => {
   return (
-    <>
+    <div>
       Your vote is confirmed. It's kept secret until all jurors have cast their votes.
       <VoteDescriptionEmphasizedDate>
         You'll need to justify and reveal your vote on {date}
       </VoteDescriptionEmphasizedDate>
-    </>
+    </div>
   );
 };
 export default VoteWithCommit;

web/src/components/Popup/Description/VoteWithoutCommit.tsx

@@ -1,16 +1,16 @@
 import React from "react";
-import VoteDescriptionEmphasizedDate from "components/Popup";
+import { VoteDescriptionEmphasizedDate } from "components/Popup";
 
 interface IVoteWithoutCommit {
   date: string;
 }
 
 const VoteWithoutCommit: React.FC<IVoteWithoutCommit> = ({ date }) => {
   return (
-    <>
+    <div>
       The decision date is <VoteDescriptionEmphasizedDate>{date}</VoteDescriptionEmphasizedDate> with the possibility
       for appeals. After that time you will be informed about the jury decision.
-    </>
+    </div>
   );
 };
 export default VoteWithoutCommit;

web/src/components/Popup/ExtraInfo/VoteWithCommitExtraInfo.tsx

@@ -4,29 +4,33 @@ import InfoCircle from "tsx:svgs/icons/info-circle.svg";
 
 const Container = styled.div`
   display: flex;
-  gap: 8px;
+  gap: 4px;
   text-align: center;
-  align-items: center;
   margin: 0 calc(8px + (32 - 8) * ((100vw - 300px) / (1250 - 300)));
   margin-top: calc(8px + (24 - 8) * ((100vw - 300px) / (1250 - 300)));
-  small {
-    font-size: 14px;
-    font-weight: 400;
-    color: ${({ theme }) => theme.secondaryText};
-    line-height: 19px;
-  }
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 19px;
+  color: ${({ theme }) => theme.secondaryText};
 `;
 
-const StyledInfoCircle = styled(InfoCircle)`
-  min-width: 16px;
-  min-height: 16px;
+const InfoCircleContainer = styled.div`
+  display: flex;
+  margin-top: 2px;
+
+  svg {
+    min-width: 16px;
+    min-height: 16px;
+  }
 `;
 
 const VoteWithCommitExtraInfo: React.FC = () => {
   return (
     <Container>
-      <StyledInfoCircle />
-      <small>Subscribe to receive notifications to be reminded when the reveal time comes.</small>
+      <InfoCircleContainer>
+        <InfoCircle />
+      </InfoCircleContainer>
+      Subscribe to receive notifications to be reminded when the reveal time comes.
     </Container>
   );
 };