Render connections view (first page) (#24)

* VR-63: version bump. * VR-71: missing asset. * VR-63: removing the example. * VR-63: switching branches. * VR-63: and a table component - final * VR-63: xss-scan. * VR-63: snapshot update. * VR-63: added filter icon for table column names.. * VR-63: xss-scan * VR-63: copy update. * Update src/views/connection.tsx Co-authored-by: David Blane <[email protected]> * VR-63: no need to escape html (connection view).g --------- Co-authored-by: Paulius Michelevicius <[email protected]> Co-authored-by: David Blane <[email protected]>
digicatapult · May 16, 2024 · 3a9babb · 3a9babb
1 parent 0587426
commit 3a9babb
Show file tree

Hide file tree

Showing 17 changed files with 270 additions and 360 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "veritable-ui",
-  "version": "0.2.1",
+  "version": "0.3.0",
   "description": "UI for Veritable",
   "main": "src/index.ts",
   "type": "commonjs",

diff --git a/public/images/button-plus.svg b/public/images/button-plus.svg
diff --git a/public/images/sort.svg b/public/images/sort.svg
diff --git a/public/styles/main.css b/public/styles/main.css
@@ -7,14 +7,18 @@
 }
 
 :root {
-  --mobile-header-bg: transparent;
-  --side-bar-width: 5vw;
-  --desktop-content-width: calc(100vw - 5vw);
-  --accent-color: #5670f1;
-  --secondary-color: #FFCC91;
-  --sub-text-color: #c9cace;
+  /* color pallete */
   --text-color: #45494c;
+  --text-color-secondary: #6E7079;
+  --text-color-sub: #c9cace;
   --bg-color: #f4f5fb;
+  --secondary-color: #FFCC91;
+  --accent-color: #5670f1;
+
+  /* layout and other vars */
+  --mobile-header-bg: transparent;
+  --side-bar-width: 5vw;
+  --desktop-content-width: calc(100vw - var(--side-bar-width));
 }
 
 body {
@@ -39,14 +43,14 @@ body.flex-page {
   flex-direction: column;
   justify-content: flex-start;
   align-items: center;
-  padding: 10px;
+  padding: 1rem;
   background-color: #fff;
 }
 
 .side-bar.logo-container {
   height: 61px;
   width: 61px;
-  margin-bottom: 1.5rem;
+  margin-bottom: 4rem;
 }
 
 a.side-bar, i.side-bar {
@@ -62,23 +66,24 @@ a.side-bar, i.side-bar {
 }
 
 a.side-bar.icon {
-  border: 1px solid var(--sub-text-color);
+  border: 1px solid var(--text-color-sub);
   border-radius: 10px;
   background-repeat: no-repeat;
   background-position: center;
 }
 
-.flex-page.content {
-  display: flex;
-  flex-direction: column;
+a.connections-table.icon {
+  padding: 1rem;
+  text-align: center;
+  margin-bottom: 0.5rem;
+  background-image: url("/public/images/filter.svg");
+  background-repeat: no-repeat;
+  background-position: center;
 }
 
-.content.header {
+.flex-page.content {
   display: flex;
   flex-direction: column;
-  align-items: flex-start;
-  width: var(--desktop-content-width); /* due to column flex-grow: grows height so to void double wrap of els e.g. col/row */
-  background-color: #fff;
 }
 
 .header.heading {
@@ -96,7 +101,7 @@ a.side-bar.icon {
   padding: 0.25rem;
   font-size: 0.75rem;
   line-height: 1.25rem;
-  color: var(--sub-text-color);
+  color: var(--text-color-sub);
 }
 
 .nav.icon {
@@ -107,38 +112,131 @@ a.side-bar.icon {
   background-image: url("/public/images/home.svg"); 
 }
 
+.content.header {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  width: var(--desktop-content-width); /* due to column flex-grow: grows height so to void double wrap of els e.g. col/row */
+  background-color: #fff;
+}
+
 .content.main {
-  padding: 10px;
-  margin: 3rem;
-  background-color: white;
+  padding: 1rem;
+}
+
+/* Connections listPage */
+/* TODO: include in the media @fn below (mobile) */
+.button {
+  display: flex;
+  align-items: center;
+  background-color: var(--accent-color); 
+  color: inherit;
+  font-size: 0.75rem;
+  padding: 5px 10px;
+  border-radius: 12px;
+  transition: all 0.3s;
+
+  &:hover {
+    opacity: 0.7;
+  }
+}
+
+.button.icon {
+  width: 14px;
+  height: 14px;
+  background-repeat: no-repeat;
+  background-position: center;
+  background-color: transparent; 
+  background-image: url("/public/images/plus.svg");  
+}
+
+.button.text {
+  background-color: transparent; 
+  vertical-align: middle;
+  color: #fff;
+}
+
+.main.connections {
+  display: flex;
+  flex-direction: column;
+}
+
+.connections.list.nav,
+.connections.header {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  color: var(--text-color);
+  font-size: 1rem;
+}
+
+.connections.header {
+  background-color: var(--bg-color);
+  padding-top: 0.5rem;
+  padding-bottom: 1rem;
+}
+
+.connections.list table {
+  width: 100%;
+  border-radius: 0px;
+  background-color: #fff;
+  border-collapse:collapse;
+  color: var(--text-color-secondary);
+  border-bottom: 1px solid var(--text-color-sub);
+}
+
+.connections.list th {
+  text-align: left;
+  color: var(--text-color);
+  padding: 1rem 0;
+  font-size: 0.75rem;
+  font-weight: bold;
+  border-top: 1px solid var(--text-color-sub);
+  border-bottom: 1px solid var(--text-color-sub);
+}
+
+.connections.list td {
+  text-align: left;
+  height: 3rem;
+  color: var(--text-color-secondary);
+  font-size: 0.7rem;
+}
+
+.connections.list {
+  background-color: #fff;
+  overflow-x: auto;
+
+  border-radius: 12px;
+  padding: 1rem;
 }
 
 /* For mobile view: TODO if more needed - new file */
 @media (max-width: 767px)  { 
   body.flex-page {
     flex-direction: column;
   }
+  .header.heading { 
+    display: none;
+  }
   .content.header {
     width: 100%;
     background-color: var(--mobile-header-bg);
   }
+  .content.main {
+    width: 100%;
+  }
   .flex-page.side-bar {
     flex-direction: row;
-    align-items: center;
+    align-items: space-around;
     width: 100%;
-    padding-top: 1rem;
 
     justify-content: space-between;
-    min-height: 60px;
+    min-height: auto;
   }
-}
 
-#counter {
-  position: relative;
-}
-
-#counter.htmx-request > span {
-  opacity: 0;
+  .side-bar.logo-container {
+    margin: 0;
+  }
 }
 
 .spinner {

diff --git a/public/styles/reset.css b/public/styles/reset.css
@@ -10,21 +10,60 @@
       filter: brightness(115%); 
     }
   }
-  
+
   .active {
     background-color: #5670f1 !important;
   }
+
+  .warning,
+  .error,
+  .success,
+  .disconnected {
+    width: max-content;
+    border-radius: 8px;
+    font-size: 0.75rem;
+    line-height: 1rem;
+    padding: 5px;
+  }
+
+  * > .warning {
+    background-color: rgba(255, 168, 0, 0.20);
+  }
+
+  * > .error {
+    background-color: rgba(255, 0, 0, 0.20);
+  }
+
+  * > .success {
+    background-color: rgba(50, 147, 111, 0.20);
+  }
+
+  * > .disconnected {
+    background-color: rgba(54, 54, 54, 0.20);
+  }
+
+  * > .outline {
+    border: solid 1px var(--accent-color) !important;
+    background-color: transparent !important;
+    color: var(--accent-color) !important;
+  }
+
+  * > .button.text.accent {
+    color: var(--accent-color);
+  }
 
-  .content.content.header > .disabled,
-  .content.content.content.main > .disabled,
-  .side-bar > .disabled,
+  * > .disabled,
   .disabled {
-    filter: grayscale(100%) blur(3px) !important;
-    cursor: not-allowed;
+    width: max-content;
+    cursor: not-allowed !important;
+    color: var(--accent-color) !important;
+    transition: opacity filter 0.3s !important;
+    filter: grayscale(100%) blur(1px) !important;
+    opacity: 0.3;
 
     &:hover{
-      background-color: transparent;
-      filter: blur(1px) !important;
+      filter: blur(3px) !important;
+      opacity: 1;
     }
   }
 

diff --git a/src/controllers/__tests__/example.test.ts b/src/controllers/__tests__/example.test.ts