fix display settings

cboard-org · Mar 27, 2020 · 7943901 · 7943901
1 parent 920a2fe
commit 7943901
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 13 deletions.
diff --git a/src/components/Settings/Display/Display.component.js b/src/components/Settings/Display/Display.component.js
@@ -10,6 +10,8 @@ import ListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction';
 import Radio from '@material-ui/core/Radio';
 import RadioGroup from '@material-ui/core/RadioGroup';
 import FormControlLabel from '@material-ui/core/FormControlLabel';
+import Divider from '@material-ui/core/Divider';
+
 import FullScreenDialog from '../../UI/FullScreenDialog';
 import messages from './Display.messages';
 
@@ -70,11 +72,11 @@ class Display extends React.Component {
               ? messages[LABEL_POSITION_ABOVE]
               : messages[DISPLAY_SIZE_STANDARD]
           )}
-          value={this.props.intl.formatMessage(
+          value={
             name === 'labelPosition'
-              ? messages[LABEL_POSITION_ABOVE]
-              : messages[DISPLAY_SIZE_STANDARD]
-          )}
+              ? LABEL_POSITION_ABOVE
+              : DISPLAY_SIZE_STANDARD
+          }
           labelPlacement="start"
         />
         <FormControlLabel
@@ -84,11 +86,9 @@ class Display extends React.Component {
               ? messages[LABEL_POSITION_BELOW]
               : messages[DISPLAY_SIZE_LARGE]
           )}
-          value={this.props.intl.formatMessage(
-            name === 'labelPosition'
-              ? messages[LABEL_POSITION_BELOW]
-              : messages[DISPLAY_SIZE_LARGE]
-          )}
+          value={
+            name === 'labelPosition' ? LABEL_POSITION_BELOW : DISPLAY_SIZE_LARGE
+          }
           labelPlacement="start"
         />
         <FormControlLabel
@@ -98,11 +98,11 @@ class Display extends React.Component {
               ? messages[LABEL_POSITION_HIDDEN]
               : messages[DISPLAY_SIZE_EXTRALARGE]
           )}
-          value={this.props.intl.formatMessage(
+          value={
             name === 'labelPosition'
-              ? messages[LABEL_POSITION_HIDDEN]
-              : messages[DISPLAY_SIZE_EXTRALARGE]
-          )}
+              ? LABEL_POSITION_HIDDEN
+              : DISPLAY_SIZE_EXTRALARGE
+          }
           labelPlacement="start"
         />
       </RadioGroup>
@@ -126,24 +126,29 @@ class Display extends React.Component {
           <List>
             <ListItem>
               <ListItemText
+                className="Display__ListItemText"
                 primary={<FormattedMessage {...messages.uiSize} />}
                 secondary={<FormattedMessage {...messages.uiSizeSecondary} />}
               />
               <ListItemSecondaryAction className="Display__Options">
                 {this.renderRadioGroup('uiSize')}
               </ListItemSecondaryAction>
             </ListItem>
+            <Divider />
             <ListItem>
               <ListItemText
+                className="Display__ListItemText"
                 primary={<FormattedMessage {...messages.fontSize} />}
                 secondary={<FormattedMessage {...messages.fontSizeSecondary} />}
               />
               <ListItemSecondaryAction className="Display__Options">
                 {this.renderRadioGroup('fontSize')}
               </ListItemSecondaryAction>
             </ListItem>
+            <Divider />
             <ListItem>
               <ListItemText
+                className="Display__ListItemText"
                 primary={<FormattedMessage {...messages.outputHide} />}
                 secondary={
                   <FormattedMessage {...messages.outputHideSecondary} />
@@ -158,8 +163,10 @@ class Display extends React.Component {
                 />
               </ListItemSecondaryAction>
             </ListItem>
+            <Divider />
             <ListItem>
               <ListItemText
+                className="Display__ListItemText"
                 primary={<FormattedMessage {...messages.labelPosition} />}
                 secondary={
                   <FormattedMessage {...messages.labelPositionSecondary} />

diff --git a/src/components/Settings/Display/Display.css b/src/components/Settings/Display/Display.css
@@ -8,3 +8,7 @@
   flex-direction: column-reverse;
   margin: 0 20px;
 }
+
+.Display__ListItemText {
+  max-width: 75%;
+}