diff --git a/dailyjs/shared/components/Aside/PeopleAside.js b/dailyjs/shared/components/Aside/PeopleAside.js index 7756992..ea61c93 100644 --- a/dailyjs/shared/components/Aside/PeopleAside.js +++ b/dailyjs/shared/components/Aside/PeopleAside.js @@ -32,13 +32,15 @@ const PersonRow = ({ participant, isOwner = false }) => ( ) : ( <> - + )} - {allParticipants.map((p) => ( - - ))} +
+ {allParticipants.map((p) => ( + + ))} +
+ ); }; diff --git a/dailyjs/shared/components/Button/Button.js b/dailyjs/shared/components/Button/Button.js index e6daa3d..d0c80f4 100644 --- a/dailyjs/shared/components/Button/Button.js +++ b/dailyjs/shared/components/Button/Button.js @@ -194,12 +194,28 @@ export const Button = forwardRef( height: 42px; } + .button.tiny { + height: 32px; + font-size: 11px; + border-radius: var(--radius-xs); + text-transform: uppercase; + } + + .button.tiny-square { + padding: 0px; + height: 32px; + width: 32px; + } + .button.small-square { + padding: 0px; + height: 42px; + width: 42px; + } .button.medium-square { padding: 0px; height: 48px; width: 48px; } - .button.large-square { padding: 0px; height: 52px; @@ -273,6 +289,21 @@ export const Button = forwardRef( box-shadow: 0 0 0px 3px rgba(255, 255, 255, 0.15); } + .button.outline-gray { + background: transparent; + border: 1px solid var(--gray-light); + color: var(--text-light); + } + .button.outline-gray:hover, + .button.outline-gray:focus, + .button.outline-gray:active { + border: 1px solid var(--gray-default); + box-shadow: none; + } + .button.outline-gray:focus { + box-shadow: 0 0 0px 3px rgba(0, 0, 0, 0.05); + } + .button.muted { color: var(--red-default); } diff --git a/dailyjs/shared/components/GlobalStyle/GlobalStyle.js b/dailyjs/shared/components/GlobalStyle/GlobalStyle.js index afc1b2a..26be0c5 100644 --- a/dailyjs/shared/components/GlobalStyle/GlobalStyle.js +++ b/dailyjs/shared/components/GlobalStyle/GlobalStyle.js @@ -37,6 +37,7 @@ export const GlobalStyle = () => ( --weight-medium: 500; --weight-bold: 600; + --radius-xs: 6px; --radius-sm: 9px; --radius-md: 12px;