PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

Improve link buttons and inline link buttons styling (#8238)

Browse source 
* 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 2022-06-29 22:37:34 +00:00 committed by GitHub
parent 5165ef02ff
commit 731776d189
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
38 changed files with 42 additions and 111 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
res/css/structures/_RoomDirectory.scss
View file

@ -180,10 +180,6 @@ limitations under the License.
.mx_RoomDirectory > span {
font-size: $font-15px;
margin-top: 0;
.mx_AccessibleButton {
padding: 0;
}
}
@media screen and (max-width: 700px) {
@ -191,10 +187,6 @@ limitations under the License.
padding: 0px;
}
.mx_AccessibleButton_kind_secondary {
padding: 0px !important;
}
.mx_RoomDirectory_join {
margin-left: 0px;
}

1
res/css/structures/auth/_SetupEncryptionBody.scss
View file

@ -20,7 +20,6 @@ limitations under the License.
.mx_SetupEncryptionBody_reset_link {
&.mx_AccessibleButton_kind_link_inline {
padding: 0;
color: $alert;
}
}

4
res/css/views/dialogs/_InviteDialog.scss
View file

@ -256,10 +256,6 @@ limitations under the License.
.mx_InviteDialog_helpText {
margin: 0;
.mx_AccessibleButton_kind_link {
padding: 0;
}
}
.mx_InviteDialog_dialPad {

6
res/css/views/dialogs/_RoomSettingsDialogBridges.scss
View file

@ -17,12 +17,6 @@ limitations under the License.
.mx_RoomSettingsDialog_BridgeList {
padding: 0;
.mx_AccessibleButton {
display: inline;
margin: 0;
padding: 0;
}
li {
list-style-type: none;

1
res/css/views/dialogs/_ServerOfflineDialog.scss
View file

@ -63,7 +63,6 @@ limitations under the License.
.mx_AccessibleButton {
float: right;
padding: 0;
}
}
}

5
res/css/views/dialogs/_SpotlightDialog.scss
View file

@ -416,7 +416,6 @@ limitations under the License.
}
.mx_SpotlightDialog_recentSearches > h4 > .mx_AccessibleButton_kind_link {
padding: 0;
float: right;
font-size: $font-12px;
line-height: $font-15px;
@ -468,10 +467,6 @@ limitations under the License.
> span {
align-self: center;
.mx_AccessibleButton_kind_link_inline {
padding: 0;
}
}
.mx_AccessibleButton_kind_primary_outline {

4
res/css/views/elements/_AccessibleButton.scss
View file

@ -137,15 +137,11 @@ limitations under the License.
font-size: inherit;
font-weight: normal;
line-height: inherit;
}
&.mx_AccessibleButton_kind_link {
padding: 0;
}
&.mx_AccessibleButton_kind_link_inline {
display: inline;
padding: 0 2px;
}
&.mx_AccessibleButton_kind_confirm_sm,

1
res/css/views/elements/_ReplyChain.scss
View file

@ -22,7 +22,6 @@ limitations under the License.
.mx_ReplyChain_show {
&.mx_AccessibleButton_kind_link_inline {
padding: 0;
color: unset;
white-space: nowrap; // Enforce 'In reply to' to be a single line

2
res/css/views/elements/_ServerPicker.scss
View file

@ -69,8 +69,6 @@ limitations under the License.
}
.mx_ServerPicker_change {
padding: 0;
font-size: inherit;
grid-column: 2;
grid-row: 2;
}

1
res/css/views/messages/_ViewSourceEvent.scss
View file

@ -36,7 +36,6 @@ limitations under the License.
visibility: hidden;
// override styles from AccessibleButton
border-radius: 0;
padding: 0;
// icon
mask-repeat: no-repeat;
mask-position: 0 center;

4
res/css/views/rooms/_EventTile.scss
View file

@ -647,10 +647,6 @@ $threadInfoLineHeight: calc(2 * $font-12px); // See: _commons.scss
.mx_AccessibleButton {
color: $primary-content;
text-decoration: underline;
&.mx_AccessibleButton_kind_link_inline {
padding: 0;
}
}
}
}

7
res/css/views/rooms/_RoomPreviewCard.scss
View file

@ -33,13 +33,6 @@ limitations under the License.
position: relative;
padding-left: calc(20px + $spacing-8);
.mx_AccessibleButton_kind_link {
display: inline;
padding: 0;
font-size: inherit;
line-height: inherit;
}
&::before {
content: "";
position: absolute;

5
res/css/views/settings/_JoinRuleSettings.scss
View file

@ -81,8 +81,3 @@ limitations under the License.
}
}
}
.mx_JoinRuleSettings_linkButton {
padding: 0;
font-size: inherit;
}

