Feat: apply desktop EC theme

everywhere-computer · Oct 13, 2023 · fbdb21b · fbdb21b
1 parent df6d243
commit fbdb21b
Show file tree

Hide file tree

Showing 35 changed files with 733 additions and 669 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -63,6 +63,7 @@
     "marked": "^9.0.3",
     "qrcode-svg": "^1.1.0",
     "sanitize-html": "^2.11.0",
+    "svelvet": "^8.1.0",
     "three": "^0.156.1",
     "three-globe": "^2.29.3",
     "three-trackballcontrols": "^0.9.0",

diff --git a/src/components/Footer.svelte b/src/components/Footer.svelte
@@ -0,0 +1,9 @@
+<script lang="ts">
+  import FooterBrand from '$components/icons/FooterBrand.svelte'
+</script>
+
+<div
+  class="flex flex-row items-center justify-center gap-[5px] h-[50px] mt-auto bg-odd-gray-500"
+>
+  <FooterBrand />
+</div>
diff --git a/src/components/icons/Activity.svelte b/src/components/icons/Activity.svelte
@@ -0,0 +1,18 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="38" height="36" fill="none">
+  <path
+    fill="#F1EDFD"
+    fill-rule="evenodd"
+    d="m1.25 10.949 3.81 1.987-1.173 2.223-3.81-1.987L1.25 10.95ZM5.06 5.13l3.135 2.93-1.73 1.83-3.134-2.93L5.06 5.13ZM10.889 1.313l1.941 3.818-2.253 1.133-1.941-3.817 2.253-1.134ZM35.977 10.949l-3.81 1.987 1.173 2.223 3.81-1.987-1.173-2.223ZM32.167 5.13l-3.135 2.93 1.73 1.83 3.134-2.93-1.729-1.83ZM26.339 1.313l-1.942 3.818 2.253 1.133 1.942-3.817-2.253-1.134ZM20.056.06v4.278h-2.524V.061h2.524Z"
+    clip-rule="evenodd"
+  />
+  <path
+    fill="#F1EDFD"
+    d="M20.056 19.053c0 .99-.807 1.793-1.803 1.793a1.798 1.798 0 0 1-1.803-1.793c0-.99.807-1.794 1.803-1.794.996 0 1.803.803 1.803 1.794Z"
+  />
+  <path
+    fill="#F1EDFD"
+    fill-rule="evenodd"
+    d="M18.253 35.038c8.879 0 16.077-7.157 16.077-15.985 0-8.83-7.198-15.986-16.077-15.986-8.879 0-16.077 7.157-16.077 15.986 0 8.828 7.198 15.985 16.077 15.985Zm0-9.781c3.446 0 6.24-2.778 6.24-6.204 0-3.427-2.794-6.205-6.24-6.205s-6.24 2.778-6.24 6.205c0 3.426 2.794 6.204 6.24 6.204Zm-.407 4.334c-4.814-.079-9.492-2.972-15.366-8.359l.244-.264c5.869 5.382 10.459 8.188 15.128 8.265 4.667.077 9.47-2.572 15.765-8.265l.243.265c-6.305 5.703-11.2 8.438-16.014 8.358ZM2.48 17.088c5.874-5.387 10.552-8.28 15.366-8.359 4.815-.08 9.709 2.656 16.014 8.359l-.243.265C27.323 11.66 22.52 9.01 17.852 9.088c-4.669.077-9.26 2.882-15.128 8.264l-.244-.264Z"
+    clip-rule="evenodd"
+  />
+</svg>
diff --git a/src/components/icons/FissionFooterLogo.svelte b/src/components/icons/FissionFooterLogo.svelte
@@ -0,0 +1,196 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="55" height="12" fill="none">
+  <path
+    fill="#E1E2EA"
+    fill-rule="evenodd"
+    d="M19.05 2.929c0-1.124.547-1.68 1.674-1.68h1.445V2.66h-.937c-.618 0-.618.239-.618.587v.746h1.545v1.412h-1.545v5.091h-1.575V5.405h-1.166V3.993h1.166l.01-1.064Zm5.91 1.074H23.384v6.493h1.574V4.003Zm14.14.01h-.557v6.493h1.574V4.013h-1.016Zm12.328-.14c-1.026 0-1.474.408-1.634.657l-.18.268v-.775H48.04v6.493h1.575V6.548c0-1.064.777-1.451 1.435-1.451s1.435.387 1.435 1.451v3.968h1.575V6.469c-.03-1.9-1.386-2.596-2.632-2.596Zm-4.345 2.904v.895c0 1.86-1.066 2.904-3.01 2.904-1.943 0-3.009-1.025-3.009-2.904v-.895c0-1.86 1.066-2.904 3.01-2.904 1.953 0 3.01 1.045 3.01 2.904Zm-1.674-.229c0-.815-.468-1.432-1.325-1.432s-1.336.617-1.336 1.432v1.353c0 .815.469 1.491 1.336 1.491.857 0 1.325-.676 1.325-1.491V6.548Zm-16.354 0c-.13-.03-.259-.05-.379-.08-.617-.118-1.086-.208-1.086-.715 0-.428.459-.666 1.017-.666.677 0 .976.228 1.026.686h1.485c-.1-1.134-.847-1.86-2.561-1.86-1.136 0-2.512.458-2.512 1.86 0 1.501 1.286 1.88 2.621 2.177.907.21 1.157.339 1.157.776 0 .438-.579.676-1.137.676-.608 0-1.335-.129-1.335-.944h-1.545c.06 1.501 1.206 2.187 2.78 2.187 1.745 0 2.781-.686 2.781-1.979.02-1.471-1.245-1.889-2.312-2.118Zm5.9-.08c.12.02.25.05.379.08 1.066.239 2.332.647 2.332 2.128 0 1.293-1.037 1.98-2.78 1.98-1.585 0-2.732-.677-2.781-2.188h1.544c0 .815.718.944 1.336.944.558 0 1.136-.238 1.136-.676 0-.437-.25-.577-1.156-.776-1.346-.298-2.621-.686-2.621-2.177 0-1.402 1.375-1.86 2.511-1.86 1.714 0 2.462.726 2.562 1.86h-1.485c-.05-.458-.35-.686-1.027-.686-.548 0-1.016.238-1.016.666-.02.497.448.587 1.066.706Zm-9.876-4.186a.892.892 0 0 1-.897.895.892.892 0 0 1-.897-.895c0-.497.398-.894.897-.894.498 0 .897.397.897.894Zm14.26.905a.892.892 0 0 0 .898-.895.892.892 0 0 0-.897-.895.892.892 0 0 0-.897.895.892.892 0 0 0 .897.895Z"
+    clip-rule="evenodd"
+  />
+  <path
+    fill="url(#a)"
+    d="M11.196 9.68c-1.624-.616-6.218-2.207-7.883-2.207-.627 0-1.056.199-1.295.607-.2.338-.207.643-.21.725l-1.295-.01c0-.069.01-.695.349-1.302.329-.597 1.026-1.313 2.451-1.313 2.243 0 8.093 2.198 8.342 2.288l-.459 1.213Z"
+  />
+  <path
+    fill="url(#b)"
+    d="m7.43 6.886-.11-.05-.608 1.492.067.03c.023-.048.038-.086.064-.14.786.232 1.593.492 2.32.737l.479-1.174-.399-.159c-.578-.189-1.216-.398-1.873-.596.02-.05.04-.1.06-.14Z"
+  />
+  <path
+    fill="url(#c)"
+    d="m5.406 8.577.997-2.178-.14-.069c-.05.11-.095.229-.143.339-.421-.101-.84-.206-1.219-.286L4.347 7.59c.369.07.796.166 1.235.278-.11.22-.214.429-.324.628l.148.08Z"
+  />
+  <path
+    fill="url(#d)"
+    d="M10.01 7.88a73.789 73.789 0 0 0-2.59-.844l-.4 1.233c.914.276 1.833.575 2.612.85l.378-1.238Z"
+  />
+  <path
+    fill="url(#e)"
+    d="M3.313 11.57c-2.053 0-2.8-1.67-2.8-2.794l1.296.02c-.009.284.09 1.481 1.504 1.481 1.316 0 2.283-2.326 3.21-4.574C7.608 3.058 8.744.333 10.926.333c1.116 0 1.993.488 2.462 1.373.329.636.339 1.188.339 1.322h-1.296c0-.18-.01-.388-.21-.755-.238-.438-.667-.647-1.295-.647-1.315 0-2.282 2.327-3.209 4.574-1.086 2.636-2.222 5.37-4.405 5.37Z"
+  />
+  <path
+    fill="url(#f)"
+    d="m8.123 5.23.493.125.02-.08-2.322-.586-.009.016c.188.06.368.113.557.17-.12.29-.22.561-.34.83-.129.328-.271.646-.401.964-.1-.03-.196-.05-.296-.07l-.12.476 1.505.337c.174-.406.307-.718.501-1.197.14-.328.267-.646.412-.985Z"
+  />
+  <path
+    fill="url(#g)"
+    d="m9.263 4.231.008-.046a17.337 17.337 0 0 1-.609-.15c.17-.358.346-.683.527-.984L7.882 2.72c-.17.308-.314.6-.493.966-.14-.04-.289-.09-.428-.13l-.02.09 2.322.586Z"
+  />
+  <path
+    fill="url(#h)"
+    d="M10.927 5.723c-2.242 0-8.092-2.197-8.341-2.287l.458-1.213c1.625.616 6.219 2.207 7.883 2.207.628 0 1.047-.208 1.296-.646.2-.368.21-.631.21-.766h1.295c0 1.084-.748 2.705-2.8 2.705Z"
+  />
+  <path
+    fill="url(#i)"
+    d="m4.599 2.78-.384 1.24c.757.26 1.69.567 2.647.855l1.006.281.374-1.23A54.656 54.656 0 0 1 4.599 2.78Z"
+  />
+  <path
+    fill="url(#j)"
+    d="M11.426 11.222a2.15 2.15 0 0 0 2.152-2.148 2.15 2.15 0 0 0-2.152-2.147 2.15 2.15 0 0 0-2.153 2.147 2.15 2.15 0 0 0 2.153 2.148Z"
+  />
+  <path
+    fill="url(#k)"
+    d="M2.815 4.977A2.15 2.15 0 0 0 4.968 2.83 2.15 2.15 0 0 0 2.815.682 2.15 2.15 0 0 0 .662 2.83a2.15 2.15 0 0 0 2.153 2.147Z"
+  />
+  <defs>
+    <linearGradient
+      id="a"
+      x1="2.087"
+      x2="11.042"
+      y1="7.816"
+      y2="8.015"
+      gradientUnits="userSpaceOnUse"
+    >
+      <stop stop-color="#8F59D9" />
+      <stop offset="1" stop-color="#714EF0" />
+    </linearGradient>
+    <linearGradient
+      id="b"
+      x1="9.839"
+      x2="6.959"
+      y1="8.492"
+      y2="7.564"
+      gradientUnits="userSpaceOnUse"
+    >
+      <stop stop-color="#5E40B8" stop-opacity="0" />
+      <stop offset=".859" stop-color="#5E40B8" stop-opacity=".859" />
+      <stop offset="1" stop-color="#5E40B8" />
+    </linearGradient>
+    <linearGradient
+      id="c"
+      x1="3.739"
+      x2="5.915"
+      y1="6.521"
+      y2="7.495"
+      gradientUnits="userSpaceOnUse"
+    >
+      <stop offset=".453" stop-color="#5E40B8" stop-opacity="0" />
+      <stop offset=".906" stop-color="#5E40B8" stop-opacity=".859" />
+      <stop offset="1" stop-color="#5E40B8" />
+    </linearGradient>
+    <linearGradient
+      id="d"
+      x1="7.223"
+      x2="9.809"
+      y1="7.593"
+      y2="8.554"
+      gradientUnits="userSpaceOnUse"
+    >
+      <stop stop-color="#6446FA" stop-opacity="0" />
+      <stop offset=".462" stop-color="#6346F8" stop-opacity=".462" />
+      <stop offset=".628" stop-color="#6144F1" stop-opacity=".628" />
+      <stop offset=".746" stop-color="#5E41E6" stop-opacity=".746" />
+      <stop offset=".842" stop-color="#593DD5" stop-opacity=".842" />
+      <stop offset=".923" stop-color="#5338BF" stop-opacity=".923" />
+      <stop offset=".994" stop-color="#4B32A4" stop-opacity=".994" />
+      <stop offset="1" stop-color="#4A31A2" />
+    </linearGradient>
+    <linearGradient
+      id="e"
+      x1="3.959"
+      x2="11.791"
+      y1="9.364"
+      y2=".749"
+      gradientUnits="userSpaceOnUse"
+    >
+      <stop stop-color="#8F59D9" />
+      <stop offset=".921" stop-color="#D55E9E" />
+    </linearGradient>
+    <linearGradient
+      id="f"
+      x1="6.866"
+      x2="7.469"
+      y1="7.369"
+      y2="4.981"
+      gradientUnits="userSpaceOnUse"
+    >
+      <stop stop-color="#8E4693" stop-opacity="0" />
+      <stop offset=".859" stop-color="#8E4693" stop-opacity=".859" />
+      <stop offset="1" stop-color="#8E4693" />
+    </linearGradient>
+    <linearGradient
+      id="g"
+      x1="8.378"
+      x2="8.102"
+      y1="2.845"
+      y2="3.936"
+      gradientUnits="userSpaceOnUse"
+    >
+      <stop stop-color="#B057A3" stop-opacity="0" />
+      <stop offset=".859" stop-color="#B057A3" stop-opacity=".859" />
+      <stop offset="1" stop-color="#B057A3" />
+    </linearGradient>
+    <linearGradient
+      id="h"
+      x1="3.354"
+      x2="12.721"
+      y1="2.462"
+      y2="4.54"
+      gradientUnits="userSpaceOnUse"
+    >
+      <stop stop-color="#F15783" />
+      <stop offset="1" stop-color="#D55E9E" />
+    </linearGradient>
+    <linearGradient
+      id="i"
+      x1="8.067"
+      x2="4.41"
+      y1="4.533"
+      y2="3.418"
+      gradientUnits="userSpaceOnUse"
+    >
+      <stop stop-color="#FF5274" stop-opacity="0" />
+      <stop offset=".074" stop-color="#F85073" stop-opacity=".074" />
+      <stop offset=".696" stop-color="#C44268" stop-opacity=".696" />
+      <stop offset="1" stop-color="#B03C64" />
+    </linearGradient>
+    <radialGradient
+      id="j"
+      cx="0"
+      cy="0"
+      r="1"
+      gradientTransform="matrix(2.46367 0 0 2.45824 11.103 8.938)"
+      gradientUnits="userSpaceOnUse"
+    >
+      <stop stop-color="#6E4CEB" />
+      <stop offset=".509" stop-color="#6D4BE9" />
+      <stop offset=".692" stop-color="#6848E2" />
+      <stop offset=".823" stop-color="#6042D7" />
+      <stop offset=".928" stop-color="#5539C6" />
+      <stop offset="1" stop-color="#4A31B5" />
+    </radialGradient>
+    <radialGradient
+      id="k"
+      cx="0"
+      cy="0"
+      r="1"
+      gradientTransform="matrix(2.54356 0 0 2.53796 2.482 2.635)"
+      gradientUnits="userSpaceOnUse"
+    >
+      <stop stop-color="#FD5376" />
+      <stop offset=".473" stop-color="#FB5276" />
+      <stop offset=".643" stop-color="#F45074" />
+      <stop offset=".764" stop-color="#E94D71" />
+      <stop offset=".863" stop-color="#D8486D" />
+      <stop offset=".946" stop-color="#C24268" />
+      <stop offset="1" stop-color="#AF3C64" />
+    </radialGradient>
+  </defs>
+</svg>
diff --git a/src/components/icons/FooterBrand.svelte b/src/components/icons/FooterBrand.svelte
diff --git a/src/components/icons/Functions.svelte b/src/components/icons/Functions.svelte
@@ -0,0 +1,18 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="37" height="37" fill="none">
+  <path
+    fill="#F1EDFD"
+    fill-rule="evenodd"
+    d="M16.128 36.039c8.879 0 16.077-7.158 16.077-15.986 0-8.829-7.198-15.986-16.077-15.986C7.249 4.067.051 11.224.051 20.053c0 8.828 7.198 15.986 16.077 15.986Z"
+    clip-rule="evenodd"
+  />
+  <path
+    stroke="#F1EDFD"
+    stroke-width=".5"
+    d="M34.068 17c0 8.145-6.64 14.75-14.835 14.75S4.398 25.145 4.398 17s6.64-14.75 14.835-14.75c8.194 0 14.835 6.605 14.835 14.75Z"
+  />
+  <path
+    stroke="#F1EDFD"
+    stroke-width=".5"
+    d="M36.08 13.5c0 7.316-5.966 13.25-13.327 13.25-7.362 0-13.327-5.934-13.327-13.25S15.391.25 22.753.25C30.114.25 36.08 6.184 36.08 13.5Z"
+  />
+</svg>
diff --git a/src/components/icons/HeaderLogo.svelte b/src/components/icons/HeaderLogo.svelte
@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="77" height="64" fill="none">
+  <path fill="#313245" d="M0 0h76.25v64H0z" />
+  <path
+    fill="#E1E2EA"
+    d="M60.25 21.535c0-.848-.687-1.535-1.535-1.535H49.24c-6.572 0-11.613 5.373-11.613 12s5.041 12 11.613 12h9.475a1.534 1.534 0 1 0 0-3.07H49.24c-4.89 0-8.856-3.998-8.856-8.93 0-4.932 3.965-8.93 8.856-8.93h9.475c.848 0 1.535-.688 1.535-1.535Z"
+  />
+  <path
+    fill="#E1E2EA"
+    d="M27.9 20h8.328a1.534 1.534 0 1 1 0 3.07H27.9c-4.372 0-8.005 3.194-8.726 7.395H38.91v3.07H19.174c.721 4.2 4.354 7.396 8.726 7.396h8.328a1.535 1.535 0 0 1 0 3.069H27.9C21.328 44 16 38.627 16 32s5.328-12 11.9-12Z"
+  />
+</svg>
diff --git a/src/components/icons/Settings.svelte b/src/components/icons/Settings.svelte
@@ -1,9 +1,8 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="none">
+<svg xmlns="http://www.w3.org/2000/svg" width="35" height="34" fill="none">
   <path
