fix dropdown height and radiogroup

fix dropdown height on iphone SE and fix bug with radiogroup
wevote · Jan 24, 2025 · 07b536c · 07b536c
1 parent f910ac0
commit 07b536c
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 40 deletions.
diff --git a/src/js/components/Activity/ActivityPostPublicDropdown.jsx b/src/js/components/Activity/ActivityPostPublicDropdown.jsx
@@ -30,6 +30,9 @@ const ActivityPostPublicDropdown = (props) => {
           disableUnderline
           IconComponent={ArrowDropDownIcon}
           aria-label="Select visibility for your opinion"
+          MenuProps={{
+            classes: { paper: classes.menuPaper },
+          }}
         >
           <MenuItem value="Public" className={classes.menuItem}>
             Public
@@ -97,11 +100,16 @@ const styles = (theme) => ({
     fontSize: '16px',
     fontWeight: '400',
     lineHeight: '21.82px',
-    padding: 0,
+    padding: '10px',
     [theme.breakpoints.down('xs')]: {
       fontSize: '14px',
     },
   },
+  menuPaper: {
+    '& .MuiMenu-list': {
+      padding: 0,
+    },
+  },
   outlinedInputRoot: {
     padding: 0,
     '& .MuiSelect-select': {

diff --git a/src/js/components/PositionItem/VoterPositionEntryAndDisplay.jsx b/src/js/components/PositionItem/VoterPositionEntryAndDisplay.jsx
@@ -1,5 +1,5 @@
 import React, { useState, useEffect, useRef } from 'react';
-import { Button, InputBase, Radio, RadioGroup, FormControlLabel, FormControl } from '@mui/material';
+import { Button, InputBase, Radio, FormControlLabel, RadioGroup } from '@mui/material';
 import { withStyles } from '@mui/styles';
 import PropTypes from 'prop-types';
 import { Edit as EditIcon } from '@mui/icons-material';
@@ -13,7 +13,7 @@ import { avatarGeneric } from '../../utils/applicationUtils';
 import ModalDisplayTemplateB, {
   templateBStyles, TextFieldDiv,
   TextFieldForm, TextFieldWrapper, VoterAvatarImg,
-  UserInfoWrapper, UserInfoText, UserName, VisibilityText, editIcon, StyledRadioGroup,
+  UserInfoWrapper, UserInfoText, UserName,
 } from '../Widgets/ModalDisplayTemplateB';
 // import ActivityPostPublicToggle from '../Activity/ActivityPostPublicToggle';
 import ActivityPostPublicDropdown from '../Activity/ActivityPostPublicDropdown';
@@ -85,19 +85,10 @@ const VoterPositionEntryAndDisplay = (props) => {
     }
   }, [initialFocusSet]);
 
-  const onBlurInput = () => {
-    restoreStylesAfterCordovaKeyboard('VoterPositionEntryAndDisplay');
-  };
-
-
   const onFocusInput = () => {
     prepareForCordovaKeyboard('VoterPositionEntryAndDisplay');
   };
 
-  const onPublicToggleChange = (newVisibilityIsPublic) => {
-    setVisibilityIsPublic(newVisibilityIsPublic);
-  };
-
   const saveActivityPost = (e) => {
     e.preventDefault();
     const visibilitySetting = visibilityIsPublic ? 'SHOW_PUBLIC' : 'FRIENDS_ONLY';
@@ -132,7 +123,7 @@ const VoterPositionEntryAndDisplay = (props) => {
           />
           <EditIcon
             onClick={handleEditModalOpen}
-            className={classes.editIcon}
+            className={classes.styledEditIcon}
           />
           <UserInfoText>
             <UserName>
@@ -146,10 +137,11 @@ const VoterPositionEntryAndDisplay = (props) => {
             />
           </UserInfoText>
         </UserInfoWrapper>
-        <StyledRadioGroup
+        <RadioGroup
           row
           value={selectedOpinion}
           onChange={handleOpinionChange}
+          className={classes.radioGroup}
         >
           <FormControlLabel
             value="Endorsing"
@@ -169,7 +161,7 @@ const VoterPositionEntryAndDisplay = (props) => {
             label="Neutral"
             classes={{ root: classes.radioLabel }}
           />
-        </StyledRadioGroup>
+        </RadioGroup>
         <TextFieldDiv>
           <InputBase
             classes={{ root: classes.inputStyles, inputMultiline: classes.inputMultiline }}

diff --git a/src/js/components/Widgets/ModalDisplayTemplateB.jsx b/src/js/components/Widgets/ModalDisplayTemplateB.jsx
@@ -1,5 +1,5 @@
 import { Close } from '@mui/icons-material';
-import { Dialog, DialogContent, DialogTitle, Divider, IconButton, Button } from '@mui/material';
+import { Dialog, DialogContent, DialogTitle, Divider, IconButton, Button, RadioGroup } from '@mui/material';
 import withStyles from '@mui/styles/withStyles';
 import withTheme from '@mui/styles/withTheme';
 import PropTypes from 'prop-types';
@@ -11,7 +11,7 @@ import { renderLog } from '../../common/utils/logging';
 import DesignTokenColors from '../../common/components/Style/DesignTokenColors';
 
 class ModalDisplayTemplateB extends Component {
-  constructor (props) {
+  constructor(props) {
     super(props);
     this.state = {
     };
@@ -81,7 +81,7 @@ export const templateBStyles = (theme) => ({
     margin: '0 8px',
     padding: '4px 8px',
   },
-  editIcon: {
+  styledEditIcon: {
     alignItems: 'center',
     backgroundColor: DesignTokenColors.primary50,
     borderRadius: '50%',
@@ -100,7 +100,7 @@ export const templateBStyles = (theme) => ({
     marginTop: hasIPhoneNotch() ? 68 : 48,
     minHeight: isAndroid() ? '257px' : '200px',
     maxWidth: '600px',
-    top: '0',
+    top: '50px',
     width: '90%',
     transform: isAndroid() ? 'translate(0%, -18%)' : 'translate(0%, -20%)',
     [theme.breakpoints.down('xs')]: {
@@ -182,6 +182,27 @@ export const templateBStyles = (theme) => ({
       opacity: 0.6,
     },
   },
+  radioGroup: {
+    display: 'flex',
+    flexDirection: 'row',
+    justifyContent: 'flex-start',
+    alignItems: 'center',
+    gap: '16px',
+    marginBottom: '10px',
+    padding: '0',
+    width: '100%',
+
+    '@media (max-width: 600px)': {
+      alignItems: 'flex-start',
+      flexDirection: 'column',
+      gap: '8px',
+    },
+
+    '@media (max-width: 375px)': {
+      alignItems: 'flex-start',
+      gap: '8px',
+    },
+  },
   radioLabel: {
     alignItems: 'center',
     color: DesignTokenColors.neutral900,
@@ -332,26 +353,5 @@ export const OpinionButton = styled(Button)`
     background-color: ${(props) => (props.selected ? DesignTokenColors.primary600 : DesignTokenColors.primary50)};
   }
 `;
-export const StyledRadioGroup = styled('div')`
-  display: flex;
-  flex-direction: row;
-  justify-content: flex-start;
-  align-items: center;
-  gap: 16px;
-  margin-bottom: 10px;
-  padding: 0;
-  width: 100%;
-  
-  @media (max-width: 600px) {
-  align-items: flex-start;
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  }
 
-  @media (max-width: 375px) {
-  align-items: flex-start;
-  gap: 8px;
-}
-`;
 export default withTheme(withStyles(templateBStyles)(ModalDisplayTemplateB));