Theme: Page styles move to emotion global styles and design tweaks (#33529)

* Theme: Page styles move to emotion global styles and design tweaks

* More style tweaks

* tweaks

* Updating snapshots

* Another fix

* Another fix

* minor fix

* More style tweaks to page toolbar and alert rule page

* minor polish
This commit is contained in:
Torkel Ödegaard
2021-04-30 10:04:01 +02:00
committed by GitHub
parent aaca022df6
commit f6ecded86b
40 changed files with 367 additions and 433 deletions
@@ -62,7 +62,7 @@ export const ChangePasswordForm: FC<Props> = ({ user, onChangePassword, isSaving
<Button variant="primary" disabled={isSaving}>
Change Password
</Button>
<LinkButton variant="secondary" href={`${config.appSubUrl}/profile`}>
<LinkButton variant="secondary" href={`${config.appSubUrl}/profile`} fill="outline">
Cancel
</LinkButton>
</HorizontalGroup>
@@ -27,7 +27,7 @@ export const ChangePasswordPage: FC<Props> = ({ navModel }) => (
) => {
return (
<Page.Contents>
<h3 className="page-sub-heading">Change Your Password</h3>
<h3 className="page-heading">Change Your Password</h3>
{states.loadUser ? (
<LoadingPlaceholder text="Loading user profile..." />
) : (
@@ -22,52 +22,52 @@ export class UserOrganizations extends PureComponent<Props> {
return <LoadingPlaceholder text="Loading organizations..." />;
}
if (orgs.length === 0) {
return null;
}
return (
<>
{orgs.length > 0 && (
<>
<h3 className="page-sub-heading">Organizations</h3>
<div className="gf-form-group">
<table className="filter-table form-inline">
<thead>
<tr>
<th>Name</th>
<th>Role</th>
<th />
<div>
<h3 className="page-sub-heading">Organizations</h3>
<div className="gf-form-group">
<table className="filter-table form-inline">
<thead>
<tr>
<th>Name</th>
<th>Role</th>
<th />
</tr>
</thead>
<tbody>
{orgs.map((org: UserOrg, index) => {
return (
<tr key={index}>
<td>{org.name}</td>
<td>{org.role}</td>
<td className="text-right">
{org.orgId === user.orgId ? (
<Button variant="secondary" size="sm" disabled>
Current
</Button>
) : (
<Button
variant="secondary"
size="sm"
onClick={() => {
this.props.setUserOrg(org);
}}
>
Select
</Button>
)}
</td>
</tr>
</thead>
<tbody>
{orgs.map((org: UserOrg, index) => {
return (
<tr key={index}>
<td>{org.name}</td>
<td>{org.role}</td>
<td className="text-right">
{org.orgId === user.orgId ? (
<Button variant="secondary" size="sm" disabled>
Current
</Button>
) : (
<Button
variant="secondary"
size="sm"
onClick={() => {
this.props.setUserOrg(org);
}}
>
Select
</Button>
)}
</td>
</tr>
);
})}
</tbody>
</table>
</div>
</>
)}
</>
);
})}
</tbody>
</table>
</div>
</div>
);
}
}
+11 -12
View File
@@ -1,7 +1,7 @@
import React, { FC } from 'react';
import { connect } from 'react-redux';
import { hot } from 'react-hot-loader';
import { LoadingPlaceholder } from '@grafana/ui';
import { LoadingPlaceholder, VerticalGroup } from '@grafana/ui';
import { config } from '@grafana/runtime';
import { NavModel } from '@grafana/data';
import { UserProvider, UserAPI, LoadingStates } from 'app/core/utils/UserProvider';
@@ -34,16 +34,15 @@ export const UserProfileEdit: FC<Props> = ({ navModel }) => (
{states.loadUser ? (
<LoadingPlaceholder text="Loading user profile..." />
) : (
<UserProfileEditForm
updateProfile={api.updateUserProfile}
isSavingUser={states.updateUserProfile}
user={user!}
/>
)}
<SharedPreferences resourceUri="user" />
<UserTeams isLoading={states.loadTeams} loadTeams={api.loadTeams} teams={teams} />
{!states.loadUser && (
<>
<VerticalGroup spacing="md">
<UserProfileEditForm
updateProfile={api.updateUserProfile}
isSavingUser={states.updateUserProfile}
user={user!}
/>
<SharedPreferences resourceUri="user" />
<UserTeams isLoading={states.loadTeams} loadTeams={api.loadTeams} teams={teams} />
<UserOrganizations
isLoading={states.loadOrgs}
setUserOrg={api.setUserOrg}
@@ -58,7 +57,7 @@ export const UserProfileEdit: FC<Props> = ({ navModel }) => (
sessions={sessions}
user={user!}
/>
</>
</VerticalGroup>
)}
</Page.Contents>
);
+2 -2
View File
@@ -23,7 +23,7 @@ export class UserSessions extends PureComponent<Props> {
}
return (
<>
<div>
{sessions.length > 0 && (
<>
<h3 className="page-sub-heading">Sessions</h3>
@@ -59,7 +59,7 @@ export class UserSessions extends PureComponent<Props> {
</div>
</>
)}
</>
</div>
);
}
}
+32 -32
View File
@@ -20,40 +20,40 @@ export class UserTeams extends PureComponent<Props> {
return <LoadingPlaceholder text="Loading teams..." />;
}
if (teams.length === 0) {
return null;
}
return (
<>
{teams.length > 0 && (
<>
<h3 className="page-sub-heading">Teams</h3>
<div className="gf-form-group">
<table className="filter-table form-inline">
<thead>
<tr>
<th />
<th>Name</th>
<th>Email</th>
<th>Members</th>
<div>
<h3 className="page-sub-heading">Teams</h3>
<div className="gf-form-group">
<table className="filter-table form-inline">
<thead>
<tr>
<th />
<th>Name</th>
<th>Email</th>
<th>Members</th>
</tr>
</thead>
<tbody>
{teams.map((team: Team, index) => {
return (
<tr key={index}>
<td className="width-4 text-center">
<img className="filter-table__avatar" src={team.avatarUrl} />
</td>
<td>{team.name}</td>
<td>{team.email}</td>
<td>{team.memberCount}</td>
</tr>
</thead>
<tbody>
{teams.map((team: Team, index) => {
return (
<tr key={index}>
<td className="width-4 text-center">
<img className="filter-table__avatar" src={team.avatarUrl} />
</td>
<td>{team.name}</td>
<td>{team.email}</td>
<td>{team.memberCount}</td>
</tr>
);
})}
</tbody>
</table>
</div>
</>
)}
</>
);
})}
</tbody>
</table>
</div>
</div>
);
}
}