make all clickable icons into actual buttons

This commit is contained in:
Henry Jameson 2022-03-30 12:33:56 +03:00
parent c3690b456e
commit 1943991077
6 changed files with 53 additions and 31 deletions

View file

@ -20,20 +20,26 @@
> >
{{ submitButtonLabel || $t('importer.submit') }} {{ submitButtonLabel || $t('importer.submit') }}
</button> </button>
<div v-if="success"> <button
v-if="success"
class="button-unstyled"
@click="dismiss"
>
<FAIcon <FAIcon
icon="times" icon="times"
@click="dismiss"
/> />
<p>{{ successMessage || $t('importer.success') }}</p> <p>{{ successMessage || $t('importer.success') }}</p>
</div> </button>
<div v-else-if="error"> <button
v-else-if="error"
class="button-unstyled"
@click="dismiss"
>
<FAIcon <FAIcon
icon="times" icon="times"
@click="dismiss"
/> />
<p>{{ errorMessage || $t('importer.error') }}</p> <p>{{ errorMessage || $t('importer.error') }}</p>
</div> </button>
</div> </div>
</template> </template>

View file

@ -76,11 +76,15 @@
> >
<div class="alert error"> <div class="alert error">
{{ error }} {{ error }}
<FAIcon <button
class="fa-scale-110 fa-old-padding" class="button-unstyled"
icon="times"
@click="clearError" @click="clearError"
/> >
<FAIcon
class="fa-scale-110 fa-old-padding"
icon="times"
/>
</button>
</div> </div>
</div> </div>
</div> </div>

View file

@ -56,11 +56,15 @@
> >
<div class="alert error"> <div class="alert error">
{{ error }} {{ error }}
<FAIcon <button
class="fa-scale-110 fa-old-padding" class="button-unstyled"
icon="times"
@click="clearError" @click="clearError"
/> >
<FAIcon
class="fa-scale-110 fa-old-padding"
icon="times"
/>
</button>
</div> </div>
</div> </div>
</div> </div>

View file

@ -58,12 +58,16 @@
> >
<div class="alert error"> <div class="alert error">
{{ error }} {{ error }}
<FAIcon <button
size="lg" class="button-unstyled"
class="fa-scale-110 fa-old-padding"
icon="times"
@click="clearError" @click="clearError"
/> >
<FAIcon
size="lg"
class="fa-scale-110 fa-old-padding"
icon="times"
/>
</button>
</div> </div>
</div> </div>
</div> </div>

View file

@ -172,18 +172,26 @@
v-if="notification.type === 'follow_request'" v-if="notification.type === 'follow_request'"
style="white-space: nowrap;" style="white-space: nowrap;"
> >
<FAIcon <button
icon="check" class="button-unstyled"
class="fa-scale-110 fa-old-padding follow-request-accept"
:title="$t('tool_tip.accept_follow_request')" :title="$t('tool_tip.accept_follow_request')"
@click="approveUser()" @click="approveUser()"
/> >
<FAIcon <FAIcon
icon="times" icon="check"
class="fa-scale-110 fa-old-padding follow-request-reject" class="fa-scale-110 fa-old-padding follow-request-accept"
/>
</button>
<button
class="button-unstyled"
:title="$t('tool_tip.reject_follow_request')" :title="$t('tool_tip.reject_follow_request')"
@click="denyUser()" @click="denyUser()"
/> >
<FAIcon
icon="times"
class="fa-scale-110 fa-old-padding follow-request-reject"
/>
</button>
</div> </div>
</div> </div>
<div <div

View file

@ -64,8 +64,6 @@
} }
.follow-request-accept { .follow-request-accept {
cursor: pointer;
&:hover { &:hover {
color: $fallback--text; color: $fallback--text;
color: var(--text, $fallback--text); color: var(--text, $fallback--text);
@ -73,8 +71,6 @@
} }
.follow-request-reject { .follow-request-reject {
cursor: pointer;
&:hover { &:hover {
color: $fallback--cRed; color: $fallback--cRed;
color: var(--cRed, $fallback--cRed); color: var(--cRed, $fallback--cRed);