Merge pull request #97 from concord-consortium/188001442-new-workflow-ui

Add new UI workflow for setting up collaboration (PT-18801442)
concord-consortium · Sep 5, 2024 · 9c6df70 · 9c6df70
2 parents 0935ad0 + 509d6ed
commit 9c6df70
Show file tree

Hide file tree

Showing 14 changed files with 672 additions and 105 deletions.
diff --git a/cypress/e2e/workspace.test.ts b/cypress/e2e/workspace.test.ts
@@ -8,7 +8,7 @@ context("Test the overall app", () => {
 
   describe("Desktop functionalities", () => {
     it("renders with text", () => {
-      ae.getApp().invoke("text").should("include", "To create or join a collaborative table");
+      ae.getApp().invoke("text").should("include", "Begin sharing a table");
     });
   });
 });
diff --git a/src/App.css b/src/App.css
@@ -1,9 +1,30 @@
+:root {
+  --teal: #177991;
+  --dark-teal: #105262;
+  --dark-teal-2: #016082;
+  --teal-light-1: #93d5e4;
+  --teal-light-2: #b7e2ec;
+  --teal-light-3: #cdebf2;
+  --charcoal: #080808;
+  --charcoal-light: #333333;
+  --charcoal-light-5: #f2f2f2;
+}
+
 .App {
-  margin: 10px 4px;
+  color: var(--charcoal);
+  font-weight: 500;
 }
 
 .App div {
-  margin: 10px;
+  padding: 10px;
+  font-size: 12px;
+}
+
+.App.sharing {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 20px;
 }
 
 .App li {
@@ -12,6 +33,7 @@
 
 .App.sharing .callout {
   text-align: center;
+  font-style: italic;
 }
 
 .App.sharing .callout.shareId {
@@ -23,4 +45,144 @@
 
 .App .error-message {
   color: red;
-}
+}
+
+.App .warning {
+  color: red;
+  font-style: italic;
+}
+
+input {
+  height: 16px;
+  border: 1px solid var(--teal);
+  border-radius: 3px;
+}
+
+input:focus {
+  border: 1px solid var(--teal);
+  background-color: var(--teal-light-3);
+  outline-width: 0px;
+}
+
+.form-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-start;
+  min-height: 200px;
+}
+
+.separator {
+  width: 95%;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+}
+
+div.separator-line {
+  border: .5px solid var(--charcoal);
+  width: 100%;
+  height: 0px;
+  padding: 0px;
+}
+
+.button-stack {
+  gap: 15px;
+}
+
+.input-row {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  align-self: flex-start;
+}
+
+.input-row input {
+  width: 75px;
+}
+
+.input-stack {
+  display: flex;
+  flex-direction: column;
+  align-self: flex-start;
+}
+
+.input-stack input {
+  margin-left: 25px;
+}
+
+.select-stack {
+  display: flex;
+  flex-direction: column;
+  align-self: flex-start;
+  width: 100%;
+}
+
+.select-stack select {
+  align-self: flex-start;
+  margin-left: 25px;
+  border: 1px solid var(--teal);
+  padding: 2px;
+  border-radius: 3px;
+  cursor: pointer;
+  font-family: 'Montserrat', sans-serif;
+  font-size: 12px;
+}
+
+.button-row {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  gap: 10px;
+  align-self: flex-end;
+}
+
+button {
+  cursor: pointer;
+  background-color: var(--teal-light-3);
+  border-radius: 5px;
+  border-width: 1px;
+  color: var(--charcoal);
+  border-color: var(--charcoal);
+  padding: 5px 10px;
+  font-family: 'Montserrat', sans-serif;
+  font-size: 12px;
+  font-weight: 500;
+}
+
+button:hover {
+  background-color: var(--teal-light-2);
+}
+
+button:active {
+  background-color: var(--teal-light-1);
+}
+
+button:disabled {
+  opacity: 0.7;
+  background-color: var(--charcoal-light-5);
+  color: var(--charcoal-light);
+  cursor: not-allowed;
+}
+
+.cancel-button {
+  padding: 0px;
+  border: none;
+  border-radius: 5px;
+  color: var(--dark-teal-2);
+  background-color: #ffffff;
+  text-decoration: underline;
+  cursor: pointer;
+}
+
+.cancel-button:hover {
+  background-color: #ffffff;
+  cursor: pointer;
+  color: var(--dark-teal)
+}
+
+.leave-collaboration {
+  margin-top: 10px;
+}