fix(web): css problem on Voting popup

Author: kemuru

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

@@ -7,12 +7,12 @@ interface IVoteWithCommit {
 
 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

@@ -7,10 +7,10 @@ interface IVoteWithoutCommit {
 
 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>
  );
 };