From de4ed9bb62c0e1091143df1e0fefd5dcfd8be18e Mon Sep 17 00:00:00 2001
From: Gabe Kangas <gabek@real-ity.com>
Date: Thu, 12 May 2022 21:27:21 -0700
Subject: [PATCH] Fix some styling

---
 web/stories/Color.tsx              | 21 +++++++++++++++------
 web/stories/Images.stories.mdx     |  3 +++
 web/stories/Typography.stories.mdx |  8 +++++---
 3 files changed, 23 insertions(+), 9 deletions(-)

diff --git a/web/stories/Color.tsx b/web/stories/Color.tsx
index 660829262..ce5f73c9d 100644
--- a/web/stories/Color.tsx
+++ b/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} />
-      <figcaption>
-        <span style={colorDescriptionStyle}>{color}</span>
-      </figcaption>
+      <div style={colorBlockStyle}>
+        <div style={colorTextStyle}>{resolvedColor}</div>
+      </div>
+      <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',
 };
 
diff --git a/web/stories/Images.stories.mdx b/web/stories/Images.stories.mdx
index f3cc1891e..f5c44223d 100644
--- a/web/stories/Images.stories.mdx
+++ b/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
diff --git a/web/stories/Typography.stories.mdx b/web/stories/Typography.stories.mdx
index 139a6429c..a1e0e0fdf 100644
--- a/web/stories/Typography.stories.mdx
+++ b/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)' }}>
-    {getComputedStyle(document.documentElement).getPropertyValue('--theme-font-family')}
-  </Canvas>
+## TODO: List out the different text styles.
+
+<Canvas style={{ color: 'var(--theme-text-color-secondary)' }}>
+  {getComputedStyle(document.documentElement).getPropertyValue('--theme-font-family')}
+</Canvas>