-    stroke="currentColor"
-    stroke-linecap="round"
-    stroke-linejoin="round"
-    stroke-width="2"
-    d="M9 3V1m0 2a2 2 0 1 0 0 4m0-4a2 2 0 1 1 0 4m-6 8a2 2 0 1 0 0-4m0 4a2 2 0 1 1 0-4m0 4v2m0-6V1m6 6v10m6-2a2 2 0 1 0 0-4m0 4a2 2 0 1 1 0-4m0 4v2m0-6V1"
+    fill="#F1EDFD"
+    fill-rule="evenodd"
+    d="M19.86 0v2.941c2.22.36 4.268 1.233 6.018 2.494l2.08-2.08 3.25 3.249-2.08 2.08a14.168 14.168 0 0 1 2.493 6.019h2.942v4.594H31.62a14.168 14.168 0 0 1-2.494 6.02l2.08 2.08-3.248 3.248-2.08-2.08a14.168 14.168 0 0 1-6.02 2.494V34h-4.594v-2.941a14.168 14.168 0 0 1-6.018-2.494l-2.08 2.08-3.25-3.248 2.08-2.081a14.168 14.168 0 0 1-2.493-6.019H.562v-4.595h2.942a14.168 14.168 0 0 1 2.494-6.018l-2.08-2.08 3.248-3.25 2.08 2.081a14.168 14.168 0 0 1 6.02-2.494V0h4.594Zm-2.297 23.892a6.892 6.892 0 1 0 0-13.784 6.892 6.892 0 0 0 0 13.784Z"
+    clip-rule="evenodd"
   />
 </svg>
