move style to same file

vercel · Jan 9, 2025 · a1c47ec · a1c47ec
1 parent 3565d63
commit a1c47ec
Show file tree

Hide file tree

Showing 3 changed files with 56 additions and 57 deletions.
diff --git a/...rimental/internal/components/Errors/error-overlay-pagination/error-overlay-pagination.tsx b/...rimental/internal/components/Errors/error-overlay-pagination/error-overlay-pagination.tsx
@@ -1,5 +1,7 @@
 import type { ReadyRuntimeError } from '../../../helpers/get-error-by-type'
+
 import { useCallback, useEffect, useRef, useState } from 'react'
+import { noop as css } from '../../../helpers/noop-template'
 import { LeftArrow } from '../../../icons/LeftArrow'
 import { RightArrow } from '../../../icons/RightArrow'
 
@@ -149,3 +151,56 @@ export function ErrorOverlayPagination({
     </div>
   )
 }
+
+export const styles = css`
+  .error-overlay-pagination {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    padding: var(--size-1);
+    gap: var(--size-2);
+    background: var(--color-background-100);
+    box-shadow: var(--shadow-sm);
+
+    border: 1px solid var(--color-gray-400);
+    border-radius: var(--rounded-full);
+  }
+
+  .error-overlay-pagination-count {
+    color: var(--color-gray-900);
+    text-align: center;
+    font-size: var(--size-font-small);
+    font-weight: 500;
+    line-height: var(--size-4);
+  }
+
+  .error-overlay-pagination-button {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    padding: var(--size-1);
+    background: var(--color-gray-300);
+
+    border: none;
+    border-radius: var(--rounded-full);
+
+    &:focus {
+      outline: none;
+    }
+
+    &:not(:disabled):active {
+      background: var(--color-gray-500);
+    }
+
+    &:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+  }
+
+  .error-overlay-pagination-button-icon {
+    color: var(--color-gray-1000);
+  }
+`
diff --git a/...t-dev-overlay/_experimental/internal/components/Errors/error-overlay-pagination/styles.ts b/...t-dev-overlay/_experimental/internal/components/Errors/error-overlay-pagination/styles.ts
diff --git a/...src/client/components/react-dev-overlay/_experimental/internal/styles/ComponentStyles.tsx b/...src/client/components/react-dev-overlay/_experimental/internal/styles/ComponentStyles.tsx
@@ -2,7 +2,7 @@ import { styles as codeFrame } from '../components/CodeFrame/styles'
 import { styles as dialog } from '../components/Dialog'
 import { styles as errorLayout } from '../components/Errors/error-overlay-layout/error-overlay-layout'
 import { styles as bottomStacks } from '../components/Errors/error-overlay-bottom-stacks/error-overlay-bottom-stacks'
-import { styles as pagination } from '../components/Errors/error-overlay-pagination/styles'
+import { styles as pagination } from '../components/Errors/error-overlay-pagination/error-overlay-pagination'
 import { styles as overlay } from '../components/Overlay/styles'
 import { styles as footer } from '../components/Errors/error-overlay-footer/styles'
 import { styles as terminal } from '../components/Terminal/styles'