switch some style props to css

components/ContactForm/ContactForm.tsx

@@ -250,7 +250,7 @@ const ContactForm = ({ className }: ContactFormProps) => {
 
           <MarkdownTip>
             Basic{" "}
-            <Link href="https://commonmark.org/help/" title="Markdown reference sheet" style={{ fontWeight: 600 }}>
+            <Link href="https://commonmark.org/help/" title="Markdown reference sheet" css={{ fontWeight: 600 }}>
               Markdown syntax
             </Link>{" "}
             is allowed here, e.g.: <strong>**bold**</strong>, <em>_italics_</em>, [

components/IFrame/IFrame.tsx

@@ -1,5 +1,6 @@
 import { styled } from "../../lib/styles/stitches.config";
 import type { ComponentProps } from "react";
+import type * as Stitches from "@stitches/react";
 
 const RoundedIFrame = styled("iframe", {
   width: "100%",
@@ -15,9 +16,10 @@ export type IFrameProps = ComponentProps<typeof RoundedIFrame> & {
   width?: number; // defaults to 100%
   allowScripts?: boolean;
   noScroll?: boolean;
+  css?: Stitches.CSS;
 };
 
-const IFrame = ({ src, title, height, width, allowScripts, noScroll, ...rest }: IFrameProps) => (
+const IFrame = ({ src, title, height, width, allowScripts, noScroll, css, ...rest }: IFrameProps) => (
   <RoundedIFrame
     src={src}
     title={title}
@@ -27,6 +29,7 @@ const IFrame = ({ src, title, height, width, allowScripts, noScroll, ...rest }:
     css={{
       height: `${height}px`,
       maxWidth: width ? `${width}px` : null,
+      ...css,
     }}
     {...rest}
   />

components/Loading/Loading.tsx

@@ -1,5 +1,6 @@
 import { memo } from "react";
 import { styled, keyframes } from "../../lib/styles/stitches.config";
+import type * as Stitches from "@stitches/react";
 
 const pulse = keyframes({
   "0%, 80%, 100%": {
@@ -26,10 +27,11 @@ export type LoadingProps = {
   width: number; // of entire container, in pixels
   boxes?: number; // total number of boxes (default: 3)
   timing?: number; // staggered timing between each box's pulse, in seconds (default: 0.1s)
+  css?: Stitches.CSS;
   className?: string;
 };
 
-const Loading = ({ width, boxes = 3, timing = 0.1, className }: LoadingProps) => {
+const Loading = ({ width, boxes = 3, timing = 0.1, css, className }: LoadingProps) => {
   // each box is just an empty div
   const divs = [];
 
@@ -51,9 +53,10 @@ const Loading = ({ width, boxes = 3, timing = 0.1, className }: LoadingProps) =>
   return (
     <Wrapper
       className={className}
-      style={{
+      css={{
         width: `${width}px`,
         height: `${width / 2}px`,
+        ...css,
       }}
     >
       {divs}