diff --git a/src/components/__tests__/__snapshots__/user_account_menu.test.tsx.snap b/src/components/__tests__/__snapshots__/user_account_menu.test.tsx.snap index 564dfb3b..eff86f30 100644 --- a/src/components/__tests__/__snapshots__/user_account_menu.test.tsx.snap +++ b/src/components/__tests__/__snapshots__/user_account_menu.test.tsx.snap @@ -213,3 +213,69 @@ exports[`The UserAccountMenu component should render 1`] = ` `; + +exports[`The UserAccountMenu component should render sign in button 1`] = ` +
+
+ +
+
+
+ +
+
+ +
+
+
+
+
+
+`; diff --git a/src/components/__tests__/user_account_menu.test.tsx b/src/components/__tests__/user_account_menu.test.tsx index 861c9c94..e325bdfb 100644 --- a/src/components/__tests__/user_account_menu.test.tsx +++ b/src/components/__tests__/user_account_menu.test.tsx @@ -17,7 +17,9 @@ describe('The UserAccountMenu component', () => { props = { manageAccountURL: 'https://account-staging.ultimaker.com', onSignOutClickHandler: jest.fn(), - displayName: 'Test User' + onSignInClickHandler: jest.fn(), + displayName: 'Test User', + signedOut: false, }; wrapper = shallow(); }); @@ -63,4 +65,10 @@ describe('The UserAccountMenu component', () => { expect(wrapper).toMatchSnapshot(); }); + it('should render sign in button', () => { + wrapper.setProps({ signedOut: 'true' }); + expect(wrapper).toMatchSnapshot(); + expect(props.onSignInClickHandler).not.toHaveBeenCalled(); + }); + }); diff --git a/src/components/user_account_menu.tsx b/src/components/user_account_menu.tsx index db71dd5d..11945441 100755 --- a/src/components/user_account_menu.tsx +++ b/src/components/user_account_menu.tsx @@ -12,6 +12,10 @@ import { I18n } from '../utils/i18n'; export interface UserAccountMenuProps { + /** Whether the user is signed out */ + signedOut?: boolean; + /** Called when the sign in button is clicked */ + onSignInClickHandler?: () => void; /** Called when the sign out button is clicked */ onSignOutClickHandler: () => void; /** URL to the account management page */ @@ -70,7 +74,7 @@ export class UserAccountMenu extends React.Component -
- {I18n.translate("User account menu title", "My account")} -
- -
-
- -
-
{displayName}
-
- -
- + + +
+ + } + {signedOut && + - - - + } diff --git a/src/stories/menu.stories.tsx b/src/stories/menu.stories.tsx index 358eb772..7ff6afb8 100644 --- a/src/stories/menu.stories.tsx +++ b/src/stories/menu.stories.tsx @@ -66,5 +66,7 @@ stories.add('User account menu', withInfo( displayName="Test User" triggerWidth={text('Trigger width', null)} triggerHeight={text('Trigger height', null)} + signedOut={boolean('Sign out', false)} + onSignInClickHandler={action('clicked')} >
)); diff --git a/src/stylesheets/_buttons.scss b/src/stylesheets/_buttons.scss index 574f7c76..c10a89c6 100644 --- a/src/stylesheets/_buttons.scss +++ b/src/stylesheets/_buttons.scss @@ -218,6 +218,8 @@ button { } .floating-action-btn--trigger { + height: 5rem; + width: 5rem; position: relative; z-index: 99; font-size: 2rem; diff --git a/src/stylesheets/_navigation.scss b/src/stylesheets/_navigation.scss index 48c28b5d..ee58c5fa 100644 --- a/src/stylesheets/_navigation.scss +++ b/src/stylesheets/_navigation.scss @@ -9,12 +9,28 @@ .burger-menu { > .btn { + height: 5rem; + width: 5rem; top: 0.9rem; box-shadow: 0 2px 3px 0 $color-shadow; z-index: 999999; } } + .user-account-menu { + .trigger { + height: 4.6rem; + + @include respond-to(sm) { + height: 5rem; + } + + @include respond-to(md) { + height: 6rem; + } + } + } + ul { width: 100vw; padding: 0; @@ -67,7 +83,7 @@ margin: 0; } - a { + > a { border-radius: 9999px; background: white; font-size: 1.6rem; @@ -76,8 +92,8 @@ text-decoration: none; color: $secondary-btn-color-text; position: relative; - width: 46px; - height: 46px; + width: 4.6rem; + height: 4.6rem; @include respond-to(sm) { border-radius: 0; diff --git a/src/stylesheets/_user_account_menu.scss b/src/stylesheets/_user_account_menu.scss index 4b7bca61..f1a4338f 100644 --- a/src/stylesheets/_user_account_menu.scss +++ b/src/stylesheets/_user_account_menu.scss @@ -32,7 +32,6 @@ .account-section { width: 28rem; - min-height: 37.8rem; padding: 2.4rem; display: flex; flex-direction: column; @@ -44,6 +43,7 @@ flex-wrap: nowrap; justify-content: center; flex-grow: 1; + padding: 3.6rem 0; } .account-section__title {