summaryrefslogtreecommitdiff
path: root/src/components/Global
diff options
context:
space:
mode:
Diffstat (limited to 'src/components/Global')
-rw-r--r--src/components/Global/PageSection.vue14
-rw-r--r--src/components/Global/StatusIcon.vue16
2 files changed, 23 insertions, 7 deletions
diff --git a/src/components/Global/PageSection.vue b/src/components/Global/PageSection.vue
index dd39ddd5..0521dc06 100644
--- a/src/components/Global/PageSection.vue
+++ b/src/components/Global/PageSection.vue
@@ -1,6 +1,9 @@
<template>
<div class="page-section">
<h2 v-if="sectionTitle">{{ sectionTitle }}</h2>
+ <span v-if="sectionSmallTitle" class="bold-16px">
+ {{ sectionSmallTitle }}
+ </span>
<slot />
</div>
</template>
@@ -13,17 +16,26 @@ export default {
type: String,
default: '',
},
+ sectionSmallTitle: {
+ type: String,
+ default: '',
+ },
},
};
</script>
<style lang="scss" scoped>
.page-section {
- margin-bottom: $spacer * 4;
+ margin-bottom: $spacer * 1;
}
h2 {
@include font-size($h3-font-size);
margin-bottom: $spacer;
}
+
+.bold-16px {
+ display: block;
+ margin: 25px 0 16px 0;
+}
</style>
diff --git a/src/components/Global/StatusIcon.vue b/src/components/Global/StatusIcon.vue
index 4552633e..fb818451 100644
--- a/src/components/Global/StatusIcon.vue
+++ b/src/components/Global/StatusIcon.vue
@@ -1,26 +1,30 @@
<template>
<span :class="['status-icon', status]">
<icon-info v-if="status === 'info'" />
- <icon-success v-else-if="status === 'success'" />
+ <img
+ v-else-if="status === 'success'"
+ class="status__img"
+ src="@/assets/images/status/on.svg"
+ />
<icon-warning v-else-if="status === 'warning'" />
- <icon-danger v-else-if="status === 'danger'" />
+ <img
+ v-else-if="status === 'danger'"
+ class="status__img"
+ src="@/assets/images/status/off.svg"
+ />
<icon-secondary v-else />
</span>
</template>
<script>
import IconInfo from '@carbon/icons-vue/es/information--filled/20';
-import IconCheckmark from '@carbon/icons-vue/es/checkmark--filled/20';
import IconWarning from '@carbon/icons-vue/es/warning--filled/20';
import IconError from '@carbon/icons-vue/es/error--filled/20';
-import IconMisuse from '@carbon/icons-vue/es/misuse/20';
export default {
name: 'StatusIcon',
components: {
IconInfo: IconInfo,
- iconSuccess: IconCheckmark,
- iconDanger: IconMisuse,
iconSecondary: IconError,
iconWarning: IconWarning,
},