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 (
-
-
- {color}
-
+
+ {color}
);
}
@@ -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.
+
+
## 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/)
-
+## TODO: List out the different text styles.
+
+