Merge branch 'master' into feature/ch120584/animate-category-widget-v…

…alues
CartoDB · Nov 26, 2020 · 6c3f203 · 6c3f203
2 parents c0b9dc5 + 3a7af1f
commit 6c3f203
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 26 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,9 @@
-## Unreleased
+# CHANGELOG
+
+## Not released
+- Fix CategoryWidgetUI displaying no data while loading [#26](https://github.com/CartoDB/carto-react-lib/pull/26)
 - Animate CategoryWidget values [#30](https://github.com/CartoDB/carto-react-lib/pull/30)
+- Make OAuthLogin component responsive [#28](https://github.com/CartoDB/carto-react-lib/pull/28)
 
 ## 1.0.0-beta5 (2020-11-25)
 - Fix addSource keeping optional credentials property in the payload [#24](https://github.com/CartoDB/carto-react-lib/pull/24)

diff --git a/src/oauth/OAuthLogin.js b/src/oauth/OAuthLogin.js
@@ -1,16 +1,10 @@
 import React from 'react';
 import { useSelector, useDispatch } from 'react-redux';
-import { makeStyles } from '@material-ui/core/styles';
-import { Button, Grid } from '@material-ui/core';
+import { Button, Hidden, IconButton } from '@material-ui/core';
+import AccountCircleOutlinedIcon from '@material-ui/icons/AccountCircleOutlined';
 import useOAuthLogin from './useOAuthLogin';
 import { setTokenAndUserInfoAsync } from '../redux/oauthSlice';
 
-const useStyles = makeStyles(() => ({
-  root: {
-    flexGrow: 1,
-  },
-}));
-
 /** 
  * Shows a login button.
  * When this button is clicked, the OAuth protocol flow is handled
@@ -20,7 +14,6 @@ const useStyles = makeStyles(() => ({
  */
 export default function OAuthLogin() {
   const dispatch = useDispatch();
-  const classes = useStyles();
   const oauthApp = useSelector((state) => state.oauth.oauthApp);
 
   const onParamsRefreshed = (oauthParams) => {
@@ -35,20 +28,17 @@ export default function OAuthLogin() {
   const [handleLogin] = useOAuthLogin(oauthApp, onParamsRefreshed);
 
   return (
-    <div className={classes.root}>
-      <Grid
-        container
-        justify='flex-end'
-        alignItems='center'
-        spacing={1}
-        style={{ flexGrow: 1 }}
-      >
-        <Grid item>
-          <Button color='inherit' variant='outlined' onClick={handleLogin}>
-            Login
-          </Button>
-        </Grid>
-      </Grid>
-    </div>
+    <React.Fragment>
+      <Hidden xsDown>
+        <Button color="inherit" variant="outlined" onClick={handleLogin}>
+          Login
+        </Button>
+      </Hidden>
+      <Hidden smUp>
+        <IconButton color="inherit" aria-label="Login" onClick={handleLogin}>
+          <AccountCircleOutlinedIcon />
+        </IconButton>
+      </Hidden>
+    </React.Fragment>
   );
 }
diff --git a/src/ui/theme/carto-theme.js b/src/ui/theme/carto-theme.js
@@ -399,6 +399,13 @@ export const cartoThemeOptions = {
           background: variables.palette.action.focus,
           outline: 'none',
         },
+
+        // Mapbox controls
+        '.mapboxgl-ctrl-bottom-left, .mapboxgl-ctrl-bottom-right': {
+          '@media (max-width: 600px)': { // sm
+            bottom: spacing(4)
+          }
+        }
       },
     },
 

diff --git a/src/ui/widgets/CategoryWidgetUI.js b/src/ui/widgets/CategoryWidgetUI.js
@@ -497,7 +497,7 @@ function CategoryWidgetUI(props) {
                     }
                   />
                 ))
-              : data.length === 0 && (
+              : (data.length === 0 && !loading) && (
                   <Alert severity='warning'>
                     <AlertTitle>NO DATA AVAILABLE</AlertTitle>
                     There are no results for the combination of filters applied to your