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

design: Fixes to make portal page design close to figma mockups (#5383)

Browse source
This commit is contained in:
Nithin David Thomas 2022-09-02 18:07:17 +05:30 • committed by GitHub
parent 8bdd229adb
commit a9801a3c76
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
9 changed files with 197 additions and 141 deletions
Download patch file Download diff file Expand all files Collapse all files

37
app/javascript/dashboard/components/layout/sidebarComponents/SecondaryNavItem.vue
View file

@ -1,13 +1,19 @@
<template>
<li class="sidebar-item">
<div v-if="hasSubMenu" class="secondary-menu--wrap">
<span class="secondary-menu--title fs-small">
<span class="secondary-menu--header fs-small">
{{ $t(`SIDEBAR.${menuItem.label}`) }}
</span>
<div v-if="isHelpCenterSidebar" class="submenu-icons">
<div class="submenu-icon" @click="onClickOpen">
<woot-button
size="tiny"
variant="clear"
color-scheme="secondary"
class="submenu-icon"
@click="onClickOpen"
>
<fluent-icon icon="add" size="16" />
</div>
</woot-button>
</div>
</div>
<router-link
@ -214,13 +220,22 @@ export default {
.secondary-menu--wrap {
display: flex;
justify-content: space-between;
margin-top: var(--space-small);
}
.secondary-menu--header {
color: var(--s-700);
display: flex;
font-weight: var(--font-weight-bold);
line-height: var(--space-normal);
margin: var(--space-small) 0;
padding: 0 var(--space-small);
}
.secondary-menu--title {
color: var(--s-600);
display: flex;
font-weight: var(--font-weight-bold);
line-height: var(--space-two);
font-weight: var(--font-weight-medium);
line-height: var(--space-normal);
margin: var(--space-small) 0;
padding: 0 var(--space-small);
}
@ -232,6 +247,7 @@ export default {
padding: var(--space-small);
font-weight: var(--font-weight-medium);
border-radius: var(--border-radius-normal);
color: var(--s-700);
&:hover {
background: var(--s-25);
@ -323,19 +339,14 @@ export default {
align-items: center;
.submenu-icon {
padding: 0;
margin-left: var(--space-small);
color: var(--s-600);
&:hover {
cursor: pointer;
color: var(--w-500);
}
}
}
.empty-text {
color: var(--s-600);
color: var(--s-500);
font-size: var(--font-size-small);
margin: var(--space-smaller) 0;
margin: var(--space-smaller);
}
</style>