Display study status in situations where user has joined the study.

.gitignore

@@ -42,6 +42,7 @@ dev
 output
 static/fonts
 static/version.json
+static/sass/bootstrap
 
 # Compiled options page
 public/build

package.json

@@ -3,15 +3,15 @@
   "version": "0.1.0",
   "scripts": {
     "pre-build": "bash scripts/reset-build-directories.sh && bash scripts/add-protocol.sh && node scripts/add-version-object.js",
-    "dev": "firebase emulators:exec --project demo-rally --only auth,functions,firestore --ui 'npm run build:functions && sleep 1 && npm run load:data && (npm run watch:functions & npm run watch:web)'",
+    "dev": "npm run config:web:demo && firebase emulators:exec --project demo-rally --only auth,functions,firestore --ui 'npm run build:functions && sleep 1 && npm run load:data && (npm run watch:functions & npm run watch:web)'",
     "config:web": "firebase_project=$(firebase use) || (echo ${firebase_project}; exit 1) && echo Configuring for Firebase project: ${firebase_project} && cp config/firebase.config.${firebase_project}.json ./build/firebase.config.json",
     "config:web:demo": "cp config/firebase.config.demo-rally.json static/firebase.config.json",
     "dev:web": "npm run pre-build && npm run config:web:demo && svelte-kit dev",
     "build": "npm run pre-build && npm run build:functions && svelte-kit build && npm run compile:sass",
     "build:functions": "cd functions && npm install && npm run build && cd ..",
     "build:web:emulator": "npm run pre-build && npm run config:web:demo && svelte-kit build -- --config-emulator-mode",
     "watch:functions": "watch 'npm run build:functions && sleep 1 && npm run load:data' ./functions/src > /dev/null",
-    "watch:web": "svelte-kit dev -- --config-emulator-mode",
+    "watch:web": "npm run compile:sass:watch & svelte-kit dev -- --config-emulator-mode",
     "load:data": "curl -s http://localhost:5001/demo-rally/us-central1/loadFirestore",
     "preview": "svelte-kit preview",
     "check": "svelte-check --tsconfig ./tsconfig.json",
@@ -26,8 +26,9 @@
     "test:functions": "firebase emulators:exec --project demo-rally --only auth,functions,firestore --ui 'npm run build:functions && sleep 1 && cd functions && npm run test:coverage && cd ..'",
     "storybook": "start-storybook -s ./static -p 6006",
     "build-storybook": "build-storybook -o storybook/build -s ./static",
-    "compile:sass:watch": "sass ./static/sass/main.scss ./static/css/styles.css -w",
-    "compile:sass": "sass ./static/sass/main.scss ./static/css/styles.css"
+    "copy-bootstrap-scss": "mkdir -p static/sass/bootstrap && cp -r node_modules/bootstrap/scss/*  static/sass/bootstrap",
+    "compile:sass:watch": "npm run copy-bootstrap-scss && sass ./static/sass/main.scss ./static/css/styles.css -w",
+    "compile:sass": "npm run copy-bootstrap-scss && sass ./static/sass/main.scss ./static/css/styles.css"
   },
   "devDependencies": {
     "@babel/core": "^7.14.8",
@@ -92,6 +93,7 @@
   "dependencies": {
     "@storybook/svelte": "^6.4.19",
     "assert": "^2.0.0",
+    "bootstrap": "^5.1.3",
     "fs": "^0.0.1-security",
     "npm": "^8.5.1",
     "sal.js": "^0.8.5",

src/lib/components/Dialog.svelte

@@ -171,7 +171,7 @@
     min-width: calc(var(--width, var(--content-width)) - 40px);
     min-height: var(--modal-min-height);
     background-color: var(--color-white);
-    padding: 20px;
+    padding: 32px;
     box-shadow: var(--box-shadow-lg);
     display: grid;
     grid-template-rows: max-content auto max-content;

src/lib/components/icons/Exclaimation.svelte

@@ -0,0 +1,19 @@
+<script>
+  export let size = "1em";
+  export let color = "currentColor";
+</script>
+
+<svg
+  width={size}
+  height={size}
+  viewBox="0 0 32 32"
+  fill="solid"
+  xmlns="http://www.w3.org/2000/svg"
+  ><g data-name="Layer 57" id="Layer_57" stroke={color} fill={color}
+    ><path
+      d="M16,31A15,15,0,1,1,31,16,15,15,0,0,1,16,31ZM16,3A13,13,0,1,0,29,16,13,13,0,0,0,16,3Z"
+    /><path d="M16,24a2,2,0,1,1,2-2A2,2,0,0,1,16,24Zm0-2Z" /><path
+      d="M16,18a1,1,0,0,1-1-1V8a1,1,0,0,1,2,0v9A1,1,0,0,1,16,18Z"
+    /></g
+  ></svg
+>

src/lib/components/icons/OverflowEllipsis.svelte

@@ -0,0 +1,21 @@
+<script>
+  export let size = "1em";
+  export let color = "currentColor";
+</script>
+
+<svg
+  width={size}
+  height={size}
+  viewBox="0 0 200 200"
+  fill="solid"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    fill={color}
+    stroke={color}
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    d="M85,100a15,15,0,1,0,15-15A15,15,0,0,0,85,100Zm-55,0A15,15,0,1,0,45,85,15,15,0,0,0,30,100Zm110,0a15,15,0,1,0,15-15,15,15,0,0,0-15,15Z"
+  />
+  >
+</svg>

src/lib/components/study-card/Header.svelte

@@ -5,9 +5,13 @@
   import niceDate from "./nice-date";
 
   export let endDate;
+  export let customClass = "";
 </script>
 
-<div class="study-card-header grid">
+<div>
+  <slot name="study-top-section" />
+</div>
+<div class={`study-card-header grid ${customClass}`}>
   <slot name="study-icon">
     <img
       class="study-card-image"
@@ -29,21 +33,37 @@
       {/if}
     </div>
   </div>
-  <slot name="study-cta" />
+  <div class="study-cta">
+    <slot name="study-cta" />
+  </div>
 </div>
 
 <style>
   .study-card-header {
     display: grid;
-    grid-gap: 20px;
-    margin-bottom: 20px;
+    padding: 24px;
+    grid-gap: 24px;
     grid-template-columns: var(--study-card-header-columns);
-    grid-template-rows: max-content;
+  }
+
+  @media (max-width: 480px) {
+    .study-card-header {
+      grid-template-columns: var(--study-card-image-size) auto;
+      grid-template-rows: auto auto max-content;
+      grid-row-gap: 12px;
+      padding-bottom: 0px;
+    }
+
+    .study-cta {
+      grid-row: 2;
+      grid-column: 1 / span 2;
+    }
   }
 
   .study-card-header-info {
     margin-top: 8px;
   }
+
   .study-card-author {
     /* explicitly set this field to prevent Zilla in some contexts */
     font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,