Properly style CassandraAddCollectionPane (#862)

src/Explorer/Panes/AddDatabasePanel/AddDatabasePanel.tsx

@@ -17,6 +17,7 @@ import { getUpsellMessage } from "../../../Utils/PricingUtils";
 import { ThroughputInput } from "../../Controls/ThroughputInput/ThroughputInput";
 import Explorer from "../../Explorer";
 import { PanelInfoErrorComponent } from "../PanelInfoErrorComponent";
+import { getTextFieldStyles } from "../PanelStyles";
 import { RightPaneForm, RightPaneFormProps } from "../RightPaneForm/RightPaneForm";
 
 export interface AddDatabasePaneProps {
@@ -201,8 +202,7 @@ export const AddDatabasePanel: FunctionComponent<AddDatabasePaneProps> = ({
             value={databaseId}
             onChange={handleonChangeDBId}
             autoFocus
-            style={{ fontSize: 12 }}
-            styles={{ root: { width: 300 } }}
+            styles={getTextFieldStyles()}
           />
 
           {!isServerlessAccount() && (

src/Explorer/Panes/AddDatabasePanel/__snapshots__/AddDatabasePanel.test.tsx.snap

@@ -39,13 +39,16 @@ exports[`AddDatabasePane Pane should render Default properly 1`] = `
         pattern="[^/?#\\\\\\\\]*[^/?# \\\\\\\\]"
         placeholder="Type a new database id"
         size={40}
-        style={
-          Object {
-            "fontSize": 12,
-          }
-        }
         styles={
           Object {
+            "field": Object {
+              "fontSize": 12,
+              "selectors": Object {
+                "::placeholder": Object {
+                  "fontSize": 12,
+                },
+              },
+            },
             "root": Object {
               "width": 300,
             },