Updated the DesignItem styles.sass

src/states/Manage/pages/ManageChannel/components/DesignItem/styles.sass

@@ -1,21 +1,34 @@
+@import "@/common/styles/colors"
+
 .design-container .design-item
   border-radius: 15px
-  border-left: 7px solid #4332F0
+  background: $darker
-  background: #242528
   box-shadow: 0 0 35px 0 #2C2F33
   padding: 1.2rem 2rem
   display: flex
   justify-content: space-between
   gap: 7rem
+  cursor: pointer
+  user-select: none
 
-.design-item .design-title
+.design-inactive
+  border-left: 7px solid $gray
+
+.design-active
+    border-left: 7px solid $primary
+
+.design-title
   display: flex
   gap: 1rem
+  align-items: center
 
   .required-coins
     display: flex
     align-items: center
     gap: 0.5rem
+    padding: 0.5rem 0.8rem
+    background-color: $darkest
+    border-radius: 1rem
 
   .required-coins img
     width: 2rem
@@ -24,14 +37,24 @@
   .required-coins p
     font-size: 1.5rem
     font-weight: 500
+    margin: 0
+
+.design-item .design-perks
+  display: flex
+  flex-direction: column
+  gap: 0.5rem
 
 .design-item .design-perk
   display: flex
   align-items: center
   gap: 1rem
 
+  svg
+    font-size: 1.6rem
+
   h2
     margin: 0
+    font-size: 1.5rem
 
 .design-item img
   height: 10rem