Merged in feature/sas-mypages (pull request #1302)

Feature/sas mypages

* feat: Add SAS partner page under my pages
* fix: feature toggle SAS Partner page in my pages
* add translations for SAS account page
* use 'flex-start' instead of 'start'
* fix: flatten css
* fix: don't use <SectionContainer /> on linkedAccounts page

components/Loading/index.tsx

@@ -0,0 +1,46 @@
+import styles from "./loading.module.css"
+
+type Size = "small" | "medium" | "large"
+type Color = "white" | "burgundy"
+type Props = {
+  size?: Size
+  color?: Color
+  className?: string
+}
+
+export function Loading({
+  size = "medium",
+  color = "burgundy",
+  className,
+}: Props) {
+  return (
+    <svg
+      width={sizes[size]}
+      height={sizes[size]}
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={`${styles.loading} ${className}`}
+    >
+      <circle cx="10" cy="1.73913" r="1.73913" fill={colors[color]} />
+      <circle cx="16.087" cy="4.34783" r="1.73913" fill={colors[color]} />
+      <circle cx="18.2609" cy="10" r="1.73913" fill={colors[color]} />
+      <circle cx="16.087" cy="15.6522" r="1.73913" fill={colors[color]} />
+      <circle cx="10" cy="18.2609" r="1.73913" fill={colors[color]} />
+      <circle cx="3.91304" cy="15.6522" r="1.73913" fill={colors[color]} />
+      <circle cx="1.73913" cy="10" r="1.73913" fill={colors[color]} />
+      <circle cx="3.91304" cy="4.34783" r="1.73913" fill={colors[color]} />
+    </svg>
+  )
+}
+
+const colors: { [color in Color]: string } = {
+  white: "#fff",
+  burgundy: "var(--Scandic-Brand-Burgundy)",
+}
+
+const sizes: { [size in Size]: number } = {
+  small: 16,
+  medium: 20,
+  large: 24,
+}