diff --git a/src/App.vue b/src/App.vue index ed9267d..09a37e4 100644 --- a/src/App.vue +++ b/src/App.vue @@ -1,10 +1,11 @@ diff --git a/src/assets/bg-pattern.png b/src/assets/bg-pattern.png new file mode 100644 index 0000000..8b83658 Binary files /dev/null and b/src/assets/bg-pattern.png differ diff --git a/src/assets/bg-shape.svg b/src/assets/bg-shape.svg deleted file mode 100644 index 8c8d363..0000000 --- a/src/assets/bg-shape.svg +++ /dev/null @@ -1,130 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/src/assets/sad-face.png b/src/assets/sad-face.png new file mode 100644 index 0000000..5678dc0 Binary files /dev/null and b/src/assets/sad-face.png differ diff --git a/src/assets/style/unavailable.css b/src/assets/style/unavailable.css new file mode 100644 index 0000000..6d6624b --- /dev/null +++ b/src/assets/style/unavailable.css @@ -0,0 +1,56 @@ +:root { + --navyBlue: #002772; + --magentaPurple: #720060; + --lightBlue: #d6e6ff; + --lightPurple: #fde2ff; + --black: #1e1e1e; + --darkGray: #3f3f3f; + --gray: #dcdcdc; + --white: #ffffff; +} + +.container { + background-image: url("../bg-pattern.png"); + align-items: center; + justify-content: center; +} + +body { + background: linear-gradient(to bottom, var(--gray) 70%, var(--white) 30%); +} + +.card { + width: 1550px; + margin: 0 auto; + background-color: white; + box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.25); + border-radius: 9px; + height: 70%; + display: flex; + background-image: url("../sad-face.png"); + background-repeat: no-repeat; + background-size: contain; + background-position: center; + display: inline-block; + position: relative; +} + +.btn-unavailable { + width: 500px; + height: 36px; + background-color: var(--white); + color: va(--black); + font-weight: 600; +} +.unavailable-message { + color: va(--black); + font-weight: 480; +} + +.row-unavailable { + position: absolute; + left: 33%; + top: 50%; + text-align: center; + justify-content: center; +} diff --git a/src/components/ItemUnavailable.vue b/src/components/ItemUnavailable.vue new file mode 100644 index 0000000..1991f76 --- /dev/null +++ b/src/components/ItemUnavailable.vue @@ -0,0 +1,16 @@ + + + + + diff --git a/src/components/SkeletonLoader.vue b/src/components/SkeletonLoader.vue index d1bfa23..7186ebc 100644 --- a/src/components/SkeletonLoader.vue +++ b/src/components/SkeletonLoader.vue @@ -18,11 +18,7 @@ - +