Improve link buttons and inline link buttons styling (#8238)
* Set padding: 0 to both "link" and "link_inline" Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Remove redundant settings - _SpotlightDialog.scss Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Remove redundant settings - JoinRuleSettings Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Remove redundant settings - _ViewSourceEvent.scss Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Remove redundant settings - _RoomDirectory.scss Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Remove redundant settings - _InviteDialog.scss Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Remove redundant settings - ServerOfflineDialog Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Remove redundant settings - UpdateCheckButton Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Remove redundant settings - NonUrgentEchoFailureToast Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Remove redundant settings - CallView Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Remove unused styles - _RoomSettingsDialogBridges.scss Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Replace "link" with "link_inline" for inline links - src/components/structures/UserMenu.tsx - src/components/views/dialogs/BetaFeedbackDialog.tsx - src/components/views/dialogs/FeedbackDialog.tsx - src/components/views/rooms/NewRoomIntro.tsx - src/components/views/settings/tabs/room/NotificationSettingsTab.tsx - src/components/views/settings/tabs/user/PreferencesUserSettingsTab.tsx - src/components/views/spaces/SpaceCreateMenu.tsx Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Replace "link_inline" with "link" for links not inline - src/async-components/views/dialogs/security/CreateKeyBackupDialog.tsx - src/async-components/views/dialogs/security/CreateSecretStorageDialog.tsx - src/components/structures/auth/ForgotPassword.tsx - src/components/structures/auth/Registration.tsx - src/components/views/auth/InteractiveAuthEntryComponents.tsx - src/components/views/dialogs/security/AccessSecretStorageDialog.tsx - src/components/views/dialogs/security/RestoreKeyBackupDialog.tsx - src/components/views/messages/TileErrorBoundary.tsx - src/components/views/messages/ViewSourceEvent.tsx Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Remove a redundant declaration - _SetupEncryptionBody.scss Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Remove a redundant declaration - _ReplyChain.scss Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Remove a redundant declaration - _EventTile.scss Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Remove an obsolete style block - _RoomPreviewCard.scss The block was transferred from _SpaceRoomView.scss with ec24dc661edb6979ba901936067e5bc731dafa59 Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Remove a redundant declaration - _SecurityUserSettingsTab.scss Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Remove element='span' - NewRoomIntro.tsx Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Remove redundant declarations - _ServerPicker.scss Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Replace 'link' with 'link_inline' - AnalyticsToast.tsx Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
This commit is contained in:
Suguru Hirahara
GitHub
parent
5165ef02ff
commit
731776d189
38 changed files with 42 additions and 111 deletions
|
|
@ -865,7 +865,7 @@ export class FallbackAuthEntry extends React.Component<IAuthEntryProps> {
|
|||
}
|
||||
return (
|
||||
<div>
|
||||
<AccessibleButton kind='link_inline' inputRef={this.fallbackButton} onClick={this.onShowFallbackClick}>{
|
||||
<AccessibleButton kind='link' inputRef={this.fallbackButton} onClick={this.onShowFallbackClick}>{
|
||||
_t("Start authentication")
|
||||
}</AccessibleButton>
|
||||
{ errorSection }
|
||||
|
|
|
|||
|
|
@ -44,7 +44,7 @@ const BetaFeedbackDialog: React.FC<IProps> = ({ featureId, onFinished }) => {
|
|||
}))}
|
||||
>
|
||||
<AccessibleButton
|
||||
kind="link"
|
||||
kind="link_inline"
|
||||
onClick={() => {
|
||||
onFinished(false);
|
||||
defaultDispatcher.dispatch({
|
||||
|
|
|
|||
|
|
@ -102,7 +102,7 @@ const FeedbackDialog: React.FC<IProps> = (props: IProps) => {
|
|||
_t("PRO TIP: If you start a bug, please submit <debugLogsLink>debug logs</debugLogsLink> " +
|
||||
"to help us track down the problem.", {}, {
|
||||
debugLogsLink: sub => (
|
||||
<AccessibleButton kind="link" onClick={onDebugLogsLinkClick}>{ sub }</AccessibleButton>
|
||||
<AccessibleButton kind="link_inline" onClick={onDebugLogsLinkClick}>{ sub }</AccessibleButton>
|
||||
),
|
||||
})
|
||||
}</p>
|
||||
|
|
|
|||
|
|
@ -328,8 +328,8 @@ export default class AccessSecretStorageDialog extends React.PureComponent<IProp
|
|||
<p>{ _t(
|
||||
"Enter your Security Phrase or <button>use your Security Key</button> to continue.", {},
|
||||
{
|
||||
button: s => <AccessibleButton className="mx_linkButton"
|
||||
element="span"
|
||||
button: s => <AccessibleButton
|
||||
kind="link_inline"
|
||||
onClick={this.onUseRecoveryKeyClick}
|
||||
>
|
||||
{ s }
|
||||
|
|
|
|||
|
|
@ -408,15 +408,13 @@ export default class RestoreKeyBackupDialog extends React.PureComponent<IProps,
|
|||
{},
|
||||
{
|
||||
button1: s => <AccessibleButton
|
||||
className="mx_linkButton"
|
||||
element="span"
|
||||
kind="link_inline"
|
||||
onClick={this.onUseRecoveryKeyClick}
|
||||
>
|
||||
{ s }
|
||||
</AccessibleButton>,
|
||||
button2: s => <AccessibleButton
|
||||
className="mx_linkButton"
|
||||
element="span"
|
||||
kind="link_inline"
|
||||
onClick={this.onResetRecoveryClick}
|
||||
>
|
||||
{ s }
|
||||
|
|
@ -470,8 +468,8 @@ export default class RestoreKeyBackupDialog extends React.PureComponent<IProps,
|
|||
"<button>set up new recovery options</button>",
|
||||
{},
|
||||
{
|
||||
button: s => <AccessibleButton className="mx_linkButton"
|
||||
element="span"
|
||||
button: s => <AccessibleButton
|
||||
kind="link_inline"
|
||||
onClick={this.onResetRecoveryClick}
|
||||
>
|
||||
{ s }
|
||||
|
|
|
|||
|
|
@ -76,14 +76,14 @@ export default class TileErrorBoundary extends React.Component<IProps, IState> {
|
|||
|
||||
let submitLogsButton;
|
||||
if (SdkConfig.get().bug_report_endpoint_url) {
|
||||
submitLogsButton = <AccessibleButton kind="link_inline" onClick={this.onBugReport}>
|
||||
submitLogsButton = <AccessibleButton kind="link" onClick={this.onBugReport}>
|
||||
{ _t("Submit logs") }
|
||||
</AccessibleButton>;
|
||||
}
|
||||
|
||||
let viewSourceButton;
|
||||
if (mxEvent && SettingsStore.getValue("developerMode")) {
|
||||
viewSourceButton = <AccessibleButton onClick={this.onViewSource} kind="link_inline">
|
||||
viewSourceButton = <AccessibleButton onClick={this.onViewSource} kind="link">
|
||||
{ _t("View Source") }
|
||||
</AccessibleButton>;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -76,7 +76,7 @@ export default class ViewSourceEvent extends React.PureComponent<IProps, IState>
|
|||
return <span className={classes}>
|
||||
{ content }
|
||||
<AccessibleButton
|
||||
kind='link_inline'
|
||||
kind='link'
|
||||
title={_t('toggle event')}
|
||||
className="mx_ViewSourceEvent_toggle"
|
||||
onClick={this.onToggle}
|
||||
|
|
|
|||
|
|
@ -99,17 +99,13 @@ const NewRoomIntro = () => {
|
|||
let topicText;
|
||||
if (canAddTopic && topic) {
|
||||
topicText = _t("Topic: %(topic)s (<a>edit</a>)", { topic }, {
|
||||
a: sub => <AccessibleButton kind="link" onClick={onTopicClick}>{ sub }</AccessibleButton>,
|
||||
a: sub => <AccessibleButton kind="link_inline" onClick={onTopicClick}>{ sub }</AccessibleButton>,
|
||||
});
|
||||
} else if (topic) {
|
||||
topicText = _t("Topic: %(topic)s ", { topic });
|
||||
} else if (canAddTopic) {
|
||||
topicText = _t("<a>Add a topic</a> to help people know what it is about.", {}, {
|
||||
a: sub => <AccessibleButton
|
||||
kind="link"
|
||||
element="span"
|
||||
onClick={onTopicClick}
|
||||
>{ sub }</AccessibleButton>,
|
||||
a: sub => <AccessibleButton kind="link_inline" onClick={onTopicClick}>{ sub }</AccessibleButton>,
|
||||
});
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -163,8 +163,7 @@ const JoinRuleSettings = ({ room, promptUpgrade, aliasWarning, onError, beforeCh
|
|||
a: sub => <AccessibleButton
|
||||
disabled={disabled}
|
||||
onClick={onEditRestrictedClick}
|
||||
kind="link"
|
||||
className="mx_JoinRuleSettings_linkButton"
|
||||
kind="link_inline"
|
||||
>
|
||||
{ sub }
|
||||
</AccessibleButton>,
|
||||
|
|
|
|||
|
|
@ -42,7 +42,7 @@ function getStatusText(status: UpdateCheckStatus, errorDetail?: string) {
|
|||
return _t('Downloading update...');
|
||||
case UpdateCheckStatus.Ready:
|
||||
return _t("New version available. <a>Update now.</a>", {}, {
|
||||
a: sub => <AccessibleButton kind="link" onClick={installUpdate}>{ sub }</AccessibleButton>,
|
||||
a: sub => <AccessibleButton kind="link_inline" onClick={installUpdate}>{ sub }</AccessibleButton>,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -196,7 +196,10 @@ export default class NotificationsSettingsTab extends React.Component<IProps, IS
|
|||
{ _t("Default") }
|
||||
<div className="mx_NotificationSettingsTab_microCopy">
|
||||
{ _t("Get notifications as set up in your <a>settings</a>", {}, {
|
||||
a: sub => <AccessibleButton kind="link" onClick={this.onOpenSettingsClick}>
|
||||
a: sub => <AccessibleButton
|
||||
kind="link_inline"
|
||||
onClick={this.onOpenSettingsClick}
|
||||
>
|
||||
{ sub }
|
||||
</AccessibleButton>,
|
||||
}) }
|
||||
|
|
@ -219,7 +222,10 @@ export default class NotificationsSettingsTab extends React.Component<IProps, IS
|
|||
<div className="mx_NotificationSettingsTab_microCopy">
|
||||
{ _t("Get notified only with mentions and keywords " +
|
||||
"as set up in your <a>settings</a>", {}, {
|
||||
a: sub => <AccessibleButton kind="link" onClick={this.onOpenSettingsClick}>
|
||||
a: sub => <AccessibleButton
|
||||
kind="link_inline"
|
||||
onClick={this.onOpenSettingsClick}
|
||||
>
|
||||
{ sub }
|
||||
</AccessibleButton>,
|
||||
}) }
|
||||
|
|
|
|||
|
|
@ -162,7 +162,7 @@ export default class PreferencesUserSettingsTab extends React.Component<IProps,
|
|||
<span className="mx_SettingsTab_subheading">{ _t("Keyboard shortcuts") }</span>
|
||||
<div className="mx_SettingsFlag">
|
||||
{ _t("To view all keyboard shortcuts, <a>click here</a>.", {}, {
|
||||
a: sub => <AccessibleButton kind="link" onClick={this.onKeyboardShortcutsClicked}>
|
||||
a: sub => <AccessibleButton kind="link_inline" onClick={this.onKeyboardShortcutsClicked}>
|
||||
{ sub }
|
||||
</AccessibleButton>,
|
||||
}) }
|
||||
|
|
|
|||
|
|
@ -105,7 +105,7 @@ export const SpaceFeedbackPrompt = ({ onClick }: { onClick?: () => void }) => {
|
|||
return <div className="mx_SpaceFeedbackPrompt">
|
||||
<span className="mx_SpaceFeedbackPrompt_text">{ _t("Spaces are a new feature.") }</span>
|
||||
<AccessibleButton
|
||||
kind="link"
|
||||
kind="link_inline"
|
||||
onClick={() => {
|
||||
if (onClick) onClick();
|
||||
Modal.createDialog(GenericFeatureFeedbackDialog, {
|
||||
|
|
|
|||
|
|
@ -32,7 +32,7 @@ export default class NonUrgentEchoFailureToast extends React.PureComponent {
|
|||
<span className="mx_NonUrgentEchoFailureToast_icon" />
|
||||
{ _t("Your server isn't responding to some <a>requests</a>.", {}, {
|
||||
'a': (sub) => (
|
||||
<AccessibleButton kind="link" onClick={this.openDialog}>{ sub }</AccessibleButton>
|
||||
<AccessibleButton kind="link_inline" onClick={this.openDialog}>{ sub }</AccessibleButton>
|
||||
),
|
||||
}) }
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -484,7 +484,7 @@ export default class CallView extends React.Component<IProps, IState> {
|
|||
transferee: transfereeName,
|
||||
},
|
||||
{
|
||||
a: sub => <AccessibleButton kind="link" onClick={this.onTransferClick}>
|
||||
a: sub => <AccessibleButton kind="link_inline" onClick={this.onTransferClick}>
|
||||
{ sub }
|
||||
</AccessibleButton>,
|
||||
},
|
||||
|
|
@ -499,7 +499,7 @@ export default class CallView extends React.Component<IProps, IState> {
|
|||
: _td("You held the call <a>Resume</a>"),
|
||||
{},
|
||||
{
|
||||
a: sub => <AccessibleButton kind="link" onClick={this.onCallResumeClick}>
|
||||
a: sub => <AccessibleButton kind="link_inline" onClick={this.onCallResumeClick}>
|
||||
{ sub }
|
||||
</AccessibleButton>,
|
||||
},
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue