Updated frame styles

apps/comments-ui/public/main.css

@@ -559,3 +559,37 @@ video {
 .static {
   position: static;
 }
+
+.mt-2 {
+  margin-top: 0.5rem;
+}
+
+.w-full {
+  width: 100%;
+}
+
+.rounded-md {
+  border-radius: 0.375rem;
+}
+
+.rounded {
+  border-radius: 0.25rem;
+}
+
+.border {
+  border-width: 1px;
+}
+
+.bg-black {
+  --tw-bg-opacity: 1;
+  background-color: rgb(0 0 0 / var(--tw-bg-opacity));
+}
+
+.p-2 {
+  padding: 0.5rem;
+}
+
+.text-white {
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity));
+}

apps/comments-ui/src/App.js

@@ -83,10 +83,15 @@ export default class App extends React.Component {
     }
 
     render() {
+        const iFrameStyles = {
+            border: 'none',
+            width: '100%'
+        };
+
         return (
             <SentryErrorBoundary dsn={this.props.sentryDsn}>
                 <AppContext.Provider value={this.getContextFromState()}>
-                    <CustomIFrame>
+                    <CustomIFrame style={iFrameStyles}>
                         <Form />
                     </CustomIFrame>
                 </AppContext.Provider>

apps/comments-ui/src/components/CustomIFrame.js

@@ -14,7 +14,7 @@ const CustomIFrame = ({
     );
 
     return (
-        <iframe {...props} ref={setContentRef} title='iframeyall'>
+        <iframe {...props} ref={setContentRef} title='ghost-comments-iframe'>
             {headNode && createPortal(head, headNode)}
             {mountNode && createPortal(children, mountNode)}
         </iframe>

apps/comments-ui/src/components/Form.js

@@ -44,8 +44,8 @@ class Form extends React.Component {
                 <figure className="avatar">
                     <span />
                 </figure>
-                <textarea value={this.state.message} onChange={this.handleChange} placeholder="What are your thoughts?" />
+                <textarea className="w-full rounded-md border p-2" value={this.state.message} onChange={this.handleChange} placeholder="What are your thoughts?" />
-                <button type="submit" className="button primary">Comment</button>
+                <button type="submit" className="bg-black p-2 text-white rounded w-full mt-2">Comment</button>
             </form>
         );
     }