LeadMagnet/leadchat
1
0
Fork 0
Code Issues Pull Requests Actions 3 Packages Projects Releases Wiki Activity

chore: Update the widescreen layout button icon and background (#6217)

Browse Source 
* Update the button icon and background

* Use the woot-button

* Minor css cleanup

Co-authored-by: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Co-authored-by: Nithin David <1277421+nithindavid@users.noreply.github.com>
This commit is contained in:
Fayaz Ahmed
2023-01-11 00:40:48 +05:30
committed by GitHub
parent d041f5fc9f
commit 0ba5e47308
2 changed files with 15 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
app/javascript/dashboard/routes/dashboard/conversation/search/SwitchLayout.vue
View File

@@ -1,22 +1,16 @@
<template>
<button
v-tooltip.left="$t('CONVERSATION.SWITCH_VIEW_LAYOUT')"
class="layout-switch__container"
@click="toggle"
>
<div
class="layout-switch__btn left"
:class="{ active: !isOnExpandedLayout }"
>
<fluent-icon icon="panel-sidebar" :size="16" />
</div>
<div
class="layout-switch__btn right"
:class="{ active: isOnExpandedLayout }"
>
<fluent-icon icon="panel-contract" :size="16" />
</div>
</button>
<div>
<woot-button
v-tooltip.left="$t('CONVERSATION.SWITCH_VIEW_LAYOUT')"
icon="arrow-right-import"
size="tiny"
variant="smooth"
color-scheme="secondary"
class="layout-switch__container"
:class="{ expanded: isOnExpandedLayout }"
@click="toggle"
/>
</div>
</template>
<script>
@@ -37,23 +31,8 @@ export default {
<style lang="scss" soped>
.layout-switch__container {
align-items: center;
background-color: var(--s-100);
border-radius: var(--border-radius-medium);
cursor: pointer;
display: flex;
padding: var(--space-micro);
.layout-switch__btn {
border-radius: var(--border-radius-normal);
color: var(--s-400);
display: flex;
padding: var(--space-micro) var(--space-smaller);
&.active {
background-color: var(--white);
color: var(--w-500);
}
&.expanded .icon {
transform: rotate(180deg);
}
}
</style>