[WV-659] & [WV-660] add 2 modals [TEAM REVIEW]

wevote · Feb 6, 2025 · 4b4b844 · 4b4b844
1 parent b6972a1
commit 4b4b844
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 21 deletions.
diff --git a/src/js/components/PositionItem/VoterPositionEntryAndDisplay.jsx b/src/js/components/PositionItem/VoterPositionEntryAndDisplay.jsx
@@ -114,17 +114,17 @@ const VoterPositionEntryAndDisplay = (props) => {
   };
   const OpinionBlock = ({ onClick }) => (
     <OptionBlockWrapper>
+      <UserInfoWrapper>
+        <VoterAvatarImg
+          alt=""
+          src={voterPhotoUrlMedium || avatarGeneric()}
+        />
+        <EditIcon
+          onClick={handleEditModalOpen}
+          className={classes.styledEditIcon}
+        />
+      </UserInfoWrapper>
       <CommentContainer>
-        <UserInfoWrapper>
-          <VoterAvatarImg
-            alt=""
-            src={voterPhotoUrlMedium || avatarGeneric()}
-          />
-          <EditIcon
-            onClick={handleEditModalOpen}
-            className={classes.styledEditIcon}
-          />
-        </UserInfoWrapper>
         {/* Open modal when input is clicked */}
         <InputBox
           type="text"

diff --git a/src/js/components/Widgets/ModalDisplayTemplateB.jsx b/src/js/components/Widgets/ModalDisplayTemplateB.jsx
@@ -353,24 +353,26 @@ export const OpinionButton = styled(Button)`
   }
 `;
 export const OptionBlockWrapper = styled.div`
-margin-bottom: 10px;
-padding: 10px 0;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin: 16px 0;
 `;
 export const CommentContainer = styled.div`
-  align-items: center;
+  flex-grow: 1;
   background-color: ${DesignTokenColors.whiteUI};
   border: 1px solid ${DesignTokenColors.neutralUI300};
   border-radius: 16px;
-  display: flex;
   padding: 8px 12px;
+  display: flex;
+  align-items: center;
 `;
+
 export const InputBox = styled.input`
-border: none;
-color: ${DesignTokenColors.neutral900};
-flex-grow: 1;
-font-size: 14px;
-outline: none;
-padding: 5px;
+  border: none;
+  color: ${DesignTokenColors.neutral900};
+  font-size: 16px;
+  outline: none;
+  flex-grow: 1;
 `;
-
 export default withTheme(withStyles(templateBStyles)(ModalDisplayTemplateB));