From 8e111cc7db1afbb5a4a165bde33233d4a4444530 Mon Sep 17 00:00:00 2001
From: Jordan Jensen <jordan.jensen@rstudio.com>
Date: Fri, 8 Dec 2023 15:13:00 -0800
Subject: [PATCH 1/5] Create DeploymentCard component

- Handle hover and focus states
- Handle dark and light modes
---
 web/src/views/project-page/DeploymentCard.vue | 100 ++++++++++++++++++
 1 file changed, 100 insertions(+)
 create mode 100644 web/src/views/project-page/DeploymentCard.vue

diff --git a/web/src/views/project-page/DeploymentCard.vue b/web/src/views/project-page/DeploymentCard.vue
new file mode 100644
index 000000000..1c123c6ab
--- /dev/null
+++ b/web/src/views/project-page/DeploymentCard.vue
@@ -0,0 +1,100 @@
+<!-- Copyright (C) 2023 by Posit Software, PBC. -->
+
+<template>
+  <div class="deployment-card focus-shadow">
+    <RouterLink :to="`/deployments/${deployment.id}`">
+      <span
+        class="link-fill"
+        aria-hidden="true"
+      />
+
+      <p class="card-title">
+        {{ deployment.saveName }}
+      </p>
+      <div class="card-details">
+        <p>{{ deployment.serverUrl }}</p>
+        <p>{{ deployment.id }}</p>
+        <p>Last Published on {{ formatDateString(deployment.deployedAt) }}</p>
+      </div>
+    </RouterLink>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { PropType } from 'vue';
+import { RouterLink } from 'vue-router';
+
+import { Deployment } from 'src/api';
+import { formatDateString } from 'src/utils/date';
+
+defineProps({
+  deployment: {
+    type: Object as PropType<Deployment>,
+    required: true,
+  },
+});
+</script>
+
+<style scoped lang="scss">
+.deployment-card {
+    position: relative;
+    align-items: center;
+    border-radius: 8px;
+    border: 1px solid;
+    padding: 24px;
+
+    a {
+      color: inherit;
+      text-decoration: none;
+
+      &:focus {
+        outline: 2px solid transparent;
+        outline-offset: 2px;
+      }
+
+      .link-fill {
+        position: absolute;
+        inset: 0px;
+      }
+    }
+
+    .card-title {
+      font-size: 16px;
+      font-weight: 500;
+    }
+
+    .card-details {
+      margin-top: 12px;
+
+      & > :not([hidden]) ~ :not([hidden]) {
+        margin-top: 8px;
+      }
+    }
+
+    p {
+      margin: unset;
+      padding: unset;
+    }
+}
+
+.body--light {
+  .deployment-card {
+    background-color: white;
+    border-color: $grey-4;
+
+    &:hover {
+      border-color: $grey-6;
+    }
+  }
+}
+
+.body--dark {
+  .deployment-card {
+    border-color: $grey-8;
+
+    &:hover {
+      border-color: $grey-6;
+    }
+  }
+}
+</style>

From d09f2650add4c6fe9934a7c863464f061ea4be30 Mon Sep 17 00:00:00 2001
From: Jordan Jensen <jordan.jensen@rstudio.com>
Date: Fri, 8 Dec 2023 15:13:29 -0800
Subject: [PATCH 2/5] Create focus box-shadow utility in style.css

---
 web/src/style.css | 21 +++++++++++++++++++++
 1 file changed, 21 insertions(+)

diff --git a/web/src/style.css b/web/src/style.css
index ffd8f1d3b..f7337020b 100644
--- a/web/src/style.css
+++ b/web/src/style.css
@@ -1,3 +1,24 @@
 .max-width-md {
   max-width: 800px;
 }
+
+.body--light {
+  --focus-shadow-color: 0, 0, 0;
+  --focus-shadow-color-opacity: 0.14;
+  --focus-shadow-border-color: 0, 0, 0;
+  --focus-shadow-border-color-opacity: 0.2;
+}
+
+.body--dark {
+  --focus-shadow-color: 255, 255, 255;
+  --focus-shadow-color-opacity: 0.18;
+  --focus-shadow-border-color: 255, 255, 255;
+  --focus-shadow-border-color-opacity: 0.25;
+}
+
+.focus-shadow:focus,
+.focus-shadow:focus-within {
+  --focus-shadow: 0 0 0 4px rgba(var(--focus-shadow-color), var(--focus-shadow-color-opacity));
+  --border-shadow: 0 0 1px 1px rgba(var(--focus-shadow-border-color), var(--focus-shadow-border-color-opacity));
+  box-shadow: var(--focus-shadow), var(--border-shadow);
+}

