Remove use of emotion from payments

web/apps/payments/src/components/Container.tsx

@@ -1,9 +1,5 @@
-import styled from "@emotion/styled";
+import * as React from "react";
 
-export const Container = styled.div`
-    display: flex;
-    flex: 1;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-`;
+export const Container: React.FC<React.PropsWithChildren> = ({ children }) => (
+    <div className="container">{children}</div>
+);

web/apps/payments/src/pages/desktop-redirect.tsx

@@ -1,5 +1,5 @@
 import { Container } from "components/Container";
-import { EnteSpinner } from "components/EnteSpinner";
+import { Spinner } from "components/Spinner";
 import * as React from "react";
 
 export default function DesktopRedirect() {
@@ -12,7 +12,7 @@ export default function DesktopRedirect() {
 
     return (
         <Container>
-            <EnteSpinner />
+            <Spinner />
         </Container>
     );
 }

web/apps/payments/src/pages/index.tsx

@@ -1,5 +1,5 @@
 import { Container } from "components/Container";
-import { Spinner } from "components/EnteSpinner";
+import { Spinner } from "components/Spinner";
 import * as React from "react";
 import { parseAndHandleRequest } from "services/billingService";
 import { CUSTOM_ERROR } from "utils/error";

web/apps/payments/src/styles/globals.css

@@ -21,6 +21,14 @@ body {
     flex-direction: column;
 }
 
+.container {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+}
+
 .loading-spinner {
     color: #28a745;
     width: 2rem;