KumiSystems/Chatwoot
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

chore: Updates icon for network disconnect alert (#3514)

Browse source 
* chore: Upadates icon for network disconnect alert

* Changes background color

* Review fixes

Co-authored-by: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
This commit is contained in:
Nithin David Thomas 2021-12-07 23:45:36 +05:30 • committed by GitHub
parent 824101bc30
commit f5d79ffe58
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 22 additions and 59 deletions
Download patch file Download diff file Expand all files Collapse all files

78
app/javascript/dashboard/components/NetworkNotification.vue
View file

@ -2,29 +2,21 @@
<transition name="network-notification-fade" tag="div">
<div v-show="showNotification" class="ui-notification-container">
<div class="ui-notification">
<svg
class="ui-notification-icon"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M18.364 5.636a9 9 0 010 12.728m0 0l-2.829-2.829m2.829 2.829L21 21M15.536 8.464a5 5 0 010 7.072m0 0l-2.829-2.829m-4.243 2.829a4.978 4.978 0 01-1.414-2.83m-1.414 5.658a9 9 0 01-2.167-9.238m7.824 2.167a1 1 0 111.414 1.414m-1.414-1.414L3 3m8.293 8.293l1.414 1.414"
/>
</svg>
<fluent-icon icon="wifi-off" />
<p class="ui-notification-text">
{{ $t('NETWORK.NOTIFICATION.TEXT') }}
</p>
<button class="ui-refresh-button" @click="refreshPage">
<woot-button variant="clear" size="small" @click="refreshPage">
{{ $t('NETWORK.BUTTON.REFRESH') }}
</button>
<button class="ui-close-button" @click="closeNotification">
<fluent-icon icon="dismiss-circle" class="ui-close-icon " />
</button>
</woot-button>
<woot-button
variant="clear"
size="small"
color-scheme="secondary"
icon="dismiss-circle"
@click="closeNotification"
>
</woot-button>
</div>
</div>
</transition>
@ -72,52 +64,24 @@ export default {
position: absolute;
right: var(--space-normal);
top: var(--space-normal);
width: 100%;
z-index: 9999;
z-index: var(--z-index-very-high);
}
.ui-notification {
@include shadow;
align-items: center;
background-color: var(--white);
border: 1px solid var(--color-border);
border-radius: var(--space-one);
display: flex;
justify-content: space-between;
max-width: 40rem;
min-height: 3rem;
align-items: center;
width: 100%;
background-color: var(--y-100);
border-radius: var(--border-radius-medium);
box-shadow: var(--shadow-large);
min-width: 24rem;
padding: var(--space-normal) var(--space-two);
text-align: left;
padding: var(--space-normal);
}
.ui-notification-text {
margin: 0;
}
.ui-refresh-button {
color: var(--color-woot);
font-size: var(--font-size-small);
font-weight: bold;
&:hover {
cursor: pointer;
}
}
.ui-notification-icon {
color: var(--b-600);
width: var(--font-size-mega);
}
.ui-close-icon {
color: var(--b-600);
font-size: var(--font-size-large);
}
.ui-close-button {
&:hover {
cursor: pointer;
}
margin: 0 var(--space-small);
}
</style>