# UI Style Guide ### 1. Typography - ### Heading 1 > Text Color: #F3F6F9 > Font: Poppins, Helvetica, "sans-serif" > Size: h1 > Line Height: 1.2 > Weight: 500 - #### Heading 2 > Text Color: #181C32 > Font: Poppins, Helvetica, "sans-serif" > Size: h3 > Line Height: 1.2 > Weight: 500 - ##### Heading 3 > Text Color: #B5B5C3 > Font: Poppins, Helvetica, "sans-serif" > Size: 1rem > Line Height: 1.5 > Weight: 500 ---- ### 2. Color | primary | success | secondary | warning | danger | |:--------------------------------------------------------------------------------------------------------------------------------------------------:|:---------------------------------------------------------------------------------------------------------------------------------------------------:|:---------------------------------------------------------------------------------------------------------------------------------------------------:|:---------------------------------------------------------------------------------------------------------------------------------------------------:|:---------------------------------------------------------------------------------------------------------------------------------------------------:| | <div style="background-color:#3699ff; width:80px; height:80px;color:#ffffff;border-radius: 50%;line-height:80px;text-align: center;" >#3699ff</div> | <div style="background-color:#C9F7F5; width:80px; height:80px;color:#1BC5BD;border-radius: 50%;line-height:80px;text-align: center;" >#C9F7F5</div> | <div style="background-color:#E4E6EF; width:80px; height:80px;color:#3F4254;border-radius: 50%;line-height:80px;text-align: center;" >#E4E6EF</div> | <div style="background-color:#FFA800; width:80px; height:80px;color:#ffffff;border-radius: 50%;line-height:80px;text-align: center;" >#FFA800</div> | <div style="background-color:#F64E60; width:80px; height:80px;color:#ffffff;border-radius: 50%;line-height:80px;text-align: center;" >#F64E60</div> | ---- ### 3. Buttons | Normal | Hover | Disabled| |:-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------:|:-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------:|:---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------:| |<div style="width:125px; height:35px; border-color:#3699ff; background-color:#3699ff;color: #ffffff;box-shadow: none;border-radius: 0.42rem;border: 1px solid transparent; font-size: 1.75rem; text-align: center;font-weight: 500;padding-top:3px" >Button</div>|<div style=" width:125px; height:35px; border-color:#187de4; background-color:#187de4;color: #ffffff;box-shadow: none;border-radius: 0.42rem;border: 1px solid transparent; padding-top:3px; font-size: 1.75rem; text-align: center;font-weight: 500;" >Button</div>|<div style=" width:125px; height:35px; border-color:#3699ff; background-color:#3699ff;color: #ffffff;box-shadow: none;border-radius: 0.42rem;border: 1px solid transparent; font-size: 1.75rem; text-align: center;font-weight: 500;opacity: 0.6;padding-top:3px;" >Button</div> |<div style=" width:125px; height:35px; border-color:transparent; background-color:#C9F7F5;color: #1BC5BD;box-shadow: none;border-radius: 0.42rem;border: 1px solid transparent; font-size: 1.75rem; text-align: center;font-weight: 500;padding-top:3px;" >Button</div>|<div style="width:125px; height:35px; border-color:transparent; background-color:#1BC5BD;color: #ffffff;box-shadow: none;border-radius: 0.42rem;border: 1px solid transparent; padding-top:3px; font-size: 1.75rem; text-align: center;font-weight: 500;" >Button</div>|none| |<div style=" width:125px; height:35px; border-color:#E4E6EF; background-color:transparent;color: #3F4254;box-shadow: none;border-radius: 0.42rem;border: 1px solid #E4E6EF; padding-top:3px; font-size: 1.75rem; text-align: center;font-weight: 500;" >Button</div>|<div style=" width:125px; height:35px; border-color:#E4E6EF; background-color:#E4E6EF;color: #3F4254;box-shadow: none;border-radius: 0.42rem;border: 1px solid #E4E6EF; padding-top:3px; font-size: 1.75rem; text-align: center;font-weight: 500;" >Button</div>|none| |<div style=" width:125px; height:35px; border-color:#FFA800; background-color:#FFA800;color: #ffffff;box-shadow: none;border-radius: 0.42rem;border: 1px solid #E4E6EF; padding-top:3px; font-size: 1.75rem; text-align: center;font-weight: 500;" >Button</div>|<div style=" width:125px; height:35px; border-color:#EE9D01; background-color:#EE9D01;color: #ffffff;box-shadow: none;border-radius: 0.42rem;border: 1px solid #E4E6EF; padding-top:3px; font-size: 1.75rem; text-align: center;font-weight: 500;" >Button</div>|none| |<div style=" width:125px; height:35px; border-color:#F64E60; background-color:#F64E60;color: #ffffff;box-shadow: none;border-radius: 0.42rem;border: 1px solid #E4E6EF; padding-top:3px; font-size: 1.75rem; text-align: center;font-weight: 500;" >Button</div>|<div style=" width:125px; height:35px; border-color:#EE2D41; background-color:#EE2D41;color: #ffffff;box-shadow: none;border-radius: 0.42rem;border: 1px solid #E4E6EF; padding-top:3px;font-size: 1.75rem; text-align: center;font-weight: 500;" >Button</div>|none| - Use this template for buttons in general - Check out existing page for how specific buttons are written ``` <b-button variant="/*theme*/" :to="{name: '/*page name*/'}"> <b-icon-plus /> // icon that goes before button text {{ /*text for the button*/ }} </b-button> ``` |Usage|Create resource page link|Create resource</br>|Back to last page|Important action| |------|:------:|:------:|:------:|:------:| |Text|*New* </br><resource name>|*Create* </br><resource name>|*Back*|custom| |Style|blue with plus icon |red with up arrow icon|large size, white|yellow| |E.g|![](https://i.imgur.com/ITakiDf.png)|![](https://i.imgur.com/bfSwEVW.png)|![](https://i.imgur.com/JHTPn8q.png)|![](https://i.imgur.com/HONwEU7.png)| ---- ### 4. Icons | | Edit | Delete | Users | Tooltip 1 | Tooltip 2 | Eye | Eye-slash | |:------:|:------------------------------------:|:------------------------------------:|:-----:|:---------:|:---------:|:---:|:---------:| | Normal | ![](https://i.imgur.com/yXys7GR.png) | ![](https://i.imgur.com/Q0M9KMc.png) | ![](https://i.imgur.com/pm7pQmX.png) | ![](https://i.imgur.com/SYe5p0j.png)| ![](https://i.imgur.com/mFoGmgx.png)| ![](https://i.imgur.com/GhMsKYP.png)| ![](https://i.imgur.com/rzKruTH.png)| | | Edit | Delete | Users | Tooltip 1 | Tooltip 2 | Eye | Eye-slash | |:------:|:------------------------------------:|:------------------------------------:|:-----:|:---------:|:---------:|:---:|:---------:| | Hover | ![](https://i.imgur.com/sGyrHDX.png)| ![](https://i.imgur.com/xLVB60Y.png)| none | none | none | ![](https://i.imgur.com/owtsDqS.png)| none | ---- ### 5. Pagination - Use ***`<Pagination>`*** component in page, e.g: ``` import Pagination from '@/view/content/Pagination.vue'; ``` - Example: ![](https://i.imgur.com/IwCWeCI.png) ---- ### 6. Tooltip - Use ***`v-b-tooltip.hover.topright.html.v-dark="$t('localization')"`*** in HTML element - See more detail : ***[Tooltips](https://bootstrap-vue.org/docs/directives/tooltip/#tooltips)*** - Example:![](https://i.imgur.com/oC0Qu0k.png) ---- ### 7. Alert #### Toast Alert - Import Mixins ***`MakeToast`*** in page, e.g: ``` import MakeToast from '@/view/content/mixin/MakeToast.vue' ``` - Default variables setting: ``` makeToast(message: string, variant: string = 'warning', toaster: string = 'b-toaster-top-right', solid: boolean = false) ``` - See more detail : ***[Toasts](https://bootstrap-vue.org/docs/components/toast#toasts)*** - Example: | Success | Warning | Danger | |:--------:|:--------:|:--------:| |![](https://i.imgur.com/hGgV8Jp.png)|![](https://i.imgur.com/Lv6M1tS.png)|![](https://i.imgur.com/5Qa5hdv.png)| #### Sweet Alert - Import ***`Sweetalert2`*** in page, e.g: ``` import swal from 'sweetalert2' ``` - Setting variables, e.g: ``` swal .fire({ title: ' ', text: ' ', icon: 'warning', showCancelButton: true, reverseButtons: true, cancelButtonText: 'Cancel', confirmButtonText: 'Send' }) ``` - See more detail : ***[Sweetalert2](https://sweetalert2.github.io/)*** - Example: ![](https://i.imgur.com/dLmBvGk.png) ---- ### 8. Loading - Use ***spinner*** while loading - Example: | Example | Usage | |:------------------------------------:|:--------------------------------------------------------------- | | ![](https://i.imgur.com/o0xfQmP.png) | Show ***spinner*** after ***page title*** when loading the page | | ![](https://i.imgur.com/3W7UuBO.png) | Show ***spinner*** at ***button*** when sending a request |