From 9bb37679c0cd5aa31aa03a226bb2a0ec511f4e60 Mon Sep 17 00:00:00 2001 From: Gabe Kangas Date: Mon, 9 May 2022 19:02:10 -0700 Subject: [PATCH] Add some images+icons to assets section --- web/assets/images/bot.svg | 1 + web/assets/images/fediverse-black.png | Bin 0 -> 4262 bytes web/assets/images/fediverse-color.png | Bin 0 -> 8234 bytes web/assets/images/indieauth.png | Bin 0 -> 10089 bytes web/assets/images/logo.svg | 1 + web/assets/images/moderator.svg | 1 + web/stories/ImageAsset.tsx | 77 ++++++++++++++++++ ...ors.stories.mdx => StyleGuide.stories.mdx} | 44 +++++++++- 8 files changed, 120 insertions(+), 4 deletions(-) create mode 100644 web/assets/images/bot.svg create mode 100644 web/assets/images/fediverse-black.png create mode 100644 web/assets/images/fediverse-color.png create mode 100644 web/assets/images/indieauth.png create mode 100644 web/assets/images/logo.svg create mode 100644 web/assets/images/moderator.svg create mode 100644 web/stories/ImageAsset.tsx rename web/stories/{Colors.stories.mdx => StyleGuide.stories.mdx} (65%) diff --git a/web/assets/images/bot.svg b/web/assets/images/bot.svg new file mode 100644 index 000000000..a39c87f79 --- /dev/null +++ b/web/assets/images/bot.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/web/assets/images/fediverse-black.png b/web/assets/images/fediverse-black.png new file mode 100644 index 0000000000000000000000000000000000000000..1bc6a79b6a0fce539415e671fceafd7c2cdd75ec GIT binary patch literal 4262 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 literal 0 HcmV?d00001 diff --git a/web/assets/images/indieauth.png b/web/assets/images/indieauth.png new file mode 100644 index 0000000000000000000000000000000000000000..8f1beee9c76fdbabe9625f511abe3f74ebb0882f GIT binary patch literal 10089 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 literal 0 HcmV?d00001 diff --git a/web/assets/images/logo.svg b/web/assets/images/logo.svg new file mode 100644 index 000000000..ac3f9b784 --- /dev/null +++ b/web/assets/images/logo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/web/assets/images/moderator.svg b/web/assets/images/moderator.svg new file mode 100644 index 000000000..24940eb97 --- /dev/null +++ b/web/assets/images/moderator.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/web/stories/ImageAsset.tsx b/web/stories/ImageAsset.tsx new file mode 100644 index 000000000..ec8adff80 --- /dev/null +++ b/web/stories/ImageAsset.tsx @@ -0,0 +1,77 @@ +import PropTypes from 'prop-types'; + +export function ImageAsset(props) { + const { name, src } = props; + + const containerStyle = { + borderRadius: '20px', + width: '12vw', + height: '12vw', + minWidth: '100px', + minHeight: '100px', + borderWidth: '1.5px', + borderStyle: 'solid', + borderColor: 'lightgray', + overflow: 'hidden', + margin: '0.3vw', + }; + + const colorBlockStyle = { + height: '70%', + width: '100%', + backgroundColor: 'white', + }; + + const colorDescriptionStyle = { + textAlign: 'center', + color: 'gray', + fontSize: '0.8em', + }; + + const imageStyle = { + width: '100%', + height: '80%', + backgroundRepeat: 'no-repeat', + backgroundSize: 'contain', + backgroundPosition: 'center', + marginTop: '5px', + backgroundImage: `url(${src})`, + }; + + return ( +
+ +
+ ); +} + +Image.propTypes = { + name: PropTypes.string.isRequired, +}; + +const rowStyle = { + display: 'flex', + flexDirection: 'row', + flexWrap: 'wrap', + // justifyContent: 'space-around', + alignItems: 'center', +}; + +export function ImageRow(props) { + const { images } = props; + + return ( +
+ {images.map(image => ( + + ))} +
+ ); +} + +ImageRow.propTypes = { + images: PropTypes.arrayOf(PropTypes.object).isRequired, +}; diff --git a/web/stories/Colors.stories.mdx b/web/stories/StyleGuide.stories.mdx similarity index 65% rename from web/stories/Colors.stories.mdx rename to web/stories/StyleGuide.stories.mdx index e1fc9be5f..70e801a66 100644 --- a/web/stories/Colors.stories.mdx +++ b/web/stories/StyleGuide.stories.mdx @@ -1,5 +1,13 @@ import { Canvas, Meta, Story } from '@storybook/addon-docs'; import {Color, ColorRow} from './Color'; +import {Image, ImageRow} from './ImageAsset'; + +import Logo from '../assets/images/logo.svg'; +import FediverseColor from '../assets/images/fediverse-color.png'; +import FediverseBlack from '../assets/images/fediverse-black.png'; +import Moderator from '../assets/images/moderator.svg'; +import IndieAuth from '../assets/images/indieauth.png'; +import IsBot from '../assets/images/bot.svg'; @@ -8,10 +16,26 @@ import {Color, ColorRow} from './Color'; `} -# Images +export const images = [{ + src: Logo, + name: 'Logo', +}, { + src: FediverseColor, + name: 'Fediverse Color', +},{ + src: FediverseBlack, + name: 'Fediverse Black', +}, { + src: Moderator, + name: 'Moderator', +}, { + src: IndieAuth, + name: 'IndieAuth', +}, { + src: IsBot, + name: 'Bot Flag', +}]; - - # Colors @@ -43,10 +67,22 @@ import {Color, ColorRow} from './Color'; # Font +[Inter font](https://rsms.me/inter/) + {getComputedStyle(document.documentElement).getPropertyValue('--theme-font-family')} -[Inter font](https://rsms.me/inter/) \ No newline at end of file +# Images + + + + + + + + + +