Revert "refactor: global styles"

This reverts commit 8127992.

src/app/common/utils.ts

@@ -270,12 +270,8 @@ export function isEmpty(value: Object) {
   return Object.keys(value).length === 0;
 }
 
-type ViewMode = 'full' | 'popup' | 'popup-center';
+type ViewMode = 'full' | 'popup';
 
 export function getViewMode(): ViewMode {
-  return document.location.pathname.startsWith('/index.html')
-    ? 'full'
-    : document.location.pathname.startsWith('/popup.html')
-    ? 'popup'
-    : 'popup-center';
+  return document.location.pathname.startsWith('/index.html') ? 'full' : 'popup';
 }

src/app/components/styles/full-page-styles.tsx

@@ -17,6 +17,29 @@ export const fullPageStyles = css`
     .temp {
       max-width: 440px;
     }
+    .welcome-page {
+      .content-image {
+        order: 2;
+        height: calc(100vh - 102px);
+        .image-small {
+          display: none;
+        }
+      }
+      .content-text {
+        order: 1;
+        margin-left: 168px;
+        .title {
+          max-width: 500px;
+          font-size: 64px;
+          margin-bottom: 24px;
+        }
+        .text {
+          max-width: 440px;
+          font-size: 16px;
+          margin-bottom: 24px;
+        }
+      }
+    }
     .onboarding-text {
       text-align: center;
     }

src/app/components/styles/global-styles.tsx

@@ -1,6 +1,6 @@
 import { memo } from 'react';
-import { Global, css } from '@emotion/react';
 import { CSSReset } from '@stacks/ui';
+import { Global, css } from '@emotion/react';
 
 import { extensionStyles } from './popup-styles';
 import { fullPageStyles } from './full-page-styles';

src/app/components/styles/popup-center-styles.tsx

@@ -9,5 +9,21 @@ export const popupCenterStyles = css`
       min-width: 440px !important;
       overflow-x: hidden;
     }
+    .welcome-page {
+      .content-image .image-large {
+        display: none;
+      }
+      .content-text {
+        .title {
+          width: 264px;
+          font-size: 32px;
+          line-height: 44px;
+          margin-top: 24px;
+        }
+        .text {
+          margin-bottom: 16px;
+        }
+      }
+    }
   }
 `;

src/app/components/styles/popup-styles.tsx

@@ -1,7 +1,7 @@
 import { css } from '@emotion/react';
 
 export const extensionStyles = css`
-  .mode__popup {
+  .mode__extension {
     &,
     body {
       min-height: 600px !important;
@@ -12,5 +12,21 @@ export const extensionStyles = css`
         max-width: 392px;
       }
     }
+    .welcome-page {
+      .content-image .image-large {
+        display: none;
+      }
+      .content-text {
+        .title {
+          width: 264px;
+          font-size: 32px;
+          line-height: 44px;
+          margin-top: 24px;
+        }
+        .text {
+          margin-bottom: 16px;
+        }
+      }
+    }
   }
 `;