mirror of
https://github.com/grafana/grafana.git
synced 2026-09-05 04:40:13 -05:00
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:
@@ -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>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user