diff --git a/.github/CONTRIBUTING.md b/.github/CONTRIBUTING.md index 28bdc84da..a43ee2a43 100644 --- a/.github/CONTRIBUTING.md +++ b/.github/CONTRIBUTING.md @@ -110,6 +110,58 @@ git push fork main * Open a pull request. Thank you for your contribution! +## CSS Conventions + +We follow the Cutestrap Popsicle approach for component class naming and modifiers. + +### Resources + +- [Cutestrap Popsicle Overview](https://www.cutestrap.com/features/popsicle) +- [Cutestrap Core Docs](https://docs.cutestrap.com/section-1.html) +- [Cutestrap Utilities Docs](https://docs.cutestrap.com/section-7.html) +- [stylelint selector-disallowed-list](https://stylelint.io/user-guide/rules/selector-disallowed-list/) + +### Project Rules + +- Use box plus modifier chaining on the same element for component variants. + - Do: `.button.-outline` + - Do: `.alert-container.-success` + - Do: `.line.-warning` + - Do not: `.button .-outline` + - Do not: `.alert-container .-success` +- Do not introduce bare modifier selectors in SCSS. + - Do not: `.-warning { ... }` + - Do not: `.-success { ... }` +- When styling child elements, prefer semantic child classes or element selectors over modifier-like child classes. + - Prefer: `.alert-container .alert-title` + - Prefer: `.recent-build-link svg` + - Avoid: `.alert-container .-title` + - Avoid: `.recent-build-link .-icon` +- Utility layers are allowed when they are explicit and namespaced. + - Use `icon-*` for icon utilities. + - Use `anim-*` for animation utilities. + - Use `state-*` for shared state utilities where appropriate. +- Keep valid component modifiers as modifiers. + - Example: `.button.-success` remains the preferred component variant style. + - Example: `.line.-warning` remains valid for line-row variant state. + +### Elm Class Construction + +- For static base + modifier combinations, prefer one class string. + - Preferred: `class "button -outline"` + - Preferred: `class "hook-status -success"` +- Splitting classes is still valid Elm and is allowed when composition is dynamic or improves readability. + - Allowed: `class "build-animation -not-running", statusToClass status` + - Allowed: `class "button", class dynamicModifier` +- Avoid splitting static base + modifier pairs by default. + +### Review Checklist + +- Verify there are no new bare modifier selectors in `src/scss`. +- Verify no descendant modifier misuse was introduced (for example `.box .-modifier`). +- Verify utility classes are namespaced (`icon-*`, `anim-*`, `state-*`) when used. +- Run `npm run lint:css` before opening a pull request. + ## Tips ### Visual Studio Code Users diff --git a/.stylelintrc.js b/.stylelintrc.js index d4f10d01d..f095100fe 100644 --- a/.stylelintrc.js +++ b/.stylelintrc.js @@ -46,6 +46,7 @@ module.exports = { // since we're going for http://www.cutestrap.com/features/popsicle 'selector-class-pattern': '^((?!(-|_)\\2{1,})[a-z0-9\\-])*$', 'selector-max-compound-selectors': 3, + 'selector-disallowed-list': ['/^\\.-/', '/\\s\\.-/'], 'selector-max-specificity': [ // setting for interim, try to lower especially last number (id,class,type) '0,4,3', diff --git a/Makefile b/Makefile index 02a29aaa2..e90ff996b 100644 --- a/Makefile +++ b/Makefile @@ -162,7 +162,7 @@ test: format-validate ## Test the Elm source code .PHONY: test-playwright test-playwright: ## Run playwright tests @echo -e "\n### Running playwright tests" - @npm run test:cy + @npm run playwright # The `format-validate` target is intended to # check the format of the Elm source code. diff --git a/playwright/dashboards.spec.ts b/playwright/dashboards.spec.ts index 8cb4ccb2b..0a172d4a7 100644 --- a/playwright/dashboards.spec.ts +++ b/playwright/dashboards.spec.ts @@ -77,7 +77,7 @@ test.describe('Dashboards', () => { const firstHeaderIcon = page .getByTestId('dashboard-card') .first() - .locator('header .-icon') + .locator('header .icon-state') .first(); await expect(firstHeaderIcon).toHaveClass(/-success/); }); @@ -88,7 +88,7 @@ test.describe('Dashboards', () => { const secondHeaderIcon = page .getByTestId('dashboard-card') .nth(1) - .locator('header .-icon') + .locator('header .icon-state') .first(); await expect(secondHeaderIcon).toHaveClass(/-failure/); }); diff --git a/playwright/logs.spec.ts b/playwright/logs.spec.ts index 467328bf5..003cbc43a 100644 --- a/playwright/logs.spec.ts +++ b/playwright/logs.spec.ts @@ -135,8 +135,8 @@ test.describe('Logs', () => { }); test('step duration should show sub-second runtime', async ({ page }) => { - const duration = page.getByTestId('step-header-1').locator('.-duration'); - await expect(duration).toHaveText('< 00:01'); + const stepHeader = page.getByTestId('step-header-1'); + await expect(stepHeader).toContainText('< 00:01'); }); }); diff --git a/src/elm/Components/Alerts.elm b/src/elm/Components/Alerts.elm index 1d02b6a25..be67e7f63 100644 --- a/src/elm/Components/Alerts.elm +++ b/src/elm/Components/Alerts.elm @@ -75,12 +75,12 @@ wrapAlert variantClass title message link copy = in div [ class "alert-container", class variantClass ] - [ h1 [ class "-title" ] [ text title, copyButton message copy ] + [ h1 [ class "alert-title" ] [ text title, copyButton message copy ] , if String.isEmpty message then text "" else - p [ class "-message" ] [ text message, hyperlink ] + p [ class "alert-message" ] [ text message, hyperlink ] ] @@ -93,8 +93,7 @@ copyButton copyContent copy = button [ class "copy-button" , attribute "aria-label" <| "copy error message '" ++ copyContent ++ "' to clipboard " - , class "button" - , class "-icon" + , class "button -icon" , onClick <| copyMsg copyContent , attribute "data-clipboard-text" copyContent ] diff --git a/src/elm/Components/Build.elm b/src/elm/Components/Build.elm index 92624fa28..a4880db10 100644 --- a/src/elm/Components/Build.elm +++ b/src/elm/Components/Build.elm @@ -484,7 +484,7 @@ buildAnimation buildStatus build = div [ class "build-animation" ] <| topParticles build ++ bottomParticles build _ -> - div [ class "build-animation", class "-not-running", statusToClass buildStatus ] [] + div [ class "build-animation -not-running", statusToClass buildStatus ] [] {-| topParticles : returns an svg frame to parallax scroll on a running build, set to the top of the build. @@ -531,13 +531,13 @@ topBuildNumberDashes : Int -> String topBuildNumberDashes build = case modBy 3 build of 1 -> - "-animation-dashes-1" + "anim-dashes-1" 2 -> - "-animation-dashes-2" + "anim-dashes-2" _ -> - "-animation-dashes-3" + "anim-dashes-3" {-| bottomBuildNumberDashes : returns a different particle effect based on a module of the build number. @@ -546,13 +546,13 @@ bottomBuildNumberDashes : Int -> String bottomBuildNumberDashes build = case modBy 3 build of 1 -> - "-animation-dashes-3" + "anim-dashes-3" 2 -> - "-animation-dashes-1" + "anim-dashes-1" _ -> - "-animation-dashes-2" + "anim-dashes-2" diff --git a/src/elm/Components/Builds.elm b/src/elm/Components/Builds.elm index 8a8462c1d..5125c511d 100644 --- a/src/elm/Components/Builds.elm +++ b/src/elm/Components/Builds.elm @@ -238,7 +238,7 @@ viewFilter maybeEvent filterByEventMsg = -} viewTimeToggle : Bool -> msg -> Html msg viewTimeToggle showTimestamp showHideFullTimestampMsg = - div [ class "form-controls", class "-stack", class "time-toggle" ] + div [ class "form-controls -stack", class "time-toggle" ] [ div [ class "form-control" ] [ input [ type_ "checkbox", checked showTimestamp, onClick showHideFullTimestampMsg, id "checkbox-time-toggle", Util.testAttribute "time-toggle" ] [] , label [ class "form-label", for "checkbox-time-toggle" ] [ text "show full timestamps" ] diff --git a/src/elm/Components/DashboardRepoCard.elm b/src/elm/Components/DashboardRepoCard.elm index 4314849c1..794150c79 100644 --- a/src/elm/Components/DashboardRepoCard.elm +++ b/src/elm/Components/DashboardRepoCard.elm @@ -117,7 +117,7 @@ view shared props = , age = dash , sender = dash , duration = "--:--" - , recentBuilds = div [ class "dashboard-recent-builds", class "-none" ] [ text "waiting for builds" ] + , recentBuilds = div [ class "dashboard-recent-builds -none" ] [ text "waiting for builds" ] } in section [ class "card", Util.testAttribute "dashboard-card" ] diff --git a/src/elm/Components/Favorites.elm b/src/elm/Components/Favorites.elm index 10baa8c37..354b4d213 100644 --- a/src/elm/Components/Favorites.elm +++ b/src/elm/Components/Favorites.elm @@ -33,8 +33,7 @@ viewStarToggle { msg, user, org, repo } = [ Util.testAttribute <| "star-toggle-" ++ org ++ "-" ++ repo , onClick <| msg org (Just repo) , starToggleAriaLabel org repo <| Favorites.isFavorited org repo user - , class "button" - , class "-icon" + , class "button -icon" ] [ star <| Favorites.isFavorited org repo user ] diff --git a/src/elm/Components/Form.elm b/src/elm/Components/Form.elm index 4aaf351b1..be673fb18 100644 --- a/src/elm/Components/Form.elm +++ b/src/elm/Components/Form.elm @@ -49,8 +49,7 @@ viewInputSection { id_, title, subtitle, val, placeholder_, classList_, rows_, w String.join "-" [ "input", id_ ] in section - [ class "form-control" - , class "-stack" + [ class "form-control -stack" ] [ Maybe.Extra.unwrap (text "") (\l -> @@ -207,8 +206,7 @@ viewTextareaSection { id_, title, subtitle, val, placeholder_, classList_, rows_ String.join "-" [ "textarea", id_ ] in section - [ class "form-control" - , class "-stack" + [ class "form-control -stack" ] [ Maybe.Extra.unwrap (text "") (\l -> @@ -365,8 +363,7 @@ viewCopyButton { id_, msg, text_, classList_, disabled_, content } = [ button [ class "copy-button" , attribute "aria-label" ("copy " ++ id_ ++ "content to clipboard") - , class "button" - , class "-icon" + , class "button -icon" , disabled disabled_ , classList classList_ , onClick <| msg content @@ -401,7 +398,7 @@ viewAllowEvents : -> List (Html msg) viewAllowEvents shared { msg, allowEvents } = [ h3 [ class "settings-subtitle" ] [ text "Push" ] - , div [ class "form-controls", class "-two-col" ] + , div [ class "form-controls -two-col" ] [ viewCheckbox { title = "Push" , subtitle = Nothing @@ -424,7 +421,7 @@ viewAllowEvents shared { msg, allowEvents } = } ] , h3 [ class "settings-subtitle" ] [ text "Pull Request" ] - , div [ class "form-controls", class "-two-col" ] + , div [ class "form-controls -two-col" ] [ viewCheckbox { title = "Opened" , subtitle = Nothing @@ -487,7 +484,7 @@ viewAllowEvents shared { msg, allowEvents } = } ] , h3 [ class "settings-subtitle" ] [ text "Deployments" ] - , div [ class "form-controls", class "-two-col" ] + , div [ class "form-controls -two-col" ] [ viewCheckbox { title = "Created" , subtitle = Nothing @@ -500,7 +497,7 @@ viewAllowEvents shared { msg, allowEvents } = } ] , h3 [ class "settings-subtitle" ] [ text "Comment" ] - , div [ class "form-controls", class "-two-col" ] + , div [ class "form-controls -two-col" ] [ viewCheckbox { title = "Created" , subtitle = Nothing @@ -523,7 +520,7 @@ viewAllowEvents shared { msg, allowEvents } = } ] , h3 [ class "settings-subtitle" ] [ text "Delete" ] - , div [ class "form-controls", class "-two-col" ] + , div [ class "form-controls -two-col" ] [ viewCheckbox { title = "Branch" , subtitle = Nothing @@ -546,7 +543,7 @@ viewAllowEvents shared { msg, allowEvents } = } ] , h3 [ class "settings-subtitle" ] [ text "Schedule" ] - , div [ class "form-controls", class "-two-col" ] + , div [ class "form-controls -two-col" ] [ viewCheckbox { title = "Schedule" , subtitle = Nothing @@ -715,8 +712,7 @@ viewEditableListItem props item = span [] [ button [ class "remove-button" - , class "button" - , class "-icon" + , class "button -icon" , attribute "aria-label" <| "remove list item " ++ itemId , onClick <| props.itemRemoveOnClickMsg <| itemId , Util.testAttribute <| target ++ "-remove" @@ -728,8 +724,7 @@ viewEditableListItem props item = ] , button [ class "save-button" - , class "button" - , class "-icon" + , class "button -icon" , attribute "aria-label" <| "save list item " ++ itemId , onClick <| props.itemSaveOnClickMsg { id = itemId, val = val } , Util.testAttribute <| target ++ "-save" @@ -745,8 +740,7 @@ viewEditableListItem props item = span [] [ button [ class "edit-button" - , class "button" - , class "-icon" + , class "button -icon" , attribute "aria-label" <| "edit list item " ++ itemId , onClick <| props.itemEditOnClickMsg { id = itemId } , Util.testAttribute <| target ++ "-edit" diff --git a/src/elm/Components/Help.elm b/src/elm/Components/Help.elm index 867890d83..790c4af1f 100644 --- a/src/elm/Components/Help.elm +++ b/src/elm/Components/Help.elm @@ -75,7 +75,7 @@ view shared props = -} viewCommand : Shared.Model -> Props msg -> Command -> Html msg viewCommand shared props command = - div [ class "form-controls", class "-stack", Util.testAttribute "help-cmd-header" ] + div [ class "form-controls -stack", Util.testAttribute "help-cmd-header" ] [ span [] [ label [ class "form-label", for <| "" ] [ text <| command.name ++ " " ] , case command.docs of @@ -109,8 +109,7 @@ viewCommand shared props command = [ button [ Util.testAttribute "help-copy" , attribute "aria-label" <| "copy " ++ command.content ++ " to clipboard" - , class "button" - , class "-icon" + , class "button -icon" , onClick <| props.showCopyAlert command.content , class "copy-button" , attribute "data-clipboard-text" command.content diff --git a/src/elm/Components/Loading.elm b/src/elm/Components/Loading.elm index 6f21fb012..1ab55de76 100644 --- a/src/elm/Components/Loading.elm +++ b/src/elm/Components/Loading.elm @@ -8,18 +8,18 @@ import Html.Attributes exposing (class) -} viewSmallLoader : Html msg viewSmallLoader = - div [ class "small-loader" ] [ div [ class "-spinner" ] [], div [ class "-label" ] [] ] + div [ class "small-loader" ] [ div [ class "loader-spinner" ] [], div [ class "loader-label" ] [] ] {-| viewSmallLoaderWithText : renders a small loading spinner for better transitioning UX with additional loading text. -} viewSmallLoaderWithText : String -> Html msg viewSmallLoaderWithText label = - div [ class "small-loader" ] [ div [ class "-spinner" ] [], div [ class "-label" ] [ text label ] ] + div [ class "small-loader" ] [ div [ class "loader-spinner" ] [], div [ class "loader-label" ] [ text label ] ] {-| viewLargeLoader : renders a large loading spinner for better transitioning UX. -} viewLargeLoader : Html msg viewLargeLoader = - div [ class "large-loader" ] [ div [ class "-spinner" ] [], div [ class "-label" ] [] ] + div [ class "large-loader" ] [ div [ class "loader-spinner" ] [], div [ class "loader-label" ] [] ] diff --git a/src/elm/Components/Logs.elm b/src/elm/Components/Logs.elm index 289584679..d1e2dd3c4 100644 --- a/src/elm/Components/Logs.elm +++ b/src/elm/Components/Logs.elm @@ -188,8 +188,7 @@ viewLine pushUrlHashMsg resourceType resourceNumber shift focus logLine lineNumb , b = Nothing } , class "line-number" - , class "button" - , class "-link" + , class "button -link" , attribute "aria-label" <| "focus log for resource " ++ resourceNumber ] [ span [] [ text <| String.fromInt lineNumber ] ] @@ -358,8 +357,7 @@ viewLogsSidebar props = viewJumpToBottomButton : Props msg -> Html msg viewJumpToBottomButton props = button - [ class "button" - , class "-icon" + [ class "button -icon" , class "tooltip-left" , attribute "data-tooltip" "jump to bottom" , Util.testAttribute <| "jump-to-bottom-" ++ props.resourceNumber @@ -379,8 +377,7 @@ viewJumpToBottomButton props = viewJumpToTopButton : Props msg -> Html msg viewJumpToTopButton props = button - [ class "button" - , class "-icon" + [ class "button -icon" , class "tooltip-left" , attribute "data-tooltip" "jump to top" , Util.testAttribute <| "jump-to-top-" ++ props.resourceNumber @@ -408,8 +405,7 @@ viewDownloadButton props log = ++ ".txt" in button - [ class "button" - , class "-link" + [ class "button -link" , disabled logEmpty , Util.attrIf logEmpty <| class "-hidden" , Util.attrIf logEmpty <| Util.ariaHidden @@ -442,8 +438,7 @@ viewFollowButton props = ( "start following resource logs", FeatherIcons.play, num ) in button - [ class "button" - , class "-icon" + [ class "button -icon" , class "tooltip-left" , attribute "data-tooltip" tooltip , Util.testAttribute <| "follow-logs-" ++ props.resourceNumber diff --git a/src/elm/Components/Pager.elm b/src/elm/Components/Pager.elm index 5e95213ff..edbc97f73 100644 --- a/src/elm/Components/Pager.elm +++ b/src/elm/Components/Pager.elm @@ -133,8 +133,7 @@ view props = [ button [ disabled <| isFirst || (List.length props.links == 0) , Util.testAttribute "pager-previous" - , class "button" - , class "-outline" + , class "button -outline" , class "pager-icon-prev" , onClick (props.msg prevPage) ] @@ -146,8 +145,7 @@ view props = , button [ disabled <| isLast || (List.length props.links == 0) , Util.testAttribute "pager-next" - , class "button" - , class "-outline" + , class "button -outline" , class "pager-icon-next" , onClick (props.msg nextPage) ] diff --git a/src/elm/Components/RecentBuilds.elm b/src/elm/Components/RecentBuilds.elm index ae0881ab2..8aebb9975 100644 --- a/src/elm/Components/RecentBuilds.elm +++ b/src/elm/Components/RecentBuilds.elm @@ -8,7 +8,7 @@ module Components.RecentBuilds exposing (view) import Components.Loading import Components.Svgs import Html exposing (Html, a, div, em, li, p, span, text, ul) -import Html.Attributes exposing (attribute, class) +import Html.Attributes exposing (attribute, class, classList) import RemoteData exposing (WebData) import Route.Path import Shared @@ -71,9 +71,15 @@ view shared props = -} viewRecentBuild : Shared.Model -> Props -> Int -> Vela.Build -> Html msg viewRecentBuild shared props idx build = - li [ class "recent-build" ] - [ recentBuildLink shared props idx build - , recentBuildTooltip shared props build + li + [ classList + [ ( "recent-build", True ) + , ( "recent-build-not-first", idx > 0 ) + , ( statusToRecentBuildClass build.status, True ) + ] + ] + [ recentBuildLink props idx build + , recentBuildTooltip shared build ] @@ -82,8 +88,8 @@ viewRecentBuild shared props idx build = focusing and hovering this element will display the tooltip -} -recentBuildLink : Shared.Model -> Props -> Int -> Vela.Build -> Html msg -recentBuildLink shared props idx build = +recentBuildLink : Props -> Int -> Vela.Build -> Html msg +recentBuildLink props idx build = let icon = Components.Svgs.recentBuildStatusToIcon build.status idx @@ -115,8 +121,8 @@ recentBuildLink shared props idx build = tooltip is visible when the recent build link is focused or hovered -} -recentBuildTooltip : Shared.Model -> Props -> Vela.Build -> Html msg -recentBuildTooltip shared props build = +recentBuildTooltip : Shared.Model -> Vela.Build -> Html msg +recentBuildTooltip shared build = div [ class "recent-build-tooltip", Util.testAttribute "build-history-tooltip" ] [ ul [ class "info" ] [ li [ class "line" ] @@ -163,3 +169,33 @@ viewTooltipField key value = [ span [] [ text key ] , span [] [ text value ] ] + + +{-| statusToRecentBuildClass : maps build status to explicit status class for recent-build wrappers. +-} +statusToRecentBuildClass : Vela.Status -> String +statusToRecentBuildClass status = + case status of + Vela.Pending -> + "recent-build-status-pending" + + Vela.PendingApproval -> + "recent-build-status-pending" + + Vela.Running -> + "recent-build-status-running" + + Vela.Success -> + "recent-build-status-success" + + Vela.Failure -> + "recent-build-status-failure" + + Vela.Killed -> + "recent-build-status-failure" + + Vela.Canceled -> + "recent-build-status-canceled" + + Vela.Error -> + "recent-build-status-error" diff --git a/src/elm/Components/Repo.elm b/src/elm/Components/Repo.elm index c5c3e13b3..4cb49c8c5 100644 --- a/src/elm/Components/Repo.elm +++ b/src/elm/Components/Repo.elm @@ -58,21 +58,18 @@ view shared { toggleFavoriteMsg, org, repo, favorites, filtered } = , repo = repo } , a - [ class "button" - , class "-outline" + [ class "button -outline" , Route.Path.href <| Route.Path.Org__Repo__Settings { org = org, repo = repo } ] [ text "Settings" ] , a - [ class "button" - , class "-outline" + [ class "button -outline" , Util.testAttribute "repo-hooks" , Route.Path.href <| Route.Path.Org__Repo__Hooks { org = org, repo = repo } ] [ text "Audit" ] , a - [ class "button" - , class "-outline" + [ class "button -outline" , Util.testAttribute "repo-secrets" , Route.Path.href <| Route.Path.Dash_Secrets_Engine__Repo_Org__Repo_ { org = org, repo = repo, engine = "native" } ] diff --git a/src/elm/Components/ScheduleForm.elm b/src/elm/Components/ScheduleForm.elm index 1c3750360..3d3056f0a 100644 --- a/src/elm/Components/ScheduleForm.elm +++ b/src/elm/Components/ScheduleForm.elm @@ -66,7 +66,7 @@ viewEnabledInput { msg, value, disabled_ } = ] ] , div - [ class "form-controls", class "-stack" ] + [ class "form-controls -stack" ] [ Components.Form.viewRadio { value = Util.boolToYesNo value , field = "yes" diff --git a/src/elm/Components/Search.elm b/src/elm/Components/Search.elm index cdda9b9ef..2ccebdbac 100644 --- a/src/elm/Components/Search.elm +++ b/src/elm/Components/Search.elm @@ -57,7 +57,7 @@ type alias SimpleSearch msg = -} viewHomeSearchBar : String -> SimpleSearch msg -> Html msg viewHomeSearchBar filter search = - div [ class "form-control", class "-with-icon", class "-is-expanded", Util.testAttribute "home-search-bar" ] + div [ class "form-control -with-icon -is-expanded", Util.testAttribute "home-search-bar" ] [ input [ Util.testAttribute "home-search-input" , autofocus True @@ -74,7 +74,7 @@ viewHomeSearchBar filter search = -} viewRepoSearchBarGlobal : Dict Vela.Org String -> Search msg -> Html msg viewRepoSearchBarGlobal searchFilters search = - div [ class "form-control", class "-with-icon", class "-is-expanded", Util.testAttribute "global-search-bar" ] + div [ class "form-control -with-icon -is-expanded", Util.testAttribute "global-search-bar" ] [ input [ Util.testAttribute "global-search-input" , placeholder "Type to filter all repositories..." @@ -91,7 +91,7 @@ viewRepoSearchBarGlobal searchFilters search = -} viewRepoSearchBarLocal : Dict Vela.Org String -> Vela.Org -> Search msg -> Html msg viewRepoSearchBarLocal searchFilters org search = - div [ class "form-control", class "-with-icon", class "-is-expanded", Util.testAttribute "local-search-bar" ] + div [ class "form-control -with-icon -is-expanded", Util.testAttribute "local-search-bar" ] [ input [ Util.testAttribute <| "local-search-input-" ++ org , placeholder <| diff --git a/src/elm/Components/SecretForm.elm b/src/elm/Components/SecretForm.elm index 0042ff1a0..945d129b0 100644 --- a/src/elm/Components/SecretForm.elm +++ b/src/elm/Components/SecretForm.elm @@ -148,8 +148,7 @@ viewImagesInput { onInput_, addImage, removeImage, images, imageValue, disabled_ section [] [ div [ id "image-select" - , class "form-control" - , class "-stack" + , class "form-control -stack" , class "images-container" ] [ label @@ -179,8 +178,7 @@ viewImagesInput { onInput_, addImage, removeImage, images, imageValue, disabled_ , required = False } , button - [ class "button" - , class "-outline" + [ class "button -outline" , class "add-image" , Util.testAttribute "add-image-button" , onClick <| addImage <| String.toLower imageValue @@ -213,8 +211,7 @@ viewImage { msg, image } = div [ class "image", class "chevron" ] [ div [ class "name" ] [ text image ] , button - [ class "button" - , class "-outline" + [ class "button -outline" , onClick <| msg image ] [ text "remove" @@ -239,8 +236,7 @@ viewRepoAllowlistInput { onOrgInput_, onRepoInput_, addRepo, removeRepo, repos, section [] [ div [ id "image-select" - , class "form-control" - , class "-stack" + , class "form-control -stack" , class "images-container" ] [ label @@ -286,8 +282,7 @@ viewRepoAllowlistInput { onOrgInput_, onRepoInput_, addRepo, removeRepo, repos, , required = False } , button - [ class "button" - , class "-outline" + [ class "button -outline" , class "add-image" , Util.testAttribute "add-image-button" , onClick <| addRepo <| orgValue ++ "/" ++ repoValue @@ -320,8 +315,7 @@ viewRepo { msg, repo } = div [ class "image", class "chevron" ] [ div [ class "name" ] [ text repo ] , button - [ class "button" - , class "-outline" + [ class "button -outline" , onClick <| msg repo ] [ text "remove" @@ -346,7 +340,7 @@ viewAllowCommandsInput { msg, value, disabled_ } = ] ] , div - [ class "form-controls", class "-stack" ] + [ class "form-controls -stack" ] [ Components.Form.viewRadio { value = Util.boolToYesNo value , field = "yes" @@ -385,7 +379,7 @@ viewAllowSubstitutionInput { msg, value, disabled_ } = ] ] , div - [ class "form-controls", class "-stack" ] + [ class "form-controls -stack" ] [ Components.Form.viewRadio { value = Util.boolToYesNo value , field = "yes" diff --git a/src/elm/Components/Secrets.elm b/src/elm/Components/Secrets.elm index b160cee33..8321b7001 100644 --- a/src/elm/Components/Secrets.elm +++ b/src/elm/Components/Secrets.elm @@ -252,7 +252,7 @@ viewSecret engine type_ copyMsg secret = , Components.Table.viewItemCell { dataLabel = "name" , parentClassList = [ ( "name", True ) ] - , itemClassList = [ ( "-block", True ) ] + , itemClassList = [ ( "table-cell-block", True ) ] , children = [ a [ editSecretHref engine type_ secret ] [ text secret.name ] ] } , Components.Table.viewListItemCell @@ -334,8 +334,7 @@ copyButton copyYaml copyMsg = [ button [ class "copy-button" , attribute "aria-label" "copy secret yaml to clipboard " - , class "button" - , class "-icon" + , class "button -icon" , onClick <| copyMsg copyYaml , attribute "data-clipboard-text" copyYaml , Util.testAttribute "copy-secret" diff --git a/src/elm/Components/Svgs.elm b/src/elm/Components/Svgs.elm index 9543b58ae..91de8104c 100644 --- a/src/elm/Components/Svgs.elm +++ b/src/elm/Components/Svgs.elm @@ -173,10 +173,10 @@ buildStatusAnimation dashes y classNames = let runningAnimationClass = if dashes == "none" then - class "-running-start" + class "anim-running-start" else - class "-running-particles" + class "anim-running-particles" classes = List.map (\c -> class c) classNames @@ -200,7 +200,7 @@ buildStatusAnimation dashes y classNames = stepPending : Html msg stepPending = svg - [ class "-icon -pending" + [ class "icon-state -pending" , viewBox "0 0 408 408" , width "32" , height "32" @@ -219,7 +219,7 @@ stepPending = stepRunning : Html msg stepRunning = svg - [ class "-icon -running" + [ class "icon-state -running" , strokeWidth "2" , viewBox "0 0 44 44" , width "32" @@ -244,7 +244,7 @@ stepRunning = stepSuccess : Html msg stepSuccess = svg - [ class "-icon -success" + [ class "icon-state -success" , strokeWidth "2" , viewBox "0 0 44 44" , width "32" @@ -269,7 +269,7 @@ stepSuccess = stepFailure : Html msg stepFailure = svg - [ class "-icon -failure" + [ class "icon-state -failure" , strokeWidth "2" , viewBox "0 0 44 44" , width "32" @@ -294,7 +294,7 @@ stepFailure = stepError : Html msg stepError = svg - [ class "-icon -error" + [ class "icon-state -error" , strokeWidth "2" , viewBox "0 0 44 44" , width "32" @@ -324,7 +324,7 @@ stepError = stepCanceled : Html msg stepCanceled = svg - [ class "-icon -canceled" + [ class "icon-state -canceled" , strokeWidth "2" , viewBox "0 0 44 44" , width "32" @@ -350,7 +350,7 @@ Note: killed/skipped are the same thing. stepSkipped : Html msg stepSkipped = svg - [ class "-icon -skip" + [ class "icon-state -skip" , strokeWidth "2" , viewBox "0 0 44 44" , width "32" @@ -409,8 +409,7 @@ stepSkipped = hookSuccess : Html msg hookSuccess = svg - [ class "hook-status" - , class "-success" + [ class "hook-status -success" , strokeWidth "2" , viewBox "0 0 44 44" , width "20" @@ -427,8 +426,7 @@ hookSuccess = hookSkipped : Html msg hookSkipped = svg - [ class "hook-status" - , class "-skipped" + [ class "hook-status -skipped" , strokeWidth "2" , viewBox "0 0 44 44" , width "20" @@ -487,8 +485,7 @@ hookSkipped = hookFailure : Html msg hookFailure = svg - [ class "hook-status" - , class "-failure" + [ class "hook-status -failure" , strokeWidth "2" , viewBox "0 0 44 44" , width "20" @@ -504,7 +501,7 @@ hookFailure = buildHistoryPending : Int -> Html msg buildHistoryPending _ = svg - [ class "-icon -pending" + [ class "icon-state -pending" , viewBox "0 0 28 28" , width "26" , height "26" @@ -517,7 +514,7 @@ buildHistoryPending _ = buildHistoryRunning : Int -> Html msg buildHistoryRunning _ = svg - [ class "-icon -running" + [ class "icon-state -running" , strokeWidth "2" , viewBox "0 0 28 28" , width "26" @@ -531,7 +528,7 @@ buildHistoryRunning _ = buildHistorySuccess : Int -> Html msg buildHistorySuccess _ = svg - [ class "-icon -success" + [ class "icon-state -success" , strokeWidth "2" , viewBox "0 0 28 28" , width "26" @@ -545,7 +542,7 @@ buildHistorySuccess _ = buildHistoryFailure : Int -> Html msg buildHistoryFailure _ = svg - [ class "-icon -failure" + [ class "icon-state -failure" , strokeWidth "2" , viewBox "0 0 28 28" , width "26" @@ -559,7 +556,7 @@ buildHistoryFailure _ = buildHistoryError : Int -> Html msg buildHistoryError _ = svg - [ class "-icon -error" + [ class "icon-state -error" , strokeWidth "2" , viewBox "0 0 28 28" , width "26" @@ -575,7 +572,7 @@ buildHistoryError _ = buildHistoryCanceled : Int -> Html msg buildHistoryCanceled _ = svg - [ class "-icon -canceled" + [ class "icon-state -canceled" , strokeWidth "2" , viewBox "0 0 28 28" , width "26" @@ -800,7 +797,7 @@ buildVizLegendEdge attrs = annotationCircle : String -> Html msg annotationCircle cls = svg - [ class "-icon" + [ class "icon-state" , class cls , viewBox "0 0 48 48" , width "22" diff --git a/src/elm/Layouts/Default/Org.elm b/src/elm/Layouts/Default/Org.elm index 44f5f2c39..6c1cd135e 100644 --- a/src/elm/Layouts/Default/Org.elm +++ b/src/elm/Layouts/Default/Org.elm @@ -135,15 +135,13 @@ view props shared route { toContentMsg, model, content } = { buttons = props.navButtons ++ [ a - [ class "button" - , class "-outline" + [ class "button -outline" , Util.testAttribute "dashboards-button" , Route.Path.href Route.Path.Dashboards ] [ text "Dashboards" ] , a - [ class "button" - , class "-outline" + [ class "button -outline" , Util.testAttribute "source-repos" , Route.Path.href Route.Path.Account_SourceRepos ] diff --git a/src/elm/Pages/Account/Settings.elm b/src/elm/Pages/Account/Settings.elm index 63630cd1a..1f08d823c 100644 --- a/src/elm/Pages/Account/Settings.elm +++ b/src/elm/Pages/Account/Settings.elm @@ -204,7 +204,7 @@ viewAccount_Settings shared model = [ section [ class "settings", Util.testAttribute "user-token" ] [ h2 [ class "settings-title" ] [ text "Authentication Token" ] , p [ class "settings-description" ] [ text timeRemaining, br [] [], em [] [ text "Token will refresh before it expires." ] ] - , div [ class "form-controls", class "-no-x-pad" ] + , div [ class "form-controls -no-x-pad" ] [ label [ class "form-label", class "visually-hidden", for "token" ] [ text "Auth Token" ] , textarea [ class "form-control" @@ -219,8 +219,7 @@ viewAccount_Settings shared model = , div [ class "vert-icon-container" ] [ button [ class "copy-button" - , class "button" - , class "-icon" + , class "button -icon" , class "-white" , attribute "data-clipboard-text" auth.token , attribute "aria-label" "copy token" @@ -237,7 +236,7 @@ viewAccount_Settings shared model = , section [ class "settings", Util.testAttribute "user-theme" ] [ h2 [ class "settings-title" ] [ text "Theme" ] , p [ class "settings-description" ] [ text "Choose your theme preference." ] - , div [ class "form-controls", class "-stack" ] + , div [ class "form-controls -stack" ] [ Components.Form.viewRadio { value = Theme.toString shared.theme , field = Theme.toString Theme.Light diff --git a/src/elm/Pages/Account/SourceRepos.elm b/src/elm/Pages/Account/SourceRepos.elm index 7c42dd21e..a91f30272 100644 --- a/src/elm/Pages/Account/SourceRepos.elm +++ b/src/elm/Pages/Account/SourceRepos.elm @@ -501,7 +501,7 @@ viewSourceOrgDetails : -> (List Vela.Repository -> msg) -> Html msg viewSourceOrgDetails filters org repos filtered content search enableRepos = - details [ class "details", class "-with-border" ] <| + details [ class "details -with-border" ] <| viewSourceOrgSummary filters org repos filtered content search enableRepos @@ -522,7 +522,7 @@ viewSourceOrgSummary filters org repos filtered content search enableRepos = , viewRepoCount repos , FeatherIcons.chevronDown |> FeatherIcons.withSize 20 |> FeatherIcons.withClass "details-icon-expand" |> FeatherIcons.toHtml [] ] - :: div [ class "form-controls", class "-no-x-pad" ] + :: div [ class "form-controls -no-x-pad" ] [ Components.Search.viewRepoSearchBarLocal filters org search , enableReposButton org repos filtered enableRepos ] @@ -567,7 +567,7 @@ viewRepoCount repos = -} enableReposButton : Vela.Org -> List Vela.Repository -> Bool -> (List Vela.Repository -> msg) -> Html msg enableReposButton org repos filtered enableRepos = - button [ class "button", class "-outline", Util.testAttribute <| "enable-org-" ++ org, onClick (enableRepos repos) ] + button [ class "button -outline", Util.testAttribute <| "enable-org-" ++ org, onClick (enableRepos repos) ] [ text <| if filtered then "Enable Results" @@ -592,8 +592,7 @@ enableRepoButton repo enableRepo toggleFavorite user = Vela.Enabling -> button - [ class "button" - , class "-outline" + [ class "button -outline" , class "-loading" , Util.testAttribute <| String.join "-" [ "loading", repo.org, repo.name ] ] @@ -608,8 +607,7 @@ enableRepoButton repo enableRepo toggleFavorite user = , repo = repo.name } , button - [ class "button" - , class "-outline" + [ class "button -outline" , class "-success" , attribute "tabindex" "-1" -- in this scenario we are merely showing state, this is not interactive , Util.testAttribute <| String.join "-" [ "enabled", repo.org, repo.name ] @@ -632,8 +630,7 @@ enableRepoButton repo enableRepo toggleFavorite user = , repo = repo.name } , button - [ class "button" - , class "-outline" + [ class "button -outline" , class "-success" , attribute "tabindex" "-1" -- in this scenario we are merely showing state, this is not interactive , Util.testAttribute <| String.join "-" [ "enabled", repo.org, repo.name ] @@ -649,8 +646,7 @@ enableRepoButton repo enableRepo toggleFavorite user = Vela.Disabling -> button - [ class "button" - , class "-outline" + [ class "button -outline" , class "-loading" , Util.testAttribute <| String.join "-" [ "loading", repo.org, repo.name ] ] @@ -658,10 +654,7 @@ enableRepoButton repo enableRepo toggleFavorite user = Vela.Failed -> button - [ class "button" - , class "-outline" - , class "-failure" - , class "-animate-rotate" + [ class "button -outline -failure -animate-rotate" , Util.testAttribute <| String.join "-" [ "failed", repo.org, repo.name ] , onClick (enableRepo { repo = repo, showAlertOnResponse = True, addFavoriteOnResponse = True }) ] diff --git a/src/elm/Pages/Admin/Settings.elm b/src/elm/Pages/Admin/Settings.elm index 2f529ce29..7b4c5d727 100644 --- a/src/elm/Pages/Admin/Settings.elm +++ b/src/elm/Pages/Admin/Settings.elm @@ -2068,7 +2068,7 @@ view shared route model = , viewFieldEnvKeyValue "VELA_ENABLE_ORG_SECRETS" , viewFieldEnvKeyValue "VELA_ENABLE_REPO_SECRETS" , viewFieldEnvKeyValue "VELA_ENABLE_SHARED_SECRETS" - , div [ class "form-controls", class "-two-col" ] + , div [ class "form-controls -two-col" ] [ Components.Form.viewCheckbox { id_ = "admin-secrets" , title = "Organization" diff --git a/src/elm/Pages/Dash/Secrets/Engine_/Org/Org_.elm b/src/elm/Pages/Dash/Secrets/Engine_/Org/Org_.elm index c5011ed4a..e1ae095e8 100644 --- a/src/elm/Pages/Dash/Secrets/Engine_/Org/Org_.elm +++ b/src/elm/Pages/Dash/Secrets/Engine_/Org/Org_.elm @@ -262,9 +262,7 @@ view shared route model = , tableButtons = Just [ a - [ class "button" - , class "-outline" - , class "button-with-icon" + [ class "button -outline -with-icon" , Util.testAttribute "add-org-secret" , Route.Path.href <| Route.Path.Dash_Secrets_Engine__Org_Org__Add @@ -272,10 +270,10 @@ view shared route model = , org = route.params.org } ] - [ text "Add Org Secret" - , FeatherIcons.plus + [ FeatherIcons.plus |> FeatherIcons.withSize 18 - |> FeatherIcons.toHtml [ Svg.Attributes.class "button-icon" ] + |> FeatherIcons.toHtml [] + , text "Add Org Secret" ] , Components.Pager.view { show = True @@ -302,9 +300,7 @@ view shared route model = , tableButtons = Just [ a - [ class "button" - , class "-outline" - , class "button-with-icon" + [ class "button -outline -with-icon" , Util.testAttribute "manage-shared-secrets" , Route.Path.href <| Route.Path.Dash_Secrets_Engine__Shared_Org__Team_ @@ -313,10 +309,10 @@ view shared route model = , team = "*" } ] - [ text "Manage Shared Secrets" - , FeatherIcons.plus + [ FeatherIcons.plus |> FeatherIcons.withSize 18 - |> FeatherIcons.toHtml [ Svg.Attributes.class "button-icon" ] + |> FeatherIcons.toHtml [] + , text "Manage Shared Secrets" ] ] , pageNumber = 1 diff --git a/src/elm/Pages/Dash/Secrets/Engine_/Repo/Org_/Repo_.elm b/src/elm/Pages/Dash/Secrets/Engine_/Repo/Org_/Repo_.elm index c01aafb4b..e732677d8 100644 --- a/src/elm/Pages/Dash/Secrets/Engine_/Repo/Org_/Repo_.elm +++ b/src/elm/Pages/Dash/Secrets/Engine_/Repo/Org_/Repo_.elm @@ -246,9 +246,7 @@ view shared route model = , tableButtons = Just [ a - [ class "button" - , class "-outline" - , class "button-with-icon" + [ class "button -outline -with-icon" , Util.testAttribute "add-repo-secret" , Route.Path.href <| Route.Path.Dash_Secrets_Engine__Repo_Org__Repo__Add @@ -257,10 +255,10 @@ view shared route model = , repo = route.params.repo } ] - [ text "Add Repo Secret" - , FeatherIcons.plus + [ FeatherIcons.plus |> FeatherIcons.withSize 18 - |> FeatherIcons.toHtml [ Svg.Attributes.class "button-icon" ] + |> FeatherIcons.toHtml [] + , text "Add Repo Secret" ] , Components.Pager.view { show = True @@ -281,8 +279,7 @@ view shared route model = , tableButtons = Just [ a - [ class "button" - , class "-outline" + [ class "button -outline" , Route.Path.href <| Route.Path.Dash_Secrets_Engine__Org_Org_ { engine = route.params.engine diff --git a/src/elm/Pages/Dash/Secrets/Engine_/Shared/Org_/Team_.elm b/src/elm/Pages/Dash/Secrets/Engine_/Shared/Org_/Team_.elm index 22f094338..7c208d801 100644 --- a/src/elm/Pages/Dash/Secrets/Engine_/Shared/Org_/Team_.elm +++ b/src/elm/Pages/Dash/Secrets/Engine_/Shared/Org_/Team_.elm @@ -236,17 +236,15 @@ view shared route model = , tableButtons = Just [ a - [ class "button" - , class "-outline" - , class "button-with-icon" + [ class "button -outline -with-icon" , Util.testAttribute "add-shared-secret" , Route.Path.href <| Route.Path.Dash_Secrets_Engine__Shared_Org__Team__Add { engine = route.params.engine, org = route.params.org, team = route.params.team } ] - [ text "Add Shared Secret" - , FeatherIcons.plus + [ FeatherIcons.plus |> FeatherIcons.withSize 18 - |> FeatherIcons.toHtml [ Svg.Attributes.class "button-icon" ] + |> FeatherIcons.toHtml [] + , text "Add Shared Secret" ] , Components.Pager.view { show = True diff --git a/src/elm/Pages/Home_.elm b/src/elm/Pages/Home_.elm index 72754f9c9..43252654e 100644 --- a/src/elm/Pages/Home_.elm +++ b/src/elm/Pages/Home_.elm @@ -172,15 +172,13 @@ view shared route model = route { buttons = [ a - [ class "button" - , class "-outline" + [ class "button -outline" , Util.testAttribute "dashboards-button" , Route.Path.href Route.Path.Dashboards ] [ text "Dashboards" ] , a - [ class "button" - , class "-outline" + [ class "button -outline" , Util.testAttribute "source-repos" , Route.Path.href Route.Path.Account_SourceRepos ] @@ -283,7 +281,7 @@ toOrgFavorites favorites = -} viewOrg : Shared.Model -> String -> List String -> Html Msg viewOrg shared org favorites = - details [ class "details", class "-with-border", attribute "open" "open", Util.testAttribute "repo-org" ] + details [ class "details -with-border", attribute "open" "open", Util.testAttribute "repo-org" ] (summary [ class "summary" ] [ a [ Route.Path.href <| Route.Path.Org_ { org = org } ] [ text org ] , FeatherIcons.chevronDown |> FeatherIcons.withSize 20 |> FeatherIcons.withClass "details-icon-expand" |> FeatherIcons.toHtml [] diff --git a/src/elm/Pages/Org_.elm b/src/elm/Pages/Org_.elm index 7696caf5c..79412f989 100644 --- a/src/elm/Pages/Org_.elm +++ b/src/elm/Pages/Org_.elm @@ -210,8 +210,7 @@ view shared route model = [ h1 [] [ text "No Repositories are enabled for this Organization!" ] , p [] [ text "Enable repositories" ] , a - [ class "button" - , class "-outline" + [ class "button -outline" , Util.testAttribute "source-repos" , Route.Path.href Route.Path.Account_SourceRepos ] diff --git a/src/elm/Pages/Org_/Repo_/Build_.elm b/src/elm/Pages/Org_/Repo_/Build_.elm index 133f54c29..7348dac3f 100644 --- a/src/elm/Pages/Org_/Repo_/Build_.elm +++ b/src/elm/Pages/Org_/Repo_/Build_.elm @@ -822,22 +822,20 @@ view shared route model = , Util.testAttribute "log-actions" ] [ button - [ class "button" - , class "-link" + [ class "button -link" , onClick CollapseAll , Util.testAttribute "collapse-all" ] [ small [] [ text "collapse all" ] ] , button - [ class "button" - , class "-link" + [ class "button -link" , onClick ExpandAll , Util.testAttribute "expand-all" ] [ small [] [ text "expand all" ] ] ] , div [ class "steps" ] - [ div [ class "-items", Util.testAttribute "steps" ] <| + [ div [ class "step-items", Util.testAttribute "steps" ] <| if hasStages steps then viewStages shared model route steps @@ -898,8 +896,8 @@ viewStep shared model route step = ] , Util.testAttribute "step" ] - [ div [ class "-status" ] - [ div [ class "-icon-container" ] [ Components.Svgs.statusToIcon step.status ] ] + [ div [ class "step-status" ] + [ div [ class "step-icon-container" ] [ Components.Svgs.statusToIcon step.status ] ] , details (classList [ ( "details", True ) @@ -919,9 +917,9 @@ viewStep shared model route step = } ] [ div - [ class "-info" ] - [ div [ class "-name" ] [ text step.name ] - , div [ class "-duration" ] [ text <| Util.formatRunTime shared.time step.started step.finished ] + [ class "step-info" ] + [ div [ class "step-name" ] [ text step.name ] + , div [ class "step-duration" ] [ text <| Util.formatRunTime shared.time step.started step.finished ] ] , FeatherIcons.chevronDown |> FeatherIcons.withSize 20 diff --git a/src/elm/Pages/Org_/Repo_/Build_/Artifacts.elm b/src/elm/Pages/Org_/Repo_/Build_/Artifacts.elm index 285f93db1..d7d1d3e20 100644 --- a/src/elm/Pages/Org_/Repo_/Build_/Artifacts.elm +++ b/src/elm/Pages/Org_/Repo_/Build_/Artifacts.elm @@ -381,7 +381,7 @@ viewArtifact artifact = [ Components.Table.viewItemCell { dataLabel = "name" , parentClassList = [ ( "name", True ) ] - , itemClassList = [ ( "-block", True ) ] + , itemClassList = [ ( "table-cell-block", True ) ] , children = [ artifactContent ] } ] diff --git a/src/elm/Pages/Org_/Repo_/Build_/Graph.elm b/src/elm/Pages/Org_/Repo_/Build_/Graph.elm index 2e16c3ab7..fd42b4f83 100644 --- a/src/elm/Pages/Org_/Repo_/Build_/Graph.elm +++ b/src/elm/Pages/Org_/Repo_/Build_/Graph.elm @@ -434,8 +434,7 @@ view shared route model = [ ul [] [ li [] [ button - [ class "button" - , class "-icon" + [ class "button -icon" , id "action-center" , title "Recenter visualization" , Util.testAttribute "build-graph-action-center" @@ -448,8 +447,7 @@ view shared route model = ] , li [] [ button - [ class "button" - , class "-icon" + [ class "button -icon" , class "build-graph-action-refresh" , title "Refresh visualization" , onClick <| Refresh { freshDraw = True, setToLoading = True, clear = True } @@ -462,8 +460,7 @@ view shared route model = ] , li [] [ button - [ class "button" - , class "-icon" + [ class "button -icon" , class "build-graph-action-rotate" , class <| case model.rankDir of @@ -544,8 +541,7 @@ view shared route model = ] ] , button - [ class "button" - , class "-icon" + [ class "button -icon" , Util.testAttribute "build-graph-action-filter-clear" , onClick (UpdateFilter "") ] @@ -561,49 +557,49 @@ view shared route model = [ ul [ class "elm-build-graph-legend" ] [ li [] [ Components.Svgs.buildVizLegendNode - [ Svg.Attributes.class "-pending" + [ Svg.Attributes.class "state-pending" ] , text "pending" ] , li [ class "-running-hover" ] [ Components.Svgs.buildVizLegendNode - [ Svg.Attributes.class "-running" + [ Svg.Attributes.class "state-running" ] , text "running" ] , li [] [ Components.Svgs.buildVizLegendNode - [ Svg.Attributes.class "-success" + [ Svg.Attributes.class "state-success" ] , text "success" ] , li [] [ Components.Svgs.buildVizLegendNode - [ Svg.Attributes.class "-failure" + [ Svg.Attributes.class "state-failure" ] , text "failed" ] , li [] [ Components.Svgs.buildVizLegendNode - [ Svg.Attributes.class "-canceled" + [ Svg.Attributes.class "state-canceled" ] , text "canceled" ] , li [] [ Components.Svgs.buildVizLegendNode - [ Svg.Attributes.class "-killed" + [ Svg.Attributes.class "state-killed" ] , text "skipped" ] , li [] [ Components.Svgs.buildVizLegendNode - [ Svg.Attributes.class "-selected" + [ Svg.Attributes.class "state-selected" ] , text "selected" ] , li [] [ Components.Svgs.buildVizLegendEdge - [ Svg.Attributes.class "-pending" + [ Svg.Attributes.class "state-pending" ] , text "pending" ] diff --git a/src/elm/Pages/Org_/Repo_/Build_/Pipeline.elm b/src/elm/Pages/Org_/Repo_/Build_/Pipeline.elm index 32a18df28..6c6c80647 100644 --- a/src/elm/Pages/Org_/Repo_/Build_/Pipeline.elm +++ b/src/elm/Pages/Org_/Repo_/Build_/Pipeline.elm @@ -506,8 +506,7 @@ view shared route model = RemoteData.Success pipeline -> div [ class "action" ] [ button - [ class "button" - , class "-link" + [ class "button -link" , Util.testAttribute <| "download-yml" , onClick <| DownloadPipeline @@ -535,8 +534,7 @@ view shared route model = RemoteData.Success p -> if List.length p.warnings > 0 then div - [ class "logs-container" - , class "-pipeline" + [ class "logs-container -pipeline" ] [ table [ class "logs-table" @@ -571,7 +569,7 @@ view shared route model = RemoteData.Success templates -> if not <| Dict.isEmpty templates then viewTemplatesDetails model <| - div [ class "content", class "-success" ] <| + div [ class "content -success" ] <| (templates |> Dict.toList |> List.map viewTemplate @@ -582,7 +580,7 @@ view shared route model = RemoteData.Failure error -> viewTemplatesDetails model <| - div [ class "content", class "-error" ] + div [ class "content -error" ] [ span [ Util.testAttribute "pipeline-templates-error" ] [ text <| case error of @@ -601,8 +599,8 @@ view shared route model = _ -> viewTemplatesDetails model <| - div [ class "content", class "-success" ] [ Components.Loading.viewSmallLoaderWithText "loading pipeline templates" ] - , div [ class "logs-container", class "-pipeline" ] + div [ class "content -success" ] [ Components.Loading.viewSmallLoaderWithText "loading pipeline templates" ] + , div [ class "logs-container -pipeline" ] [ table [ class "logs-table" , class "pipeline" @@ -627,7 +625,7 @@ view shared route model = div [ class "no-pipeline" ] [ small [] [ code [] [ text "The pipeline found for this build/ref contains no data." ] ] ] RemoteData.Failure error -> - div [ class "content", class "-error" ] + div [ class "content -error" ] [ span [ Util.testAttribute "pipeline-configuration-error" ] [ text <| case error of @@ -676,8 +674,7 @@ viewTemplatesDetails model body = viewExpandToggleButton : Model -> Html Msg viewExpandToggleButton model = button - [ class "button" - , class "-link" + [ class "button -link" , Util.onClickPreventDefault ToggleExpand , Util.testAttribute "pipeline-expand-toggle" ] @@ -747,7 +744,7 @@ viewLine expand shiftKeyDown lineNumber line warnings focus = |> Maybe.Extra.filter (\_ -> not expand) |> Maybe.Extra.unwrap (class "-hide") (\_ -> class "-show") ] - [ Components.Svgs.annotationCircle "-warning" ] + [ Components.Svgs.annotationCircle "annotation-warning" ] , td [ Html.Attributes.title <| "Jump to line " ++ String.fromInt lineNumber ] @@ -764,8 +761,7 @@ viewLine expand shiftKeyDown lineNumber line warnings focus = , b = Nothing } , class "line-number" - , class "button" - , class "-link" + , class "button -link" , attribute "aria-label" "focus this line" , title <| "Focus line " ++ String.fromInt lineNumber ] @@ -795,8 +791,8 @@ viewWarningAsLogLine model shared idx warning = [ class "warning" , Util.testAttribute <| String.join "-" [ "warning", String.fromInt idx ] ] - [ td [ class "annotation", class "-show" ] - [ Components.Svgs.annotationCircle "-warning" + [ td [ class "annotation -show" ] + [ Components.Svgs.annotationCircle "annotation-warning" ] , td [] [ case maybeLineNumber of @@ -820,10 +816,9 @@ viewWarningAsLogLine model shared idx warning = Focus.toString <| Focus.updateLineRange shared.shift Nothing lineNumber model.focus } , Util.testAttribute <| String.join "-" [ "warning", "line", "num", String.fromInt lineNumber ] - , class "button" - , class "-link" + , class "button -link" , if model.expand then - class "-disabled" + class "warning-disabled" else class "" diff --git a/src/elm/Pages/Org_/Repo_/Build_/Services.elm b/src/elm/Pages/Org_/Repo_/Build_/Services.elm index 443f19405..bee307391 100644 --- a/src/elm/Pages/Org_/Repo_/Build_/Services.elm +++ b/src/elm/Pages/Org_/Repo_/Build_/Services.elm @@ -663,22 +663,20 @@ view shared route model = , Util.testAttribute "log-actions" ] [ button - [ class "button" - , class "-link" + [ class "button -link" , onClick CollapseAll , Util.testAttribute "collapse-all" ] [ small [] [ text "collapse all" ] ] , button - [ class "button" - , class "-link" + [ class "button -link" , onClick ExpandAll , Util.testAttribute "expand-all" ] [ small [] [ text "expand all" ] ] ] , div [ class "services" ] - [ div [ class "-items", Util.testAttribute "services" ] <| + [ div [ class "service-items", Util.testAttribute "services" ] <| List.map (viewService shared model route) <| List.sortBy .number <| RemoteData.withDefault [] model.services @@ -705,8 +703,8 @@ viewService shared model route service = ] , Util.testAttribute "service" ] - [ div [ class "-status" ] - [ div [ class "-icon-container" ] [ Components.Svgs.statusToIcon service.status ] ] + [ div [ class "service-status" ] + [ div [ class "service-icon-container" ] [ Components.Svgs.statusToIcon service.status ] ] , details (classList [ ( "details", True ) @@ -726,9 +724,9 @@ viewService shared model route service = } ] [ div - [ class "-info" ] - [ div [ class "-name" ] [ text service.name ] - , div [ class "-duration" ] [ text <| Util.formatRunTime shared.time service.started service.finished ] + [ class "service-info" ] + [ div [ class "service-name" ] [ text service.name ] + , div [ class "service-duration" ] [ text <| Util.formatRunTime shared.time service.started service.finished ] ] , FeatherIcons.chevronDown |> FeatherIcons.withSize 20 |> FeatherIcons.withClass "details-icon-expand" |> FeatherIcons.toHtml [ attribute "aria-label" "show build actions" ] ] diff --git a/src/elm/Pages/Org_/Repo_/Deployments.elm b/src/elm/Pages/Org_/Repo_/Deployments.elm index dc0ddcf36..1aa608b47 100644 --- a/src/elm/Pages/Org_/Repo_/Deployments.elm +++ b/src/elm/Pages/Org_/Repo_/Deployments.elm @@ -283,17 +283,15 @@ viewDeployments shared model route = Just <| div [ class "buttons" ] [ a - [ class "button" - , class "-outline" - , class "button-with-icon" + [ class "button -outline -with-icon" , Util.testAttribute "add-deployment" , Route.Path.href <| Route.Path.Org__Repo__Deployments_Add { org = route.params.org, repo = route.params.repo } ] - [ text "Add Deployment" - , FeatherIcons.plus + [ FeatherIcons.plus |> FeatherIcons.withSize 18 - |> FeatherIcons.toHtml [ Svg.Attributes.class "button-icon" ] + |> FeatherIcons.toHtml [] + , text "Add Deployment" ] , Components.Pager.view { show = True @@ -395,7 +393,7 @@ tableHeaders = -} viewDeployment : Shared.Model -> Vela.Repository -> Vela.Deployment -> Html Msg viewDeployment shared repo deployment = - tr [ Util.testAttribute <| "deployments-row", class "status-success" ] + tr [ Util.testAttribute "deployments-row", class "status-success" ] [ Components.Table.viewIconCell { dataLabel = "status" , parentClassList = [] diff --git a/src/elm/Pages/Org_/Repo_/Deployments/Add.elm b/src/elm/Pages/Org_/Repo_/Deployments/Add.elm index d77ebb015..44e6d3910 100644 --- a/src/elm/Pages/Org_/Repo_/Deployments/Add.elm +++ b/src/elm/Pages/Org_/Repo_/Deployments/Add.elm @@ -559,8 +559,7 @@ view shared route model = , required = False } , button - [ class "button" - , class "-outline" + [ class "button -outline" , onClick AddParameter , Util.testAttribute "button-parameter-add" , disabled (String.isEmpty model.parameterKey || String.isEmpty model.parameterValue) @@ -576,8 +575,7 @@ view shared route model = [ div [ class "parameter", class "chevron" ] [ div [ class "name" ] [ text (parameter.key ++ "=" ++ parameter.value) ] , button - [ class "button" - , class "-outline" + [ class "button -outline" , Util.testAttribute ("button-parameter-remove-" ++ parameter.key) , onClick <| RemoveParameter parameter ] @@ -593,8 +591,7 @@ view shared route model = , div [ class "vert-icon-container" ] [ button [ class "copy-button" - , class "button" - , class "-icon" + , class "button -icon" , class "-white" , attribute "data-clipboard-text" ("$DEPLOYMENT_PARAMETER_" ++ String.toUpper parameter.key) , attribute "aria-label" "copy token" @@ -646,7 +643,7 @@ viewDeploymentConfigTarget targets current msg = section [ class "settings", Util.testAttribute "deployment-config-target" ] [ Html.label [ class "form-label" ] [ Html.strong [] [ text "Target" ] ] , div - [ class "form-controls", class "-stack" ] + [ class "form-controls -stack" ] <| List.map (\target -> @@ -722,8 +719,7 @@ viewDeploymentConfigParameter mdl key param = , required = param.required } , button - [ class "button" - , class "-outline" + [ class "button -outline" , onClick <| AddConfigParameter key (mdl.configParameters |> Dict.get key |> Maybe.withDefault "") , Util.testAttribute "button-parameter-add" , disabled <| String.isEmpty (mdl.configParameters |> Dict.get key |> Maybe.withDefault "") @@ -783,8 +779,7 @@ viewDeploymentConfigParameter mdl key param = ] ] , button - [ class "button" - , class "-outline" + [ class "button -outline" , onClick <| AddConfigParameter key (mdl.configParameters |> Dict.get key |> Maybe.withDefault "") , Util.testAttribute "button-parameter-add" , disabled <| String.isEmpty (Dict.get key mdl.configParameters |> Maybe.withDefault "") @@ -841,8 +836,7 @@ viewDeploymentConfigParameter mdl key param = , required = param.required } , button - [ class "button" - , class "-outline" + [ class "button -outline" , onClick <| AddConfigParameter key (mdl.configParameters |> Dict.get key |> Maybe.withDefault "") , Util.testAttribute "button-parameter-add" , disabled <| String.isEmpty (mdl.configParameters |> Dict.get key |> Maybe.withDefault "") @@ -920,8 +914,7 @@ viewDeploymentConfigParameter mdl key param = ) ] , button - [ class "button" - , class "-outline" + [ class "button -outline" , onClick <| AddConfigParameter key (mdl.configParameters |> Dict.get key |> Maybe.withDefault "") , Util.testAttribute "button-parameter-add" , disabled <| String.isEmpty (mdl.configParameters |> Dict.get key |> Maybe.withDefault "") diff --git a/src/elm/Pages/Org_/Repo_/Schedules.elm b/src/elm/Pages/Org_/Repo_/Schedules.elm index 79b7002c5..76b50b189 100644 --- a/src/elm/Pages/Org_/Repo_/Schedules.elm +++ b/src/elm/Pages/Org_/Repo_/Schedules.elm @@ -255,9 +255,7 @@ viewRepoSchedules shared model org repo pageNum = Just <| div [ class "buttons" ] [ a - [ class "button" - , class "button-with-icon" - , class "-outline" + [ class "button -with-icon -outline" , Util.testAttribute "add-repo-schedule" , Route.Path.href <| Route.Path.Org__Repo__Schedules_Add @@ -265,10 +263,10 @@ viewRepoSchedules shared model org repo pageNum = , repo = repo } ] - [ text <| "Add Schedule" - , FeatherIcons.plus + [ FeatherIcons.plus |> FeatherIcons.withSize 18 - |> FeatherIcons.toHtml [ Svg.Attributes.class "button-icon" ] + |> FeatherIcons.toHtml [] + , text "Add Schedule" ] , Components.Pager.view { show = True @@ -360,7 +358,7 @@ viewSchedule zone org repo schedule = [ Components.Table.viewItemCell { dataLabel = "name" , parentClassList = [ ( "name", True ) ] - , itemClassList = [ ( "-block", True ) ] + , itemClassList = [ ( "table-cell-block", True ) ] , children = [ a [ Route.Path.href <| diff --git a/src/elm/Pages/Org_/Repo_/Settings.elm b/src/elm/Pages/Org_/Repo_/Settings.elm index df3d7aa64..a61949deb 100644 --- a/src/elm/Pages/Org_/Repo_/Settings.elm +++ b/src/elm/Pages/Org_/Repo_/Settings.elm @@ -845,7 +845,7 @@ viewAccess repo msg = section [ class "settings", Util.testAttribute "repo-settings-access" ] [ h2 [ class "settings-title" ] [ text "Access" ] , p [ class "settings-description" ] [ text "Change who can access build information." ] - , div [ class "form-controls", class "-stack" ] + , div [ class "form-controls -stack" ] [ Components.Form.viewRadio { title = "Private" , subtitle = Just (text "(restricted to those with repository access)") @@ -875,7 +875,7 @@ viewForkPolicy repo msg = section [ class "settings", Util.testAttribute "repo-settings-fork-policy" ] [ h2 [ class "settings-title" ] [ text "Outside Contributor Permissions" ] , p [ class "settings-description" ] [ text "Change which pull request builds from forks need approval to run a build." ] - , div [ class "form-controls", class "-stack" ] + , div [ class "form-controls -stack" ] [ Components.Form.viewRadio { title = "Always Require Admin Approval" , subtitle = Just (text "(repository admin must approve all builds from outside contributors)") @@ -1265,7 +1265,7 @@ viewBadge shared repo copyMsg = [ p [ class "build-badge" ] [ img [ alt "build status badge", src badgeURL ] [] ] , text "Markdown" - , div [ class "form-controls", class "-no-x-pad" ] + , div [ class "form-controls -no-x-pad" ] [ textarea [ class "form-control" , class "copy-display" @@ -1278,8 +1278,7 @@ viewBadge shared repo copyMsg = [ text mdCode ] , button [ class "copy-button" - , class "button" - , class "-icon" + , class "button -icon" , class "-white" , attribute "data-clipboard-text" mdCode , attribute "aria-label" "copy status badge markdown code" @@ -1326,8 +1325,7 @@ viewAdminActions repo disableRepoMsg enableRepoMsg chownRepoMsg repairRepoMsg = [ em [] [ text <| "Current owner: " ++ repo.owner.name ] ] ] , button - [ class "button" - , class "-outline" + [ class "button -outline" , attribute "aria-label" <| "become owner of the webhook for " ++ repo.full_name , Util.testAttribute "repo-chown" , onClick (chownRepoMsg { repo = repo }) @@ -1341,8 +1339,7 @@ viewAdminActions repo disableRepoMsg enableRepoMsg chownRepoMsg repairRepoMsg = [ em [] [ text "This will repair the webhook for this repository." ] ] ] , button - [ class "button" - , class "-outline" + [ class "button -outline" , attribute "aria-label" <| "repair the webhook for " ++ repo.full_name , Util.testAttribute "repo-repair" , onClick (repairRepoMsg { repo = repo }) @@ -1402,8 +1399,7 @@ viewEnableButton disableRepoMsg enableRepoMsg repo = Vela.Disabling -> button [ inProgressClasses - , class "button" - , class "-outline" + , class "button -outline" , class "-loading" , Util.testAttribute "repo-disabling" ] @@ -1414,8 +1410,7 @@ viewEnableButton disableRepoMsg enableRepoMsg repo = Vela.Enabling -> div [ inProgressClasses - , class "button" - , class "-outline" + , class "button -outline" , class "-loading" , Util.testAttribute "repo-enabling" ] @@ -1464,7 +1459,7 @@ viewPipelineType repo msg = section [ class "settings", Util.testAttribute "repo-settings-pipeline-type" ] [ h2 [ class "settings-title" ] [ text "Pipeline Type" ] , p [ class "settings-description" ] [ text "Change how the compiler treats the base vela config." ] - , div [ class "form-controls", class "-stack" ] + , div [ class "form-controls -stack" ] [ Components.Form.viewRadio { value = repo.pipeline_type , field = "yaml" @@ -1521,7 +1516,7 @@ viewMergeQueueEvents repo inMergeQueueEvents toggleMsg saveMsg = section [ class "settings", Util.testAttribute "repo-settings-merge-queue-events" ] [ h2 [ class "settings-title" ] [ text "Merge Queue Events" ] , p [ class "settings-description" ] [ text "Choose which event contexts Vela will report to for merge queue builds." ] - , div [ class "form-controls", class "-stack" ] + , div [ class "form-controls -stack" ] (List.map (\eventName -> Components.Form.viewCheckbox diff --git a/src/elm/Utils/Focus.elm b/src/elm/Utils/Focus.elm index eea6a6ae4..a490946cc 100644 --- a/src/elm/Utils/Focus.elm +++ b/src/elm/Utils/Focus.elm @@ -272,14 +272,14 @@ lineRangeStyles group lineNumber focus = ( lineB, lineA ) in if group == focus.group && lineNumber >= a && lineNumber <= b then - "-focus" + "line-focus" else "" ( _, Just lineA, Nothing ) -> if group == focus.group && lineA == lineNumber then - "-focus" + "line-focus" else "" diff --git a/src/scss/_buttons.scss b/src/scss/_buttons.scss index f70ba3271..481c2b38f 100644 --- a/src/scss/_buttons.scss +++ b/src/scss/_buttons.scss @@ -92,18 +92,16 @@ // special case where we add animation to // a failure state button // TODO: move to separate file? -.-failure { - &.-animate-rotate { - > svg { - transition: transform 0.2s ease-in-out; - } +.button.-failure.-animate-rotate { + > svg { + transition: transform 0.2s ease-in-out; + } - &:hover svg, - &:focus svg { - transform: rotate(0.5turn); + &:hover svg, + &:focus svg { + transform: rotate(0.5turn); - transition: transform 0.2s ease-in-out; - } + transition: transform 0.2s ease-in-out; } } @@ -216,6 +214,16 @@ } } +// button variant that pairs text with a trailing icon +.button.-with-icon { + padding-right: 0.9rem; + padding-left: 0.9rem; + + > svg { + vertical-align: middle; + } +} + // hidden button .button.-hidden { visibility: hidden; diff --git a/src/scss/_dashboards.scss b/src/scss/_dashboards.scss index bfdaeb26e..dfd4a9cf0 100644 --- a/src/scss/_dashboards.scss +++ b/src/scss/_dashboards.scss @@ -46,7 +46,7 @@ background-color: var(--color-bg-darkest); - .-icon { + svg { width: 1rem; height: 1rem; @@ -119,7 +119,7 @@ background-color: var(--color-bg-darkest); // custom styling for the status icon - .-icon { + svg { width: 2.5rem; height: 2.5rem; @@ -215,13 +215,13 @@ } // icons for recent builds are larger - .-icon { + svg { width: 5rem; height: 5rem; } // overrides for recent builds component due to custom styling - .recent-build:not(:first-child) .-icon { + .recent-build-not-first svg { background-color: var(--color-bg-darkest); // too many levels border-style: solid; border-width: 2px 0; @@ -235,26 +235,30 @@ &.-running { border-color: var(--color-yellow); - stroke: var(--color-yellow); + stroke: var(--color-bg-darkest); } &.-success { border-color: var(--color-green); - stroke: var(--color-green); + stroke: var(--color-bg-darkest); } &.-canceled { - border-color: var(--color-cyan-dark); + background-color: var( + --recent-build-canceled-color, + var(--color-cyan-dark) + ); + border-color: var(--recent-build-canceled-color, var(--color-cyan-dark)); - stroke: var(--color-cyan-dark); + stroke: var(--recent-build-canceled-bg, var(--color-bg-darkest)); } &.-failure, &.-error { border-color: var(--color-red); - stroke: var(--color-red); + stroke: var(--color-bg-darkest); } } @@ -298,7 +302,10 @@ } &:has(.-canceled)::before { - background-color: var(--color-cyan-dark); + background-color: var( + --recent-build-canceled-color, + var(--color-cyan-dark) + ); } &:has(.-error)::before, diff --git a/src/scss/_graph.scss b/src/scss/_graph.scss index 639788d3e..5be4d0dc2 100644 --- a/src/scss/_graph.scss +++ b/src/scss/_graph.scss @@ -118,40 +118,40 @@ svg.elm-build-graph-root { fill: var(--color-bg-dark); stroke: var(--color-gray); - .-pending, - .-running { + .state-pending, + .state-running { stroke-dasharray: 7, 4; } - .-canceled, - .-failure { + .state-canceled, + .state-failure { stroke-dasharray: 3 3; } - .-running { + .state-running { stroke: var(--color-yellow); } - .-success { + .state-success { stroke: var(--color-green); } - .-failure { + .state-failure { stroke: var(--color-red); } - .-canceled { + .state-canceled { stroke: var(--color-cyan-dark); } - .-killed, - .-skipped { + .state-killed, + .state-skipped { stroke: var(--color-lavender); stroke-dasharray: 2, 4; stroke-linecap: round; } - .-selected { + .state-selected { stroke: var(--color-primary); stroke-width: 5; } @@ -167,24 +167,24 @@ svg.elm-build-graph-root { fill: var(--color-bg-dark); stroke: var(--color-gray); - .-pending { + .state-pending { stroke-dasharray: 5, 3; } - .-running { + .state-running { stroke: var(--color-yellow); stroke-dasharray: 7, 4; } - .-success { + .state-success { stroke: var(--color-green); } - .-failure { + .state-failure { stroke: var(--color-red); } - .-selected { + .state-selected { stroke: var(--color-primary); } diff --git a/src/scss/_main.scss b/src/scss/_main.scss index c2de276e4..52673a673 100644 --- a/src/scss/_main.scss +++ b/src/scss/_main.scss @@ -458,7 +458,7 @@ details.build-toggle { justify-content: flex-start; } -.large-loader .-spinner { +.large-loader .loader-spinner { width: 40px; height: 40px; @@ -475,7 +475,7 @@ details.build-toggle { justify-content: flex-start; } -.small-loader .-spinner { +.small-loader .loader-spinner { width: 20px; height: 20px; @@ -486,7 +486,7 @@ details.build-toggle { animation: spin 3s linear infinite; } -.small-loader .-label { +.small-loader .loader-label { margin-left: 0.8em; font-weight: 300; @@ -700,11 +700,11 @@ details.build-toggle { pointer-events: none; } -.-running-start { +.anim-running-start { stroke: none; } -.-running-particles { +.anim-running-particles { stroke: var(--color-yellow); } @@ -778,15 +778,15 @@ details.build-toggle { border-bottom: 2px solid var(--color-cyan-dark); } -.-animation-dashes-1 { +.anim-dashes-1 { stroke-dasharray: 20 220 5 360; } -.-animation-dashes-2 { +.anim-dashes-2 { stroke-dasharray: 70 270 8 300; } -.-animation-dashes-3 { +.anim-dashes-3 { stroke-dasharray: 1 240 8 220 12 400 10 180; } @@ -807,7 +807,7 @@ details.build-toggle { font-size: 0.8em; } -.-icon { +.icon-state { fill: none; stroke: var(--color-primary); @@ -844,7 +844,7 @@ details.build-toggle { stroke: var(--color-bg-light); } - .-inner { + .icon-state-inner { fill: var(--color-primary); } @@ -877,25 +877,33 @@ details.build-toggle { margin: 0 0.2rem 0 0; } -.recent-build-link .-icon { +.recent-build-link svg { fill: none; stroke: var(--color-bg); &.-running { background-color: var(--color-yellow); + + stroke: var(--color-bg); } &.-failure, &.-error { background-color: var(--color-red); + + stroke: var(--color-bg); } &.-canceled { background-color: var(--color-cyan-dark); + + stroke: var(--color-bg); } &.-success { background-color: var(--color-green); + + stroke: var(--color-bg); } &.-pending { @@ -1017,15 +1025,15 @@ details.build-toggle { background-size: 100% 2em; } -.step .-status, -.service .-status { +.step-status, +.service-status { margin-top: 2rem; margin-right: 1rem; margin-left: 1.6rem; } -.step .-icon-container, -.service .-icon-container { +.step-icon-container, +.service-icon-container { padding-top: 12px; padding-bottom: 12px; @@ -1038,8 +1046,8 @@ details.build-toggle { margin-left: 36px; } -.step .-icon.-pending, -.service .-icon.-pending { +.step svg.-pending, +.service svg.-pending { padding: 8px; border: 2px solid var(--color-bg-light); @@ -1048,15 +1056,15 @@ details.build-toggle { fill: var(--color-bg-light); } -.step .-info, -.service .-info { +.step-info, +.service-info { display: flex; flex-direction: row; justify-content: space-between; } -.step .-info .-duration, -.service .-info .-duration { +.step-duration, +.service-duration { font-family: var(--font-code); } @@ -1118,7 +1126,7 @@ details.build-toggle { } } -.logs .-focus { +.logs .line-focus { background: var(--color-focus); } @@ -1308,7 +1316,7 @@ details.build-toggle { cursor: pointer; } -.alert-container .-title { +.alert-container .alert-title { display: flex; justify-content: space-between; margin: 0; @@ -1316,7 +1324,7 @@ details.build-toggle { font-size: 1em; } -.alert-container .-message { +.alert-container .alert-message { display: flex; flex-direction: row; justify-content: space-between; diff --git a/src/scss/_nav.scss b/src/scss/_nav.scss index c853926ae..abb9aca3f 100644 --- a/src/scss/_nav.scss +++ b/src/scss/_nav.scss @@ -4,15 +4,6 @@ // │││├─┤└┐┌┘ // ┘└┘┴ ┴ └┘ -// style for application nav -.button-with-icon { - padding-right: 0.4rem; -} - -.button-icon { - margin-left: 0.6rem; -} - .jump-bar { display: flex; width: 100%; diff --git a/src/scss/_pipelines.scss b/src/scss/_pipelines.scss index 7b457e77a..d076518ae 100644 --- a/src/scss/_pipelines.scss +++ b/src/scss/_pipelines.scss @@ -75,7 +75,7 @@ border-top: 1px solid var(--color-secondary); - .-error { + &.-error { padding: 0.8rem 1rem; border-left: 1px solid var(--color-red); @@ -227,18 +227,18 @@ tr.warning, position: relative; } -.warnings .-disabled { +.warnings .warning-disabled { color: var(--color-bg-light); } -.theme-light .warnings .-disabled { +.theme-light .warnings .warning-disabled { color: var(--color-coal-light); } .annotation { padding: 0; - .-warning { + .annotation-warning { fill: var(--color-yellow); stroke: var(--color-yellow); } diff --git a/src/scss/_table.scss b/src/scss/_table.scss index 129bdc62b..388ad8f07 100644 --- a/src/scss/_table.scss +++ b/src/scss/_table.scss @@ -81,7 +81,7 @@ padding-bottom: 0.375rem; } -.table-base .-block { +.table-base .table-cell-block { display: block; } diff --git a/src/scss/_themes.scss b/src/scss/_themes.scss index cc53c34b1..e9e424002 100644 --- a/src/scss/_themes.scss +++ b/src/scss/_themes.scss @@ -68,12 +68,12 @@ body.theme-light { background-color: var(--color-secondary-dark); } - .recent-build-link .-icon.-canceled { + .recent-build-status-canceled .recent-build-link svg { background-color: var(--color-secondary-dark); } - .steps .-icon.-canceled, - .services .-icon.-canceled { + .steps svg.-canceled, + .services svg.-canceled { stroke: var(--color-secondary-dark); } @@ -121,6 +121,7 @@ body.theme-light { .build:not(.-canceled) .error { color: var(--color-red); } + /* stylelint-enable selector-max-specificity */ .logs-container { @@ -167,7 +168,7 @@ body.theme-light { color: var(--color-red-dark); } - .small-loader .-spinner { + .small-loader .loader-spinner { border-color: var(--color-bg-light); border-top-color: var(--color-bg); } @@ -252,25 +253,13 @@ body.theme-light { } // dashboards -.theme-light .card-header .-canceled { +.theme-light .card-header svg.-canceled { background-color: var(--color-cyan-semi-dark); } -/* stylelint-disable selector-max-compound-selectors,selector-max-specificity */ -.theme-light - .dashboard-recent-builds - .recent-build:not(:first-child) - .-canceled { - background-color: var(--color-gray-lightest); - border-color: var(--color-secondary-dark); - - stroke: var(--color-secondary-dark); -} - -/* stylelint-enable selector-max-compound-selectors,selector-max-specificity */ - -.theme-light .recent-build-link.-current:has(.-canceled)::before { - background-color: var(--color-secondary-dark); +.theme-light .dashboard-recent-builds { + --recent-build-canceled-bg: var(--color-gray-lightest); + --recent-build-canceled-color: var(--color-secondary-dark); } /*! purgecss end ignore */