Merge pull request #1638 from music-assistant/list-refacto

Refacto list icon size and gap with text

Author: MarvinSchenkel

src/components/ListItem.vue

@@ -68,7 +68,7 @@ const { listItemProps, listItemClasses } = useListItem(props);
 }
 
 .list-item-main :deep(.v-list-item__content > div) {
-  padding-left: 10px;
+  padding-left: 4px;
   padding-right: 10px;
 }
 

src/views/settings/Providers.vue

@@ -655,11 +655,11 @@ const getAllFilteredProviders = function () {
 }
 
 .providers-list :deep(.v-list-item__prepend) {
-  margin-right: 4px;
+  padding-inline-end: 6px;
 }
 
 .providers-list :deep(.v-list-item__content > div) {
-  padding-left: 4px;
+  padding-left: 0;
 }
 
 .provider-name-title {

src/views/settings/Settings.vue

@@ -1028,8 +1028,8 @@ const documentationUrl = computed(() => {
 }
 
 .setting-list-icon {
-  width: 48px;
-  height: 48px;
+  width: 40px;
+  height: 40px;
   border-radius: 12px;
   display: flex;
   align-items: center;
@@ -1039,15 +1039,15 @@ const documentationUrl = computed(() => {
 }
 
 .settings-list-item :deep(.v-list-item__prepend) {
-  margin-right: 4px;
+  padding-inline-end: 6px;
 }
 
 .settings-list-item :deep(.v-list-item__prepend .v-icon) {
   margin-inline-end: 0 !important;
 }
 
 .settings-list-item :deep(.v-list-item__content > div) {
-  padding-left: 4px;
+  padding-left: 0;
 }
 
 .settings-list-item :deep(.v-list-item-title) {
@@ -1105,12 +1105,6 @@ const documentationUrl = computed(() => {
     min-height: 72px;
   }
 
-  .setting-list-icon {
-    width: 40px;
-    height: 40px;
-    margin-right: 12px;
-  }
-
   .settings-list-item :deep(.v-list-item-title) {
     font-size: 1rem;
   }
@@ -1139,12 +1133,6 @@ const documentationUrl = computed(() => {
     min-height: 72px;
   }
 
-  .setting-list-icon {
-    width: 40px;
-    height: 40px;
-    margin-right: 12px;
-  }
-
   .settings-list-item :deep(.v-list-item-title) {
     font-size: 1rem;
   }

src/views/settings/SystemConfig.vue

@@ -260,12 +260,16 @@ onMounted(async () => {
   background-color: rgba(var(--v-theme-on-surface), 0.05);
 }
 
+.settings-list-item :deep(.v-list-item__prepend) {
+  padding-inline-end: 6px;
+}
+
 .settings-list-item :deep(.v-list-item__prepend .v-icon) {
   margin-inline-end: 0 !important;
 }
 
 .settings-list-item :deep(.v-list-item__content > div) {
-  padding-left: 4px;
+  padding-left: 0;
 }
 
 .settings-list-item :deep(.v-list-item-title) {
@@ -291,8 +295,8 @@ onMounted(async () => {
 }
 
 .setting-list-icon {
-  width: 48px;
-  height: 48px;
+  width: 40px;
+  height: 40px;
   border-radius: 12px;
   display: flex;
   align-items: center;