fix: form style consistency (#762)

Co-authored-by: Easton Crupper <[email protected]>
go-vela · Feb 2, 2024 · a8020aa · a8020aa
1 parent 43e2a93
commit a8020aa
Show file tree

Hide file tree

Showing 5 changed files with 15 additions and 49 deletions.
diff --git a/src/elm/Pages/Deployments/Form.elm b/src/elm/Pages/Deployments/Form.elm
@@ -21,6 +21,7 @@ import Html
         , em
         , input
         , label
+        , p
         , section
         , span
         , strong
@@ -116,13 +117,11 @@ viewDeployEnabled repo_settings =
     case repo_settings of
         RemoteData.Success repo ->
             if repo.allow_deploy then
-                section []
+                p []
                     []
 
             else
-                section [ class "notice" ]
-                    [ strong [] [ text "Deploy webhook for this repo must be enabled in settings" ]
-                    ]
+                p [ class "notice" ] [ text "Deploy webhook for this repo must be enabled in settings" ]
 
         _ ->
             section [] []

diff --git a/src/elm/Pages/Deployments/View.elm b/src/elm/Pages/Deployments/View.elm
@@ -36,7 +36,8 @@ addDeployment : PartialModel a msg -> Html Msg
 addDeployment model =
     div [ class "manage-deployment", Util.testAttribute "add-deployment" ]
         [ div []
-            [ addForm model.deploymentModel
+            [ h2 [] [ text "Add Deployment" ]
+            , addForm model.deploymentModel
             ]
         ]
 
@@ -58,8 +59,7 @@ addForm deploymentModel =
                     ""
     in
     div [ class "deployment-form" ]
-        [ h2 [ class "deployment-header" ] [ text "Add Deployment" ]
-        , viewDeployEnabled deploymentModel.repo_settings
+        [ viewDeployEnabled deploymentModel.repo_settings
 
         -- GitHub default is "production". If we support more SCMs, this line may need tweaking
         , viewValueInput "Target" deployment.target "provide the name for the target deployment environment (default: \"production\")"

diff --git a/src/elm/Pages/Secrets/Form.elm b/src/elm/Pages/Secrets/Form.elm
@@ -178,7 +178,7 @@ viewEventsSelect secret model =
         scheduleOption =
             if schedulesAllowed then
                 [ strong [ class "settings-subtitle" ] [ text "Schedule" ]
-                , div [ class "form-controls", class "-two-col-secrets" ]
+                , div [ class "form-controls", class "-two-col" ]
                     [ checkbox "Schedule"
                         "schedule"
                         secret.allowEvents.schedule.run
@@ -202,7 +202,7 @@ viewEventsSelect secret model =
                 , pullRequestWarning
                 ]
             , strong [ class "settings-subtitle" ] [ text "Push" ]
-            , div [ class "form-controls", class "-two-col-secrets" ]
+            , div [ class "form-controls", class "-two-col" ]
                 [ checkbox "Push"
                     "allow_push_branch"
                     secret.allowEvents.push.branch
@@ -215,7 +215,7 @@ viewEventsSelect secret model =
                     OnChangeEvent "allow_push_tag"
                 ]
             , strong [ class "settings-subtitle" ] [ text "Pull Request" ]
-            , div [ class "form-controls", class "-two-col-secrets" ]
+            , div [ class "form-controls", class "-two-col" ]
                 [ checkbox "Opened"
                     "allow_pull_opened"
                     secret.allowEvents.pull.opened
@@ -238,15 +238,15 @@ viewEventsSelect secret model =
                     OnChangeEvent "allow_pull_reopened"
                 ]
             , strong [ class "settings-subtitle" ] [ text "Deployments" ]
-            , div [ class "form-controls", class "-two-col-secrets" ]
+            , div [ class "form-controls", class "-two-col" ]
                 [ checkbox "Created"
                     "allow_deploy_created"
                     secret.allowEvents.deploy.created
                   <|
                     OnChangeEvent "allow_deploy_created"
                 ]
             , strong [ class "settings-subtitle" ] [ text "Comment" ]
-            , div [ class "form-controls", class "-two-col-secrets" ]
+            , div [ class "form-controls", class "-two-col" ]
                 [ checkbox "Created"
                     "allow_comment_created"
                     secret.allowEvents.comment.created
@@ -259,7 +259,7 @@ viewEventsSelect secret model =
                     OnChangeEvent "allow_comment_edited"
                 ]
             , strong [ class "settings-subtitle" ] [ text "Delete" ]
-            , div [ class "form-controls", class "-two-col-secrets" ]
+            , div [ class "form-controls", class "-two-col" ]
                 [ checkbox "Branch"
                     "allow_push_delete_branch"
                     secret.allowEvents.push.delete_branch

diff --git a/src/scss/_forms.scss b/src/scss/_forms.scss
@@ -46,7 +46,7 @@
   //  <label class="form-label">...</label>
   // </div>
   textarea {
-    width: 70%;
+    width: 100%;
     margin-top: 0.2rem;
     margin-bottom: 0.5rem;
     padding: 0.5rem;
@@ -246,7 +246,7 @@
 
 .form-controls {
   display: flex;
-  justify-content: space-between;
+  justify-content: flex-start;
   padding: 0.5rem 1rem;
 
   border: none;
@@ -261,16 +261,6 @@
     }
   }
 
-  &.-two-col-secrets {
-    flex-flow: row wrap;
-    gap: 0.5rem;
-    max-width: 30%;
-
-    .form-control {
-      flex: 0 0 40%;
-    }
-  }
-
   .form-control {
     margin-right: 0.5rem;
   }
@@ -287,7 +277,6 @@
   // .-row is for horizontally stacking controls
   &.-row {
     flex-flow: row nowrap;
-    justify-content: flex-start;
 
     .form-control:not(:last-child) {
       margin-right: 0.5rem;

diff --git a/src/scss/_main.scss b/src/scss/_main.scss
@@ -1553,6 +1553,7 @@ details.build-toggle {
 .secret-form,
 .deployment-form,
 .schedule-form {
+  max-width: 45rem;
   margin-bottom: 0.5rem;
   padding-top: 1rem;
 }
@@ -1632,25 +1633,6 @@ details.build-toggle {
   padding: 1rem;
 }
 
-.manage-secret .subheader,
-.manage-deployment .subheader {
-  width: 80%;
-  margin-top: 1rem;
-
-  border-bottom: 2px solid var(--color-primary);
-}
-
-.manage-secret input,
-.manage-deployment input {
-  max-width: 400px;
-}
-
-.manage-secret textarea,
-.manage-deployment textarea,
-.manage-schedule textarea {
-  max-width: 70%;
-}
-
 .secret-form .help,
 .deployment-form .help,
 .schedule-form .help {
@@ -1663,10 +1645,6 @@ details.build-toggle {
   padding-left: 1rem;
 }
 
-.deployment-form h2.deployment-header {
-  margin-bottom: 1rem;
-}
-
 .add-deployment-buttons {
   justify-content: flex-end;
 }