Design transaction view

input-output-hk · May 25, 2023 · 938109d · 938109d
1 parent 6296a35
commit 938109d
Show file tree

Hide file tree

Showing 2 changed files with 546 additions and 148 deletions.
diff --git a/design/code-view.html b/design/code-view.html
@@ -4,6 +4,191 @@
 
 <head>
     <title>Contract - 3e5d0ac37fc61e2c635cac9eccd98d5caef8b09eed3e6c6256453eaead093b21#1</title>
+    <style>
+        html, body {
+            height: 100%;
+            padding: 0;
+            margin: 0;
+            display: flex;
+            flex-direction: column;
+            min-width: 100%;
+            width: min-content;
+            font-family: 'Outfit', sans-serif;
+        }
+
+        .wrapper {
+            height: 100%;
+            display: flex;
+            flex-direction: row;
+            flex-wrap: wrap;
+            flex-grow: 1;
+        }
+
+        .side-menu {
+            max-width: 16.8rem;
+            flex-grow: 1;
+            background-color: #F7F9FF;
+            padding-top: 1.2rem;
+            display: flex;
+            flex-direction: column;
+            align-items: stretch;
+        }
+
+        .main-content {
+            flex-grow: 999;
+            background-color: #ffffff;
+        }
+
+        .logo {
+            display: block;
+            margin: 2rem;
+            margin-bottom: 3rem;
+            width: auto;
+            font-size: 1.3rem;
+            flex-grow: 0;
+            color: #7D7F94;
+            text-align: center;
+            letter-spacing: 0.15rem;
+        }
+
+        .logo-pic {
+            width: 1.95rem;
+        }
+
+        .logo-text {
+            margin-top: 0.2rem;
+        }
+
+        .logo-text-marlowe {
+            font-weight: 600;
+        }
+
+        .side-option {
+            color: #000000;
+            padding-top: 1.5rem;
+            padding-bottom: 1.5rem;
+            padding-right: 2.5rem;
+            padding-left: 2.9rem;
+            display: flex;
+            flex-grow: 0;
+            flex-direction: row;
+            align-items: center;
+            box-sizing: border-box;
+            border-left: 5px solid transparent;
+            color: #5B7296;
+        }
+
+        .selected-option {
+            background-color: #EFF4FF;
+            border-left: 5px solid #0038FF;
+            color: #000000;
+        }
+
+        .side-icon {
+            margin-right: 0.8rem;
+        }
+
+        .side-text {
+            font-weight: 600;
+        }
+
+        .side-indicator-wrapper {
+            flex-grow: 1;
+            padding: 2.8rem;
+            display: flex;
+            flex-direction: column;
+            align-items: flex-start;
+            justify-content: center;
+        }
+
+        .side-indicator {
+            flex-grow: 0;
+            display: flex;
+            flex-direction: column;
+            align-items: flex-start;
+            font-weight: 700;
+        }
+
+        .status-label {
+            margin-bottom: 0.5rem;
+        }
+
+        .status-badge {
+            margin-top: 0.5rem;
+            padding: 0.25rem;
+            background-color: #EFFFF8;
+            border-radius: 4px;
+            border: 1px solid #0FE088;
+            display: flex;
+            flex-direction: row;
+            align-items: center;
+        }
+
+        .status-light {
+            margin: 0.1rem;
+        }
+
+        .status-explantion {
+            margin: 0.1rem;
+            margin-left: 0.3rem;
+        }
+
+        .main-content {
+            padding-left: 6.6rem;
+            padding-top: 3.25rem;
+            padding-bottom: 3.25rem;
+            padding-right: 3.25rem;
+        }
+
+        .table {
+            border-collapse: separate;
+            border-spacing: 0;
+        }
+
+        .table-header > th {
+            padding: 1rem;
+            color: #5B7296;
+        }
+
+        .table-cell {
+            border-color: #E7E7E7;
+            border-width: 2px;
+            border-style: solid;
+            border-left-style: none;
+            border-right-style: none;
+            padding: 1rem;
+            max-width: 300px;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+        }
+
+        .table-row {
+            box-shadow: 0px 3px 11px 3px rgba(232, 237, 255, 0.3);
+        }
+
+        .table-row > :first-child {
+            border-left-style: solid;
+            border-top-left-radius: 8px;
+            border-bottom-left-radius: 8px;
+        }
+
+        .table-row > :last-child {
+            border-right-style: solid;
+            border-top-right-radius: 8px;
+            border-bottom-right-radius: 8px;
+        }
+
+        .table-row.active {
+            background-color: #F7F9FF;
+        }
+
+        .active-light {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+        }
+    </style>
 </head>
 
 <body>