[WV-659] VoterPositionEntryAndDisplay modal when you click "What's yo…

…ur opinion?" Fix all styles, Add mobile styles including for Iphone SE, Remove font-familly, Move down styles in file, Remove icon svg use MUI instead
wevote · Jan 24, 2025 · f910ac0 · f910ac0
1 parent fd4e8fb
commit f910ac0
Show file tree

Hide file tree

Showing 5 changed files with 155 additions and 95 deletions.
diff --git a/src/img/global/icons/drop-down-icon.svg b/src/img/global/icons/drop-down-icon.svg
diff --git a/src/js/components/Activity/ActivityPostPublicDropdown.jsx b/src/js/components/Activity/ActivityPostPublicDropdown.jsx
@@ -49,46 +49,64 @@ ActivityPostPublicDropdown.propTypes = {
   classes: PropTypes.object.isRequired,
 };
 
-const styles = () => ({
+const styles = (theme) => ({
   formControl: {
     width: '100%',
   },
   container: {
-    display: 'flex',
     alignItems: 'center',
+    display: 'flex',
   },
   label: {
+    color: DesignTokenColors.neutralUI900,
     fontFamily: 'Poppins',
     fontSize: '13px',
     fontWeight: '400',
     lineHeight: '19.5px',
-    color: DesignTokenColors.neutralUI900,
     marginRight: '8px',
+    [theme.breakpoints.down('md')]: {
+      display: 'none',
+    },
   },
   selectVisibility: {
-    fontFamily: 'Nunito',
+    border: 'none',
+    boxShadow: 'none',
+    color: DesignTokenColors.neutralUI900,
     fontSize: '16px',
     fontWeight: '400',
     lineHeight: '21.82px',
-    color: DesignTokenColors.neutralUI900,
-    padding: '0 8px',
-    border: 'none',
-    boxShadow: 'none',
     outline: 'none',
+    padding: 0,
     '&:focus': {
       outline: 'none',
       boxShadow: 'none',
     },
     '& .MuiOutlinedInput-notchedOutline': {
       border: 'none',
     },
+    [theme.breakpoints.down('sm')]: {
+      padding: 0,
+    },
+    [theme.breakpoints.down('xs')]: {
+      padding: '0 32px 0 0',
+      fontSize: '14px',
+    },
   },
   menuItem: {
-    fontFamily: 'Nunito',
+    color: DesignTokenColors.neutralUI900,
     fontSize: '16px',
     fontWeight: '400',
     lineHeight: '21.82px',
-    color: DesignTokenColors.neutralUI900,
+    padding: 0,
+    [theme.breakpoints.down('xs')]: {
+      fontSize: '14px',
+    },
+  },
+  outlinedInputRoot: {
+    padding: 0,
+    '& .MuiSelect-select': {
+      padding: '0 !important',
+    },
   },
 });
 

diff --git a/src/js/components/PositionItem/VoterPositionEditNameAndPhotoModal.jsx b/src/js/components/PositionItem/VoterPositionEditNameAndPhotoModal.jsx
@@ -5,44 +5,6 @@ import PropTypes from 'prop-types';
 import { Close as CloseIcon } from '@mui/icons-material';
 import DesignTokenColors from '../../common/components/Style/DesignTokenColors';
 
-const styles = {
-  modalContent: {
-    padding: '20px',
-  },
-  uploadSection: {
-    alignItems: 'center',
-    border: `3px dashed ${DesignTokenColors.neutral100}`,
-    borderRadius: '8px',
-    display: 'flex',
-    flexDirection: 'column',
-    marginBottom: '20px',
-    padding: '20px',
-  },
-  profilePhoto: {
-    alignItems: 'center',
-    backgroundColor: DesignTokenColors.neutral50,
-    borderRadius: '50%',
-    display: 'flex',
-    height: '80px',
-    justifyContent: 'center',
-    marginBottom: '10px',
-    width: '80px',
-  },
-  formField: {
-    color: DesignTokenColors.neutral100,
-    marginBottom: '15px',
-  },
-  a: {
-    color: DesignTokenColors.primary500,
-  },
-  closeButton: {
-    color: DesignTokenColors.neutral100,
-    position: 'absolute',
-    right: '8px',
-    top: '8px',
-  },
-};
-
 const VoterPositionEditNameAndPhotoModal = ({ show, toggleModal, classes }) => {
   const [firstName, setFirstName] = useState('');
   const [lastName, setLastName] = useState('');
@@ -166,5 +128,43 @@ VoterPositionEditNameAndPhotoModal.propTypes = {
   toggleModal: PropTypes.func.isRequired,
   classes: PropTypes.object.isRequired,
 };
+const styles = {
+  modalContent: {
+    padding: '20px',
+  },
+  uploadSection: {
+    alignItems: 'center',
+    border: `3px dashed ${DesignTokenColors.neutral100}`,
+    borderRadius: '8px',
+    display: 'flex',
+    flexDirection: 'column',
+    marginBottom: '20px',
+    padding: '20px',
+  },
+  profilePhoto: {
+    alignItems: 'center',
+    backgroundColor: DesignTokenColors.neutral50,
+    borderRadius: '50%',
+    display: 'flex',
+    height: '80px',
+    justifyContent: 'center',
+    marginBottom: '10px',
+    width: '80px',
+  },
+  formField: {
+    color: DesignTokenColors.neutral100,
+    marginBottom: '15px',
+  },
+  a: {
+    color: DesignTokenColors.primary500,
+  },
+  closeButton: {
+    color: DesignTokenColors.neutral100,
+    position: 'absolute',
+    right: '8px',
+    top: '8px',
+  },
+};
+
 
 export default withStyles(styles)(VoterPositionEditNameAndPhotoModal);
diff --git a/src/js/components/PositionItem/VoterPositionEntryAndDisplay.jsx b/src/js/components/PositionItem/VoterPositionEntryAndDisplay.jsx
@@ -13,7 +13,7 @@ import { avatarGeneric } from '../../utils/applicationUtils';
 import ModalDisplayTemplateB, {
   templateBStyles, TextFieldDiv,
   TextFieldForm, TextFieldWrapper, VoterAvatarImg,
-  UserInfoWrapper, UserInfoText, UserName, VisibilityText, editIcon,
+  UserInfoWrapper, UserInfoText, UserName, VisibilityText, editIcon, StyledRadioGroup,
 } from '../Widgets/ModalDisplayTemplateB';
 // import ActivityPostPublicToggle from '../Activity/ActivityPostPublicToggle';
 import ActivityPostPublicDropdown from '../Activity/ActivityPostPublicDropdown';
@@ -146,7 +146,7 @@ const VoterPositionEntryAndDisplay = (props) => {
             />
           </UserInfoText>
         </UserInfoWrapper>
-        <RadioGroup
+        <StyledRadioGroup
           row
           value={selectedOpinion}
           onChange={handleOpinionChange}
@@ -169,7 +169,7 @@ const VoterPositionEntryAndDisplay = (props) => {
             label="Neutral"
             classes={{ root: classes.radioLabel }}
           />
-        </RadioGroup>
+        </StyledRadioGroup>
         <TextFieldDiv>
           <InputBase
             classes={{ root: classes.inputStyles, inputMultiline: classes.inputMultiline }}
@@ -189,7 +189,8 @@ const VoterPositionEntryAndDisplay = (props) => {
           color="primary"
           classes={{ root: classes.saveButtonRoot }}
           type="submit"
-          disabled={!statementText}
+          // disabled={!statementText} // Commented out to allow saving without statement
+          disabled={!selectedOpinion}
         >
           {activityTidbitIdCheck ? 'Add opinion' : 'Save Changes'}
         </Button>