style: extract global style to ensure build reproducibility (#1666)

# Motivation

We have build reproducibility with last releases.

CI: hash a2c0186 for
https://github.com/dfinity/nns-dapp/actions/runs/3764587278
Local: hash
187a34a440503da62c161e679baa02b431455c17c2b6e51bc433d63dbcae2d8f

Root cause of the issue is the build of the NNS-dapp frontend that
generates different entries ("keys") in the ouputed
`vite-manifest.json`.

# Solution / Workaround

The real solution still needs to be found but to fix the
reproducibitility of current state we can avoid the use of CSS mixin in
favor of a global style.

If a global CSS style is used => a unique  CSS is generated
If mixins are used => Svelte or Vite tries to optimize the CSS and
generate a single outputed CSS for the common code. In this process it
generates a file and the algorithm uses the name of the first match.
Therefore we ended up with a `vite-manifest.json` containing sometimes
`SignInCanisters.css` or `SignInNeurons.css`

# Changes

- extract common CSS to global style

# Screenshots


![image](https://user-images.githubusercontent.com/16886711/209373803-86f85300-6120-4730-9c59-a9e2f887ca25.png)

frontend/src/lib/pages/SignInAccounts.svelte

@@ -5,7 +5,7 @@
   // TODO(GIX-1071): this static pre-rendering component should be improved with some more information and shiny design
 </script>
 
-<main>
+<main class="sign-in">
   <h1>{$i18n.auth_accounts.title}</h1>
 
   <p>
@@ -14,18 +14,3 @@
 
   <SignIn />
 </main>
-
-<style lang="scss">
-  main {
-    display: flex;
-    flex-direction: column;
-  }
-
-  h1 {
-    line-height: var(--line-height-standard);
-  }
-
-  p {
-    margin-bottom: var(--padding-3x);
-  }
-</style>

frontend/src/lib/pages/SignInCanisters.svelte

@@ -5,7 +5,7 @@
   // TODO(GIX-1071): this static pre-rendering component should be improved with some more information and shiny design
 </script>
 
-<main>
+<main class="sign-in">
   <h1>{$i18n.auth_canisters.title}</h1>
 
   <p>
@@ -14,18 +14,3 @@
 
   <SignIn />
 </main>
-
-<style lang="scss">
-  main {
-    display: flex;
-    flex-direction: column;
-  }
-
-  h1 {
-    line-height: var(--line-height-standard);
-  }
-
-  p {
-    margin-bottom: var(--padding-3x);
-  }
-</style>

frontend/src/lib/pages/SignInNeurons.svelte

@@ -5,7 +5,7 @@
   // TODO(GIX-1071): this static pre-rendering component should be improved with some more information and shiny design
 </script>
 
-<main>
+<main class="sign-in">
   <h1>{$i18n.auth_neurons.title}</h1>
 
   <p>
@@ -14,18 +14,3 @@
 
   <SignIn />
 </main>
-
-<style lang="scss">
-  main {
-    display: flex;
-    flex-direction: column;
-  }
-
-  h1 {
-    line-height: var(--line-height-standard);
-  }
-
-  p {
-    margin-bottom: var(--padding-3x);
-  }
-</style>

frontend/src/lib/themes/global.scss

@@ -0,0 +1,12 @@
+main.sign-in {
+  display: flex;
+  flex-direction: column;
+
+  h1 {
+    line-height: var(--line-height-standard);
+  }
+
+  p {
+    margin-bottom: var(--padding-3x);
+  }
+}

frontend/src/routes/+layout.svelte

@@ -50,5 +50,6 @@
 <style lang="scss" global>
   @import "@dfinity/gix-components/styles/global.scss";
   @import "../lib/themes/legacy";
+  @import "../lib/themes/global";
   @import "../lib/themes/variables";
 </style>