Merge branch '608-language-header-color' into 'master'

Language header color

Closes #616, #610, #608, #607, and #606

See merge request genesys-pgr/genesys-ui!599

src/accessions/ui/MapPage.tsx

@@ -320,7 +320,7 @@ class MapPage extends React.Component<IMapPageProps, any> {
             return;
           }
           if (document) {
-            document.body.classList.add('modal-open');
+            document.documentElement.classList.add('modal-open');
           }
           return this.setState({climateData: res, dialogOpened: true});
         })
@@ -359,7 +359,7 @@ class MapPage extends React.Component<IMapPageProps, any> {
     private hideDialog = () => {
       this.setState({dialogOpened: false});
       if (document) {
-        document.body.classList.remove('modal-open');
+        document.documentElement.classList.remove('modal-open');
       }
     }
 

src/accessions/ui/c/BioClimateDisplay.tsx

@@ -41,7 +41,7 @@ const styles = (theme) => ({
 const BioClimateDisplay = ({climateData, t, extraFilters, applyClimateFilters, inModal = false, classes, ...rest}: WithTranslation & {climateData: TileClimate, extraFilters?: any, applyClimateFilters: any, inModal?: boolean, classes: any}) => {
     const doFilters = () => {
       console.log(`Applying climate filters`, climateData, extraFilters);
-      document.body.classList.remove('modal-open');
+      document.documentElement.classList.remove('modal-open');
       setTimeout(() => applyClimateFilters(climateData, extraFilters), 10);
     };
 

src/crop/ui/c/TreeModal.tsx

@@ -54,17 +54,17 @@ class TreeModal extends React.Component<ITreeProps, any> {
     const {open} = nextProps;
     if (document) {
       if (open !== this.props.open && open) {
-        document.body.classList.add('modal-open');
+        document.documentElement.classList.add('modal-open');
       }
       if (open !== this.props.open && !open) {
-        document.body.classList.remove('modal-open');
+        document.documentElement.classList.remove('modal-open');
       }
     }
   }
 
   public componentWillUnmount() {
     if (document) {
-      document.body.classList.remove('modal-open');
+      document.documentElement.classList.remove('modal-open');
     }
   }
 

src/ui/common/permission/PermissionsTableForm.tsx

@@ -21,6 +21,7 @@ interface IPermissionsTableFormProps extends React.ClassAttributes<any>, WithTra
     removePermission: (sid: string) => Promise<AclObjectIdentity>;
     autocomplete: (e) => void;
     inherits?: boolean;
+    change: (field: string, value: string) => void;
 }
 
 const styles = {
@@ -52,6 +53,12 @@ const styles = {
 
 class PermissionsTableForm extends React.Component<IPermissionsTableFormProps, any> {
 
+    private onSuggestionSelected = (entry) => (e, data) => {
+        if (data && data.suggestion && data.suggestion.label) {
+            this.props.change(`${entry}.sid`, data.suggestion.label);
+        }
+    }
+
     protected renderRows = ({ fields, autocomplete, inherits = false }) => fields.map((entry, index) => (
         <SidRow
             key={ `sid-${index}` }
@@ -64,6 +71,7 @@ class PermissionsTableForm extends React.Component<IPermissionsTableFormProps, a
             removePermission={ this.props.removePermission }
             addPermission={ this.props.addPermission }
             classes={ {textField: this.props.classes.textField} }
+            onSuggestionSelected={ this.onSuggestionSelected(entry) }
         />
     ))
 

src/ui/common/permission/SidRow.tsx

@@ -21,6 +21,7 @@ interface ISidRowProps extends React.ClassAttributes<any>, WithTranslation {
   classes: any;
   removePermission: any;
   addPermission: any;
+  onSuggestionSelected: (e: any, data: any) => void;
 }
 
 
@@ -78,7 +79,7 @@ class SidRow extends React.Component<ISidRowProps> {
   }
 
   public render() {
-    const {entry, inherits, index, fields, ownerSid, classes, t} = this.props;
+    const {entry, inherits, index, fields, ownerSid, classes, t, onSuggestionSelected} = this.props;
 
     const isNewEntry = index === fields.length - 1;
     let {sid} = fields.get(index);
@@ -99,6 +100,7 @@ class SidRow extends React.Component<ISidRowProps> {
                 suggestions={ Object.keys(this.state.autocompleteObj).map((key) => ({label: key})) }
                 suggestionLabel="label"
                 classes={ {textField: classes.textField} }
+                onSuggestionSelected={ onSuggestionSelected }
               />
             )
           }

src/ui/layout/Header/LanguageList.tsx

@@ -49,6 +49,7 @@ const styles = {
         'html[dir="rtl"] &' : {
             left: 0,
             right: 'auto',
+            top: '100%',
         },
     },
     arrow: {
@@ -112,8 +113,8 @@ class LanguageList extends React.Component<ILanguageListProps, any> {
             >
                 <Button
                     className={ classes.langMenuBtn }
-                    color={ color ? color : 'secondary' }
                     aria-owns={ this.state.open ? 'lang-list' : null }
+                    style={ color ? { color: color } : {} }
                 >
                     { currentLang }
                     <ArrowDropDown className={ classes.arrow } viewBox="0 0 16 24"/>

src/ui/layout/Header/UserLoginMenu.tsx

@@ -54,6 +54,7 @@ const styles = {
     'html[dir="rtl"] &' : {
       left: 0,
       right: 'auto' as 'auto',
+      top: '100%',
     },
   },
   arrow: {

src/ui/layout/Header/UserMenu.tsx

@@ -39,6 +39,7 @@ const styles = {
         'html[dir="rtl"] &' : {
             left: 0,
             right: 'auto',
+            top: '100%',
         },
     },
     arrow: {
@@ -102,8 +103,8 @@ class UserMenu extends React.Component<IUserMenuProps, any> {
             >
                 <Button
                     className={ classes.userMenuBtn }
-                    color={ color ? color : 'secondary' }
                     aria-owns={ this.state.open ? 'user-menu' : null }
+                    style={ color ? { color: color } : {} }
                 >
                     <AccountCircle/>
                     <ArrowDropDown className={ classes.arrow } viewBox="0 0 16 24"/>

src/ui/layout/headers/v1/Themes.ts

@@ -17,8 +17,8 @@ export const black = {
   appIcon: 'white',
   appText: 'white',
   iconButton: 'secondary',
-  langList: 'secondary',
-  loginMenu: 'secondary',
+  langList: 'white',
+  loginMenu: 'white',
   menuItem: 'white',
   menuItemText: 'white',
   subItem: 'white',

src/user/ui/c/LoginForm.tsx

@@ -14,12 +14,24 @@ const styles = (theme) => {
     /* eslint-disable*/
     googleBtn: {
       ...theme.typography.button,
-      ...theme.buttons.green,
+      backgroundColor: '#88ba42!important',
+      color: '#fff!important',
+      fontSize: '0.9286rem!important',
+      borderRadius: '0!important',
       margin: '1em',
       maxHeight: 'auto',
+      '&:hover': {
+        backgroundColor: '#8fc848',
+      },
+      '& > div:first-child': {
+        display: 'none' as 'none',
+      },
+      '& > span': {
+        padding: '8px 16px!important',
+      },
     },
     menuGoogleBtn: {
-      display: 'none' as 'none',
+      display: 'none!important' as 'none',
     },
     input: {
       '&:last-child': {

styles/app.styles.scss

@@ -16,6 +16,7 @@ html {
 	font-size: $base-font-size;
 	margin: 0;
 	padding: 0;
+	overflow-y: scroll !important;
 }
 
 body {
@@ -23,7 +24,6 @@ body {
 	padding: 0 !important;
 	margin: 0;
 	background: #f8f8f8;
-	overflow-y: scroll !important;
 }
 
 a,