diff options
author | 2019-03-28 13:30:27 +0100 | |
---|---|---|
committer | 2019-03-28 13:30:27 +0100 | |
commit | f5599b88ac52a4299513312b3414ba15b46bc633 (patch) | |
tree | 4661e8e13a665882f055b8ccb574461979bad56f /src/features | |
parent | add analytic events for workspace actions (diff) | |
download | ferdium-app-f5599b88ac52a4299513312b3414ba15b46bc633.tar.gz ferdium-app-f5599b88ac52a4299513312b3414ba15b46bc633.tar.zst ferdium-app-f5599b88ac52a4299513312b3414ba15b46bc633.zip |
improve styling of workspace switch indicator
Diffstat (limited to 'src/features')
-rw-r--r-- | src/features/workspaces/components/WorkspaceSwitchingIndicator.js | 23 |
1 files changed, 15 insertions, 8 deletions
diff --git a/src/features/workspaces/components/WorkspaceSwitchingIndicator.js b/src/features/workspaces/components/WorkspaceSwitchingIndicator.js index c012ab008..8aba5bbd9 100644 --- a/src/features/workspaces/components/WorkspaceSwitchingIndicator.js +++ b/src/features/workspaces/components/WorkspaceSwitchingIndicator.js | |||
@@ -29,17 +29,22 @@ const styles = theme => ({ | |||
29 | }, | 29 | }, |
30 | component: { | 30 | component: { |
31 | background: 'rgba(20, 20, 20, 0.4)', | 31 | background: 'rgba(20, 20, 20, 0.4)', |
32 | padding: 20, | 32 | padding: '10px 20px', |
33 | display: 'flex', | ||
33 | width: 'auto', | 34 | width: 'auto', |
34 | height: 'auto', | 35 | height: 'auto', |
35 | margin: [0, 'auto'], | 36 | margin: [0, 'auto'], |
36 | borderRadius: 6, | 37 | borderRadius: 6, |
37 | alignItems: 'flex-start', | 38 | alignItems: 'center', |
38 | zIndex: 200, | 39 | zIndex: 200, |
39 | }, | 40 | }, |
40 | name: { | 41 | spinner: { |
41 | fontSize: 35, | 42 | width: '40px', |
42 | marginBottom: '10px', | 43 | marginRight: '5px', |
44 | }, | ||
45 | message: { | ||
46 | fontSize: 16, | ||
47 | whiteSpace: 'nowrap', | ||
43 | }, | 48 | }, |
44 | }); | 49 | }); |
45 | 50 | ||
@@ -67,10 +72,12 @@ class WorkspaceSwitchingIndicator extends Component { | |||
67 | ])} | 72 | ])} |
68 | > | 73 | > |
69 | <div className={classes.component}> | 74 | <div className={classes.component}> |
70 | <h1 className={classes.name}> | 75 | <div className={classes.spinner}> |
76 | <LoaderComponent /> | ||
77 | </div> | ||
78 | <p className={classes.message}> | ||
71 | {`${intl.formatMessage(messages.switchingTo)} ${nextWorkspaceName}`} | 79 | {`${intl.formatMessage(messages.switchingTo)} ${nextWorkspaceName}`} |
72 | </h1> | 80 | </p> |
73 | <LoaderComponent /> | ||
74 | </div> | 81 | </div> |
75 | </div> | 82 | </div> |
76 | ); | 83 | ); |