Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

24289 - update styles for banner, fix styles for header #74

Merged
merged 6 commits into from
Nov 20, 2024
Merged

24289 - update styles for banner, fix styles for header #74

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
b312c98
24289 - style: fix flexgrid to wrap on small sized screens and smaller
hfekete Nov 19, 2024
008df5f
24289 - style: udpate alert style.
hfekete Nov 20, 2024
b377b5a
Merge branch 'main' of github.com:bcgov/business-dashboard-ui into ma…
hfekete Nov 20, 2024
9446837
24289 - style: header style.
hfekete Nov 20, 2024
16c37e5
fix: eslint
hfekete Nov 20, 2024
ae5b8ea
Merge branch 'main' of github.com:bcgov/business-dashboard-ui into ma…
hfekete Nov 20, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 16 additions & 6 deletions src/components/bcros/SystemBanner.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,25 +2,35 @@
<UAlert
v-show="!!message && !close"
class="border-b-2 border-yellow-400 py-0"
color="yellow"
:description="message"
color="orange"
variant="solid"
:close-button="{ class: 'pr-2 text-gray-900' }"
:close-button="false"
:ui="{ rounded: 'rounded-none', padding: 'p-0', gap: 'app-inner-container py-2' }"
@close="close = true"
>
<template #icon>
<template v-if="icon" #icon>
<!-- NB: needed due to icon sizing via app.config / ui config for alert is not getting applied -->
<UIcon class="ml-[-2px] text-[34px]" :name="icon" />
</template>
<template v-if="message" #description>
<div class="flex w-full justify-center text-[16px]">
<span class="blue-links" v-html="message" />
</div>
</template>
</UAlert>
</template>

<script setup lang="ts">
defineProps({
dismissible: { type: Boolean, default: false },
icon: { type: String, default: 'i-mdi-information' },
icon: { type: String, default: '' },
message: { type: String, default: '' }
})
const close = ref(false)
</script>

<style>
.blue-links a {
color: #1669BB;
text-decoration: underline;
}
</style>
10 changes: 7 additions & 3 deletions src/components/bcros/header/Index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,13 @@
class="bg-bcGovColor-darkBlue border-b-2 border-yellow-400"
data-cy="bcros-header"
>
<div id="bcros-main-header__container">
<nav id="bcros-main-header__container__actions" class="flex flex-wrap content-center h-[50px] w-full">
<a id="bcros-main-header__container__actions__home-redirect" class="flex" @click="goToBcrosHome()">
<div id="bcros-main-header__container" class="flex max-w-bcros mx-auto h-[68px] justify-center">
<nav id="bcros-main-header__container__actions" class="flex flex-wrap content-center w-full">
<a
id="bcros-main-header__container__actions__home-redirect"
class="flex justify-center items-center"
@click="goToBcrosHome()"
>
<picture>
<source media="(max-width:600px)" srcset="@/assets/images/gov_bc_logo_vert.png">
<img src="@/assets/images/gov_bc_logo_horiz.png" alt="Government of British Columbia Logo">
Expand Down
10 changes: 6 additions & 4 deletions src/layouts/business.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,10 +25,12 @@ onMounted(async () => {
</div>
<div v-show="!dashboardIsLoading" class="app-container" data-cy="default-layout">
<bcros-header />
<bcros-system-banner
class="justify-center"
:message="systemMessage"
/>
<div class="justify-center">
<bcros-system-banner
class="justify-center "
:message="systemMessage"
/>
</div>
<bcros-breadcrumb v-if="crumbConstructors.length > 0" :crumb-constructors="crumbConstructors" />
<bcros-business-details />
<div class="app-inner-container app-body">
Expand Down
3 changes: 3 additions & 0 deletions tailwind.config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,9 @@ export default {
bcGovColor: {
darkBlue: '#003366'
},
orange: {
500: '#FB8C00'
},
// used color generator recommended by tailwind docs: https://uicolors.app/create
bcGovGray: {
50: '#f8f9fa',
Expand Down