Fix TranslatableFields and Inputs look and feel

Author: fzaninotto

packages/ra-ui-materialui/src/field/TranslatableFields.tsx

@@ -116,10 +116,9 @@ const useStyles = makeStyles(
     theme => ({
         root: {
             flexGrow: 1,
-            backgroundColor: theme.palette.background.default,
+            marginTop: theme.spacing(1),
+            marginBottom: theme.spacing(0.5),
         },
     }),
-    {
-        name: 'RaTranslatableFields',
-    }
+    { name: 'RaTranslatableFields' }
 );

packages/ra-ui-materialui/src/field/TranslatableFieldsTabContent.tsx

@@ -91,11 +91,13 @@ const useStyles = makeStyles(
     theme => ({
         root: {
             flexGrow: 1,
-            padding: theme.spacing(1),
-            backgroundColor: theme.palette.background.default,
+            padding: theme.spacing(2),
+            borderRadius: 0,
+            borderBottomLeftRadius: theme.shape.borderRadius,
+            borderBottomRightRadius: theme.shape.borderRadius,
+            border: `1px solid ${theme.palette.divider}`,
+            borderTop: 0,
         },
     }),
-    {
-        name: 'RaTranslatableFieldsTabContent',
-    }
+    { name: 'RaTranslatableFieldsTabContent' }
 );

packages/ra-ui-materialui/src/field/TranslatableFieldsTabs.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { ReactElement } from 'react';
 import AppBar from '@material-ui/core/AppBar';
+import { makeStyles } from '@material-ui/core/styles';
 import Tabs, { TabsProps } from '@material-ui/core/Tabs';
 import { useTranslatableContext } from 'ra-core';
 import { TranslatableFieldsTab } from './TranslatableFieldsTab';
@@ -10,19 +11,26 @@ import { AppBarProps } from '../layout';
  * Default locale selector for the TranslatableFields component. Generates a tab for each specified locale.
  * @see TranslatableFields
  */
-export const TranslatableFieldsTabs = ({
-    groupKey,
-    TabsProps: tabsProps,
-}: TranslatableFieldsTabsProps & AppBarProps): ReactElement => {
+export const TranslatableFieldsTabs = (
+    props: TranslatableFieldsTabsProps & AppBarProps
+): ReactElement => {
+    const { groupKey, TabsProps: tabsProps } = props;
     const { locales, selectLocale, selectedLocale } = useTranslatableContext();
+    const classes = useStyles(props);
 
     const handleChange = (event, newLocale): void => {
         selectLocale(newLocale);
     };
 
     return (
-        <AppBar position="static">
-            <Tabs value={selectedLocale} onChange={handleChange} {...tabsProps}>
+        <AppBar color="default" position="static" className={classes.root}>
+            <Tabs
+                value={selectedLocale}
+                onChange={handleChange}
+                indicatorColor="primary"
+                textColor="primary"
+                {...tabsProps}
+            >
                 {locales.map(locale => (
                     <TranslatableFieldsTab
                         key={locale}
@@ -40,3 +48,16 @@ export interface TranslatableFieldsTabsProps {
     TabsProps?: TabsProps;
     groupKey?: string;
 }
+
+const useStyles = makeStyles(
+    theme => ({
+        root: {
+            boxShadow: 'none',
+            borderRadius: 0,
+            borderTopLeftRadius: theme.shape.borderRadius,
+            borderTopRightRadius: theme.shape.borderRadius,
+            border: `1px solid ${theme.palette.divider}`,
+        },
+    }),
+    { name: 'RaTranslatableFieldsTabs' }
+);

packages/ra-ui-materialui/src/input/TranslatableInputs.tsx

@@ -101,10 +101,9 @@ const useStyles = makeStyles(
     theme => ({
         root: {
             flexGrow: 1,
-            backgroundColor: theme.palette.background.default,
+            marginTop: theme.spacing(1),
+            marginBottom: theme.spacing(0.5),
         },
     }),
-    {
-        name: 'RaTranslatableInputs',
-    }
+    { name: 'RaTranslatableInputs' }
 );

packages/ra-ui-materialui/src/input/TranslatableInputsTab.tsx

@@ -33,9 +33,7 @@ const useStyles = makeStyles(
     theme => ({
         error: { color: theme.palette.error.main },
     }),
-    {
-        name: 'RaTranslatableInputsTab',
-    }
+    { name: 'RaTranslatableInputsTab' }
 );
 
 interface TranslatableInputsTabProps {

packages/ra-ui-materialui/src/input/TranslatableInputsTabContent.tsx

@@ -56,11 +56,13 @@ const useStyles = makeStyles(
     theme => ({
         root: {
             flexGrow: 1,
-            padding: theme.spacing(1),
-            backgroundColor: theme.palette.background.default,
+            padding: theme.spacing(2),
+            borderRadius: 0,
+            borderBottomLeftRadius: theme.shape.borderRadius,
+            borderBottomRightRadius: theme.shape.borderRadius,
+            border: `1px solid ${theme.palette.divider}`,
+            borderTop: 0,
         },
     }),
-    {
-        name: 'RaTranslatableInputsTabContent',
-    }
+    { name: 'RaTranslatableInputsTabContent' }
 );

packages/ra-ui-materialui/src/input/TranslatableInputsTabs.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { ReactElement } from 'react';
-import AppBar from '@material-ui/core/AppBar';
-import Tabs, { TabsProps } from '@material-ui/core/Tabs';
+import { AppBar, Tabs, TabsProps } from '@material-ui/core';
+import { makeStyles } from '@material-ui/core/styles';
 import { useTranslatableContext } from 'ra-core';
 import { TranslatableInputsTab } from './TranslatableInputsTab';
 import { AppBarProps } from '../layout';
@@ -10,19 +10,26 @@ import { AppBarProps } from '../layout';
  * Default locale selector for the TranslatableInputs component. Generates a tab for each specified locale.
  * @see TranslatableInputs
  */
-export const TranslatableInputsTabs = ({
-    groupKey,
-    TabsProps: tabsProps,
-}: TranslatableInputsTabsProps & AppBarProps): ReactElement => {
+export const TranslatableInputsTabs = (
+    props: TranslatableInputsTabsProps & AppBarProps
+): ReactElement => {
+    const { groupKey, TabsProps: tabsProps } = props;
     const { locales, selectLocale, selectedLocale } = useTranslatableContext();
+    const classes = useStyles(props);
 
     const handleChange = (event, newLocale): void => {
         selectLocale(newLocale);
     };
 
     return (
-        <AppBar position="static">
-            <Tabs value={selectedLocale} onChange={handleChange} {...tabsProps}>
+        <AppBar color="default" position="static" className={classes.root}>
+            <Tabs
+                value={selectedLocale}
+                onChange={handleChange}
+                indicatorColor="primary"
+                textColor="primary"
+                {...tabsProps}
+            >
                 {locales.map(locale => (
                     <TranslatableInputsTab
                         key={locale}
@@ -40,3 +47,16 @@ export interface TranslatableInputsTabsProps {
     groupKey?: string;
     TabsProps?: TabsProps;
 }
+
+const useStyles = makeStyles(
+    theme => ({
+        root: {
+            boxShadow: 'none',
+            borderRadius: 0,
+            borderTopLeftRadius: theme.shape.borderRadius,
+            borderTopRightRadius: theme.shape.borderRadius,
+            border: `1px solid ${theme.palette.divider}`,
+        },
+    }),
+    { name: 'RaTranslatableInputsTabs' }
+);