Fix some styling

web/stories/Color.tsx

@@ -18,23 +18,33 @@ export function Color(props) {
   };
 
   const colorBlockStyle = {
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    textShadow: '0 0 15px black',
     height: '70%',
     width: '100%',
     backgroundColor: resolvedColor,
   };
 
+  const colorTextStyle = {
+    color: 'white',
+    alignText: 'center',
+  };
+
   const colorDescriptionStyle = {
     margin: '5px',
     color: 'gray',
-    fontSize: '0.8em',
+    fontSize: '0.9vw',
+    textAlign: 'center' as 'center',
   };
 
   return (
     <figure style={containerStyle}>
-      <div style={colorBlockStyle} />
+      <div style={colorBlockStyle}>
-      <figcaption>
+        <div style={colorTextStyle}>{resolvedColor}</div>
-        <span style={colorDescriptionStyle}>{color}</span>
+      </div>
-      </figcaption>
+      <figcaption style={colorDescriptionStyle}>{color}</figcaption>
     </figure>
   );
 }
@@ -47,7 +57,6 @@ const rowStyle = {
   display: 'flex',
   flexDirection: 'row' as 'row',
   flexWrap: 'wrap' as 'wrap',
-  // justifyContent: 'space-around',
   alignItems: 'center',
 };
 

web/stories/Images.stories.mdx

@@ -19,6 +19,9 @@ export const images = [
 
 # Images
 
+## TODO: Determine the icon style/images for v2 of the web UI.
+
+
 <ImageRow images={images} />
 
 ## App Icons

web/stories/Typography.stories.mdx

@@ -6,6 +6,8 @@ import { Canvas, Meta, Story } from '@storybook/addon-docs';
 
 [Inter font](https://rsms.me/inter/)
 
-  <Canvas style={{ color: 'var(--theme-text-color-secondary)' }}>
+## TODO: List out the different text styles.
-    {getComputedStyle(document.documentElement).getPropertyValue('--theme-font-family')}
+
-  </Canvas>
+<Canvas style={{ color: 'var(--theme-text-color-secondary)' }}>
+  {getComputedStyle(document.documentElement).getPropertyValue('--theme-font-family')}
+</Canvas>