Add working border color

Author: hojberg

elm-git.json

@@ -1,7 +1,7 @@
 {
     "git-dependencies": {
         "direct": {
-            "https://github.com/unisonweb/ui-core": "339edb84a64211bbbfb7f9d2ce99e07ab9fb184a"
+            "https://github.com/unisonweb/ui-core": "aadadbff496feb5031541c64ed32469bc2418851"
         },
         "indirect": {}
     }

src/UnisonShare/Page/ProjectContributionOverviewPage.elm

@@ -250,13 +250,6 @@ viewContribution session project updateStatus contribution mergeStatus =
         canMaintain =
             Project.canMaintain project
 
-        className =
-            if updateStatus == UpdatingStatus then
-                "contribution-description contribution-description_updating"
-
-            else
-                "contribution-description"
-
         description =
             contribution.description
                 |> Maybe.map Markdown.view
@@ -372,12 +365,24 @@ viewContribution session project updateStatus contribution mergeStatus =
 
             else
                 div [ class "actions" ] actions
+
+        actionsClassName =
+            if updateStatus == UpdatingStatus then
+                "contribution-actions contribution-actions_updating"
+
+            else
+                "contribution-actions contribution-actions_updating"
     in
-    Card.card
-        [ description, actions_ ]
-        |> Card.asContained
-        |> Card.withClassName className
-        |> Card.view
+    div [ class "contribution-overview_main-cards" ]
+        [ Card.card [ description ]
+            |> Card.withClassName "contribution-description"
+            |> Card.asContained
+            |> Card.view
+        , Card.card [ actions_ ]
+            |> Card.withClassName actionsClassName
+            |> Card.asContained
+            |> Card.view
+        ]
 
 
 viewStatusChangeEvent : DateTimeContext a -> ContributionEvent.StatusChangeDetails -> List (Html Msg)

src/css/unison-share/page/project-contribution-overview-page.css

@@ -3,58 +3,73 @@
   flex-direction: column;
   gap: 1.5rem;
 
-  & pre {
+  pre {
     overflow: auto;
   }
 
-  & .contribution-description {
+  .contribution-overview_main-cards {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+  }
+
+  .contribution-description {
     z-index: 1;
     container-name: doc-container;
     container-type: inline-size;
     width: 100%;
 
-    & .no-description {
+    .no-description {
       font-size: var(--font-size-medium);
       color: var(--u-color_text_subdued);
     }
+  }
+
+  .contribution-actions {
+    z-index: 1;
+    container-name: doc-container;
+    container-type: inline-size;
+    width: 100%;
+
+    &.contribution-actions_updating {
+      background: var(--u-color_working_element_subdued);
+      border: 1px solid var(--u-color_working_border_subdued);
+    }
 
-    & .actions {
-      border-top: 1px solid var(--u-color_border_subdued);
-      padding: 1.5rem 1.5rem 0;
-      margin: 0.5rem -1.5rem 0;
+    .actions {
       display: flex;
       flex: 1;
-      width: calc(100% + 3rem);
+      width: 100%;
       flex-direction: row;
       flex-wrap: wrap;
       gap: 0.5rem;
       justify-content: space-between;
 
-      & .left-actions {
+      .left-actions {
         position: relative;
         display: flex;
         flex-direction: row;
         align-items: center;
         gap: 0.5rem;
 
-        & .tooltip {
+        .tooltip {
           left: 0;
         }
       }
 
-      & .right-actions {
+      .right-actions {
         position: relative;
         display: flex;
         flex-direction: row;
         gap: 0.5rem;
 
-        & .tooltip {
+        .tooltip {
           right: 0;
         }
       }
 
-      & .tooltip {
-        & .tooltip-bubble {
+      .tooltip {
+        .tooltip-bubble {
           top: 2.5rem;
           white-space: pre-wrap;
           min-width: 16rem;
@@ -64,26 +79,26 @@
     }
   }
 
-  & .new-comment_form {
+  .new-comment_form {
     position: relative;
     margin-top: 1rem;
     display: flex;
     flex-direction: column;
     gap: 0.5rem;
     padding: 0 1.5rem;
 
-    & .divider {
+    .divider {
       background: var(--u-color_border_subdued);
       margin-bottom: 1rem;
     }
 
-    & .comment-actions {
+    .comment-actions {
       display: flex;
       flex-direction: row;
       justify-content: flex-end;
       position: relative;
 
-      & .status-banner {
+      .status-banner {
         position: absolute;
         left: 0;
         z-index: 1;