Fix bad style in deck column options and other things (#3412)

* Fix wrong text color in empty timeline (#3268)

* Whoops

* Fix wrong text color in deck options (#3268)

* Some padding to make it look less ugly

* Fix wrong text color in user lists menu (#3268)

* Fix wrong text color of footer on welcome screen (mobile) (#3268)

* Fix misalignment of icons and text in menu (mobile) (#3289)

* Fix wrong text color in empty timeline (mobile) (#3268)

src/client/app/common/views/components/menu.vue

@@ -180,6 +180,7 @@ export default Vue.extend({
 			padding 8px 16px
 			width 100%
 			color var(--popupFg)
+			white-space nowrap
 
 			&:hover
 				color var(--primaryForeground)

src/client/app/common/views/components/ui/switch.vue

@@ -123,7 +123,7 @@ export default Vue.extend({
 		> span
 			display block
 			line-height 20px
-			color currentColor
+			color var(--text)
 			transition inherit
 
 		> p

src/client/app/desktop/views/components/user-lists-window.vue

@@ -54,7 +54,25 @@ export default Vue.extend({
 	padding 16px
 
 	> button
+		display block
 		margin-bottom 16px
+		color var(--primaryForeground)
+		background var(--primary)
+		width 100%
+		border-radius 38px
+		user-select none
+		cursor pointer
+		padding 0 16px
+		min-width 100px
+		line-height 38px
+		font-size 14px
+		font-weight 700
+
+		&:hover
+			background var(--primaryLighten10)
+
+		&:active
+			background var(--primaryDarken10)
 
 	> a
 		display block

src/client/app/desktop/views/pages/deck/deck.tl-column.vue

@@ -10,7 +10,7 @@
 		<span>{{ name }}</span>
 	</span>
 
-	<div class="editor" style="padding:0 12px" v-if="edit">
+	<div class="editor" style="padding:12px" v-if="edit">
 		<ui-switch v-model="column.isMediaOnly" @change="onChangeSettings">{{ $t('is-media-only') }}</ui-switch>
 		<ui-switch v-model="column.isMediaView" @change="onChangeSettings">{{ $t('is-media-view') }}</ui-switch>
 	</div>

src/client/app/desktop/views/pages/user/user.timeline.vue

@@ -151,18 +151,20 @@ export default Vue.extend({
 				&:hover
 					color var(--desktopTimelineSrcHover)
 
-	> .empty
+	> .mk-notes
-		display block
-		margin 0 auto
-		padding 32px
-		max-width 400px
-		text-align center
-		color #999
 
-		> [data-icon]
+		> .empty
 			display block
-			margin-bottom 16px
+			margin 0 auto
-			font-size 3em
+			padding 32px
-			color #ccc
+			max-width 400px
+			text-align center
+			color var(--text)
+
+			> [data-icon]
+				display block
+				margin-bottom 16px
+				font-size 3em
+				color var(--faceHeaderText);
 
 </style>

src/client/app/mobile/views/pages/user.vue

@@ -334,6 +334,7 @@ main
 		max-width 680px
 		margin 0 auto
 		padding 8px
+		color var(--text)
 
 		@media (min-width 500px)
 			padding 16px

src/client/app/mobile/views/pages/welcome.vue

@@ -306,6 +306,7 @@ export default Vue.extend({
 			padding 16px 0
 			border solid 2px rgba(0, 0, 0, 0.1)
 			border-radius 8px
+			color var(--text)
 
 			> *
 				margin 0 16px