Merge pull request #2015 from jordanranz/ui-react-theme

Pass theme from withAuthenticator to Authenticator component
aws-amplify · Oct 30, 2018 · 352242e · 352242e
2 parents 03d0f8a + 2d58442
commit 352242e
Show file tree

Hide file tree

Showing 5 changed files with 17 additions and 4 deletions.
diff --git a/packages/amplify-ui/src/Toast.css b/packages/amplify-ui/src/Toast.css
@@ -9,7 +9,6 @@
   width: 100%;
   z-index: 99;
   box-shadow: 0 0 5px 0 rgba(0,0,0,0.3);
-  border-radius: 5px 5px 0 0;
   padding: 16px;
   background-color: var(--lightSquidInk);
   font-size: 14px;

diff --git a/packages/aws-amplify-react/src/Amplify-UI/Amplify-UI-Components-React.jsx b/packages/aws-amplify-react/src/Amplify-UI/Amplify-UI-Components-React.jsx
@@ -369,7 +369,7 @@ export const NavButton = (props) => {
     const style = propStyle(props, theme.navButton);
     const p = JS.objectLessAttributes(props, 'theme');
     return beforeAfter(
-        <button {...p} className={AmplifyUI.button} style={theme.toast}>
+        <button {...p} className={AmplifyUI.button} style={style}>
             {beforeAfter(
                 <span>{props.children}</span>
             )}

diff --git a/packages/aws-amplify-react/src/Amplify-UI/Amplify-UI-Theme.jsx b/packages/aws-amplify-react/src/Amplify-UI/Amplify-UI-Theme.jsx
@@ -39,6 +39,12 @@ export const AmazonSignInButton = {};
 export const FacebookSignInButton = {};
 export const GoogleSignInButton = {};
 export const OAuthSignInButton = {};
+export const Toast = {};
+export const NavBar = {};
+export const NavRight = {};
+export const Nav = {};
+export const NavItem = {};
+export const NavButton = {};
 
 const AmplifyTheme = {
   container: Container,
@@ -72,7 +78,14 @@ const AmplifyTheme = {
 
   hint: Hint,
   radio: Radio,
-  inputLabel: InputLabel
+  inputLabel: InputLabel,
+  toast: Toast,
+
+  navBar: NavBar,
+  nav: Nav,
+  navRight: NavRight,
+  navItem: NavItem,
+  navButton: NavButton
 };
 
 export default AmplifyTheme;
diff --git a/packages/aws-amplify-react/src/Auth/Authenticator.jsx b/packages/aws-amplify-react/src/Auth/Authenticator.jsx
@@ -178,7 +178,7 @@ export default class Authenticator extends Component {
         return (
             <Container theme={theme}>
                 {this.state.showToast && 
-                    <Toast onClose={() => this.setState({showToast: false})}>
+                    <Toast theme={theme} onClose={() => this.setState({showToast: false})}>
                         { I18n.get(error) }
                     </Toast>
                 }

diff --git a/packages/aws-amplify-react/src/Auth/index.jsx b/packages/aws-amplify-react/src/Auth/index.jsx
@@ -64,6 +64,7 @@ export function withAuthenticator(Comp, includeGreetings = false, authenticatorC
                                 authData={authData}
                                 federated={federated || this.props.federated}
                                 onStateChange={this.handleAuthStateChange}
+                                theme={theme}
                             />
                             : null
                         }