Onboarding changes (#347)

* modal

* Finish tutorial phase

* Finish onboarding, tutorial, and url front end handlng

* Run lint

* Update pnpm-lock.yaml

* Fixed bad refactor

* Fixed #341

* lint

* Fixes #315

* Update ModInstallModal.vue

* Initial onboarding changes

* importing card

* Run lint

* Update ImportingCard.vue

* Fixed home page errors

* Fixes

* Linter

* Login page

* Tweaks

* Update ImportingCard.vue

* Onboarding finishing changes

* Linter

* update to new auth

* bump version

* backend for linking

---------

Co-authored-by: Jai A <jaiagr+gpg@pm.me>
Co-authored-by: Geometrically <18202329+Geometrically@users.noreply.github.com>

theseus_gui/src/assets/external/atlauncher.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 2084 2084" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2"><g fill-rule="nonzero"><path d="M1041.67 81.38l272.437 159.032-825.246 478.685-272.438-157.971L1041.67 81.38zm87.28 371.074l274.024-159.032 463.937 271.945-276.14 153.73-461.821-266.643z" fill="#3b3b3b"/><path d="M216.42 561.126v961.081l825.247 479.746V1684.95l-551.222-321.774-1.587-644.079L216.42 561.126z" fill="#2e2e2e"/><path d="M1866.91 1517.97l-825.246 483.986v-317.003l550.164-320.714-1.058-645.139 276.14-153.73v952.6z" fill="#333"/><path d="M1590.77 719.097l-549.106 310.112v165.393l214.246-122.984v488.757l138.599-81.106V989.451l196.261-115.563V719.097z" fill="#89c236"/><path d="M488.858 719.097l1.587 644.079 152.353 90.118v-198.79l230.645 132.527v199.319l168.753 98.6v-655.741L488.858 719.097zm383.527 531.166l-227.471-131.466v-150.02l227.471 127.225v154.261z" fill="#7baf31"/></g></svg>

theseus_gui/src/assets/external/github.svg

@@ -1 +1,4 @@
-<svg height="32" viewBox="0 0 32 32" width="32" xmlns="http://www.w3.org/2000/svg"><path d="m16 .396c-8.839 0-16 7.167-16 16 0 7.073 4.584 13.068 10.937 15.183.803.151 1.093-.344 1.093-.772 0-.38-.009-1.385-.015-2.719-4.453.964-5.391-2.151-5.391-2.151-.729-1.844-1.781-2.339-1.781-2.339-1.448-.989.115-.968.115-.968 1.604.109 2.448 1.645 2.448 1.645 1.427 2.448 3.744 1.74 4.661 1.328.14-1.031.557-1.74 1.011-2.135-3.552-.401-7.287-1.776-7.287-7.907 0-1.751.62-3.177 1.645-4.297-.177-.401-.719-2.031.141-4.235 0 0 1.339-.427 4.4 1.641 1.281-.355 2.641-.532 4-.541 1.36.009 2.719.187 4 .541 3.043-2.068 4.381-1.641 4.381-1.641.859 2.204.317 3.833.161 4.235 1.015 1.12 1.635 2.547 1.635 4.297 0 6.145-3.74 7.5-7.296 7.891.556.479 1.077 1.464 1.077 2.959 0 2.14-.02 3.864-.02 4.385 0 .416.28.916 1.104.755 6.4-2.093 10.979-8.093 10.979-15.156 0-8.833-7.161-16-16-16z"/></svg>
+<svg height="32" viewBox="0 0 32 32" width="32" xmlns="http://www.w3.org/2000/svg" fill="currentColor">
+  <path
+    d="m16 .396c-8.839 0-16 7.167-16 16 0 7.073 4.584 13.068 10.937 15.183.803.151 1.093-.344 1.093-.772 0-.38-.009-1.385-.015-2.719-4.453.964-5.391-2.151-5.391-2.151-.729-1.844-1.781-2.339-1.781-2.339-1.448-.989.115-.968.115-.968 1.604.109 2.448 1.645 2.448 1.645 1.427 2.448 3.744 1.74 4.661 1.328.14-1.031.557-1.74 1.011-2.135-3.552-.401-7.287-1.776-7.287-7.907 0-1.751.62-3.177 1.645-4.297-.177-.401-.719-2.031.141-4.235 0 0 1.339-.427 4.4 1.641 1.281-.355 2.641-.532 4-.541 1.36.009 2.719.187 4 .541 3.043-2.068 4.381-1.641 4.381-1.641.859 2.204.317 3.833.161 4.235 1.015 1.12 1.635 2.547 1.635 4.297 0 6.145-3.74 7.5-7.296 7.891.556.479 1.077 1.464 1.077 2.959 0 2.14-.02 3.864-.02 4.385 0 .416.28.916 1.104.755 6.4-2.093 10.979-8.093 10.979-15.156 0-8.833-7.161-16-16-16z"/>
+</svg>

theseus_gui/src/assets/external/gitlab.svg

@@ -0,0 +1,10 @@
+<svg
+  data-v-8c2610d6=""
+  xmlns="http://www.w3.org/2000/svg"
+  xml:space="preserve"
+  fill="currentColor"
+  viewBox="0 0 380 380"
+  style="fill-rule: evenodd; clip-rule: evenodd; stroke-linejoin: round; stroke-miterlimit: 2;"
+>
+  <path d="m282.83 170.73-.27-.69-26.14-68.22a6.815 6.815 0 0 0-2.69-3.24 7.013 7.013 0 0 0-8 .43 6.996 6.996 0 0 0-2.32 3.52l-17.65 54h-71.47l-17.65-54a6.864 6.864 0 0 0-2.32-3.53 7.013 7.013 0 0 0-8-.43 6.867 6.867 0 0 0-2.69 3.24L97.44 170l-.26.69c-7.708 20.139-1.115 43.113 16.1 56.1l.09.07.24.17 39.82 29.82 19.7 14.91 12 9.06a8.088 8.088 0 0 0 9.76 0l12-9.06 19.7-14.91 40.06-30 .1-.08c17.175-12.988 23.755-35.921 16.08-56.04Z" transform="translate(-186.013 -186.006) scale(1.97904)" style="fill-rule: nonzero;"/>
+</svg>

theseus_gui/src/assets/external/google.svg

@@ -0,0 +1,21 @@
+<svg
+  data-v-8c2610d6=""
+  xmlns="http://www.w3.org/2000/svg"
+  xml:space="preserve"
+  viewBox="0 0 100 100"
+  style="fill-rule: evenodd; clip-rule: evenodd; stroke-linejoin: round; stroke-miterlimit: 2;"><circle cx="50" cy="50" r="50" style="fill:#fff;"
+/>
+  <g transform="translate(14.39 14.302) scale(.09916)"><clipPath id="a"><path d="M0 0h705.6v720H0z"/></clipPath>
+    <g clip-path="url(#a)"><path d="M-4117.16-2597.44v139.42h193.74c-8.51 44.84-34.04 82.8-72.33 108.33l116.84 90.66c68.07-62.84 107.35-155.13 107.35-264.77 0-25.53-2.29-50.07-6.55-73.63l-339.05-.01Z" style="fill:#4285f4;fill-rule:nonzero;" transform="translate(4477.16 2891.98)"/>
+      <path
+        d="m-4318.92-2463.46-26.35 20.17-93.28 72.65c59.24 117.49 180.65 198.66 321.38 198.66 97.2 0 178.69-32.07 238.25-87.05l-116.83-90.66c-32.08 21.6-72.99 34.69-121.42 34.69-93.6 0-173.13-63.16-201.6-148.25l-.15-.21Z"
+        style="fill:#34a853;fill-rule:nonzero;" transform="translate(4477.16 2891.98)"/>
+      <path
+        d="M-4438.55-2693.33c-24.54 48.44-38.61 103.09-38.61 161.34 0 58.26 14.07 112.91 38.61 161.35 0 .32 119.79-92.95 119.79-92.95-7.2-21.6-11.46-44.5-11.46-68.4 0-23.89 4.26-46.8 11.46-68.4l-119.79-92.94Z"
+        style="fill:#fbbc05;fill-rule:nonzero;" transform="translate(4477.16 2891.98)"/>
+      <path
+        d="M-4117.16-2748.64c53.02 0 100.14 18.33 137.78 53.67l103.09-103.09c-62.51-58.25-143.67-93.93-240.87-93.93-140.73 0-262.15 80.84-321.39 198.66l119.79 92.95c28.47-85.09 108-148.26 201.6-148.26Z"
+        style="fill:#ea4335;fill-rule:nonzero;" transform="translate(4477.16 2891.98)"/>
+    </g>
+  </g>
+</svg>

theseus_gui/src/assets/external/index.js

@@ -8,3 +8,11 @@ export { default as TwitterIcon } from './twitter.svg'
 export { default as GithubIcon } from './github.svg'
 export { default as MastodonIcon } from './mastodon.svg'
 export { default as RedditIcon } from './reddit.svg'
+export { default as GoogleIcon } from './google.svg'
+export { default as MicrosoftIcon } from './microsoft.svg'
+export { default as SteamIcon } from './steam.svg'
+export { default as GitLabIcon } from './gitlab.svg'
+export { default as ATLauncherIcon } from './atlauncher.svg'
+export { default as GDLauncherIcon } from './gdlauncher.png'
+export { default as MultiMCIcon } from './multimc.webp'
+export { default as PrismIcon } from './prism.svg'

theseus_gui/src/assets/external/microsoft.svg

@@ -0,0 +1,6 @@
+<svg data-v-8c2610d6="" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 21 21">
+  <path fill="#f25022" d="M1 1h9v9H1z"/>
+  <path fill="#00a4ef" d="M1 11h9v9H1z"/>
+  <path fill="#7fba00" d="M11 1h9v9h-9z"/>
+  <path fill="#ffb900" d="M11 11h9v9h-9z"/>
+</svg>

theseus_gui/src/assets/external/prism.svg

@@ -0,0 +1,80 @@
+<svg
+   viewBox="0 0 12.7 12.7"
+   version="1.1"
+   xmlns="http://www.w3.org/2000/svg"
+>
+  <title id="title261">Prism Launcher Logo</title>
+  <defs id="defs3603" />
+  <g id="layer1">
+    <g
+       id="g531"
+       transform="matrix(0.1353646,0,0,0.1353646,15.301582,0.52916663)" />
+    <g
+       id="g397">
+      <path
+         style="fill:#99cd61;fill-opacity:1;stroke-width:0.264583"
+         d="M 6.3500002,6.350001 Z"
+         id="path7899" />
+      <path
+         id="path3228"
+         style="fill:#df6277;fill-opacity:1;stroke-width:0.264583"
+         d="M 6.35 0.52916667 L 3.8292236 4.8947917 L 6.35 6.35 L 8.8702596 4.8947917 L 8.9798136 1.7952393 C 7.828708 1.1306481 6.6410414 0.52916667 6.35 0.52916667 z " />
+      <path
+         id="path2659"
+         style="fill:#fb9168;fill-opacity:1;stroke-width:0.264583"
+         d="M 8.9798136 1.7952393 L 6.35 6.35 L 8.8702596 7.8052083 L 11.391036 3.4395833 C 11.245515 3.1875341 10.130919 2.4598305 8.9798136 1.7952393 z " />
+      <path
+         id="path2708"
+         style="fill:#f3db6c;fill-opacity:1;stroke-width:0.264583"
+         d="M 11.391036 3.4395833 L 6.35 6.35 L 8.8702596 7.8052083 L 11.609111 6.35 C 11.609111 5.0208177 11.536557 3.6916326 11.391036 3.4395833 z " />
+      <path
+         id="path1737"
+         style="fill:#7ab392;fill-opacity:1;stroke-width:0.264583"
+         d="M 6.35 6.35 L 6.35 9.2604167 L 11.391036 9.2604167 C 11.536557 9.0083674 11.60911 7.6791823 11.609111 6.35 L 6.35 6.35 z " />
+      <path
+         id="path2937"
+         style="fill:#4b7cbc;fill-opacity:1;stroke-width:0.264583"
+         d="M 6.35 6.35 L 6.35 9.2604167 L 8.9798136 10.904761 C 10.130919 10.24017 11.245515 9.5124659 11.391036 9.2604167 L 6.35 6.35 z " />
+      <path
+         id="path3117"
+         style="fill:#6f488c;fill-opacity:1;stroke-width:0.264583"
+         d="M 6.35 6.35 L 3.8292236 7.8052083 L 6.35 12.170833 C 6.6410414 12.170833 7.8287079 11.569352 8.9798136 10.904761 L 6.35 6.35 z " />
+      <path
+         id="path2010"
+         style="fill:#4d3f33;fill-opacity:1;stroke-width:0.264583"
+         d="M 3.8292236 4.8947917 L 1.308964 9.2604167 C 1.6000054 9.7645152 5.7679172 12.170833 6.35 12.170833 L 6.35 6.35 L 3.8292236 4.8947917 z " />
+      <path
+         id="path1744"
+         style="fill:#7a573b;fill-opacity:1;stroke-width:0.264583"
+         d="M 1.308964 3.4395833 C 1.0179226 3.9436818 1.0179227 8.7563182 1.308964 9.2604167 L 6.35 6.35 L 6.35 3.4395833 L 1.308964 3.4395833 z " />
+      <path
+         id="path1739"
+         style="fill:#99cd61;fill-opacity:1;stroke-width:0.264583"
+         d="M 6.35 0.52916667 C 5.7679172 0.52916665 1.6000054 2.9354849 1.308964 3.4395833 L 6.35 6.35 L 6.35 0.52916667 z " />
+      <g
+         id="g379">
+        <g
+           id="g1657"
+           transform="matrix(0.87999988,0,0,0.87999988,-10.906495,-1.242093)">
+          <g
+             id="g7651"
+             transform="translate(13.259961,2.2775894)">
+            <path
+               id="path6659"
+               style="fill:#ffffff;stroke-width:0.264583"
+               d="m 6.3498163,2.9393223 c -0.3410461,0 -2.782726,1.4098777 -2.9532491,1.7052323 L 6.3498163,9.7602513 9.3035983,4.6445546 C 9.1330753,4.3492 6.6908624,2.9393223 6.3498163,2.9393223 Z"
+               transform="matrix(0.96974817,0,0,0.96974817,0.19209885,0.19209792)" />
+          </g>
+          <path
+             id="path461"
+             style="fill:#dfdfdf;fill-opacity:1;stroke-width:0.264583"
+             d="m 16.745875,6.9737355 2.863908,4.9609385 c 0.330729,0 2.69906,-1.367226 2.864424,-1.653646 0.165365,-0.2864204 0.165365,-3.0208729 0,-3.3072925 l -2.864424,1.6536459 z" />
+        </g>
+        <path
+           id="path5065"
+           style="fill:#d6d2d2;fill-opacity:1;stroke-width:0.264583"
+           d="m 3.8298625,4.8947933 c -0.1455111,0.2520549 -0.1455304,2.6583729 0,2.9104166 0.1455304,0.2520438 2.2292181,1.4552195 2.5202596,1.4552084 V 6.3500016 Z" />
+      </g>
+    </g>
+  </g>
+</svg>

theseus_gui/src/assets/external/steam.svg

@@ -0,0 +1,14 @@
+<svg
+  data-v-8c2610d6=""
+  xmlns="http://www.w3.org/2000/svg"
+  width="16"
+  height="16"
+  fill="currentColor"
+  class="bi bi-steam"
+  viewBox="0 0 16 16"
+>
+  <path
+    d="M.329 10.333A8.01 8.01 0 0 0 7.99 16C12.414 16 16 12.418 16 8s-3.586-8-8.009-8A8.006 8.006 0 0 0 0 7.468l.003.006 4.304 1.769A2.198 2.198 0 0 1 5.62 8.88l1.96-2.844-.001-.04a3.046 3.046 0 0 1 3.042-3.043 3.046 3.046 0 0 1 3.042 3.043 3.047 3.047 0 0 1-3.111 3.044l-2.804 2a2.223 2.223 0 0 1-3.075 2.11 2.217 2.217 0 0 1-1.312-1.568L.33 10.333Z"/>
+  <path
+    d="M4.868 12.683a1.715 1.715 0 0 0 1.318-3.165 1.705 1.705 0 0 0-1.263-.02l1.023.424a1.261 1.261 0 1 1-.97 2.33l-.99-.41a1.7 1.7 0 0 0 .882.84Zm3.726-6.687a2.03 2.03 0 0 0 2.027 2.029 2.03 2.03 0 0 0 2.027-2.029 2.03 2.03 0 0 0-2.027-2.027 2.03 2.03 0 0 0-2.027 2.027Zm2.03-1.527a1.524 1.524 0 1 1-.002 3.048 1.524 1.524 0 0 1 .002-3.048Z"/>
+</svg>

theseus_gui/src/assets/stylesheets/global.scss

@@ -74,12 +74,17 @@ input {
     padding-top: calc(var(--gap-md) + 1.75rem);
   }
 
-  .account-card {
+  .account-card,
+  .card-section {
     top: calc(var(--gap-md) + 1.75rem);
   }
 }
 
 .windows {
+  .fake-appbar {
+    height: 2.5rem !important;
+  }
+
   .window-controls {
     display: flex !important;
   }
@@ -114,3 +119,12 @@ input {
   border-radius: var(--radius-lg);
   border: 3px solid var(--color-bg);
 }
+
+.highlighted {
+  box-shadow: 0 0 1rem var(--color-brand) !important;
+}
+
+.gecko {
+  background-color: var(--color-raised-bg);
+  box-shadow: none !important;
+}