+1

CHANGELOG.md

reviewed

··· 2 2 3 3 ## 2.2.0 4 4 5 5 + - Added dark mode 5 6 - Added keyboard shortcuts for play/pause, toggle shuffle, etc. 6 7 See UI section on the about page for more info. 7 8 - Added support for BTFS (an IPFS fork)

+15 -2

src/Applications/UI.elm

reviewed

··· 86 86 87 87 88 88 type alias Flags = 89 89 - { initialTime : Int 89 89 + { darkMode : Bool 90 90 + , initialTime : Int 90 91 , isOnline : Bool 91 92 , upgrade : Bool 92 93 , viewport : Viewport ··· 112 113 type alias Model = 113 114 { contextMenu : Maybe (ContextMenu Reply) 114 115 , currentTime : Time.Posix 116 116 + , darkMode : Bool 115 117 , debounce : Debouncer Msg Msg 116 118 , focusedOnInput : Bool 117 119 , isDragging : Bool ··· 167 169 in 168 170 { contextMenu = Nothing 169 171 , currentTime = Time.millisToPosix flags.initialTime 172 172 + , darkMode = flags.darkMode 170 173 , focusedOnInput = False 171 174 , isDragging = False 172 175 , isLoading = True ··· 237 240 | KeyboardMsg Keyboard.Msg 238 241 | LoadEnclosedUserData Json.Decode.Value 239 242 | LoadHypaethralUserData Json.Decode.Value 243 243 + | PreferredColorSchemaChanged { dark : Bool } 240 244 | RemoveQueueSelection 241 245 | RemoveTrackSelection 242 246 | ResizedWindow ( Int, Int ) ··· 412 416 else 413 417 return m 414 418 ) 419 419 + 420 420 + PreferredColorSchemaChanged { dark } -> 421 421 + return { model | darkMode = dark } 415 422 416 423 RemoveQueueSelection -> 417 424 let ··· 1799 1806 ) 1800 1807 1801 1808 -- 1809 1809 + , Ports.preferredColorSchemaChanged PreferredColorSchemaChanged 1802 1810 , Ports.showErrorNotification (Notifications.error >> ShowNotification) 1803 1811 , Ports.setAverageBackgroundColor (Backdrop.BackgroundColor >> BackdropMsg) 1804 1812 , Ports.setIsOnline SetIsOnline ··· 2053 2061 , vessel 2054 2062 [ { amountOfSources = List.length model.sources.collection 2055 2063 , bgColor = model.backdrop.bgColor 2064 2064 + , darkMode = model.darkMode 2056 2065 , isOnIndexPage = model.page == Page.Index 2057 2066 , sourceIdsBeingProcessed = List.map Tuple.first model.sources.isProcessing 2058 2067 , viewport = model.viewport ··· 2221 2230 , C.overflow_hidden 2222 2231 , C.relative 2223 2232 , C.rounded 2233 2233 + 2234 2234 + -- Dark mode 2235 2235 + ------------ 2236 2236 + , C.dark__bg_darkest_hour 2224 2237 ] 2225 2238 ) 2226 2239 (bricky ··· 2228 2241 [ C.flex 2229 2242 , C.flex_grow 2230 2243 , C.rounded 2231 2231 - , C.shadow_md 2244 2244 + , C.shadow_lg 2232 2245 , C.w_full 2233 2246 2234 2247 --

+22 -15

src/Applications/UI/Authentication.elm

reviewed

··· 642 642 , C.z_10 643 643 ] 644 644 [ UI.Kit.buttonWithColor 645 645 - UI.Kit.White 645 645 + UI.Kit.Blank 646 646 UI.Kit.Filled 647 647 GetStarted 648 648 (slab 649 649 Html.span 650 650 - [ style "color" "#A19B9D" 651 651 - , style "font-size" "13px" 650 650 + [ style "font-size" "13px" 652 651 , style "letter-spacing" "0.25em" 653 652 ] 654 654 - [ C.align_middle, C.inline_block, C.pt_px ] 653 653 + [ C.align_middle 654 654 + , C.inline_block 655 655 + , C.pt_px 656 656 + ] 655 657 [ text "SIGN IN" ] 656 658 ) 657 659 ] ··· 670 672 , C.py_2 671 673 , C.relative 672 674 , C.z_10 675 675 + 676 676 + -- Dark mode 677 677 + ------------ 678 678 + , C.dark__bg_darkest_hour 673 679 ] 674 680 [ choiceButton 675 681 { action = ShowNewEncryptionKeyScreen Local 676 682 , icon = Icons.web 677 683 , infoLink = Nothing 678 678 - , isLast = False 679 684 , label = "My Browser" 680 685 , outOfOrder = False 681 686 } ··· 683 688 { action = TriggerExternalAuth Blockstack "" 684 689 , icon = \_ _ -> Svg.map never UI.Svg.Elements.blockstackLogo 685 690 , infoLink = Just "https://blockstack.org" 686 686 - , isLast = False 687 691 , label = "Blockstack" 688 692 , outOfOrder = False 689 693 } ··· 691 695 { action = TriggerExternalAuth (Dropbox { token = "" }) "" 692 696 , icon = \_ _ -> Svg.map never UI.Svg.Elements.dropboxLogo 693 697 , infoLink = Just "https://dropbox.com/" 694 694 - , isLast = False 695 698 , label = "Dropbox" 696 699 , outOfOrder = False 697 700 } ··· 711 714 } 712 715 , icon = \_ _ -> Svg.map never UI.Svg.Elements.remoteStorageLogo 713 716 , infoLink = Just "https://remotestorage.io/" 714 714 - , isLast = False 715 717 , label = "RemoteStorage" 716 718 , outOfOrder = False 717 719 } ··· 738 740 { action : msg 739 741 , icon : Int -> Coloring -> Svg msg 740 742 , infoLink : Maybe String 741 741 - , isLast : Bool 742 743 , label : String 743 744 , outOfOrder : Bool 744 745 } 745 746 -> Html msg 746 746 - choiceButton { action, icon, infoLink, isLast, label, outOfOrder } = 747 747 + choiceButton { action, icon, infoLink, label, outOfOrder } = 747 748 chunk 748 748 - [ C.border_subtle 749 749 + [ C.border_b 750 750 + , C.border_gray_300 749 751 , C.relative 750 752 751 753 -- 752 752 - , if isLast then 753 753 - C.border_b_0 754 754 + , C.last__border_b_0 754 755 755 755 - else 756 756 - C.border_b 756 756 + -- Dark mode 757 757 + ------------ 758 758 + , C.dark__border_base01 757 759 ] 758 760 [ ----------------------------------------- 759 761 -- Button ··· 933 935 , C.text_white 934 936 , C.top_full 935 937 , C.whitespace_no_wrap 938 938 + 939 939 + -- Dark mode 940 940 + ------------ 941 941 + , C.dark__bg_darkest_hour 942 942 + , C.dark__text_gray_600 936 943 ] 937 944 [ contents 938 945

+13 -1

src/Applications/UI/ContextMenu.elm

reviewed

··· 37 37 , C.text_almost_sm 38 38 , C.translate_centered 39 39 , C.z_50 40 40 + 41 41 + -- Dark mode 42 42 + ------------ 43 43 + , C.dark__bg_darkest_hour 40 44 ] 41 45 (List.map 42 46 (\item -> ··· 68 72 ) 69 73 ] 70 74 [ C.border_b 71 71 - , C.border_very_subtle 75 75 + , C.border_gray_200 72 76 , C.cursor_pointer 73 77 , C.pl_4 74 78 , C.pr_8 ··· 84 88 , ifThenElse active C.bg_base00 "" 85 89 , ifThenElse active C.text_white C.text_inherit 86 90 , ifThenElse active C.font_semibold C.font_normal 91 91 + 92 92 + -- Dark mode 93 93 + ------------ 94 94 + , C.dark__border_base00 95 95 + 96 96 + -- 97 97 + , ifThenElse active C.dark__bg_base07 "" 98 98 + , ifThenElse active C.dark__text_darkest_hour "" 87 99 ] 88 100 [ inline 89 101 [ C.align_middle

+19 -2

src/Applications/UI/Equalizer.elm

reviewed

··· 256 256 chunk 257 257 [ C.text_center ] 258 258 [ chunk 259 259 - [ C.border, C.border_black_05, C.rounded, C.flex ] 259 259 + [ C.border 260 260 + , C.border_black_05 261 261 + , C.rounded 262 262 + , C.flex 263 263 + 264 264 + -- Dark mode 265 265 + ------------ 266 266 + , C.dark__border_base00 267 267 + ] 260 268 [ knob Volume model.volume 261 269 ] 262 270 263 271 -- 264 272 , chunk 265 265 - [ C.border, C.border_black_05, C.rounded, C.flex, C.mt_4 ] 273 273 + [ C.border 274 274 + , C.border_black_05 275 275 + , C.rounded 276 276 + , C.flex 277 277 + , C.mt_4 278 278 + 279 279 + -- Dark mode 280 280 + ------------ 281 281 + , C.dark__border_base00 282 282 + ] 266 283 [ knob Low model.low 267 284 , knob Mid model.mid 268 285 , knob High model.high

+94 -13

src/Applications/UI/Kit.elm

reviewed

··· 55 55 -- Other 56 56 , background = rgb 2 7 14 57 57 , selection = colorKit.accent 58 58 - , selectionAlt = colorKit.base01 59 58 , text = colorKit.base01 60 59 } 61 60 ··· 70 69 71 70 type ButtonColor 72 71 = Accent 72 72 + | Blank 73 73 | Gray 74 74 - | White 75 74 76 75 77 76 type ButtonType ··· 135 134 Filled -> 136 135 case buttonColor of 137 136 Accent -> 138 138 - [ C.bg_accent, C.border_transparent, C.text_white ] 137 137 + [ C.bg_accent 138 138 + , C.border_transparent 139 139 + , C.text_white 140 140 + ] 141 141 + 142 142 + Blank -> 143 143 + [ C.bg_white 144 144 + , C.border_transparent 145 145 + , C.text_accent_light 146 146 + 147 147 + -- Dark mode 148 148 + ------------ 149 149 + , C.dark__bg_darkest_hour 150 150 + , C.dark__text_accent_dark 151 151 + ] 139 152 140 153 Gray -> 141 141 - [ C.bg_base04, C.border_transparent, C.text_white ] 154 154 + [ C.bg_base04 155 155 + , C.border_transparent 156 156 + , C.text_white 142 157 143 143 - White -> 144 144 - [ C.bg_white, C.border_transparent, C.text_white ] 158 158 + -- Dark mode 159 159 + ------------ 160 160 + , C.dark__bg_base05 161 161 + ] 145 162 146 163 _ -> 147 164 case buttonColor of 148 165 Accent -> 149 149 - [ C.bg_transparent, C.border_accent, C.text_accent ] 166 166 + [ C.bg_transparent 167 167 + , C.border_accent 168 168 + , C.text_accent 169 169 + ] 170 170 + 171 171 + Blank -> 172 172 + [ C.bg_transparent 173 173 + , C.border_white 174 174 + , C.text_white 175 175 + ] 150 176 151 177 Gray -> 152 152 - [ C.bg_transparent, C.border_base04, C.text_base04 ] 178 178 + [ C.bg_transparent 179 179 + , C.border_base04 180 180 + , C.text_base04 153 181 154 154 - White -> 155 155 - [ C.bg_transparent, C.border_white, C.text_white ] 182 182 + -- Dark mode 183 183 + ------------ 184 184 + , C.dark__border_base05 185 185 + , C.dark__text_base05 186 186 + ] 156 187 in 157 188 slab 158 189 tag ··· 259 290 , C.uppercase 260 291 , C.text_sm 261 292 , C.text_white 293 293 + 294 294 + -- Dark mode 295 295 + ------------ 296 296 + , C.dark__bg_base01 297 297 + , C.dark__text_base05 262 298 ] 263 299 [ Html.text text ] 264 300 ··· 318 354 , C.mt_3 319 355 , C.text_base05 320 356 , C.text_sm 357 357 + 358 358 + -- Dark mode 359 359 + ------------ 360 360 + , C.dark__text_base03 321 361 ] 322 362 [ child ] 323 363 ··· 361 401 , C.bg_no_repeat 362 402 , C.h_0 363 403 , C.left_full 404 404 + , C.opacity_025 364 405 , C.pt_full 365 406 , C.top_0 407 407 + , C.transition_1000 408 408 + , C.transition_opacity 366 409 , C.z_0 410 410 + 411 411 + -- Dark mode 412 412 + ------------ 413 413 + , C.dark__opacity_40 367 414 ] 368 415 [] 369 416 ··· 380 427 , C.scrolling_touch 381 428 , C.z_50 382 429 430 430 + -- Dark mode 431 431 + ------------ 432 432 + , C.dark__bg_darkest_hour 433 433 + 383 434 -- 384 435 , ifThenElse scrolling C.overflow_y_auto C.overflow_y_hidden 385 436 ] ··· 396 447 397 448 -- 398 449 , C.focus_within__text_black 450 450 + 451 451 + -- Dark mode 452 452 + ------------ 453 453 + , C.dark__text_gray_600 454 454 + , C.dark__focus_within__text_base07 399 455 ] 400 456 [ slab 401 457 Html.select ··· 405 461 , C.border_l_0 406 462 , C.border_r_0 407 463 , C.border_t_0 408 408 - , C.border_less_subtle 464 464 + , C.border_gray_400 409 465 , C.bg_transparent 410 466 , C.block 411 467 , C.leading_normal ··· 420 476 421 477 -- 422 478 , C.focus__border_black 479 479 + 480 480 + -- Dark mode 481 481 + ------------ 482 482 + , C.dark__border_base02 483 483 + , C.dark__text_gray_600 484 484 + 485 485 + -- 486 486 + , C.dark__focus__border_base07 423 487 ] 424 488 options 425 489 , chunk ··· 449 513 , C.text_base01 450 514 , C.text_sm 451 515 , C.w_full 516 516 + 517 517 + -- Dark mode 518 518 + ------------ 519 519 + , C.dark__bg_darkest_hour 520 520 + , C.dark__text_gray_600 452 521 ] 453 522 [] 454 523 ··· 481 550 , C.border_l_0 482 551 , C.border_r_0 483 552 , C.border_t_0 484 484 - , C.border_less_subtle 553 553 + , C.border_gray_400 485 554 , C.bg_transparent 486 555 , C.block 487 556 , C.leading_normal ··· 495 564 -- 496 565 , C.focus__border_black 497 566 , C.focus__outline_none 567 567 + 568 568 + -- Dark mode 569 569 + ------------ 570 570 + , C.dark__border_base02 571 571 + , C.dark__text_gray_600 572 572 + 573 573 + -- 574 574 + , C.dark__focus__border_base07 498 575 ] 499 576 [] 500 577 ··· 514 591 , C.text_base01 515 592 , C.text_sm 516 593 , C.w_full 594 594 + 595 595 + -- Dark mode 596 596 + ------------ 597 597 + , C.dark__bg_darkest_hour 598 598 + , C.dark__text_gray_600 517 599 ] 518 600 [] 519 601 ··· 528 610 logoBackdropStyles = 529 611 [ Css.backgroundImage (Css.url "images/diffuse__icon-dark.svg") 530 612 , Css.backgroundPosition2 (Css.pct -43.5) (Css.px 98) 531 531 - , Css.opacity (Css.num 0.025) 532 613 , Css.property "transform-origin" "left top" 533 614 , Css.transform (Css.rotate (Css.deg 90)) 534 615 , Css.width (Css.vh 105)

+7 -4

src/Applications/UI/List.elm

reviewed

··· 19 19 20 20 21 21 type alias Action msg = 22 22 - { color : Coloring 23 23 - , icon : Int -> Coloring -> VirtualDom.Node msg 22 22 + { icon : Int -> Coloring -> VirtualDom.Node msg 24 23 , msg : Maybe (Mouse.Event -> msg) 25 24 , title : String 26 25 } ··· 80 79 <| 81 80 chunk 82 81 [ C.border_b 83 83 - , C.border_very_subtle 82 82 + , C.border_gray_200 84 83 , C.flex 85 84 , C.items_center 86 85 87 86 -- 88 87 , ifThenElse (Maybe.isJust msg) C.cursor_pointer "" 89 88 , ifThenElse isSelected C.text_accent "" 89 89 + 90 90 + -- Dark mode 91 91 + ------------ 92 92 + , C.dark__border_base00 90 93 ] 91 94 [ -- Label 92 95 -------- ··· 161 164 , C.pl_1 162 165 , ifThenElse (Maybe.isJust action.msg) C.cursor_pointer "" 163 166 ] 164 164 - [ action.icon 16 action.color ] 167 167 + [ action.icon 16 Inherit ]

+15 -3

src/Applications/UI/Navigation.elm

reviewed

··· 114 114 [ style "font-size" "12.5px" ] 115 115 [ C.antialiased 116 116 , C.border_b 117 117 - , C.border_subtle 117 117 + , C.border_gray_300 118 118 + 119 119 + -- Dark mode 120 120 + ------------ 121 121 + , C.dark__border_base01 118 122 ] 119 123 [ chunk 120 124 [ C.flex ] ··· 170 174 ] 171 175 [ ifThenElse (labelType == Hidden) C.flex_shrink_0 C.flex_grow 172 176 , C.bg_transparent 173 173 - , C.border_subtle 177 177 + , C.border_gray_300 174 178 , C.border_r 175 179 , C.cursor_pointer 176 180 , C.flex_basis_0 ··· 179 183 , C.no_underline 180 184 , C.px_4 181 185 , C.py_3 182 182 - , C.text_base01 186 186 + , C.text_base02 183 187 184 188 -- 185 189 , C.fixate__text_black 186 190 , C.last__border_r_0 191 191 + 192 192 + -- Dark mode 193 193 + ------------ 194 194 + , C.dark__border_base01 195 195 + , C.dark__text_base06 196 196 + 197 197 + -- 198 198 + , C.dark__fixate__text_base07 187 199 ] 188 200 [ chunk 189 201 [ C.border_b

+7 -5

src/Applications/UI/Playlists.elm

reviewed

··· 258 258 else 259 259 { label = text playlist.name 260 260 , actions = 261 261 - [ { color = Inherit 262 262 - , icon = Icons.more_vert 261 261 + [ { icon = Icons.more_vert 263 262 , msg = Just (ShowListMenu playlist) 264 263 , title = "Menu" 265 264 } ··· 394 393 , C.font_display 395 394 , C.mb_3 396 395 , C.mt_10 397 397 - , C.text_base06 396 396 + , C.text_base05 398 397 , C.text_xxs 399 398 , C.truncate 400 399 , C.uppercase 400 400 + 401 401 + -- Dark mode 402 402 + ------------ 403 403 + , C.dark__text_base04 401 404 ] 402 405 [ UI.Kit.inlineIcon Icons.folder 403 406 , inline [ C.font_bold, C.ml_2 ] [ text cat ] ··· 419 422 [] 420 423 [ text playlist.name ] 421 424 , actions = 422 422 - [ { color = Color selectionColor 423 423 - , icon = Icons.check 425 425 + [ { icon = \size _ -> Icons.check size (Color selectionColor) 424 426 , msg = Nothing 425 427 , title = "Selected playlist" 426 428 }

+3

src/Applications/UI/Ports.elm

reviewed

··· 52 52 port noteProgress : ({ trackId : String, progress : Float } -> msg) -> Sub msg 53 53 54 54 55 55 + port preferredColorSchemaChanged : ({ dark : Bool } -> msg) -> Sub msg 56 56 + 57 57 + 55 58 port requestNext : (() -> msg) -> Sub msg 56 59 57 60

+29 -12

src/Applications/UI/Queue.elm

reviewed

··· 8 8 import Html exposing (Html, text) 9 9 import Html.Attributes exposing (href) 10 10 import Html.Events.Extra.Mouse as Mouse 11 11 + import Icons 11 12 import List.Extra as List 12 13 import Material.Icons exposing (Coloring(..)) 13 14 import Material.Icons.Action as Icons ··· 30 31 import UI.Queue.Page as Queue exposing (Page(..)) 31 32 import UI.Reply exposing (Reply(..)) 32 33 import UI.Sources.Page 34 34 + import VirtualDom 33 35 34 36 35 37 ··· 578 580 |> Maybe.map (.identifiedTrack >> Tuple.first >> .indexInList) 579 581 |> (==) (Just identifiers.indexInList) 580 582 581 581 - iconColor = 583 583 + iconFn = 582 584 if item.manualEntry then 583 583 - Color UI.Kit.colorKit.base03 585 585 + identity 584 586 585 587 else 586 586 - Color UI.Kit.colorKit.base07 588 588 + Icons.wrapped subtleFutureIconClasses 587 589 in 588 590 { label = 589 591 inline ··· 596 598 597 599 else 598 600 C.text_base05 601 601 + 602 602 + -- Dark mode 603 603 + ------------ 604 604 + , if item.manualEntry || isSelected then 605 605 + C.dark__text_inherit 606 606 + 607 607 + else 608 608 + C.dark__text_base04 599 609 ] 600 610 [ inline 601 611 [ C.inline_block 602 602 - , C.text_xs 603 612 , C.mr_2 604 613 , C.opacity_60 614 614 + , C.text_xs 605 615 ] 606 616 [ text (String.fromInt <| idx + 1), text "." ] 607 617 , text (track.tags.artist ++ " - " ++ track.tags.title) ··· 609 619 , actions = 610 620 [ -- Remove 611 621 --------- 612 612 - { color = iconColor 613 613 - , icon = 622 622 + { icon = 614 623 if item.manualEntry then 615 615 - Icons.remove_circle_outline 624 624 + iconFn Icons.remove_circle_outline 616 625 617 626 else 618 618 - Icons.not_interested 627 627 + iconFn Icons.not_interested 619 628 , msg = Just (\_ -> RemoveItem { index = idx, item = item }) 620 629 , title = ifThenElse item.manualEntry "Remove" "Ignore" 621 630 } 622 631 623 632 -- Menu 624 633 ------- 625 625 - , { color = iconColor 626 626 - , icon = Icons.more_vert 634 634 + , { icon = iconFn Icons.more_vert 627 635 , msg = Just (ShowFutureMenu item { index = idx }) 628 636 , title = "Menu" 629 637 } ··· 631 639 , msg = Just (Select item) 632 640 , isSelected = isSelected 633 641 } 642 642 + 643 643 + 644 644 + subtleFutureIconClasses : List String 645 645 + subtleFutureIconClasses = 646 646 + [ C.text_gray_500 647 647 + 648 648 + -- Dark mode 649 649 + ------------ 650 650 + , C.dark__text_base02 651 651 + ] 634 652 635 653 636 654 ··· 708 726 , text (track.tags.artist ++ " - " ++ track.tags.title) 709 727 ] 710 728 , actions = 711 711 - [ { color = Inherit 712 712 - , icon = Icons.more_vert 729 729 + [ { icon = Icons.more_vert 713 730 , msg = Just (ShowHistoryMenu item) 714 731 , title = "Menu" 715 732 }

+33 -16

src/Applications/UI/Settings.elm

reviewed

··· 239 239 , C.mr_1 240 240 , C.rounded_sm 241 241 , C.z_10 242 242 + 243 243 + -- 244 244 + , C.sm__mb_2 245 245 + , C.sm__mr_2 246 246 + 247 247 + -- 248 248 + , C.md__mb_1 249 249 + , C.md__mr_1 242 250 ] 243 251 [] 244 252 245 253 else 246 246 - chunk 247 247 - [ C.absolute 248 248 - , C.inset_0 249 249 - , C.bg_black_05 250 250 - , C.mb_1 251 251 - , C.mr_1 252 252 - , C.rounded_sm 253 253 - , C.z_10 254 254 - ] 255 255 - [] 254 254 + nothing 256 255 257 256 -- 258 257 , brick ··· 271 270 , C.mr_1 272 271 , C.rounded_sm 273 272 , C.z_20 273 273 + 274 274 + -- 275 275 + , C.sm__mb_2 276 276 + , C.sm__mr_2 277 277 + 278 278 + -- 279 279 + , C.md__mb_1 280 280 + , C.md__mr_1 281 281 + 282 282 + -- 274 283 , ifThenElse isActive C.opacity_20 C.opacity_100 275 284 ] 276 285 [] ··· 292 301 , C.text_white 293 302 , C.text_xs 294 303 , C.z_30 304 304 + 305 305 + -- 306 306 + , C.sm__mb_2 307 307 + , C.sm__mr_2 308 308 + 309 309 + -- 310 310 + , C.md__mb_1 311 311 + , C.md__mr_1 312 312 + 313 313 + -- Dark mode 314 314 + ------------ 315 315 + , C.dark__text_base07 295 316 ] 296 317 [ chunk 297 297 - [ C.hidden 298 298 - , C.md__block 299 299 - , C.mt_px 300 300 - ] 301 301 - [ Icons.check 16 Inherit 302 302 - ] 318 318 + [ C.mt_px ] 319 319 + [ Icons.check 16 Inherit ] 303 320 ] 304 321 305 322 else

+5 -10

src/Applications/UI/Sources.elm

reviewed

··· 446 446 List.append 447 447 (case ( process, processingError ) of 448 448 ( Just ( _, progress ), _ ) -> 449 449 - [ { color = Inherit 450 450 - , icon = 449 449 + [ { icon = 451 450 \_ _ -> 452 451 if progress < 0.05 then 453 452 inline ··· 472 471 , msg = Nothing 473 472 , title = "" 474 473 } 475 475 - , { color = Inherit 476 476 - , icon = Icons.sync 474 474 + , { icon = Icons.sync 477 475 , msg = Nothing 478 476 , title = "Currently processing" 479 477 } ··· 481 479 482 480 ( Nothing, Just { error, sourceId } ) -> 483 481 if sourceId == source.id then 484 484 - [ { color = Color UI.Kit.colors.error 485 485 - , icon = Icons.error_outline 482 482 + [ { icon = \size _ -> Icons.error_outline size (Color UI.Kit.colors.error) 486 483 , msg = Nothing 487 484 , title = error 488 485 } ··· 494 491 _ -> 495 492 [] 496 493 ) 497 497 - [ { color = Inherit 498 498 - , icon = 494 494 + [ { icon = 499 495 if source.enabled then 500 496 Icons.check 501 497 ··· 515 511 } 516 512 517 513 -- 518 518 - , { color = Inherit 519 519 - , icon = Icons.more_vert 514 514 + , { icon = Icons.more_vert 520 515 , msg = Just (SourceContextMenu source) 521 516 , title = "Menu" 522 517 }

+8 -52

src/Applications/UI/Svg/Elements.elm

reviewed

··· 1 1 - module UI.Svg.Elements exposing (blockstackLogo, dropboxLogo, ipfsLogo, loading, remoteStorageLogo, solidLogo, textileLogo, threeBoxLogo) 1 1 + module UI.Svg.Elements exposing (blockstackLogo, dropboxLogo, ipfsLogo, loading, remoteStorageLogo, textileLogo, threeBoxLogo) 2 2 3 3 import Color 4 4 import Svg exposing (..) ··· 21 21 [ d "M0.986947 7.23422C-3.72529e-07 9.51492 -2.53999e-07 12.4233 2.57986e-10 18.24L9.51418e-07 40L1.90258e-06 61.76C2.15683e-06 67.5767 0 70.4851 0.986947 72.7658C2.19911 75.5669 4.43309 77.8009 7.23423 79.0131C9.51492 80 12.4233 80 18.24 80H40H61.76C67.5767 80 70.4851 80 72.7658 79.0131C75.5669 77.8009 77.8009 75.5669 79.0131 72.7658C80 70.4851 80 67.5767 80 61.76V40V18.24C80 12.4233 80 9.51492 79.0131 7.23422C77.8009 4.43309 75.5669 2.1991 72.7658 0.986942C70.4851 -4.47035e-07 67.5767 -2.53999e-07 61.76 2.58033e-10L40 9.51418e-07L18.24 1.90258e-06C12.4233 2.15684e-06 9.375 1.93715e-06 7.23423 0.986945C4.43309 2.19911 2.19911 4.43309 0.986947 7.23422ZM52.7711 34.4643C48.7788 34.4643 45.5416 31.2272 45.5416 27.2341C45.5416 23.2429 48.7788 20.0059 52.7711 20.0059C56.7633 20.0059 60.0005 23.2429 60.0005 27.2341C60.0005 31.2272 56.7633 34.4643 52.7711 34.4643ZM34.4525 27.2334C34.4525 31.2239 31.2169 34.4596 27.2255 34.4596C23.2361 34.4596 20.0005 31.2239 20.0005 27.2334C20.0005 23.2429 23.2361 20.0072 27.2255 20.0072C31.2169 20.0072 34.4525 23.2429 34.4525 27.2334ZM52.7718 45.5639C48.7786 45.5639 45.5415 48.8011 45.5415 52.7934C45.5415 56.7856 48.7786 60.0228 52.7718 60.0228C56.7629 60.0228 60 56.7856 60 52.7934C60 48.8011 56.7629 45.5639 52.7718 45.5639ZM27.2261 45.571C31.2166 45.571 34.4522 48.8066 34.4522 52.7979C34.4522 56.7872 31.2166 60.0228 27.2261 60.0228C23.2357 60.0228 20 56.7872 20 52.7979C20 48.8066 23.2357 45.571 27.2261 45.571Z" 22 22 23 23 -- 24 24 - , fill (Color.toCssString UI.Kit.colors.text) 24 24 + , fill "currentColor" 25 25 , fillRule "evenodd" 26 26 , clipRule "evenodd" 27 27 ] ··· 42 42 [ transform "translate(-50.017 -515.51)" ] 43 43 [ Svg.path 44 44 [ d "m283.13 546.35-160.74 92.806c0.32126 2.8543 0.32125 5.7352 0 8.5894l160.75 92.806c13.554-10.001 32.043-10.001 45.597 0l160.75-92.807c-0.32126-2.8543-0.32293-5.7338-0.001-8.588l-160.74-92.806c-13.554 10.001-32.044 10.001-45.599 0zm221.79 127.03-160.92 93.84c1.884 16.739-7.3611 32.751-22.799 39.489l0.18062 184.58c2.6325 1.1489 5.1267 2.5886 7.438 4.294l160.75-92.805c-1.884-16.739 7.3611-32.752 22.799-39.49v-185.61c-2.6325-1.1489-5.1281-2.5886-7.4394-4.294zm-397.81 1.0315c-2.3112 1.7054-4.8054 3.1465-7.438 4.2954v185.61c15.438 6.7378 24.683 22.75 22.799 39.489l160.74 92.806c2.3112-1.7054 4.8069-3.1465 7.4394-4.2954v-185.61c-15.438-6.7378-24.683-22.75-22.799-39.489l-160.74-92.81z" 45 45 - , fill "#fff" 45 45 + , fill "currentColor" 46 46 ] 47 47 [] 48 48 ] ··· 50 50 -- Group 2 51 51 ---------- 52 52 , g 53 53 - [ fill (Color.toCssString UI.Kit.colors.text) 53 53 + [ fill "currentColor" 54 54 , transform "translate(0 -196.66)" 55 55 ] 56 56 [ Svg.path ··· 83 83 [ d "m12.5 0l-12.5 8.1 8.7 7 12.5-7.8-8.7-7.3zm-12.5 21.9l12.5 8.2 8.7-7.3-12.5-7.7-8.7 6.8zm21.2 0.9l8.8 7.3 12.4-8.1-8.6-6.9-12.6 7.7zm21.2-14.7l-12.4-8.1-8.8 7.3 12.6 7.8 8.6-7zm-21.1 16.3l-8.8 7.3-3.7-2.5v2.8l12.5 7.5 12.5-7.5v-2.8l-3.8 2.5-8.7-7.3z" 84 84 85 85 -- 86 86 - , fill (Color.toCssString UI.Kit.colors.text) 86 86 + , fill "currentColor" 87 87 ] 88 88 [] 89 89 ] ··· 105 105 [ points "370,754 0,542 0,640 185,747 370,853 554,747 739,640 739,525 739,525 739,476 739,427 739,378 653,427 370,589 86,427 86,427 86,361 185,418 370,524 554,418 653,361 739,311 739,213 739,213 554,107 370,0 185,107 58,180 144,230 228,181 370,100 511,181 652,263 370,425 87,263 87,263 0,213 0,213 0,311 0,378 0,427 0,476 86,525 185,582 370,689 554,582 653,525 653,590 653,592" 106 106 107 107 -- 108 108 - , fill (Color.toCssString UI.Kit.colors.text) 109 109 - ] 110 110 - [] 111 111 - ] 112 112 - 113 113 - 114 114 - solidLogo : Svg Never 115 115 - solidLogo = 116 116 - svg 117 117 - [ height "16" 118 118 - , viewBox "0 0 1200 1200" 119 119 - , width "16" 120 120 - ] 121 121 - [ Svg.path 122 122 - [ fill (Color.toCssString UI.Kit.colors.text) 123 123 - , d "M280.6,1021.9L61.1,641.2c-20.4-35.3-20.4-78.8,0-114l219.5-380.8c20.5-35.4,58.2-57.1,98.9-57.1 h439c40.7,0,78.5,21.7,98.9,57.1L1137.1,527c20.4,35.3,20.4,78.8,0,114l-219.6,381c-20.5,35.4-58.2,57.1-98.9,57.1H379.7 C338.8,1079.1,301.1,1057.3,280.6,1021.9z" 124 124 - ] 125 125 - [] 126 126 - , Svg.path 127 127 - [ fill "#fff" 128 128 - , d "M377.9,510.9h451.7c5.7,0,10.2-4.6,10.2-10.2v-84.7c0-56.3-45.7-102-102-102H466.6 c-78.9-0.1-142.8,63.8-142.8,142.7l0,0C323.7,486.8,347.9,510.9,377.9,510.9z" 129 129 - ] 130 130 - [] 131 131 - , Svg.path 132 132 - [ fill "#fff" 133 133 - , d "M422.2,885.1h269.9c81.5,0,147.7-66.2,147.7-147.7l0,0c0-27.2-22-49.3-49.3-49.3H333.6 c-5.6,0-9.8,4.5-9.8,9.8v88.6C323.7,841,367.9,885.1,422.2,885.1z" 134 134 - ] 135 135 - [] 136 136 - , Svg.path 137 137 - [ fill "#fff" 138 138 - , d "M343.8,499.7l336.9,336.9c22.3,22.3,58.4,22.3,80.7,0l58.4-58.4c22.3-22.3,22.3-58.4,0-80.7 L483,360.6c-22.3-22.3-58.4-22.3-80.7,0L343.9,419C321.4,441.3,321.4,477.5,343.8,499.7z" 139 139 - ] 140 140 - [] 141 141 - 142 142 - -- 143 143 - , polygon 144 144 - [ fill "#444" 145 145 - , fillOpacity "0.3" 146 146 - , points "686.2,842.3 488.3,688.1 532.1,688.1" 147 147 - ] 148 148 - [] 149 149 - , polygon 150 150 - [ fill "#444" 151 151 - , fillOpacity "0.3" 152 152 - , points "477.4,355 633.3,510.9 686.2,510.9" 108 108 + , fill "currentColor" 153 109 ] 154 110 [] 155 111 ] ··· 163 119 , width "16" 164 120 ] 165 121 [ Svg.path 166 166 - [ fill (Color.toCssString UI.Kit.colors.text) 122 122 + [ fill "currentColor" 167 123 , d "m 42,0 h 206 c 23.19596,0 42,18.80404 42,42 v 205 c 0,23.19596 -18.80404,42 -42,42 H 42 C 18.80404,289 0,270.19596 0,247 V 42 C 0,18.80404 18.80404,0 42,0 Z m 104.4375,47.823 c -8.54404,0 -16.53171,1.179238 -23.96325,3.53775 -7.43154,2.358512 -14.01747,5.873977 -19.758,10.5465 -5.740529,4.672523 -10.524231,10.501965 -14.35125,17.4885 -3.827019,6.986535 -6.407993,15.107704 -7.743,24.36375 l 17.355,3.0705 c 1.602008,0.267 3.11499,0.4005 4.539,0.4005 3.02602,0 5.47349,-0.73424 7.3425,-2.20275 1.86901,-1.46851 3.33749,-3.89373 4.4055,-7.27575 2.04701,-6.497032 5.65147,-11.814729 10.8135,-15.95325 5.16203,-4.138521 11.65896,-6.20775 19.491,-6.20775 8.63304,0 15.44147,2.336227 20.4255,7.00875 4.98402,4.672523 7.476,11.592204 7.476,20.75925 0,4.27202 -0.62299,8.18798 -1.869,11.748 -1.24601,3.56002 -3.44873,6.60824 -6.60825,9.14475 -3.15952,2.53651 -7.40922,4.51674 -12.74925,5.94075 -5.34003,1.42401 -12.05946,2.1805 -20.1585,2.2695 v 23.496 c 9.79005,0 17.59972,0.75649 23.42925,2.2695 5.82953,1.51301 10.30173,3.60449 13.41675,6.2745 3.11502,2.67001 5.16199,5.89623 6.141,9.67875 0.979,3.78252 1.4685,7.98773 1.4685,12.61575 0,3.64902 -0.68974,7.27573 -2.06925,10.88025 -1.37951,3.60452 -3.47099,6.87523 -6.2745,9.81225 -2.80351,2.93701 -6.29673,5.31774 -10.47975,7.14225 -4.18302,1.82451 -9.07797,2.73675 -14.685,2.73675 -4.98403,0 -9.27823,-0.73424 -12.88275,-2.20275 -3.60452,-1.46851 -6.74174,-3.38199 -9.41175,-5.7405 -2.67001,-2.35851 -4.96174,-5.05073 -6.87525,-8.07675 -1.91351,-3.02602 -3.67124,-6.09648 -5.27325,-9.2115 -0.97901,-1.86901 -2.38074,-3.293 -4.20525,-4.272 -1.82451,-0.97901 -3.893738,-1.4685 -6.20775,-1.4685 -2.581013,0 -5.117487,0.53399 -7.6095,1.602 l -14.5515,6.0075 c 2.670013,8.27704 5.873981,15.57497 9.612,21.894 3.738019,6.31903 8.276973,11.65898 13.617,16.02 5.34003,4.36102 11.61446,7.65399 18.8235,9.879 7.20904,2.22501 15.66395,3.3375 25.365,3.3375 8.90004,0 17.33271,-1.29049 25.29825,-3.8715 7.96554,-2.58101 14.97422,-6.38573 21.02625,-11.41425 6.05203,-5.02853 10.85798,-11.23621 14.418,-18.62325 3.56002,-7.38704 5.34,-15.88645 5.34,-25.4985 0,-11.30306 -2.84797,-20.69246 -8.544,-28.1685 -5.69603,-7.47604 -14.32894,-13.03848 -25.899,-16.6875 4.80602,-1.60201 9.10023,-3.60449 12.88275,-6.0075 3.78252,-2.40301 6.98649,-5.33998 9.612,-8.811 2.62551,-3.47102 4.62799,-7.54273 6.0075,-12.21525 1.37951,-4.67252 2.06925,-10.07922 2.06925,-16.22025 0,-7.031035 -1.35724,-13.57247 -4.07175,-19.6245 C 197.85724,71.94197 193.96352,66.668773 188.8905,62.17425 183.81747,57.679727 177.69879,54.164263 170.53425,51.62775 163.36971,49.091237 155.33754,47.823 146.4375,47.823 Z" 168 124 ] 169 125 [] ··· 202 158 textileLogo : Svg Never 203 159 textileLogo = 204 160 svg 205 205 - [ fill (Color.toCssString UI.Kit.colors.text) 161 161 + [ fill "currentColor" 206 162 , height "16" 207 163 , viewBox "0 0 4030 4050" 208 164 , width "16"

+17 -14

src/Applications/UI/Tracks.elm

reviewed

··· 627 627 type alias Dependencies = 628 628 { amountOfSources : Int 629 629 , bgColor : Maybe Color 630 630 + , darkMode : Bool 630 631 , isOnIndexPage : Bool 631 632 , sourceIdsBeingProcessed : List String 632 633 , viewport : Viewport ··· 684 685 chunk 685 686 [ C.border_b 686 687 , C.border_r 687 687 - , C.border_subtle 688 688 + , C.border_gray_300 688 689 , C.flex 689 690 , C.flex_grow 690 691 , C.mt_px 691 692 , C.overflow_hidden 692 693 , C.relative 694 694 + , C.text_gray_600 695 695 + 696 696 + -- Dark mode 697 697 + ------------ 698 698 + , C.dark__border_base01 699 699 + , C.dark__text_base04 693 700 ] 694 701 [ -- Input 695 702 -------- ··· 731 738 , C.top_0 732 739 , C.z_0 733 740 ] 734 734 - [ Icons.search 16 searchIconColoring ] 741 741 + [ Icons.search 16 Inherit ] 735 742 736 743 -- Actions 737 744 ---------- ··· 753 760 , C.ml_1 754 761 , C.mt_px 755 762 ] 756 756 - [ Icons.clear 16 searchIconColoring ] 763 763 + [ Icons.clear 16 Inherit ] 757 764 758 765 Nothing -> 759 766 nothing ··· 771 778 Icons.favorite 16 (Color UI.Kit.colorKit.base08) 772 779 773 780 False -> 774 774 - Icons.favorite_border 16 searchIconColoring 781 781 + Icons.favorite_border 16 Inherit 775 782 ] 776 783 777 784 -- 3 ··· 782 789 [ C.cursor_pointer 783 790 , C.ml_1 784 791 ] 785 785 - [ Icons.more_vert 16 searchIconColoring ] 792 792 + [ Icons.more_vert 16 Inherit ] 786 793 787 794 -- 4 788 795 , case selectedPlaylist of ··· 808 815 , C.text_white_90 809 816 , C.text_xxs 810 817 , C.transition_500 818 818 + 819 819 + -- Dark mode 820 820 + ------------ 821 821 + , C.dark__text_white_60 811 822 ] 812 823 [ chunk 813 824 [ C.px_px, C.pt_px ] ··· 956 967 ) 957 968 |> UI.Tracks.Scene.List.view 958 969 { bgColor = deps.bgColor 970 970 + , darkMode = deps.darkMode 959 971 , height = deps.viewport.height 960 972 , isVisible = deps.isOnIndexPage 961 973 , showAlbum = deps.viewport.width >= 720 ··· 969 981 model.sortDirection 970 982 model.selectedTrackIndexes 971 983 |> Html.map ListSceneMsg 972 972 - 973 973 - 974 974 - 975 975 - -- 🖼 976 976 - 977 977 - 978 978 - searchIconColoring : Coloring 979 979 - searchIconColoring = 980 980 - Color (Color.rgb255 198 198 198)

+91 -28

src/Applications/UI/Tracks/Scene/List.elm

reviewed

··· 98 98 99 99 type alias Dependencies = 100 100 { bgColor : Maybe Color 101 101 + , darkMode : Bool 101 102 , height : Float 102 103 , isVisible : Bool 103 104 , showAlbum : Bool ··· 105 106 106 107 107 108 type alias DerivedColors = 108 108 - { default : String 109 109 - , dark : String 110 110 - , light : String 109 109 + { background : String 111 110 , subtle : String 111 111 + , text : String 112 112 } 113 113 114 114 ··· 194 194 Maybe.withDefault UI.Kit.colors.text deps.bgColor 195 195 196 196 derivedColors = 197 197 - { default = Color.toCssString color 198 198 - , dark = Color.toCssString (Color.darken 0.3 color) 199 199 - , light = Color.toCssString (Color.fadeOut 0.625 color) 200 200 - , subtle = Color.toCssString (Color.fadeOut 0.575 color) 201 201 - } 197 197 + if deps.darkMode then 198 198 + { background = Color.toCssString color 199 199 + , subtle = Color.toCssString (Color.darken 0.1 color) 200 200 + , text = Color.toCssString (Color.darken 0.475 color) 201 201 + } 202 202 + 203 203 + else 204 204 + { background = Color.toCssString (Color.fadeOut 0.625 color) 205 205 + , subtle = Color.toCssString (Color.fadeOut 0.575 color) 206 206 + , text = Color.toCssString (Color.darken 0.3 color) 207 207 + } 202 208 in 203 209 { itemView = 204 210 case maybeDnD of ··· 281 287 [ C.antialiased 282 288 , C.bg_white 283 289 , C.border_b 284 284 - , C.border_subtle 290 290 + , C.border_gray_300 285 291 , C.flex 286 292 , C.font_semibold 287 293 , C.relative 288 294 , C.text_base06 289 295 , C.text_xxs 290 296 , C.z_20 297 297 + 298 298 + -- Dark mode 299 299 + ------------ 300 300 + , C.dark__bg_darkest_hour 301 301 + , C.dark__border_base01 302 302 + , C.dark__text_base03 291 303 ] 292 304 (if isPlaylist && showAlbum then 293 305 [ headerColumn "" 4.5 Nothing Bypass ··· 333 345 , style "width" (String.fromFloat width ++ "%") 334 346 ] 335 347 [ C.border_l 336 336 - , C.border_subtle 348 348 + , C.border_gray_300 337 349 , C.cursor_default 338 350 , C.leading_relaxed 339 351 , C.pl_2 ··· 345 357 , C.first__cursor_default 346 358 , C.first__pl_4 347 359 , C.last__pr_4 360 360 + 361 361 + -- Dark mode 362 362 + ------------ 363 363 + , C.dark__border_base01 348 364 ] 349 365 [ chunk 350 366 [ C.mt_px, C.opacity_90, C.pt_px ] ··· 390 406 391 407 listStyles : List (Html.Attribute msg) 392 408 listStyles = 393 393 - [ C.pb_1, C.pt_1 ] 409 409 + [ C.pb_1 410 410 + , C.pt_1 411 411 + ] 394 412 |> String.join " " 395 413 |> class 396 414 |> List.singleton ··· 428 446 429 447 isSelected = 430 448 List.member idx selectedTrackIndexes 449 449 + 450 450 + isOddRow = 451 451 + modBy 2 idx == 1 431 452 432 453 rowIdentifiers = 433 454 { isMissing = identifiers.isMissing ··· 475 496 -- 476 497 , ifThenElse identifiers.isMissing "" C.cursor_pointer 477 498 , ifThenElse isSelected C.font_semibold "" 499 499 + 500 500 + -- 501 501 + , ifThenElse 502 502 + rowIdentifiers.isNowPlaying 503 503 + "" 504 504 + (ifThenElse 505 505 + isOddRow 506 506 + C.bg_white 507 507 + C.bg_gray_100 508 508 + ) 509 509 + 510 510 + -- Dark mode 511 511 + ------------ 512 512 + , ifThenElse 513 513 + rowIdentifiers.isNowPlaying 514 514 + "" 515 515 + (ifThenElse 516 516 + isOddRow 517 517 + C.dark__bg_darkest_hour 518 518 + C.dark__bg_near_darkest_hour 519 519 + ) 478 520 ] 479 521 (if showAlbum then 480 522 [ favouriteColumn favouritesOnly favIdentifiers derivedColors ··· 508 550 509 551 isSelected = 510 552 List.member idx selectedTrackIndexes 553 553 + 554 554 + isOddRow = 555 555 + modBy 2 idx == 1 511 556 512 557 rowIdentifiers = 513 558 { isMissing = identifiers.isMissing ··· 562 607 -- 563 608 , ifThenElse identifiers.isMissing "" C.cursor_pointer 564 609 , ifThenElse isSelected C.font_semibold "" 610 610 + 611 611 + -- 612 612 + , ifThenElse 613 613 + rowIdentifiers.isNowPlaying 614 614 + "" 615 615 + (ifThenElse 616 616 + isOddRow 617 617 + C.bg_white 618 618 + C.bg_gray_100 619 619 + ) 620 620 + 621 621 + -- Dark mode 622 622 + ------------ 623 623 + , ifThenElse 624 624 + rowIdentifiers.isNowPlaying 625 625 + "" 626 626 + (ifThenElse 627 627 + isOddRow 628 628 + C.dark__bg_darkest_hour 629 629 + C.dark__bg_near_darkest_hour 630 630 + ) 565 631 ] 566 632 (if showAlbum then 567 633 [ favouriteColumn favouritesOnly favIdentifiers derivedColors ··· 725 791 let 726 792 bgColor = 727 793 if isNowPlaying then 728 728 - derivedColors.light 729 729 - 730 730 - else if modBy 2 idx == 1 then 731 731 - rowBackgroundColors.whiteNear 794 794 + derivedColors.background 732 795 733 796 else 734 734 - rowBackgroundColors.white 797 797 + "" 735 798 736 799 color = 737 737 - if isSelected then 738 738 - rowFontColors.selection 739 739 - 740 740 - else if isNowPlaying then 741 741 - derivedColors.dark 800 800 + if isNowPlaying then 801 801 + derivedColors.text 742 802 743 803 else if isMissing then 744 744 - rowFontColors.grey 804 804 + rowFontColors.gray 745 805 746 806 else 747 747 - rowFontColors.default 807 807 + "" 748 808 in 749 809 [ style "background-color" bgColor 750 810 , style "color" color ··· 774 834 [ C.flex_shrink_0 775 835 , C.font_normal 776 836 , C.pl_4 837 837 + , C.text_gray_500 838 838 + 839 839 + -- Dark mode 840 840 + ------------ 841 841 + , C.dark__text_base02 777 842 ] 778 843 [ if identifiers.isFavourite then 779 844 text "t" ··· 788 853 let 789 854 color = 790 855 if isNowPlaying && isFavourite then 791 791 - derivedColors.dark 856 856 + derivedColors.text 792 857 793 858 else if isNowPlaying then 794 859 derivedColors.subtle 795 860 796 861 else if favouritesOnly || not isFavourite then 797 797 - favColors.gray 862 862 + "" 798 863 799 864 else 800 865 favColors.red ··· 861 926 862 927 863 928 rowFontColors = 864 864 - { default = Color.toCssString UI.Kit.colors.text 865 865 - , grey = Color.toCssString UI.Kit.colorKit.base04 866 866 - , selection = Color.toCssString UI.Kit.colors.selectionAlt 929 929 + { gray = Color.toCssString UI.Kit.colorKit.base04 867 930 , white = Color.toCssString (Color.rgb 1 1 1) 868 931 } 869 932

+1 -1

src/Css/About.css

reviewed

··· 100 100 ---- */ 101 101 102 102 pre { 103 103 - @apply border-2 border-less-subtle leading-relaxed overflow-x-auto overflow-y-hidden p-6 rounded text-sm; 103 103 + @apply border-2 border-gray-400 leading-relaxed overflow-x-auto overflow-y-hidden p-6 rounded text-sm; 104 104 } 105 105 106 106 code {

+20 -1

src/Css/Application.css

reviewed

··· 44 44 .flex-basis-0 { flex-basis: 0 } 45 45 46 46 47 47 + @screen dark { 48 48 + body { @apply text-gray-600; } 49 49 + } 50 50 + 51 51 + 47 52 48 53 /* Dragging 49 54 -------- */ ··· 77 82 78 83 select:-moz-focusring { 79 84 color: transparent; 80 80 - text-shadow: 0 0 0 rgb(0, 0, 0); 85 85 + text-shadow: 0 0 0 rgb(63, 63, 63); 86 86 + } 87 87 + 88 88 + 89 89 + @screen dark { 90 90 + input::placeholder, 91 91 + textarea::placeholder { 92 92 + @apply text-base03; 93 93 + opacity: 1; 94 94 + } 95 95 + 96 96 + select:-moz-focusring { 97 97 + color: transparent; 98 98 + text-shadow: 0 0 0 rgb(232, 232, 232); 99 99 + } 81 100 } 82 101 83 102

+18

src/Javascript/index.js

reviewed

··· 20 20 const app = Elm.UI.init({ 21 21 node: document.getElementById("elm"), 22 22 flags: { 23 23 + darkMode: preferredSchema().matches, 23 24 initialTime: Date.now(), 24 25 isOnline: navigator.onLine, 25 26 upgrade: viableForUpgrade(), ··· 224 225 } 225 226 226 227 }) 228 228 + 229 229 + 230 230 + 231 231 + // Dark mode 232 232 + // --------- 233 233 + 234 234 + function preferredSchema() { 235 235 + const m = 236 236 + window.matchMedia && 237 237 + window.matchMedia("(prefers-color-scheme: dark)") 238 238 + 239 239 + m && m.addEventListener("change", e => { 240 240 + app.ports.preferredColorSchemaChanged.send({ dark: e.matches }) 241 241 + }) 242 242 + 243 243 + return m 244 244 + } 227 245 228 246 229 247

+26

src/Library/Icons.elm

reviewed

··· 1 1 + module Icons exposing (..) 2 2 + 3 3 + import Chunky exposing (slaby) 4 4 + import Color exposing (Color) 5 5 + import Html 6 6 + import Material.Icons exposing (Coloring) 7 7 + import VirtualDom 8 8 + 9 9 + 10 10 + 11 11 + -- 🌳 12 12 + 13 13 + 14 14 + type alias Icon msg = 15 15 + Int -> Coloring -> VirtualDom.Node msg 16 16 + 17 17 + 18 18 + 19 19 + -- 🔱 20 20 + 21 21 + 22 22 + wrapped : List String -> Icon msg -> Int -> Coloring -> VirtualDom.Node msg 23 23 + wrapped classes icon size coloring = 24 24 + coloring 25 25 + |> icon size 26 26 + |> slaby Html.span [] classes

+32 -15

system/Css/Tailwind.js

reviewed

··· 22 22 base0e: "rgb(129, 91, 164)", 23 23 base0f: "rgb(233, 107, 168)", 24 24 25 25 - accent: "rgb(231, 150, 128)" 25 25 + accent: "rgb(231, 150, 128)", 26 26 } 27 27 28 28 ··· 99 99 ...defaultTheme.colors, 100 100 ...colors, 101 101 102 102 + "accent-dark": "hsl(240, 8.9%, 82.4%)", 103 103 + "accent-light": "hsl(340, 3.1%, 62%)", 102 104 "background": "rgb(2, 7, 14)", 103 105 "base01-15": "rgba(63, 63, 63, 0.15)", 104 106 "base01-55": "rgba(63, 63, 63, 0.55)", ··· 106 108 "black_50": "rgba(0, 0, 0, 0.5)", 107 109 "current-color": "currentColor", 108 110 "inherit": "inherit", 109 109 - "less-subtle": "rgb(225, 225, 225)", 110 110 - "subtle": "rgb(238, 238, 238)", 111 111 - "very-subtle": "rgb(248, 248, 248)", 112 111 "white-20": "rgba(255, 255, 255, 0.2)", 113 112 "white-60": "rgba(255, 255, 255, 0.6)", 114 113 "white-90": "rgba(255, 255, 255, 0.9)", 114 114 + 115 115 + // Darkest hour 116 116 + 117 117 + "darkest-hour": "hsl(0, 0%, 14%)", 118 118 + "near-darkest-hour": "hsl(0, 0%, 15%)", 119 119 + 120 120 + // Shades of gray 121 121 + 122 122 + gray: { 123 123 + "100": "hsl(0, 0%, 98.8%)", 124 124 + "200": "hsl(0, 0%, 97.3%)", 125 125 + "300": "hsl(0, 0%, 93.3%)", 126 126 + "400": "hsl(0, 0%, 88.2%)", 127 127 + "500": "hsl(0, 0%, 86.3%)", 128 128 + "600": "hsl(0, 0%, 77.6%)" 129 129 + } 115 130 }, 116 131 117 132 ··· 206 221 // ------- 207 222 208 223 opacity: { 209 209 - '0': '0', 210 210 - '10': '.1', 211 211 - '20': '.2', 212 212 - '30': '.3', 213 213 - '40': '.4', 214 214 - '50': '.5', 215 215 - '60': '.6', 216 216 - '70': '.7', 217 217 - '80': '.8', 218 218 - '90': '.9', 219 219 - '100': '1' 224 224 + "0": "0", 225 225 + "025": ".025", 226 226 + "05": ".05", 227 227 + "10": ".1", 228 228 + "20": ".2", 229 229 + "30": ".3", 230 230 + "40": ".4", 231 231 + "50": ".5", 232 232 + "60": ".6", 233 233 + "70": ".7", 234 234 + "80": ".8", 235 235 + "90": ".9", 236 236 + "100": "1" 220 237 }, 221 238 222 239

+1 -1

system/Css/postcss.config.js

reviewed

··· 29 29 .replace(/\\/g, "") 30 30 .replace("::placeholder", "") 31 31 .replace( 32 32 - /\:(active|disabled|even|first-child|focus|focus-within|focus:not\(:active\)|group-hover|hover|last-child|odd|responsive|visited)$/, 32 32 + /\:(active|disabled|even|first-child|focus|focus-within|focus:not\(:active\)|group-hover|hover|last-child|nth-child\(odd\)|odd|responsive|visited)$/, 33 33 "" 34 34 ) 35 35