diff --git a/web/components/keyserver-pill.css b/web/components/keyserver-pill.css new file mode 100644 index 000000000..abf2078bd --- /dev/null +++ b/web/components/keyserver-pill.css @@ -0,0 +1,19 @@ +.keyserverContainer { + display: flex; + justify-content: center; + align-items: center; + padding: 5px 10px; + border-radius: 8px; + background-color: var(--panel-background-primary-default); + column-gap: 4px; +} + +.keyserverName { + color: var(--text-background-primary-default); + font-size: var(--s-font-14); + font-weight: var(--semi-bold); +} + +.keyserverIcon { + color: var(--text-background-primary-default); +} diff --git a/web/components/keyserver-pill.react.js b/web/components/keyserver-pill.react.js new file mode 100644 index 000000000..7781b7f67 --- /dev/null +++ b/web/components/keyserver-pill.react.js @@ -0,0 +1,23 @@ +// @flow + +import * as React from 'react'; + +import css from './keyserver-pill.css'; +import CommIcon from '../CommIcon.react.js'; + +type Props = { + +keyserverAdminUsername: string, +}; + +function KeyserverPill(props: Props): React.Node { + const { keyserverAdminUsername } = props; + + return ( +
+ +
{keyserverAdminUsername}
+
+ ); +} + +export default KeyserverPill; diff --git a/web/sidebar/community-creation/community-creation-keyserver-label.css b/web/sidebar/community-creation/community-creation-keyserver-label.css index e60e23d70..b3aa88433 100644 --- a/web/sidebar/community-creation/community-creation-keyserver-label.css +++ b/web/sidebar/community-creation/community-creation-keyserver-label.css @@ -1,29 +1,13 @@ div.ancestryContainer { display: flex; justify-content: center; align-items: center; height: 40px; background-color: var(--community-creation-ancestry-bg); margin-top: 20px; } div.ancestryContainer p { color: var(--community-creation-ancestry-text); -} - -.keyserverContainer { - display: flex; - justify-content: center; - align-items: center; - padding: 5px 10px; - margin: 0 6px; - border-radius: 8px; - background-color: var(--community-creation-keyserver-container); -} - -.keyserverName { - padding-left: 6px; - color: var(--thread-ancestor-color); - font-size: var(--s-font-14); - font-weight: var(--semi-bold); + margin-right: 6px; } diff --git a/web/sidebar/community-creation/community-creation-keyserver-label.react.js b/web/sidebar/community-creation/community-creation-keyserver-label.react.js index 5871a7a1b..74094b580 100644 --- a/web/sidebar/community-creation/community-creation-keyserver-label.react.js +++ b/web/sidebar/community-creation/community-creation-keyserver-label.react.js @@ -1,20 +1,17 @@ // @flow import * as React from 'react'; import css from './community-creation-keyserver-label.css'; -import CommIcon from '../../CommIcon.react.js'; +import KeyserverPill from '../../components/keyserver-pill.react.js'; function CommunityCreationKeyserverLabel(): React.Node { return (

within

-
- -
ashoat
-
+
); } export default CommunityCreationKeyserverLabel;