From 8d8dc820f5fa8687669b23faaea8f0fb36c20a7e Mon Sep 17 00:00:00 2001
From: Daneric <danericaalbers@hotmail.com>
Date: Wed, 20 Dec 2023 09:48:58 +0100
Subject: [PATCH] Refactor: ItemCard indents and removed duplicate component
 imports

---
 src/resources/vue/components/ItemCard.vue | 97 +++++++++++------------
 1 file changed, 47 insertions(+), 50 deletions(-)

diff --git a/src/resources/vue/components/ItemCard.vue b/src/resources/vue/components/ItemCard.vue
index e140e19..b901e9a 100644
--- a/src/resources/vue/components/ItemCard.vue
+++ b/src/resources/vue/components/ItemCard.vue
@@ -1,72 +1,69 @@
 <template>
-    <div class="item-card">
-        <div class="left">
-            <Icon icon="book" size="90" color="white" />
-            <div class="info">
-                <p>{{ title }}</p>
-                <p>{{ description }}</p>
-            </div>
-        </div>
-        <div v-if="warning === 'true'" class="right">
-            <Icon icon="warning" size="35" />
-        </div>
+  <div class="item-card">
+    <div class="left">
+      <Icon icon="book" size="90" color="white" />
+      <div class="info">
+          <p>{{ title }}</p>
+          <p>{{ description }}</p>
+      </div>
     </div>
+    <div v-if="warning === 'true'" class="right">
+      <Icon icon="warning" size="35" />
+    </div>
+  </div>
 </template>
 
 <script>
 import Icon from "./icon.vue";
 
 export default {
-    name: "ItemCard",
-    props: {
-        title: String,
-        description: String,
-        warning: Boolean,
-    },
-    components: {
-    Icon,
+  name: "ItemCard",
+  props: {
+    title: String,
+    description: String,
+    warning: Boolean,
+  },
+  components: {
     Icon,
-    Icon
-},
+  },
 };
 </script>
 
 <style lang="scss">
 .item-card {
-    width: 667px;
-    height: 116px;
-    background: #1D243A;
-    border-radius: 8px;
+  width: 667px;
+  height: 116px;
+  background: #1d243a;
+  border-radius: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 13px;
+
+  .left {
     display: flex;
     align-items: center;
-    justify-content: space-between;
-    padding: 13px;
-
-    .left {
-        display: flex;
-        align-items: center;
-        width: 100%;
-        height: 100%;
+    width: 100%;
+    height: 100%;
 
-        .info {
-            margin-left: 20px;
-            display: flex;
-            flex-direction: column;
+    .info {
+      margin-left: 20px;
+      display: flex;
+      flex-direction: column;
 
-            p {
-                color: #fff;
-                font-size: 32px;
-                font-family: "Outfit";
-                font-weight: 700;
-            }
-        }
-    }
-
-    .right {
-        display: flex;
-        align-items: flex-start;
-        height: 100%;
+      p {
+          color: #fff;
+          font-size: 32px;
+          font-family: "Outfit";
+          font-weight: 700;
+      }
     }
+  }
 
+  .right {
+    display: flex;
+    align-items: flex-start;
+    height: 100%;
+  }
 }
 </style>