Use placeholder for centering

client/placeholders/Dot.jsx

@@ -1,8 +1,14 @@
 import React from 'react';
 
-const Dot = () => {
+const Dot = ({ size = 16 }) => {
     return (
-        <div className="bg-black-30 br-pill w1 h1" />
+        <div
+            className="bg-black-30 br-pill"
+            style={{
+                height: `${size}px`,
+                width: `${size}px`,
+            }}
+        />
     );
 };
 

client/placeholders/Frame.jsx

@@ -1,13 +1,10 @@
 import React from 'react';
 
-const Frame = ({ children, size }) => {
-    const bw = (size === 'medium' ? '2px' : '1px');
-
+const Frame = ({ children }) => {
     return (
         <div
             className="ba b--black-30 br2"
             style={{
-                borderWidth: bw,
                 height: '100px',
                 width: '100px',
             }}