@@ -222,6 +226,7 @@ button.active:hover {
.hidden {
pointer-events: none;
opacity: 10%;
+ filter: blur(8px);
}
@media only screen and (max-width: 720px) {
diff --git a/vacs-map-app/src/assets/base.css b/vacs-map-app/src/assets/base.css
index ae3dda5..0913606 100644
--- a/vacs-map-app/src/assets/base.css
+++ b/vacs-map-app/src/assets/base.css
@@ -1,4 +1,4 @@
-@import url('https://fonts.googleapis.com/css2?family=Work+Sans:wght@400;500;600&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Work+Sans:wght@400;500;600;700&display=swap');
:root {
--black: #17191b;
@@ -43,6 +43,10 @@ body {
-moz-osx-font-smoothing: grayscale;
}
+button {
+ font-family: var(--font-family-body);
+}
+
@font-face {
font-family: PPEiko-thin;
src: url('./fonts/pp-eiko/PPEiko-Thin.otf');
diff --git a/vacs-map-app/src/assets/img/checkmark.svg b/vacs-map-app/src/assets/img/checkmark.svg
new file mode 100644
index 0000000..e2100dc
--- /dev/null
+++ b/vacs-map-app/src/assets/img/checkmark.svg
@@ -0,0 +1,3 @@
+
diff --git a/vacs-map-app/src/components/CardWrapper.vue b/vacs-map-app/src/components/CardWrapper.vue
index b4088b4..7c084b5 100644
--- a/vacs-map-app/src/components/CardWrapper.vue
+++ b/vacs-map-app/src/components/CardWrapper.vue
@@ -155,9 +155,11 @@ const useDarkIndicatorText = computed(() => {
.card-wrapper.dynamic {
height: var(--title-height);
+ box-shadow: 0 0 0 1px var(--dark-gray);
}
.card-wrapper.dynamic.active {
+ box-shadow: 0 0 0 1px var(--gray);
height: unset;
}
@@ -209,6 +211,7 @@ const useDarkIndicatorText = computed(() => {
}
.title-row img {
+ margin: auto 0;
margin-left: auto;
}
diff --git a/vacs-map-app/src/components/ExploreSidebar.vue b/vacs-map-app/src/components/ExploreSidebar.vue
index 602e64a..e4f2cdd 100644
--- a/vacs-map-app/src/components/ExploreSidebar.vue
+++ b/vacs-map-app/src/components/ExploreSidebar.vue
@@ -64,13 +64,16 @@