4
res/css/views/settings/_UpdateCheckButton.scss
View file

@ -16,8 +16,4 @@ limitations under the License.
.mx_UpdateCheckButton_summary {
margin-left: 16px;
.mx_AccessibleButton_kind_link {
padding: 0;
}
}

1
res/css/views/settings/tabs/user/_SecurityUserSettingsTab.scss
View file

@ -32,7 +32,6 @@ limitations under the License.
}
.mx_SettingsTab_section {
.mx_AccessibleButton_kind_link {
padding: 0;
font-size: inherit;
}
}

4
res/css/views/toasts/_NonUrgentEchoFailureToast.scss
View file

@ -30,8 +30,4 @@ limitations under the License.
span { // includes the i18n block
vertical-align: middle;
}
.mx_AccessibleButton {
padding: 0;
}
}

4
res/css/views/voip/_CallView.scss
View file

@ -127,10 +127,6 @@ limitations under the License.
width: 30px;
height: 30px;
}
.mx_AccessibleButton_hasKind {
padding: 0px;
}
}
}
}

8
src/async-components/views/dialogs/security/CreateKeyBackupDialog.tsx
View file

@ -305,11 +305,9 @@ export default class CreateKeyBackupDialog extends React.PureComponent<IProps, I
if (matchText) {
passPhraseMatch = <div className="mx_CreateKeyBackupDialog_passPhraseMatch">
<div>{ matchText }</div>
<div>
<AccessibleButton element="span" className="mx_linkButton" onClick={this.onSetAgainClick}>
{ changeText }
</AccessibleButton>
</div>
<AccessibleButton kind="link" onClick={this.onSetAgainClick}>
{ changeText }
</AccessibleButton>
</div>;
}
return <form onSubmit={this.onPassPhraseConfirmNextClick}>

8
src/async-components/views/dialogs/security/CreateSecretStorageDialog.tsx
View file

@ -656,11 +656,9 @@ export default class CreateSecretStorageDialog extends React.PureComponent<IProp
if (matchText) {
passPhraseMatch = <div>
<div>{ matchText }</div>
<div>
<AccessibleButton element="span" className="mx_linkButton" onClick={this.onSetAgainClick}>
{ changeText }
</AccessibleButton>
</div>
<AccessibleButton kind="link" onClick={this.onSetAgainClick}>
{ changeText }
</AccessibleButton>
</div>;
}
return <form onSubmit={this.onPassPhraseConfirmNextClick}>

4
src/components/structures/UserMenu.tsx
View file

