fix(frontend): apply Sentry styles using a shared CSS file

Fidesnoella · rav3n11 · commit 94b0cc505aaf · 2025-05-09T11:31:10.000+02:00
diff --git a/frontend-new/.storybook/preview.css b/frontend-new/.storybook/preview.css
@@ -3,22 +3,5 @@
 @import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,300;0,500;0,600;0,700;1,300&display=swap");
 /*This css is used in the MuiIconsElements story to display the icons.*/
 @import url("https://fonts.googleapis.com/icon?family=Material+Icons");
-
-/*This css is for styling the sentry feedback ui. It is a copy of the style in the /public/index.html
-If you change the style in the index.html, you need to change it here too. */
-#sentry-feedback {
-    --font-family: Inter, sans-serif;
-    --accent-background: #00FF91;
-    --accent-foreground: #000000;
-    --input-placeholder-color: rgba(0, 33, 71, 0.5);
-    --button-primary-border: none;
-    --button-border-radius: 32px;
-    --button-primary-border-radius: 32px;
-    --form-width: 300px;
-}
-
-@media (max-width: 600px) {
-    #sentry-feedback {
-        --form-width: 100%;
-    }
-}
+/*Sentry feedback widget styles*/
+@import "../public/styles/sentry.css";
diff --git a/frontend-new/public/index.html b/frontend-new/public/index.html
@@ -16,6 +16,7 @@
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <link rel="stylesheet" href="%PUBLIC_URL%/styles/sentry.css" />
     <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.
@@ -122,22 +123,6 @@
         .compass-logo {
             height: 60px;
         }
-        #sentry-feedback {
-            --font-family: Inter, sans-serif;
-            --accent-background: #00FF91;
-            --accent-foreground: #000000;
-            --input-placeholder-color: rgba(0, 33, 71, 0.5);
-            --button-primary-border: none;
-            --button-border-radius: 32px;
-            --button-primary-border-radius: 32px;
-            --form-width: 300px;
-        }
-
-        @media (max-width: 600px) {
-            #sentry-feedback {
-                --form-width: 100%;
-            }
-        }
     </style>
   </head>
   <body id="body">
diff --git a/frontend-new/public/styles/sentry.css b/frontend-new/public/styles/sentry.css
@@ -0,0 +1,16 @@
+#sentry-feedback {
+    --font-family: Inter, sans-serif;
+    --accent-background: #00FF91;
+    --accent-foreground: #000000;
+    --input-placeholder-color: rgba(0, 33, 71, 0.5);
+    --button-primary-border: none;
+    --button-border-radius: 32px;
+    --button-primary-border-radius: 32px;
+    --form-width: 300px;
+}
+
+@media (max-width: 600px) {
+    #sentry-feedback {
+        --form-width: 100%;
+    }
+} 
