diff --git a/src/App.scss b/src/App.scss
index ca7d33cd93986f55a75653cab8310ab76b92f4d5..ef2a13b1bafe49dfa09f022d58ca78adb02aa549 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -33,6 +33,7 @@ h4 {
max-width: 980px;
align-content: flex-start;
}
+
.underlay {
background-color: rgba(0,0,0,0.15);
background-color: var(--underlay, rgba(0,0,0,0.15));
@@ -69,7 +70,7 @@ a {
color: var(--link, $fallback--link);
}
-button {
+.button-default {
user-select: none;
color: $fallback--text;
color: var(--btnText, $fallback--text);
@@ -85,7 +86,9 @@ button {
font-family: sans-serif;
font-family: var(--interfaceFont, sans-serif);
- i[class*=icon-], .svg-inline--fa {
+ i[class*=icon-],
+ :not(&.-icon),
+ .svg-inline--fa {
color: $fallback--text;
color: var(--btnText, $fallback--text);
}
@@ -149,6 +152,29 @@ button {
}
}
+.button-unstyled {
+ background: none;
+ border: none;
+ outline: none;
+ display: inline;
+ text-align: initial;
+ font-size: 100%;
+ font-family: inherit;
+ padding: 0;
+ line-height: unset;
+ cursor: pointer;
+
+ &.-link {
+ color: $fallback--link;
+ color: var(--link, $fallback--link);
+ }
+
+ &.-padded {
+ padding: 5px;
+ margin: -5px;
+ }
+}
+
input, textarea, .select, .input {
&.unstyled {
@@ -797,7 +823,7 @@ nav {
}
}
-.btn.btn-default {
+.btn.button-default {
min-height: 28px;
}
diff --git a/src/components/account_actions/account_actions.vue b/src/components/account_actions/account_actions.vue
index e3ae376e26baa6725de79b4c8ad2e044021ae1c4..c10b09b8aaddc88677da6352d3d2be8977945a81 100644
--- a/src/components/account_actions/account_actions.vue
+++ b/src/components/account_actions/account_actions.vue
@@ -13,14 +13,14 @@
<template v-if="relationship.following">
<button
v-if="relationship.showing_reblogs"
- class="btn btn-default dropdown-item"
+ class="btn button-default dropdown-item"
@click="hideRepeats"
>
{{ $t('user_card.hide_repeats') }}
</button>
<button
v-if="!relationship.showing_reblogs"
- class="btn btn-default dropdown-item"
+ class="btn button-default dropdown-item"
@click="showRepeats"
>
{{ $t('user_card.show_repeats') }}
@@ -32,27 +32,27 @@
</template>
<button
v-if="relationship.blocking"
- class="btn btn-default btn-block dropdown-item"
+ class="btn button-default btn-block dropdown-item"
@click="unblockUser"
>
{{ $t('user_card.unblock') }}
</button>
<button
v-else
- class="btn btn-default btn-block dropdown-item"
+ class="btn button-default btn-block dropdown-item"
@click="blockUser"
>
{{ $t('user_card.block') }}
</button>
<button
- class="btn btn-default btn-block dropdown-item"
+ class="btn button-default btn-block dropdown-item"
@click="reportUser"
>
{{ $t('user_card.report') }}
</button>
<button
v-if="pleromaChatMessagesAvailable"
- class="btn btn-default btn-block dropdown-item"
+ class="btn button-default btn-block dropdown-item"
@click="openChat"
>
{{ $t('user_card.message') }}
@@ -61,7 +61,7 @@
</div>
<div
slot="trigger"
- class="btn btn-default ellipsis-button"
+ class="ellipsis-button"
>
<FAIcon
class="icon"
diff --git a/src/components/async_component_error/async_component_error.vue b/src/components/async_component_error/async_component_error.vue
index b68b98f97fb0963ff53bfad9fda2e2c3f96cb52a..b1b59638d594d33561ca3813e0efef0001975ce8 100644
--- a/src/components/async_component_error/async_component_error.vue
+++ b/src/components/async_component_error/async_component_error.vue
@@ -8,7 +8,7 @@
{{ $t('general.error_retry') }}
</p>
<button
- class="btn"
+ class="btn button-default"
@click="retry"
>
{{ $t('general.retry') }}
diff --git a/src/components/attachment/attachment.js b/src/components/attachment/attachment.js
index 3877b67f316c90887a6e7386e996722aaa800d96..5f5779a0694ffb402cddd527d6f2d22fbc62a2d5 100644
--- a/src/components/attachment/attachment.js
+++ b/src/components/attachment/attachment.js
@@ -9,7 +9,8 @@ import {
faMusic,
faImage,
faVideo,
- faPlayCircle
+ faPlayCircle,
+ faTimes
} from '@fortawesome/free-solid-svg-icons'
library.add(
@@ -17,7 +18,8 @@ library.add(
faMusic,
faImage,
faVideo,
- faPlayCircle
+ faPlayCircle,
+ faTimes
)
const Attachment = {
diff --git a/src/components/attachment/attachment.vue b/src/components/attachment/attachment.vue
index f1fac2c8472f97655fd2f5225f80978dafa3901e..b072b1703c3104e961a3967f50e3653d5c6bc1e8 100644
--- a/src/components/attachment/attachment.vue
+++ b/src/components/attachment/attachment.vue
@@ -42,15 +42,13 @@
icon="play-circle"
/>
</a>
- <div
+ <button
v-if="nsfw && hideNsfwLocal && !hidden"
- class="hider"
+ class="button-unstyled -padded hider"
+ @click.prevent="toggleHidden"
>
- <a
- href="#"
- @click.prevent="toggleHidden"
- >Hide</a>
- </div>
+ <FAIcon icon="times" />
+ </button>
<a
v-if="type === 'image' && (!hidden || preloadImage)"
@@ -234,15 +232,23 @@
.hider {
position: absolute;
right: 0;
- white-space: nowrap;
margin: 10px;
padding: 5px;
- background: rgba(230,230,230,0.6);
- font-weight: bold;
z-index: 4;
- line-height: 1;
border-radius: $fallback--tooltipRadius;
border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
+ text-align: center;
+ width: 2em;
+ height: 2em;
+ font-size: 1.25em;
+ // TODO: theming? hard to theme with unknown background image color
+ background: rgba(230, 230, 230, 0.7);
+ .svg-inline--fa {
+ color: rgba(0, 0, 0, 0.6);
+ }
+ &:hover .svg-inline--fa {
+ color: rgba(0, 0, 0, 0.9);
+ }
}
video {
diff --git a/src/components/block_card/block_card.vue b/src/components/block_card/block_card.vue
index 5b00b738a7e580e3366c515d619a6a008e53a430..2fe66d4c8e61c1e62487f11e2d5f7d01e4e05202 100644
--- a/src/components/block_card/block_card.vue
+++ b/src/components/block_card/block_card.vue
@@ -3,7 +3,7 @@
<div class="block-card-content-container">
<button
v-if="blocked"
- class="btn btn-default"
+ class="btn button-default"
:disabled="progress"
@click="unblockUser"
>
@@ -16,7 +16,7 @@
</button>
<button
v-else
- class="btn btn-default"
+ class="btn button-default"
:disabled="progress"
@click="blockUser"
>
diff --git a/src/components/chat_list/chat_list.vue b/src/components/chat_list/chat_list.vue
index 17e2f7950ed4e7e0f941a034451620c119ba168e..e23eec135b1a60ccbf2f8d2e1a66e478e294a2cc 100644
--- a/src/components/chat_list/chat_list.vue
+++ b/src/components/chat_list/chat_list.vue
@@ -10,7 +10,10 @@
<span class="title">
{{ $t("chats.chats") }}
</span>
- <button @click="newChat">
+ <button
+ class="button-default"
+ @click="newChat"
+ >
{{ $t("chats.new") }}
</button>
</div>
diff --git a/src/components/chat_message/chat_message.scss b/src/components/chat_message/chat_message.scss
index 5af744a3581083206a68b2334a2fd22451c8b207..e4351d3b800814936eab4030c85f39dbef001788 100644
--- a/src/components/chat_message/chat_message.scss
+++ b/src/components/chat_message/chat_message.scss
@@ -31,9 +31,6 @@
color: $fallback--text;
color: var(--text, $fallback--text);
}
-
- border-radius: $fallback--chatMessageRadius;
- border-radius: var(--chatMessageRadius, $fallback--chatMessageRadius);
}
.popover {
diff --git a/src/components/chat_message/chat_message.vue b/src/components/chat_message/chat_message.vue
index 3849ab6e7afbe3c552bbb3233b4d09e581c30e9c..0777f8809fd5cb8049e3a81c467c2516d2eab558 100644
--- a/src/components/chat_message/chat_message.vue
+++ b/src/components/chat_message/chat_message.vue
@@ -53,7 +53,7 @@
<div slot="content">
<div class="dropdown-menu">
<button
- class="dropdown-item dropdown-item-icon"
+ class="button-default dropdown-item dropdown-item-icon"
@click="deleteMessage"
>
<FAIcon icon="times" /> {{ $t("chats.delete") }}
@@ -62,7 +62,7 @@
</div>
<button
slot="trigger"
- class="menu-icon"
+ class="button-default menu-icon"
:title="$t('chats.more')"
>
<FAIcon icon="ellipsis-h" />
diff --git a/src/components/conversation/conversation.vue b/src/components/conversation/conversation.vue
index fd0dfa8fb0dc1172d86d7fde67c4fb66154f72c3..353859b8e241b3bd88805b2d107fc66fbd49c21f 100644
--- a/src/components/conversation/conversation.vue
+++ b/src/components/conversation/conversation.vue
@@ -10,12 +10,13 @@
class="panel-heading conversation-heading"
>
<span class="title"> {{ $t('timeline.conversation') }} </span>
- <span v-if="collapsable">
- <a
- href="#"
- @click.prevent="toggleExpanded"
- >{{ $t('timeline.collapse') }}</a>
- </span>
+ <button
+ v-if="collapsable"
+ class="button-unstyled -link"
+ @click.prevent="toggleExpanded"
+ >
+ {{ $t('timeline.collapse') }}
+ </button>
</div>
<status
v-for="status in conversation"
diff --git a/src/components/desktop_nav/desktop_nav.scss b/src/components/desktop_nav/desktop_nav.scss
index 028692a93798d0e5ba52a5cc1f2757dde265b7e9..7ec0caf7bd8576f5e90b48e459a6f01312b25ce3 100644
--- a/src/components/desktop_nav/desktop_nav.scss
+++ b/src/components/desktop_nav/desktop_nav.scss
@@ -80,12 +80,14 @@
.nav-icon {
margin-left: 0.2em;
width: 2em;
+ height: 100%;
text-align: center;
- }
+ cursor: pointer;
- a, a svg {
- color: $fallback--link;
- color: var(--topBarLink, $fallback--link);
+ .svg-inline--fa {
+ color: $fallback--link;
+ color: var(--topBarLink, $fallback--link);
+ }
}
.sitename {
diff --git a/src/components/desktop_nav/desktop_nav.vue b/src/components/desktop_nav/desktop_nav.vue
index 3a6e4033327850dccc1e2045b6a702c370f44098..762aa610a9a896f5816067632a2334abaae362bd 100644
--- a/src/components/desktop_nav/desktop_nav.vue
+++ b/src/components/desktop_nav/desktop_nav.vue
@@ -36,9 +36,8 @@
@toggled="onSearchBarToggled"
@click.stop.native
/>
- <a
- href="#"
- class="nav-icon"
+ <button
+ class="button-unstyled nav-icon"
@click.stop="openSettingsModal"
>
<FAIcon
@@ -47,29 +46,32 @@
icon="cog"
:title="$t('nav.preferences')"
/>
- </a>
+ </button>
<a
v-if="currentUser && currentUser.role === 'admin'"
href="/pleroma/admin/#/login-pleroma"
class="nav-icon"
target="_blank"
- ><FAIcon
- fixed-width
- class="fa-scale-110 fa-old-padding"
- icon="tachometer-alt"
- :title="$t('nav.administration')"
- /></a>
- <a
+ >
+ <FAIcon
+ fixed-width
+ class="fa-scale-110 fa-old-padding"
+ icon="tachometer-alt"
+ :title="$t('nav.administration')"
+ />
+ </a>
+ <button
v-if="currentUser"
- href="#"
- class="nav-icon"
+ class="button-unstyled nav-icon"
@click.prevent="logout"
- ><FAIcon
- fixed-width
- class="fa-scale-110 fa-old-padding"
- icon="sign-out-alt"
- :title="$t('login.logout')"
- /></a>
+ >
+ <FAIcon
+ fixed-width
+ class="fa-scale-110 fa-old-padding"
+ icon="sign-out-alt"
+ :title="$t('login.logout')"
+ />
+ </button>
</div>
</div>
</nav>
diff --git a/src/components/domain_mute_card/domain_mute_card.vue b/src/components/domain_mute_card/domain_mute_card.vue
index 97aee2431a7b0802973b7900ceb83eb768b3791e..3b5aec141b68640be0d575d89a4365cbc4e19634 100644
--- a/src/components/domain_mute_card/domain_mute_card.vue
+++ b/src/components/domain_mute_card/domain_mute_card.vue
@@ -6,7 +6,7 @@
<ProgressButton
v-if="muted"
:click="unmuteDomain"
- class="btn btn-default"
+ class="btn button-default"
>
{{ $t('domain_mute_card.unmute') }}
<template slot="progress">
@@ -16,7 +16,7 @@
<ProgressButton
v-else
:click="muteDomain"
- class="btn btn-default"
+ class="btn button-default"
>
{{ $t('domain_mute_card.mute') }}
<template slot="progress">
diff --git a/src/components/emoji_reactions/emoji_reactions.vue b/src/components/emoji_reactions/emoji_reactions.vue
index 2f14b5b2e2c0d6a6b51b6fd53ac0279506778189..51d5035989f70ded53f4c5b97e1aba7088f8ef72 100644
--- a/src/components/emoji_reactions/emoji_reactions.vue
+++ b/src/components/emoji_reactions/emoji_reactions.vue
@@ -6,7 +6,7 @@
:users="accountsForEmoji[reaction.name]"
>
<button
- class="emoji-reaction btn btn-default"
+ class="emoji-reaction btn button-default"
:class="{ 'picked-reaction': reactedWith(reaction.name), 'not-clickable': !loggedIn }"
@click="emojiOnClick(reaction.name, $event)"
@mouseenter="fetchEmojiReactionsByIfMissing()"
diff --git a/src/components/export_import/export_import.vue b/src/components/export_import/export_import.vue
index ae00487f28cb18ee9ecef55f610d231227131998..8ffe34f8fb7c16e9413c569b7a86f979723dfc29 100644
--- a/src/components/export_import/export_import.vue
+++ b/src/components/export_import/export_import.vue
@@ -2,13 +2,13 @@
<div class="import-export-container">
<slot name="before" />
<button
- class="btn"
+ class="btn button-default"
@click="exportData"
>
{{ exportLabel }}
</button>
<button
- class="btn"
+ class="btn button-default"
@click="importData"
>
{{ importLabel }}
diff --git a/src/components/exporter/exporter.vue b/src/components/exporter/exporter.vue
index ecd71bf1f63497f6ce04e9f5f7940342aba2b7b0..d6a030880ec077873574ad50b64e85f4ee18964a 100644
--- a/src/components/exporter/exporter.vue
+++ b/src/components/exporter/exporter.vue
@@ -11,7 +11,7 @@
</div>
<button
v-else
- class="btn btn-default"
+ class="btn button-default"
@click="process"
>
{{ exportButtonLabel }}
diff --git a/src/components/extra_buttons/extra_buttons.vue b/src/components/extra_buttons/extra_buttons.vue
index a33f6e87ab1af552636d88b6f862f1bbe6fbf6cc..5c9e1963e7ab9b28cdfc7cb220e2e24bf27caa54 100644
--- a/src/components/extra_buttons/extra_buttons.vue
+++ b/src/components/extra_buttons/extra_buttons.vue
@@ -12,7 +12,7 @@
<div class="dropdown-menu">
<button
v-if="canMute && !status.thread_muted"
- class="dropdown-item dropdown-item-icon"
+ class="button-default dropdown-item dropdown-item-icon"
@click.prevent="muteConversation"
>
<FAIcon
@@ -22,7 +22,7 @@
</button>
<button
v-if="canMute && status.thread_muted"
- class="dropdown-item dropdown-item-icon"
+ class="button-default dropdown-item dropdown-item-icon"
@click.prevent="unmuteConversation"
>
<FAIcon
@@ -32,7 +32,7 @@
</button>
<button
v-if="!status.pinned && canPin"
- class="dropdown-item dropdown-item-icon"
+ class="button-default dropdown-item dropdown-item-icon"
@click.prevent="pinStatus"
@click="close"
>
@@ -43,7 +43,7 @@
</button>
<button
v-if="status.pinned && canPin"
- class="dropdown-item dropdown-item-icon"
+ class="button-default dropdown-item dropdown-item-icon"
@click.prevent="unpinStatus"
@click="close"
>
@@ -54,7 +54,7 @@
</button>
<button
v-if="!status.bookmarked"
- class="dropdown-item dropdown-item-icon"
+ class="button-default dropdown-item dropdown-item-icon"
@click.prevent="bookmarkStatus"
@click="close"
>
@@ -65,7 +65,7 @@
</button>
<button
v-if="status.bookmarked"
- class="dropdown-item dropdown-item-icon"
+ class="button-default dropdown-item dropdown-item-icon"
@click.prevent="unbookmarkStatus"
@click="close"
>
@@ -76,7 +76,7 @@
</button>
<button
v-if="canDelete"
- class="dropdown-item dropdown-item-icon"
+ class="button-default dropdown-item dropdown-item-icon"
@click.prevent="deleteStatus"
@click="close"
>
@@ -86,7 +86,7 @@
/><span>{{ $t("status.delete") }}</span>
</button>
<button
- class="dropdown-item dropdown-item-icon"
+ class="button-default dropdown-item dropdown-item-icon"
@click.prevent="copyLink"
@click="close"
>
@@ -97,12 +97,15 @@
</button>
</div>
</div>
- <span slot="trigger">
+ <button
+ slot="trigger"
+ class="ExtraButtons button-unstyled -padded"
+ >
<FAIcon
- class="ExtraButtons fa-scale-110 fa-old-padding"
+ class="fa-scale-110 fa-old-padding"
icon="ellipsis-h"
/>
- </span>
+ </button>
</Popover>
</template>
@@ -115,8 +118,7 @@
cursor: pointer;
position: static;
- &:hover,
- .extra-button-popover.open & {
+ &:hover .svg-inline--fa {
color: $fallback--text;
color: var(--text, $fallback--text);
}
diff --git a/src/components/favorite_button/favorite_button.js b/src/components/favorite_button/favorite_button.js
index 2a2ee84ab8a056bc53c91a0a441aa5137c9f5786..5cd05f73eb061046d46cd88b2a9de855d5286344 100644
--- a/src/components/favorite_button/favorite_button.js
+++ b/src/components/favorite_button/favorite_button.js
@@ -31,11 +31,6 @@ const FavoriteButton = {
}
},
computed: {
- classes () {
- return {
- '-favorited': this.status.favorited
- }
- },
...mapGetters(['mergedConfig'])
}
}
diff --git a/src/components/favorite_button/favorite_button.vue b/src/components/favorite_button/favorite_button.vue
index dfe12f86734fd5d99fae886b8d5bbdb20968378e..d54ae78c94a54d496a9552671a1b65ff118f1ac6 100644
--- a/src/components/favorite_button/favorite_button.vue
+++ b/src/components/favorite_button/favorite_button.vue
@@ -1,18 +1,20 @@
<template>
- <div v-if="loggedIn">
- <FAIcon
- :class="classes"
- class="FavoriteButton fa-scale-110 fa-old-padding -interactive"
+ <div>
+ <button
+ v-if="loggedIn"
+ class="FavoriteButton -interactive button-unstyled -padded"
+ :class="status.favorited && '-favorited'"
:title="$t('tool_tip.favorite')"
- :icon="[status.favorited ? 'fas' : 'far', 'star']"
- :spin="animated"
@click.prevent="favorite()"
- />
- <span v-if="!mergedConfig.hidePostStats && status.fave_num > 0">{{ status.fave_num }}</span>
- </div>
- <div v-else>
+ >
+ <FAIcon
+ class="fa-scale-110 fa-old-padding"
+ :icon="[status.favorited ? 'fas' : 'far', 'star']"
+ :spin="animated"
+ />
+ </button>
<FAIcon
- :class="classes"
+ v-else
class="FavoriteButton fa-scale-110 fa-old-padding"
:title="$t('tool_tip.favorite')"
:icon="['far', 'star']"
@@ -28,18 +30,16 @@
.FavoriteButton {
&.-interactive {
- cursor: pointer;
- animation-duration: 0.6s;
- &:hover {
+ .svg-inline--fa {
+ animation-duration: 0.6s;
+ }
+
+ &:hover .svg-inline--fa,
+ &.-favorited .svg-inline--fa {
color: $fallback--cOrange;
color: var(--cOrange, $fallback--cOrange);
}
}
-
- &.-favorited {
- color: $fallback--cOrange;
- color: var(--cOrange, $fallback--cOrange);
- }
}
</style>
diff --git a/src/components/follow_button/follow_button.vue b/src/components/follow_button/follow_button.vue
index bfdc137b74e3edd53b6721e2c8308f46d4f17c1d..7f85f1d76f0c74d07b8f13ed4260bb9c1b487dd4 100644
--- a/src/components/follow_button/follow_button.vue
+++ b/src/components/follow_button/follow_button.vue
@@ -1,6 +1,6 @@
<template>
<button
- class="btn btn-default follow-button"
+ class="btn button-default follow-button"
:class="{ toggled: isPressed }"
:disabled="inProgress"
:title="title"
diff --git a/src/components/follow_request_card/follow_request_card.vue b/src/components/follow_request_card/follow_request_card.vue
index b217b8ed83e6835f864826925c5d0db48d761a16..1b12ba4b23a545d47c0b89876d25d7a068bdc5bc 100644
--- a/src/components/follow_request_card/follow_request_card.vue
+++ b/src/components/follow_request_card/follow_request_card.vue
@@ -2,13 +2,13 @@
<basic-user-card :user="user">
<div class="follow-request-card-content-container">
<button
- class="btn btn-default"
+ class="btn button-default"
@click="approveUser"
>
{{ $t('user_card.approve') }}
</button>
<button
- class="btn btn-default"
+ class="btn button-default"
@click="denyUser"
>
{{ $t('user_card.deny') }}
diff --git a/src/components/image_cropper/image_cropper.vue b/src/components/image_cropper/image_cropper.vue
index 75def6125e3179b0315bf02407d60b47b5e05ce0..448461b4d4bbdf691d2d58378e4f66ce7ae0bc81 100644
--- a/src/components/image_cropper/image_cropper.vue
+++ b/src/components/image_cropper/image_cropper.vue
@@ -11,21 +11,21 @@
</div>
<div class="image-cropper-buttons-wrapper">
<button
- class="btn"
+ class="button-default btn"
type="button"
:disabled="submitting"
@click="submit()"
v-text="saveText"
/>
<button
- class="btn"
+ class="button-default btn"
type="button"
:disabled="submitting"
@click="destroy"
v-text="cancelText"
/>
<button
- class="btn"
+ class="button-default btn"
type="button"
:disabled="submitting"
@click="submit(false)"
diff --git a/src/components/importer/importer.vue b/src/components/importer/importer.vue
index c4fe5b002d08003dcb210f867c21d009608599dc..210823f513828c56f4e85ee9232e7e095970e0aa 100644
--- a/src/components/importer/importer.vue
+++ b/src/components/importer/importer.vue
@@ -15,7 +15,7 @@
/>
<button
v-else
- class="btn btn-default"
+ class="btn button-default"
@click="submit"
>
{{ submitButtonLabel }}
diff --git a/src/components/login_form/login_form.vue b/src/components/login_form/login_form.vue
index a1f77210d65ab35ea143694f75ba11f0bb61c3cd..bfabb9460bdc99e5b0da374d79ddf3bf0ed2e848 100644
--- a/src/components/login_form/login_form.vue
+++ b/src/components/login_form/login_form.vue
@@ -61,7 +61,7 @@
<button
:disabled="loggingIn"
type="submit"
- class="btn btn-default"
+ class="btn button-default"
>
{{ $t('login.login') }}
</button>
diff --git a/src/components/media_upload/media_upload.vue b/src/components/media_upload/media_upload.vue
index 88251a265a381254af3ec5a70c9dfc4512d5287e..e955aa7246e5afdda1b2b03e51f3640d0b218a68 100644
--- a/src/components/media_upload/media_upload.vue
+++ b/src/components/media_upload/media_upload.vue
@@ -1,33 +1,29 @@
<template>
- <div
+ <label
class="media-upload"
:class="{ disabled: disabled }"
+ :title="$t('tool_tip.media_upload')"
>
- <label
- class="label"
- :title="$t('tool_tip.media_upload')"
+ <FAIcon
+ v-if="uploading"
+ class="progress-icon"
+ icon="circle-notch"
+ spin
+ />
+ <FAIcon
+ v-if="!uploading"
+ class="new-icon"
+ icon="upload"
+ />
+ <input
+ v-if="uploadReady"
+ :disabled="disabled"
+ type="file"
+ style="position: fixed; top: -100em"
+ multiple="true"
+ @change="change"
>
- <FAIcon
- v-if="uploading"
- class="progress-icon"
- icon="circle-notch"
- spin
- />
- <FAIcon
- v-if="!uploading"
- class="new-icon"
- icon="upload"
- />
- <input
- v-if="uploadReady"
- :disabled="disabled"
- type="file"
- style="position: fixed; top: -100em"
- multiple="true"
- @change="change"
- >
- </label>
- </div>
+ </label>
</template>
<script src="./media_upload.js" ></script>
@@ -36,12 +32,6 @@
@import '../../_variables.scss';
.media-upload {
- .label {
- display: inline-block;
- }
-
- .new-icon {
- cursor: pointer;
- }
+ cursor: pointer;
}
</style>
diff --git a/src/components/mfa_form/recovery_form.vue b/src/components/mfa_form/recovery_form.vue
index 789536494b8abe0c296e18c92d0318b17e553b23..0bf68e27cbfee4399a92a4ea94435658375fc5e2 100644
--- a/src/components/mfa_form/recovery_form.vue
+++ b/src/components/mfa_form/recovery_form.vue
@@ -23,23 +23,23 @@
<div class="form-group">
<div class="login-bottom">
<div>
- <a
- href="#"
+ <button
+ class="button-unstyled -link"
@click.prevent="requireTOTP"
>
{{ $t('login.enter_two_factor_code') }}
- </a>
+ </button>
<br>
- <a
- href="#"
+ <button
+ class="button-unstyled -link"
@click.prevent="abortMFA"
>
{{ $t('general.cancel') }}
- </a>
+ </button>
</div>
<button
type="submit"
- class="btn btn-default"
+ class="btn button-default"
>
{{ $t('general.verify') }}
</button>
diff --git a/src/components/mfa_form/totp_form.vue b/src/components/mfa_form/totp_form.vue
index 9401cad554d2c9ab5d0c0766d7d35e2034878a2e..79230148ee34b9d3cd20f318b75a450e38cc518f 100644
--- a/src/components/mfa_form/totp_form.vue
+++ b/src/components/mfa_form/totp_form.vue
@@ -25,23 +25,23 @@
<div class="form-group">
<div class="login-bottom">
<div>
- <a
- href="#"
+ <button
+ class="button-unstyled -link"
@click.prevent="requireRecovery"
>
{{ $t('login.enter_recovery_code') }}
- </a>
+ </button>
<br>
- <a
- href="#"
+ <button
+ class="button-unstyled -link"
@click.prevent="abortMFA"
>
{{ $t('general.cancel') }}
- </a>
+ </button>
</div>
<button
type="submit"
- class="btn btn-default"
+ class="btn button-default"
>
{{ $t('general.verify') }}
</button>
diff --git a/src/components/mobile_nav/mobile_nav.vue b/src/components/mobile_nav/mobile_nav.vue
index 5304a5006f7c388c6d3fcc4cc35d9e533fefbe35..0f0ea45745a43277e36b8006e006542fcb66dbc6 100644
--- a/src/components/mobile_nav/mobile_nav.vue
+++ b/src/components/mobile_nav/mobile_nav.vue
@@ -9,9 +9,8 @@
@click="scrollToTop()"
>
<div class="item">
- <a
- href="#"
- class="mobile-nav-button"
+ <button
+ class="button-unstyled mobile-nav-button"
@click.stop.prevent="toggleMobileSidebar()"
>
<FAIcon
@@ -22,7 +21,7 @@
v-if="unreadChatCount"
class="alert-dot"
/>
- </a>
+ </button>
<router-link
v-if="!hideSitename"
class="site-name"
@@ -33,10 +32,9 @@
</router-link>
</div>
<div class="item right">
- <a
+ <button
v-if="currentUser"
- class="mobile-nav-button"
- href="#"
+ class="button-unstyled mobile-nav-button"
@click.stop.prevent="openMobileNotifications()"
>
<FAIcon
@@ -47,7 +45,7 @@
v-if="unseenNotificationsCount"
class="alert-dot"
/>
- </a>
+ </button>
</div>
</nav>
<div
diff --git a/src/components/mobile_post_status_button/mobile_post_status_button.vue b/src/components/mobile_post_status_button/mobile_post_status_button.vue
index 50529878d13e064ce17b3e5a835bcdda4ceb45c9..767f82446b462063112f904da32a10b05dad0aae 100644
--- a/src/components/mobile_post_status_button/mobile_post_status_button.vue
+++ b/src/components/mobile_post_status_button/mobile_post_status_button.vue
@@ -1,7 +1,7 @@
<template>
<div v-if="isLoggedIn">
<button
- class="new-status-button"
+ class="button-default new-status-button"
:class="{ 'hidden': isHidden }"
@click="openPostForm"
>
diff --git a/src/components/moderation_tools/moderation_tools.vue b/src/components/moderation_tools/moderation_tools.vue
index 60fa6cebcb70d262792b40e3d25cf232fca7cc36..0ae9246bfbe935283b0be6f8f65dc43c89916da3 100644
--- a/src/components/moderation_tools/moderation_tools.vue
+++ b/src/components/moderation_tools/moderation_tools.vue
@@ -124,7 +124,7 @@
</div>
<button
slot="trigger"
- class="btn btn-default btn-block"
+ class="btn button-default btn-block"
:class="{ toggled }"
>
{{ $t('user_card.admin_menu.moderation') }}
@@ -141,13 +141,13 @@
<p>{{ $t('user_card.admin_menu.delete_user_confirmation') }}</p>
<template slot="footer">
<button
- class="btn btn-default"
+ class="btn button-default"
@click="deleteUserDialog(false)"
>
{{ $t('general.cancel') }}
</button>
<button
- class="btn btn-default danger"
+ class="btn button-default danger"
@click="deleteUser()"
>
{{ $t('user_card.admin_menu.delete_user') }}
diff --git a/src/components/mute_card/mute_card.vue b/src/components/mute_card/mute_card.vue
index 9611fb8290d0f21061a21308bb755360df02bc2d..ca33c6c53b134d26bfd13b4e20bf45070d654a2b 100644
--- a/src/components/mute_card/mute_card.vue
+++ b/src/components/mute_card/mute_card.vue
@@ -3,7 +3,7 @@
<div class="mute-card-content-container">
<button
v-if="muted"
- class="btn btn-default"
+ class="btn button-default"
:disabled="progress"
@click="unmuteUser"
>
@@ -16,7 +16,7 @@
</button>
<button
v-else
- class="btn btn-default"
+ class="btn button-default"
:disabled="progress"
@click="muteUser"
>
diff --git a/src/components/notification/notification.vue b/src/components/notification/notification.vue
index 2bbde10898ef90cd8b91e62ba15553a4b45829e5..ba3648fd076c30553f96f6766da648985891a21d 100644
--- a/src/components/notification/notification.vue
+++ b/src/components/notification/notification.vue
@@ -14,14 +14,13 @@
{{ notification.from_profile.screen_name }}
</router-link>
</small>
- <a
- href="#"
- class="unmute"
+ <button
+ class="button-unstyled unmute"
@click.prevent="toggleMute"
><FAIcon
class="fa-scale-110 fa-old-padding"
icon="eye-slash"
- /></a>
+ /></button>
</div>
<div
v-else
@@ -132,14 +131,14 @@
/>
</span>
</div>
- <a
+ <button
v-if="needMute"
- href="#"
+ class="button-unstyled"
@click.prevent="toggleMute"
><FAIcon
class="fa-scale-110 fa-old-padding"
icon="eye-slash"
- /></a>
+ /></button>
</span>
<div
v-if="notification.type === 'follow' || notification.type === 'follow_request'"
diff --git a/src/components/notifications/notifications.vue b/src/components/notifications/notifications.vue
index b976026ee2b3bab73e06bb946ebdd546337445ea..663f623baded5e02191bc32340119e47dd996345 100644
--- a/src/components/notifications/notifications.vue
+++ b/src/components/notifications/notifications.vue
@@ -17,7 +17,7 @@
</div>
<button
v-if="unseenCount"
- class="read-button"
+ class="button-default read-button"
@click.prevent="markAsSeen"
>
{{ $t('notifications.read') }}
@@ -41,15 +41,15 @@
>
{{ $t('notifications.no_more_notifications') }}
</div>
- <a
+ <button
v-else-if="!loading"
- href="#"
+ class="button-unstyled -link"
@click.prevent="fetchOlderNotifications()"
>
<div class="new-status-notification text-center panel-footer">
{{ minimalMode ? $t('interactions.load_older') : $t('notifications.load_older') }}
</div>
- </a>
+ </button>
<div
v-else
class="new-status-notification text-center panel-footer"
diff --git a/src/components/password_reset/password_reset.vue b/src/components/password_reset/password_reset.vue
index 0deb9ccf4c00f7995da216de772fdee1f6b0a2b3..a931cb5aedfb8a550cac3f84ebf2d8f629dd6886 100644
--- a/src/components/password_reset/password_reset.vue
+++ b/src/components/password_reset/password_reset.vue
@@ -51,7 +51,7 @@
<button
:disabled="isPending"
type="submit"
- class="btn btn-default btn-block"
+ class="btn button-default btn-block"
>
{{ $t('general.submit') }}
</button>
diff --git a/src/components/poll/poll.vue b/src/components/poll/poll.vue
index 5f54b416164ff2031906c8195ae9e30cca39f6d7..264a5f03eae3322773bbe2552383558e6cf1b99f 100644
--- a/src/components/poll/poll.vue
+++ b/src/components/poll/poll.vue
@@ -49,7 +49,7 @@
<div class="footer faint">
<button
v-if="!showResults"
- class="btn btn-default poll-vote-button"
+ class="btn button-default poll-vote-button"
type="button"
:disabled="isDisabled"
@click="vote"
diff --git a/src/components/post_status_form/post_status_form.vue b/src/components/post_status_form/post_status_form.vue
index 42d3152b5946364b5b5b68d4e1cc037a0e00a95a..ed830f573fa0027943e765474174132f751dc0a6 100644
--- a/src/components/post_status_form/post_status_form.vue
+++ b/src/components/post_status_form/post_status_form.vue
@@ -24,12 +24,12 @@
tag="p"
class="visibility-notice"
>
- <a
- href="#"
+ <button
+ class="button-unstyled -link"
@click="openProfileTab"
>
{{ $t('post_status.account_not_locked_warning_link') }}
- </a>
+ </button>
</i18n>
<p
v-if="!hideScopeNotice && newStatus.visibility === 'public'"
@@ -243,38 +243,34 @@
@upload-failed="uploadFailed"
@all-uploaded="finishedUploadingFiles"
/>
- <div
- class="emoji-icon"
+ <button
+ class="emoji-icon button-unstyled"
+ :title="$t('emoji.add_emoji')"
+ @click="showEmojiPicker"
>
- <div
- :title="$t('emoji.add_emoji')"
- class="btn btn-default"
- @click="showEmojiPicker"
- >
- <FAIcon icon="smile-beam" />
- </div>
- </div>
- <div
+ <FAIcon icon="smile-beam" />
+ </button>
+ <button
v-if="pollsAvailable"
- class="poll-icon"
+ class="poll-icon button-unstyled"
:class="{ selected: pollFormVisible }"
:title="$t('polls.add_poll')"
@click="togglePollForm"
>
<FAIcon icon="poll-h" />
- </div>
+ </button>
</div>
<button
v-if="posting"
disabled
- class="btn btn-default"
+ class="btn button-default"
>
{{ $t('post_status.posting') }}
</button>
<button
v-else-if="isOverLengthLimit"
disabled
- class="btn btn-default"
+ class="btn button-default"
>
{{ $t('general.submit') }}
</button>
@@ -282,7 +278,7 @@
<button
v-else
:disabled="uploadingFiles || disableSubmit"
- class="btn btn-default"
+ class="btn button-default"
@touchstart.stop.prevent="postStatus($event, newStatus)"
@click.stop.prevent="postStatus($event, newStatus)"
>
diff --git a/src/components/react_button/react_button.vue b/src/components/react_button/react_button.vue
index e508a3e9c4feb7c1a333501778b112afaaa4b683..ea4a8a9ba8137cedd725282c57d209f07d2518ca 100644
--- a/src/components/react_button/react_button.vue
+++ b/src/components/react_button/react_button.vue
@@ -38,13 +38,16 @@
<div class="reaction-bottom-fader" />
</div>
</div>
- <span slot="trigger">
+ <button
+ slot="trigger"
+ class="add-reaction-button button-unstyled -padded"
+ :title="$t('tool_tip.add_reaction')"
+ >
<FAIcon
- class="fa-scale-110 fa-old-padding add-reaction-button"
+ class="fa-scale-110 fa-old-padding"
:icon="['far', 'smile-beam']"
- :title="$t('tool_tip.add_reaction')"
/>
- </span>
+ </button>
</Popover>
</template>
@@ -105,7 +108,7 @@
.add-reaction-button {
cursor: pointer;
- &:hover {
+ &:hover .svg-inline--fa {
color: $fallback--text;
color: var(--text, $fallback--text);
}
diff --git a/src/components/registration/registration.vue b/src/components/registration/registration.vue
index a83ca1e527ac7fd4d3c65bacf92621fe3598d6da..100df0d6e576f05f2f538af322807a28474ce52d 100644
--- a/src/components/registration/registration.vue
+++ b/src/components/registration/registration.vue
@@ -211,7 +211,7 @@
<button
:disabled="isPending"
type="submit"
- class="btn btn-default"
+ class="btn button-default"
>
{{ $t('general.submit') }}
</button>
diff --git a/src/components/reply_button/reply_button.vue b/src/components/reply_button/reply_button.vue
index a0ac89416b875c060d343622b1a2edcb56b30822..1b02881a75efe7f540ef29ab9792af389deb3e5e 100644
--- a/src/components/reply_button/reply_button.vue
+++ b/src/components/reply_button/reply_button.vue
@@ -1,13 +1,17 @@
<template>
<div>
- <FAIcon
+ <button
v-if="loggedIn"
- class="ReplyButton fa-scale-110 fa-old-padding -interactive"
- icon="reply"
- :title="$t('tool_tip.reply')"
+ class="button-unstyled ReplyButton -padded -interactive"
:class="{'-active': replying}"
+ :title="$t('tool_tip.reply')"
@click.prevent="$emit('toggle')"
- />
+ >
+ <FAIcon
+ class="fa-scale-110 fa-old-padding"
+ icon="reply"
+ />
+ </button>
<FAIcon
v-else
icon="reply"
@@ -27,10 +31,9 @@
.ReplyButton {
&.-interactive {
- cursor: pointer;
- &:hover,
- &.-active {
+ &:hover .svg-inline--fa,
+ &.-active .svg-inline--fa {
color: $fallback--cBlue;
color: var(--cBlue, $fallback--cBlue);
}
diff --git a/src/components/retweet_button/retweet_button.js b/src/components/retweet_button/retweet_button.js
index 5ee4179a6ba377daccc784d5079f4f73e71a22e5..2103fd0b9b5a92068b3737ef36027b9c9a9ed9ec 100644
--- a/src/components/retweet_button/retweet_button.js
+++ b/src/components/retweet_button/retweet_button.js
@@ -24,11 +24,6 @@ const RetweetButton = {
}
},
computed: {
- classes () {
- return {
- '-repeated': this.status.repeated
- }
- },
mergedConfig () {
return this.$store.getters.mergedConfig
}
diff --git a/src/components/retweet_button/retweet_button.vue b/src/components/retweet_button/retweet_button.vue
index b234f3d914517ae9bb34895c54cf752ea4c2be78..5d4915aa658d91a5bad0c2cebe44215226032d49 100644
--- a/src/components/retweet_button/retweet_button.vue
+++ b/src/components/retweet_button/retweet_button.vue
@@ -1,29 +1,29 @@
<template>
- <div v-if="loggedIn">
- <template v-if="visibility !== 'private' && visibility !== 'direct'">
+ <div>
+ <button
+ v-if="visibility !== 'private' && visibility !== 'direct' && loggedIn"
+ class="button-unstyled -padded RetweetButton -interactive"
+ :class="status.repeated && '-repeated'"
+ >
<FAIcon
- :class="classes"
- class="RetweetButton fa-scale-110 fa-old-padding -interactive"
+ class="fa-scale-110 fa-old-padding"
icon="retweet"
:spin="animated"
:title="$t('tool_tip.repeat')"
@click.prevent="retweet()"
/>
- <span v-if="!mergedConfig.hidePostStats && status.repeat_num > 0">{{ status.repeat_num }}</span>
- </template>
- <template v-else>
- <FAIcon
- :class="classes"
- class="RetweetButton fa-scale-110 fa-old-padding"
- icon="lock"
- :title="$t('timeline.no_retweet_hint')"
- />
- </template>
- </div>
- <div v-else-if="!loggedIn">
+ </button>
+ <FAIcon
+ v-else-if="loggedIn"
+ :class="classes"
+ class="RetweetButton fa-scale-110 fa-old-padding"
+ icon="lock"
+ :title="$t('timeline.no_retweet_hint')"
+ />
<FAIcon
+ v-else
:class="classes"
- class="fa-scale-110 fa-old-padding"
+ class="RetweetButton fa-scale-110 fa-old-padding"
icon="retweet"
:title="$t('tool_tip.repeat')"
/>
@@ -38,18 +38,16 @@
.RetweetButton {
&.-interactive {
- cursor: pointer;
- animation-duration: 0.6s;
- &:hover {
+ .svg-inline--fa {
+ animation-duration: 0.6s;
+ }
+
+ &:hover .svg-inline--fa,
+ &.-repeated .svg-inline--fa {
color: $fallback--cGreen;
color: var(--cGreen, $fallback--cGreen);
}
}
-
- &.-repeated {
- color: $fallback--cGreen;
- color: var(--cGreen, $fallback--cGreen);
- }
}
</style>
diff --git a/src/components/search_bar/search_bar.vue b/src/components/search_bar/search_bar.vue
index 89a601c8a18213648db12d26dd1b9aec366d1b0a..6cf9179e05715ed04a9116d8aed35b9bbb2855c1 100644
--- a/src/components/search_bar/search_bar.vue
+++ b/src/components/search_bar/search_bar.vue
@@ -3,17 +3,18 @@
class="SearchBar"
:class="{ '-expanded': !hidden }"
>
- <a
+ <button
v-if="hidden"
- href="#"
- class="nav-icon"
+ class="button-unstyled nav-icon"
:title="$t('nav.search')"
- ><FAIcon
- fixed-width
- class="fa-scale-110 fa-old-padding"
- icon="search"
@click.prevent.stop="toggleHidden"
- /></a>
+ >
+ <FAIcon
+ fixed-width
+ class="fa-scale-110 fa-old-padding"
+ icon="search"
+ />
+ </button>
<template v-else>
<input
id="search-bar-input"
@@ -25,7 +26,7 @@
@keyup.enter="find(searchTerm)"
>
<button
- class="btn search-button"
+ class="button-default search-button"
@click="find(searchTerm)"
>
<FAIcon
@@ -33,14 +34,16 @@
icon="search"
/>
</button>
- <span>
+ <button
+ class="button-unstyled cancel-search"
+ @click.prevent.stop="toggleHidden"
+ >
<FAIcon
fixed-width
icon="times"
class="cancel-icon fa-scale-110 fa-old-padding"
- @click.prevent.stop="toggleHidden"
/>
- </span>
+ </button>
</template>
</div>
</template>
@@ -69,8 +72,11 @@
flex: 1 0 auto;
}
+ .cancel-search {
+ height: 50px;
+ }
+
.cancel-icon {
- cursor: pointer;
color: $fallback--text;
color: var(--btnTopBarText, $fallback--text);
}
diff --git a/src/components/settings_modal/settings_modal.vue b/src/components/settings_modal/settings_modal.vue
index 6bc64ed0ed9186720929e4e19c9694708f99fe63..552ca41f947a5b3ac2a2754f84815d598bbfc4c5 100644
--- a/src/components/settings_modal/settings_modal.vue
+++ b/src/components/settings_modal/settings_modal.vue
@@ -30,13 +30,13 @@
</template>
</transition>
<button
- class="btn"
+ class="btn button-default"
@click="peekModal"
>
{{ $t('general.peek') }}
</button>
<button
- class="btn"
+ class="btn button-default"
@click="closeModal"
>
{{ $t('general.close') }}
diff --git a/src/components/settings_modal/tabs/mutes_and_blocks_tab.vue b/src/components/settings_modal/tabs/mutes_and_blocks_tab.vue
index 5a1cf2c0634f104cd0b61fa3e1ea8c82c30885c6..63d36bf9a2effe23d99932d6d91b941d5a6b4016 100644
--- a/src/components/settings_modal/tabs/mutes_and_blocks_tab.vue
+++ b/src/components/settings_modal/tabs/mutes_and_blocks_tab.vue
@@ -27,7 +27,7 @@
<div class="bulk-actions">
<ProgressButton
v-if="selected.length > 0"
- class="btn btn-default bulk-action-button"
+ class="btn button-default bulk-action-button"
:click="() => blockUsers(selected)"
>
{{ $t('user_card.block') }}
@@ -37,7 +37,7 @@
</ProgressButton>
<ProgressButton
v-if="selected.length > 0"
- class="btn btn-default"
+ class="btn button-default"
:click="() => unblockUsers(selected)"
>
{{ $t('user_card.unblock') }}
@@ -85,7 +85,7 @@
<div class="bulk-actions">
<ProgressButton
v-if="selected.length > 0"
- class="btn btn-default"
+ class="btn button-default"
:click="() => muteUsers(selected)"
>
{{ $t('user_card.mute') }}
@@ -95,7 +95,7 @@
</ProgressButton>
<ProgressButton
v-if="selected.length > 0"
- class="btn btn-default"
+ class="btn button-default"
:click="() => unmuteUsers(selected)"
>
{{ $t('user_card.unmute') }}
@@ -141,7 +141,7 @@
<div class="bulk-actions">
<ProgressButton
v-if="selected.length > 0"
- class="btn btn-default"
+ class="btn button-default"
:click="() => unmuteDomains(selected)"
>
{{ $t('domain_mute_card.unmute') }}
diff --git a/src/components/settings_modal/tabs/notifications_tab.vue b/src/components/settings_modal/tabs/notifications_tab.vue
index 86eed3f5df843c1f7042a7b57a5833a46e73c213..8f8fe48e1a98ce2fb139981c9711f289d566c337 100644
--- a/src/components/settings_modal/tabs/notifications_tab.vue
+++ b/src/components/settings_modal/tabs/notifications_tab.vue
@@ -21,7 +21,7 @@
<p>{{ $t('settings.notification_mutes') }}</p>
<p>{{ $t('settings.notification_blocks') }}</p>
<button
- class="btn btn-default"
+ class="btn button-default"
@click="updateNotificationSettings"
>
{{ $t('general.submit') }}
diff --git a/src/components/settings_modal/tabs/profile_tab.vue b/src/components/settings_modal/tabs/profile_tab.vue
index d62bc39253eb84c6073b75a89c4239d7a0da85ce..50d3ee630174893f41ffcbb8100c1089325c5f9b 100644
--- a/src/components/settings_modal/tabs/profile_tab.vue
+++ b/src/components/settings_modal/tabs/profile_tab.vue
@@ -150,7 +150,7 @@
</p>
<button
:disabled="newName && newName.length === 0"
- class="btn btn-default"
+ class="btn button-default"
@click="updateProfile"
>
{{ $t('general.submit') }}
@@ -179,7 +179,7 @@
<button
v-show="pickAvatarBtnVisible"
id="pick-avatar"
- class="btn"
+ class="button-default btn"
type="button"
>
{{ $t('settings.upload_a_photo') }}
@@ -224,7 +224,7 @@
/>
<button
v-else-if="bannerPreview"
- class="btn btn-default"
+ class="btn button-default"
@click="submitBanner(banner)"
>
{{ $t('general.submit') }}
@@ -274,7 +274,7 @@
/>
<button
v-else-if="backgroundPreview"
- class="btn btn-default"
+ class="btn button-default"
@click="submitBackground(background)"
>
{{ $t('general.submit') }}
diff --git a/src/components/settings_modal/tabs/security_tab/confirm.vue b/src/components/settings_modal/tabs/security_tab/confirm.vue
index 69b3811b332c6e233e76bbf2525d87f7c2f6fe86..38c2a6101f9bae92239597aa29ae15ca863859d6 100644
--- a/src/components/settings_modal/tabs/security_tab/confirm.vue
+++ b/src/components/settings_modal/tabs/security_tab/confirm.vue
@@ -2,14 +2,14 @@
<div>
<slot />
<button
- class="btn btn-default"
+ class="btn button-default"
:disabled="disabled"
@click="confirm"
>
{{ $t('general.confirm') }}
</button>
<button
- class="btn btn-default"
+ class="btn button-default"
:disabled="disabled"
@click="cancel"
>
diff --git a/src/components/settings_modal/tabs/security_tab/mfa.vue b/src/components/settings_modal/tabs/security_tab/mfa.vue
index 7aca3c8de33125323ed3138b25aacc143389dbfd..455d17b6a7ae217e8a381adfb571186b0e116c0b 100644
--- a/src/components/settings_modal/tabs/security_tab/mfa.vue
+++ b/src/components/settings_modal/tabs/security_tab/mfa.vue
@@ -29,7 +29,7 @@
/>
<button
v-if="!confirmNewBackupCodes"
- class="btn btn-default"
+ class="btn button-default"
@click="getBackupCodes"
>
{{ $t('settings.mfa.generate_new_recovery_codes') }}
@@ -61,7 +61,7 @@
<button
v-if="canSetupOTP"
- class="btn btn-default"
+ class="btn button-default"
@click="cancelSetup"
>
{{ $t('general.cancel') }}
@@ -69,7 +69,7 @@
<button
v-if="canSetupOTP"
- class="btn btn-default"
+ class="btn button-default"
@click="setupOTP"
>
{{ $t('settings.mfa.setup_otp') }}
@@ -108,13 +108,13 @@
>
<div class="confirm-otp-actions">
<button
- class="btn btn-default"
+ class="btn button-default"
@click="doConfirmOTP"
>
{{ $t('settings.mfa.confirm_and_enable') }}
</button>
<button
- class="btn btn-default"
+ class="btn button-default"
@click="cancelSetup"
>
{{ $t('general.cancel') }}
diff --git a/src/components/settings_modal/tabs/security_tab/mfa_totp.vue b/src/components/settings_modal/tabs/security_tab/mfa_totp.vue
index c6f2cc7b8478648a959b3bede8f49297df41abc5..8e767bd027bf0c72fd0de1f9d8c67387afeea271 100644
--- a/src/components/settings_modal/tabs/security_tab/mfa_totp.vue
+++ b/src/components/settings_modal/tabs/security_tab/mfa_totp.vue
@@ -4,7 +4,7 @@
<strong>{{ $t('settings.mfa.otp') }}</strong>
<button
v-if="!isActivated"
- class="btn btn-default"
+ class="btn button-default"
@click="doActivate"
>
{{ $t('general.enable') }}
@@ -12,7 +12,7 @@
<button
v-if="isActivated"
- class="btn btn-default"
+ class="btn button-default"
:disabled="deactivate"
@click="doDeactivate"
>
diff --git a/src/components/settings_modal/tabs/security_tab/security_tab.vue b/src/components/settings_modal/tabs/security_tab/security_tab.vue
index 3d32d73d9602cb0493d1602363ef9abef2abd9d9..56bea1f466c9227d9da50f79e1a6e190182f39cd 100644
--- a/src/components/settings_modal/tabs/security_tab/security_tab.vue
+++ b/src/components/settings_modal/tabs/security_tab/security_tab.vue
@@ -19,7 +19,7 @@
>
</div>
<button
- class="btn btn-default"
+ class="btn button-default"
@click="changeEmail"
>
{{ $t('general.submit') }}
@@ -57,7 +57,7 @@
>
</div>
<button
- class="btn btn-default"
+ class="btn button-default"
@click="changePassword"
>
{{ $t('general.submit') }}
@@ -92,7 +92,7 @@
<td>{{ oauthToken.validUntil }}</td>
<td class="actions">
<button
- class="btn btn-default"
+ class="btn button-default"
@click="revokeToken(oauthToken.id)"
>
{{ $t('settings.revoke_token') }}
@@ -116,7 +116,7 @@
type="password"
>
<button
- class="btn btn-default"
+ class="btn button-default"
@click="deleteAccount"
>
{{ $t('settings.delete_account') }}
@@ -130,7 +130,7 @@
</p>
<button
v-if="!deletingAccount"
- class="btn btn-default"
+ class="btn button-default"
@click="confirmDelete"
>
{{ $t('general.submit') }}
diff --git a/src/components/settings_modal/tabs/theme_tab/preview.vue b/src/components/settings_modal/tabs/theme_tab/preview.vue
index 02fea0b6aa1fce2be26672d3f328b8f5fa3cc947..7ac7b9d3ffe394e53e4a136442271142b1f1bf14 100644
--- a/src/components/settings_modal/tabs/theme_tab/preview.vue
+++ b/src/components/settings_modal/tabs/theme_tab/preview.vue
@@ -15,7 +15,7 @@
<span class="alert error">
{{ $t('settings.style.preview.error') }}
</span>
- <button class="btn">
+ <button class="btn button-default">
{{ $t('settings.style.preview.button') }}
</button>
</div>
@@ -102,7 +102,7 @@
>
<label for="preview_checkbox">{{ $t('settings.style.preview.checkbox') }}</label>
</span>
- <button class="btn">
+ <button class="btn button-default">
{{ $t('settings.style.preview.button') }}
</button>
</div>
diff --git a/src/components/settings_modal/tabs/theme_tab/theme_tab.vue b/src/components/settings_modal/tabs/theme_tab/theme_tab.vue
index 280e19557763233c7dbaf043824d600b41882958..4ab793d66c7c8364b9e3b33cf477f5c9bac94b3f 100644
--- a/src/components/settings_modal/tabs/theme_tab/theme_tab.vue
+++ b/src/components/settings_modal/tabs/theme_tab/theme_tab.vue
@@ -12,13 +12,13 @@
<div class="buttons">
<template v-if="themeWarning.type === 'snapshot_source_mismatch'">
<button
- class="btn"
+ class="btn button-default"
@click="forceLoad"
>
{{ $t('settings.style.switcher.use_source') }}
</button>
<button
- class="btn"
+ class="btn button-default"
@click="forceSnapshot"
>
{{ $t('settings.style.switcher.use_snapshot') }}
@@ -26,7 +26,7 @@
</template>
<template v-else-if="themeWarning.noActionsPossible">
<button
- class="btn"
+ class="btn button-default"
@click="dismissWarning"
>
{{ $t('general.dismiss') }}
@@ -34,13 +34,13 @@
</template>
<template v-else>
<button
- class="btn"
+ class="btn button-default"
@click="forceLoad"
>
{{ $t('settings.style.switcher.load_theme') }}
</button>
<button
- class="btn"
+ class="btn button-default"
@click="dismissWarning"
>
{{ $t('settings.style.switcher.keep_as_is') }}
@@ -131,13 +131,13 @@
<p>{{ $t('settings.theme_help') }}</p>
<div class="tab-header-buttons">
<button
- class="btn"
+ class="btn button-default"
@click="clearOpacity"
>
{{ $t('settings.style.switcher.clear_opacity') }}
</button>
<button
- class="btn"
+ class="btn button-default"
@click="clearV1"
>
{{ $t('settings.style.switcher.clear_all') }}
@@ -238,13 +238,13 @@
<div class="tab-header">
<p>{{ $t('settings.theme_help') }}</p>
<button
- class="btn"
+ class="btn button-default"
@click="clearOpacity"
>
{{ $t('settings.style.switcher.clear_opacity') }}
</button>
<button
- class="btn"
+ class="btn button-default"
@click="clearV1"
>
{{ $t('settings.style.switcher.clear_all') }}
@@ -806,7 +806,7 @@
<div class="tab-header">
<p>{{ $t('settings.radii_help') }}</p>
<button
- class="btn"
+ class="btn button-default"
@click="clearRoundness"
>
{{ $t('settings.style.switcher.clear_all') }}
@@ -936,7 +936,7 @@
/>
</div>
<button
- class="btn"
+ class="btn button-default"
@click="clearShadows"
>
{{ $t('settings.style.switcher.clear_all') }}
@@ -980,7 +980,7 @@
<div class="tab-header">
<p>{{ $t('settings.style.fonts.help') }}</p>
<button
- class="btn"
+ class="btn button-default"
@click="clearFonts"
>
{{ $t('settings.style.switcher.clear_all') }}
@@ -1017,14 +1017,14 @@
<div class="apply-container">
<button
- class="btn submit"
+ class="btn button-default submit"
:disabled="!themeValid"
@click="setCustomTheme"
>
{{ $t('general.apply') }}
</button>
<button
- class="btn"
+ class="btn button-default"
@click="clearAll"
>
{{ $t('settings.style.switcher.reset') }}
diff --git a/src/components/shadow_control/shadow_control.vue b/src/components/shadow_control/shadow_control.vue
index 78f0e544ddc007cd63339b1b5b230b877a00cc25..37d491f046a4d493a58b59e47c1e53aa8ade8f99 100644
--- a/src/components/shadow_control/shadow_control.vue
+++ b/src/components/shadow_control/shadow_control.vue
@@ -84,7 +84,7 @@
/>
</label>
<button
- class="btn btn-default"
+ class="btn button-default"
:disabled="!ready || !present"
@click="del"
>
@@ -94,7 +94,7 @@
/>
</button>
<button
- class="btn btn-default"
+ class="btn button-default"
:disabled="!moveUpValid"
@click="moveUp"
>
@@ -104,7 +104,7 @@
/>
</button>
<button
- class="btn btn-default"
+ class="btn button-default"
:disabled="!moveDnValid"
@click="moveDn"
>
@@ -114,7 +114,7 @@
/>
</button>
<button
- class="btn btn-default"
+ class="btn button-default"
:disabled="usingFallback"
@click="add"
>
diff --git a/src/components/side_drawer/side_drawer.vue b/src/components/side_drawer/side_drawer.vue
index 28c888fe03395b778019e05a6de6ffd147fbef2b..1c14c1abbebc6437676890be15b8ac84cac4039f 100644
--- a/src/components/side_drawer/side_drawer.vue
+++ b/src/components/side_drawer/side_drawer.vue
@@ -144,8 +144,8 @@
</router-link>
</li>
<li @click="toggleDrawer">
- <a
- href="#"
+ <button
+ class="button-unstyled -link"
@click="openSettingsModal"
>
<FAIcon
@@ -153,7 +153,7 @@
class="fa-scale-110 fa-old-padding"
icon="cog"
/> {{ $t("settings.settings") }}
- </a>
+ </button>
</li>
<li @click="toggleDrawer">
<router-link :to="{ name: 'about'}">
@@ -183,8 +183,8 @@
v-if="currentUser"
@click="toggleDrawer"
>
- <a
- href="#"
+ <button
+ class="button-unstyled -link"
@click="doLogout"
>
<FAIcon
@@ -192,7 +192,7 @@
class="fa-scale-110 fa-old-padding"
icon="sign-out-alt"
/> {{ $t("login.logout") }}
- </a>
+ </button>
</li>
</ul>
</div>
@@ -331,12 +331,13 @@
.side-drawer li {
padding: 0;
- a {
+ a, button {
box-sizing: border-box;
display: block;
height: 3em;
line-height: 3em;
padding: 0 0.7em;
+ width: 100%;
&:hover {
background-color: $fallback--lightBg;
diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index 21412faa6d45bf8d53d7204511d1da86f02fa28d..896635ee089b194ed49cabd245933bc6281e2d91 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -47,16 +47,15 @@
>
{{ muteWordHits.join(', ') }}
</small>
- <a
- href="#"
- class="unmute fa-scale-110 fa-old-padding"
+ <button
+ class="unmute button-unstyled"
@click.prevent="toggleMute"
>
<FAIcon
icon="eye-slash"
class="fa-scale-110 fa-old-padding"
/>
- </a>
+ </button>
</div>
</template>
<template v-else>
@@ -201,9 +200,9 @@
icon="external-link-square-alt"
/>
</a>
- <a
+ <button
v-if="expandable && !isPreview"
- href="#"
+ class="button-unstyled"
title="Expand"
@click.prevent="toggleExpanded"
>
@@ -211,17 +210,17 @@
class="fa-scale-110 fa-old-padding"
icon="plus-square"
/>
- </a>
- <a
+ </button>
+ <button
v-if="unmuted"
- href="#"
+ class="button-unstyled"
@click.prevent="toggleMute"
>
<FAIcon
icon="eye-slash"
class="fa-scale-110 fa-old-padding"
/>
- </a>
+ </button>
</span>
</div>
@@ -237,9 +236,8 @@
style="min-width: 0"
:class="{ '-strikethrough': !status.parent_visible }"
>
- <a
- class="reply-to"
- href="#"
+ <button
+ class="button-unstyled reply-to"
:aria-label="$t('tool_tip.reply')"
@click.prevent="gotoOriginal(status.in_reply_to_status_id)"
>
@@ -253,7 +251,7 @@
>
{{ $t('status.reply_to') }}
</span>
- </a>
+ </button>
</StatusPopover>
<span
@@ -286,11 +284,12 @@
:key="reply.id"
:status-id="reply.id"
>
- <a
- href="#"
- class="reply-link"
+ <button
+ class="button-unstyled -link reply-link"
@click.prevent="gotoOriginal(reply.id)"
- >{{ reply.name }}</a>
+ >
+ {{ reply.name }}
+ </button>
</StatusPopover>
</div>
</div>
diff --git a/src/components/status_content/status_content.vue b/src/components/status_content/status_content.vue
index 321cd4772c1c3e4fc3b71d0a66bc9a64c6e85dc7..90bfaf40ce3b2155a9a956c2f81f1fdea47697f0 100644
--- a/src/components/status_content/status_content.vue
+++ b/src/components/status_content/status_content.vue
@@ -12,35 +12,34 @@
@click.prevent="linkClicked"
v-html="status.summary_html"
/>
- <a
+ <button
v-if="longSubject && showingLongSubject"
- href="#"
- class="tall-subject-hider"
+ class="button-unstyled -link tall-subject-hider"
@click.prevent="showingLongSubject=false"
- >{{ $t("status.hide_full_subject") }}</a>
- <a
+ >
+ {{ $t("status.hide_full_subject") }}
+ </button>
+ <button
v-else-if="longSubject"
- class="tall-subject-hider"
+ class="button-unstyled -link tall-subject-hider"
:class="{ 'tall-subject-hider_focused': focused }"
- href="#"
@click.prevent="showingLongSubject=true"
>
{{ $t("status.show_full_subject") }}
- </a>
+ </button>
</div>
<div
:class="{'tall-status': hideTallStatus}"
class="status-content-wrapper"
>
- <a
+ <button
v-if="hideTallStatus"
- class="tall-status-hider"
+ class="button-unstyled -link tall-status-hider"
:class="{ 'tall-status-hider_focused': focused }"
- href="#"
@click.prevent="toggleShowMore"
>
{{ $t("general.show_more") }}
- </a>
+ </button>
<div
v-if="!hideSubjectStatus"
:class="{ 'single-line': singleLine }"
@@ -48,10 +47,9 @@
@click.prevent="linkClicked"
v-html="postBodyHtml"
/>
- <a
+ <button
v-if="hideSubjectStatus"
- href="#"
- class="cw-status-hider"
+ class="button-unstyled -link cw-status-hider"
@click.prevent="toggleShowMore"
>
{{ $t("status.show_content") }}
@@ -79,15 +77,14 @@
v-if="status.card"
icon="link"
/>
- </a>
- <a
+ </button>
+ <button
v-if="showingMore && !fullContent"
- href="#"
- class="status-unhider"
+ class="button-unstyled -link status-unhider"
@click.prevent="toggleShowMore"
>
{{ tallStatus ? $t("general.show_less") : $t("status.hide_content") }}
- </a>
+ </button>
</div>
<div v-if="status.poll && status.poll.options && !hideSubjectStatus">
diff --git a/src/components/tab_switcher/tab_switcher.js b/src/components/tab_switcher/tab_switcher.js
index 6e6e81930265a690a2be8370ea6e1cf3c55c0ffa..76e7ef03d8714d5d9199aca7c30cea680d14ebfd 100644
--- a/src/components/tab_switcher/tab_switcher.js
+++ b/src/components/tab_switcher/tab_switcher.js
@@ -81,7 +81,7 @@ export default Vue.component('tab-switcher', {
const tabs = this.$slots.default
.map((slot, index) => {
if (!slot.tag) return
- const classesTab = ['tab']
+ const classesTab = ['tab', 'button-default']
const classesWrapper = ['tab-wrapper']
if (this.activeIndex === index) {
classesTab.push('active')
diff --git a/src/components/timeline/timeline.vue b/src/components/timeline/timeline.vue
index d4da2a8700f083a646cc0d6114cf46c9c41c41f9..8ffa44994ac02ecea658a81789308a48319fb8b8 100644
--- a/src/components/timeline/timeline.vue
+++ b/src/components/timeline/timeline.vue
@@ -4,7 +4,7 @@
<TimelineMenu v-if="!embedded" />
<button
v-if="showLoadButton"
- class="loadmore-button"
+ class="button-default loadmore-button"
@click.prevent="showNewStatuses"
>
{{ loadButtonString }}
@@ -61,13 +61,13 @@
>
{{ $t('timeline.no_more_statuses') }}
</div>
- <a
+ <button
v-else-if="!timeline.loading"
- href="#"
+ class="button-unstyled -link"
@click.prevent="fetchOlderStatuses()"
>
<div class="new-status-notification text-center panel-footer">{{ $t('timeline.load_older') }}</div>
- </a>
+ </button>
<div
v-else
class="new-status-notification text-center panel-footer"
diff --git a/src/components/user_card/user_card.vue b/src/components/user_card/user_card.vue
index f916af9db517a2ee25d90ab771511fa3d8a23892..16dd524954f0cbd997b28acf96f8361423f4cdb5 100644
--- a/src/components/user_card/user_card.vue
+++ b/src/components/user_card/user_card.vue
@@ -162,7 +162,7 @@
<template v-if="relationship.following">
<ProgressButton
v-if="!relationship.subscribing"
- class="btn btn-default"
+ class="btn button-default"
:click="subscribeUser"
:title="$t('user_card.subscribe')"
>
@@ -170,7 +170,7 @@
</ProgressButton>
<ProgressButton
v-else
- class="btn btn-default toggled"
+ class="btn button-default toggled"
:click="unsubscribeUser"
:title="$t('user_card.unsubscribe')"
>
@@ -192,14 +192,14 @@
<div>
<button
v-if="relationship.muting"
- class="btn btn-default btn-block toggled"
+ class="btn button-default btn-block toggled"
@click="unmuteUser"
>
{{ $t('user_card.muted') }}
</button>
<button
v-else
- class="btn btn-default btn-block"
+ class="btn button-default btn-block"
@click="muteUser"
>
{{ $t('user_card.mute') }}
@@ -207,7 +207,7 @@
</div>
<div>
<button
- class="btn btn-default btn-block"
+ class="btn button-default btn-block"
@click="mentionUser"
>
{{ $t('user_card.mention') }}
diff --git a/src/components/user_reporting_modal/user_reporting_modal.vue b/src/components/user_reporting_modal/user_reporting_modal.vue
index 2a8d8d48e3f1b82c5bb9b8c053b514dd03d4e06b..fb43094f188cf56e8591c62b3dc3e3bf0cb83b59 100644
--- a/src/components/user_reporting_modal/user_reporting_modal.vue
+++ b/src/components/user_reporting_modal/user_reporting_modal.vue
@@ -29,7 +29,7 @@
</div>
<div>
<button
- class="btn btn-default"
+ class="btn button-default"
:disabled="processing"
@click="reportUser"
>