Adjust styling for now playing and settings

sections

Comfy/assets/_now_playing.scss

@@ -49,19 +49,20 @@
 
 			// Connect Bar
 			.main-connectBar-connectBar {
-				position: absolute;
-				top: -20px;
-				right: 15px;
-				padding: 4px 8px;
-				box-sizing: content-box;
 				border-radius: var(--border-radius);
+				top: -18px;
+				padding: 13px;
+				position: absolute;
+				left: 91%;
+				transform: translateX(-91%);
+				width: max-content;
 
 				&::after {
 					content: none;
 				}
 			}
 			.main-devicePicker-indicator {
-				bottom: 30px;
+				bottom: 34px;
 				transform: rotate(180deg);
 			}
 

Comfy/assets/_settings.scss

@@ -36,7 +36,7 @@
 	}
 
 	.setting-card {
-		background-color: var(--spice-highlight);
+		background-color: var(--spice-highlight-elevated);
 		border-radius: 10px;
 		margin: 8px 0;
 

Comfy/theme.script.js

@@ -4,15 +4,15 @@ resetting of number input weirdness, gradient leaving s or px and others not rem
 if colorscheme name isnt the same capitalization or is custom it breaks the reset button, probably just check if config.current_theme is in the list of fetched colorschemes or something
 
 todo:
+- more consistent coloring - sliders etc
 - add warning message if using unsupported versions
+- update image tippy sizes - maybe make it a button that changes modal content instead?
+- add more main-type-mestoBold
+- create color picker
 
+torefactor:
 - remove uneeded crap / reduce random calls
 - simplify props - Section -> cardLayout -> title, action, etc - basically just move everything up one level / have the components not always be cards
-- add more main-type-mestoBold
-- add icons to card dropdowns? maybe a tippy saying open/close instead?
-- update image tippy sizes - maybe make it a button that changes modal content instead?
-- create color picker
-- more consistent coloring - sliders etc
 - once props are simplified convert all callback events to be name - ...props
 */