@ -276,14 +276,14 @@ export default class UserMenu extends React.Component<IProps, IState> {
<div className="mx_UserMenu_contextMenu_header mx_UserMenu_contextMenu_guestPrompts">
{ _t("Got an account? <a>Sign in</a>", {}, {
a: sub => (
<AccessibleButton kind="link" onClick={this.onSignInClick}>
<AccessibleButton kind="link_inline" onClick={this.onSignInClick}>
{ sub }
</AccessibleButton>
),
}) }
{ _t("New here? <a>Create an account</a>", {}, {
a: sub => (
<AccessibleButton kind="link" onClick={this.onRegisterClick}>
<AccessibleButton kind="link_inline" onClick={this.onRegisterClick}>
{ sub }
</AccessibleButton>
),

2
src/components/structures/auth/ForgotPassword.tsx
View file

@ -368,7 +368,7 @@ export default class ForgotPassword extends React.Component<IProps, IState> {
value={_t('Send Reset Email')}
/>
</form>
<AccessibleButton kind='link_inline' className="mx_AuthBody_changeFlow" onClick={this.onLoginClick}>
<AccessibleButton kind='link' className="mx_AuthBody_changeFlow" onClick={this.onLoginClick}>
{ _t('Sign in instead') }
</AccessibleButton>
</div>;

8
src/components/structures/auth/Registration.tsx
View file

@ -580,7 +580,7 @@ export default class Registration extends React.Component<IProps, IState> {
let goBack;
if (this.state.doingUIAuth) {
goBack = <AccessibleButton
kind='link_inline'
kind='link'
className="mx_AuthBody_changeFlow"
onClick={this.onGoToFormClicked}
>
@ -601,8 +601,7 @@ export default class Registration extends React.Component<IProps, IState> {
},
) }</p>
<p><AccessibleButton
element="span"
className="mx_linkButton"
kind="link_inline"
onClick={async event => {
const sessionLoaded = await this.onLoginClickWithCheck(event);
if (sessionLoaded) {
@ -620,8 +619,7 @@ export default class Registration extends React.Component<IProps, IState> {
"<a>Log in</a> to your new account.", {},
{
a: (sub) => <AccessibleButton
element="span"
className="mx_linkButton"
kind="link_inline"
onClick={async event => {
const sessionLoaded = await this.onLoginClickWithCheck(event);
if (sessionLoaded) {

2
src/components/views/auth/InteractiveAuthEntryComponents.tsx
View file

@ -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 }

2
src/components/views/dialogs/BetaFeedbackDialog.tsx
View file

@ -44,7 +44,7 @@ const BetaFeedbackDialog: React.FC<IProps> = ({ featureId, onFinished }) => {
}))}
>
<AccessibleButton
kind="link"
kind="link_inline"
onClick={() => {
onFinished(false);
defaultDispatcher.dispatch({

2
src/components/views/dialogs/FeedbackDialog.tsx
View file

@ -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>

4
src/components/views/dialogs/security/AccessSecretStorageDialog.tsx
View file

@ -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 }

10
src/components/views/dialogs/security/RestoreKeyBackupDialog.tsx
View file

@ -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 }

4
src/components/views/messages/TileErrorBoundary.tsx
View file

@ -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>;
}

2
src/components/views/messages/ViewSourceEvent.tsx
View file

@ -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}

8
src/components/views/rooms/NewRoomIntro.tsx
View file

@ -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>,
});
}

3
src/components/views/settings/JoinRuleSettings.tsx
View file

@ -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>,

2
src/components/views/settings/UpdateCheckButton.tsx
View file

@ -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>,
});
}
}

10
src/components/views/settings/tabs/room/NotificationSettingsTab.tsx
View file

@ -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>,
}) }

2
src/components/views/settings/tabs/user/PreferencesUserSettingsTab.tsx
View file

@ -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>,
}) }

2
src/components/views/spaces/SpaceCreateMenu.tsx
View file

@ -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, {

2
src/components/views/toasts/NonUrgentEchoFailureToast.tsx
View file

@ -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>

4
src/components/views/voip/CallView.tsx
View file

@ -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>,
},

2
src/toasts/AnalyticsToast.tsx
View file

@ -109,7 +109,7 @@ export const showToast = (): void => {
// The user had no analytics setting previously set, so we just need to prompt to opt-in, rather than
// explaining any change.
const learnMoreLink = (sub: string) => (
<AccessibleButton kind="link" onClick={onLearnMoreNoOptIn}>{ sub }</AccessibleButton>
<AccessibleButton kind="link_inline" onClick={onLearnMoreNoOptIn}>{ sub }</AccessibleButton>
);
props = {
description: _t(