chore: move styles to a separate file

app/client/src/PluginActionEditor/components/PluginActionResponse/components/NoResponse/NoResponse.tsx

@@ -0,0 +1,34 @@
+import React from "react";
+
+import { Button } from "@appsmith/ads";
+import NoResponseSVG from "assets/images/no-response.svg";
+import { EMPTY_RESPONSE_RUN } from "ee/constants/messages";
+
+import * as Styled from "./styles";
+
+interface NoResponseProps {
+  isRunDisabled: boolean;
+  isRunning: boolean;
+  onRunClick: () => void;
+}
+
+export const NoResponse = ({
+  isRunDisabled,
+  isRunning,
+  onRunClick,
+}: NoResponseProps) => (
+  <Styled.Container>
+    <img alt="no-response-yet" src={NoResponseSVG} />
+    <Styled.RunGroup>
+      <Styled.Text>{EMPTY_RESPONSE_RUN()}</Styled.Text>
+      <Button
+        isDisabled={isRunDisabled}
+        isLoading={isRunning}
+        onClick={onRunClick}
+        size="sm"
+      >
+        Run
+      </Button>
+    </Styled.RunGroup>
+  </Styled.Container>
+);

app/client/src/PluginActionEditor/components/PluginActionResponse/components/NoResponse/index.ts

@@ -0,0 +1 @@
+export { NoResponse } from "./NoResponse";

app/client/src/PluginActionEditor/components/PluginActionResponse/components/NoResponse/styles.ts

@@ -0,0 +1,27 @@
+import styled from "styled-components";
+import { Text as AdsText } from "@appsmith/ads";
+
+import { TAB_BAR_HEIGHT } from "../constants";
+
+export const Text = styled(AdsText)`
+  &&&& {
+    margin-top: 0;
+  }
+`;
+
+export const Container = styled.div`
+  width: 100%;
+  height: calc(100% - ${TAB_BAR_HEIGHT}px);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  gap: 24px;
+`;
+
+export const RunGroup = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 16px;
+`;