diff --git a/src/components/icons/Workflows.svelte b/src/components/icons/Workflows.svelte
@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="33" height="32" fill="none">
+  <path
+    fill="#F1EDFD"
+    fill-rule="evenodd"
+    d="M16.688 32c6.26 0 11.68-3.595 14.308-8.832H17.75v-2.513H32c.447-1.473.688-3.036.688-4.655 0-8.837-7.164-16-16-16C10.63 0 5.36 3.365 2.643 8.328h13.075v2.513H1.538A15.98 15.98 0 0 0 .688 16c0 8.837 7.163 16 16 16Zm.244-22.191c3.395 0 5.535.197 6.74.533.608.17.943.365 1.094.557.072.091.101.18.102.272a.68.68 0 0 1-.1.333c-.144.261-.44.562-.874.895-.43.33-.98.682-1.614 1.048-1.27.731-2.864 1.513-4.485 2.299l-.467.226-.004.002c-1.463.708-2.922 1.414-4.15 2.08-.68.37-1.291.728-1.796 1.07-.502.34-.908.67-1.166.985-.254.31-.4.649-.275.98.12.32.465.551.972.726 1.027.354 2.943.55 6.023.55v-.36c-3.083 0-4.942-.197-5.906-.53-.488-.168-.693-.353-.753-.512-.056-.147-.013-.347.217-.626.225-.274.596-.581 1.09-.916a21.55 21.55 0 0 1 1.766-1.051c1.22-.662 2.67-1.365 4.135-2.073l.015-.008.456-.22c1.618-.785 3.224-1.572 4.507-2.311.642-.37 1.207-.73 1.654-1.074.444-.341.788-.678.97-1.006.091-.166.146-.337.144-.511a.794.794 0 0 0-.18-.49c-.224-.286-.655-.507-1.279-.681-1.256-.35-3.44-.546-6.836-.546v.359Z"
+    clip-rule="evenodd"
+  />
+</svg>
diff --git a/src/components/nav/Nav.svelte b/src/components/nav/Nav.svelte
@@ -0,0 +1,55 @@
+<script lang="ts">
+  import { page } from '$app/stores'
+  import Activity from '$components/icons/Activity.svelte'
+  import Functions from '$components/icons/Functions.svelte'
+  import HeaderLogo from '$components/icons/HeaderLogo.svelte'
+  import Settings from '$components/icons/Settings.svelte'
+  import Workflows from '$components/icons/Workflows.svelte'
+
+  const navItems = [
+    {
+      label: 'Activity',
+      href: '/activity/',
+      icon: Activity
+    },
+    {
+      label: 'Workflows',
+      href: '/workflows/',
+      icon: Workflows
+    },
+    {
+      label: 'Functions',
+      href: '/functions/',
+      icon: Functions
+    },
+    {
+      label: 'Settings',
+      href: '/settings/',
+      icon: Settings
+    }
+  ]
+</script>
+
+<navbar class="flex flex-row p-0 w-full h-[64px]">
+  <a href="/" class=""><HeaderLogo /></a>
+  <ul
+    class="flex flex-row w-full items-center divide-x divide-odd-gray-100 justify-start"
+  >
+    {#each navItems as navItem}
+      <li
+        class="flex-auto bg-odd-blue-500 hover:bg-odd-blue-400 {$page.url.pathname.includes(
+          navItem.href
+        )
+          ? '!bg-odd-gray-500'
+          : ''} transition-colors ease-in-out duration-200 h-[64px] px-6"
+      >
+        <a
+          href={navItem.href}
+          class="flex flex-row items-center justify-start gap-4 h-full font-sans text-body-m text-odd-blue-100"
+        >
+          <svelte:component this={navItem.icon} />{navItem.label}
+        </a>
+      </li>
+    {/each}
+  </ul>
+</navbar>