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")}
-
-
-
-
-
-
+ }
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 {