From a07c03b90f82429cc8a533d6d385b1b9504be09a Mon Sep 17 00:00:00 2001
From: Jordan Jensen <jordan.jensen@rstudio.com>
Date: Fri, 8 Dec 2023 15:13:45 -0800
Subject: [PATCH 3/5] Use shortened month for formatDateString

---
 web/src/utils/date.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web/src/utils/date.ts b/web/src/utils/date.ts
index 358f827cb..939ba9457 100644
--- a/web/src/utils/date.ts
+++ b/web/src/utils/date.ts
@@ -3,7 +3,7 @@
 export function formatDateString(dateString: string) {
   return new Date(`${dateString}`).toLocaleDateString('en-US', {
     day: '2-digit',
-    month: 'long',
+    month: 'short',
     year: 'numeric',
   });
 }

From 72826a226cf3d3119c2e122dc6dde4ad275d038b Mon Sep 17 00:00:00 2001
From: Jordan Jensen <jordan.jensen@rstudio.com>
Date: Fri, 8 Dec 2023 15:14:04 -0800
Subject: [PATCH 4/5] Use DeploymentCard on ProjectPage

---
 web/src/views/project-page/ProjectPage.vue | 27 +++++++++++++---------
 1 file changed, 16 insertions(+), 11 deletions(-)

diff --git a/web/src/views/project-page/ProjectPage.vue b/web/src/views/project-page/ProjectPage.vue
index 07215d1c0..9b2bcfbdb 100644
--- a/web/src/views/project-page/ProjectPage.vue
+++ b/web/src/views/project-page/ProjectPage.vue
@@ -9,16 +9,13 @@
     Add Destination
   </q-btn>
 
-  <ul
-    v-for="deployment in deployments"
-    :key="deployment.id"
-  >
-    <li>
-      <RouterLink :to="`/deployments/${deployment.id}`">
-        {{ deployment.serverUrl }}
-      </RouterLink>
-    </li>
-  </ul>
+  <div class="card-grid">
+    <DeploymentCard
+      v-for="deployment in deployments"
+      :key="deployment.id"
+      :deployment="deployment"
+    />
+  </div>
 
   <h2>Configurations</h2>
   <ul
@@ -36,11 +33,11 @@
 
 <script setup lang="ts">
 import { ref } from 'vue';
-import { RouterLink } from 'vue-router';
 
 import { useApi } from 'src/api';
 import { Deployment, isDeploymentError } from 'src/api/types/deployments';
 import { Configuration, ConfigurationError, isConfigurationError } from 'src/api/types/configurations';
+import DeploymentCard from './DeploymentCard.vue';
 
 const api = useApi();
 const deployments = ref<Deployment[]>([]);
@@ -61,3 +58,11 @@ async function getConfigurations() {
 getDeployments();
 getConfigurations();
 </script>
+
+<style scoped lang="scss">
+.card-grid {
+  margin-top: 24px;
+  display: grid;
+  grid-gap: 28px;
+}
+</style>

From e2debb68160e423a97de6beb05111f794361c9fa Mon Sep 17 00:00:00 2001
From: Jordan Jensen <jordan.jensen@rstudio.com>
Date: Fri, 8 Dec 2023 15:30:42 -0800
Subject: [PATCH 5/5] Remove unnecessary align-items

---
 web/src/views/project-page/DeploymentCard.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/web/src/views/project-page/DeploymentCard.vue b/web/src/views/project-page/DeploymentCard.vue
index 1c123c6ab..d6404256c 100644
--- a/web/src/views/project-page/DeploymentCard.vue
+++ b/web/src/views/project-page/DeploymentCard.vue
@@ -38,7 +38,6 @@ defineProps({
 <style scoped lang="scss">
 .deployment-card {
     position: relative;
-    align-items: center;
     border-radius: 8px;
     border: 1px solid;
     padding: 24px;