Restore style.css but in app

Shopify · Oct 17, 2024 · d096301 · d096301
1 parent ede2ab0
commit d096301
Show file tree

Hide file tree

Showing 3 changed files with 60 additions and 3 deletions.
diff --git a/bin/bundling/esbuild-plugin-graphiql-imports.js b/bin/bundling/esbuild-plugin-graphiql-imports.js
@@ -10,7 +10,7 @@ const GraphiQLImportsPlugin = {
  return {
  contents: contents
  .replace('@shopify/app/assets/graphiql/favicon.ico', './assets/graphiql/favicon.ico')
- .replace('@shopify/cli-kit/assets/style.css', './assets/style.css'),
+ .replace('@shopify/app/assets/graphiql/style.css', './assets/graphiql/style.css'),
  }
  })
  },

diff --git a/packages/app/assets/graphiql/style.css b/packages/app/assets/graphiql/style.css
@@ -0,0 +1,58 @@
+html {
+ font-family: -apple-system, BlinkMacSystemFont, San Francisco, Segoe UI, Roboto, Helvetica Neue, sans-serif;
+ text-size-adjust: 100%;
+ text-rendering: optimizeLegibility;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+}
+
+body {
+ font-size: 26px;
+ line-height: normal;
+ margin: 0;
+ padding: 0;
+}
+
+button, input, optgroup, select, textarea {
+ font-family: inherit;
+}
+
+h1 {
+ font-weight: 600;
+ font-size: 1em;
+}
+
+p {
+ font-weight: 400;
+}
+
+.body-success {
+ color: #F6F6F7;
+}
+
+.body-error {
+ color: #202223;
+}
+
+.app-success {
+ width: 100vw;
+ height: 100vh;
+ background-color: #054A49;
+ display: flex;
+}
+
+.app-error {
+ width: 100vw;
+ height: 100vh;
+ background-color: #F6F6F7;
+ display: flex;
+}
+
+.container {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ width: 100%;
+ height: 100%;
+ padding-left: 7.5em;
+}
diff --git a/packages/app/src/cli/services/dev/graphiql/server.ts b/packages/app/src/cli/services/dev/graphiql/server.ts
@@ -102,7 +102,7 @@ export function setupGraphiQLServer({
  res.sendFile(faviconPath)
  })
 
- const stylePath = require.resolve('@shopify/cli-kit/assets/style.css')
+ const stylePath = require.resolve('@shopify/app/assets/graphiql/style.css')
  app.get('/graphiql/simple.css', (_req, res) => {
  res.sendFile(stylePath)
  })
@@ -143,7 +143,6 @@ export function setupGraphiQLServer({
  throw err
  }
 
- // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
  const apiVersion = apiVersions.sort().reverse()[0]!
 
  const query = req.query.query ? decodeURIComponent(req.query.query as string).replace(/\n/g, '\\n') : undefined