design nitpicks

This commit is contained in:
Jorik Schellekens 2020-09-16 13:58:14 +01:00
parent 0a8685360f
commit 1352feca21
14 changed files with 69 additions and 33 deletions

View File

@ -36,8 +36,12 @@ const App: React.FC = () => {
</>
);
// Some hacky uri decoding
location.href = decodeURIComponent(location.href);
const [hash, setHash] = useState(location.hash);
console.log(hash);
useEffect(() => (window.onhashchange = () => setHash(location.hash)), []);
if (hash) {

View File

@ -14,11 +14,15 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
@import "../color-scheme";
@import '../color-scheme';
.avatar {
border-radius: 100%;
border: 1px solid $borders;
height: 50px;
width: 50px;
height: 60px;
width: 60px;
}
.avatarNoCrop {
border-radius: 0;
}

View File

@ -45,12 +45,14 @@ limitations under the License.
}
p {
margin-right: 20px;
margin-right: 8px;
text-align: left;
}
.button {
width: 50%;
height: 40px;
width: 130px;
margin-top: 16px;
}
}

View File

@ -41,7 +41,8 @@ function validateURL(values: FormValues): Partial<FormValues> {
try {
string().url().parse(values.HSUrl);
} catch {
errors.HSUrl = 'This must be a valid url';
errors.HSUrl =
'This must be a valid homeserver URL, starting with https://';
}
return errors;
}
@ -74,7 +75,7 @@ const HomeserverOptions: React.FC<IProps> = ({ link }: IProps) => {
muted={!values.HSUrl}
type="text"
name="HSUrl"
placeholder="https://example.com"
placeholder="Preferred homeserver URL"
/>
{values.HSUrl && !errors.HSUrl ? (
<Button secondary type="submit">
@ -92,12 +93,9 @@ const HomeserverOptions: React.FC<IProps> = ({ link }: IProps) => {
<div>
<h3>About {link.identifier}</h3>
<p>
Select a homeserver to learn more about{' '}
{link.identifier}. <br />
The homeserver will provide metadata about the link such
as an avatar or description. Homeservers will be able to
relate your IP to resources you've opened invites for in
matrix.to.
A homeserver will show you metadata about the link, like
a description. Homeservers will be able to relate your
IP to things you've opened invites for in matrix.to.
</p>
</div>
<img

View File

@ -29,13 +29,13 @@ interface IProps extends React.InputHTMLAttributes<HTMLElement> {
const Input: React.FC<IProps> = ({ className, muted, ...props }) => {
const [field, meta] = useField(props);
const error =
meta.touched && meta.error ? (
const errorBool = meta.touched && meta.value !== '' && meta.error;
const error = errorBool ? (
<div className="inputError">{meta.error}</div>
) : null;
const classNames = classnames('input', className, {
error: meta.error,
error: errorBool,
inputMuted: !!muted,
});

View File

@ -14,16 +14,22 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
@import '../color-scheme';
.inviteTile {
display: grid;
row-gap: 24px;
.inviteTileClientSelection {
margin: 0 5%;
margin: 0 auto;
display: grid;
justify-content: space-between;
row-gap: 20px;
h2 + p {
color: $foreground;
}
}
hr {

View File

@ -87,8 +87,8 @@ const InviteTile: React.FC<IProps> = ({ children, client, link }: IProps) => {
advanced = (
<>
<hr />
<h3>Almost done!</h3>
<p>Pick a client to open {link.identifier}</p>
<h2>Almost done!</h2>
<p>Great, pick a client below to confirm and continue</p>
<ClientSelection link={link} />
</>
);

View File

@ -16,16 +16,15 @@ limitations under the License.
.roomPreview {
> .avatar {
margin-top: 20px;
margin-bottom: 16px;
margin-bottom: 8px;
}
> h1 {
font-size: 20px;
font-size: 24px;
margin-bottom: 4px;
}
}
.roomTopic {
padding-top: 32px;
padding-top: 8px;
}

View File

@ -31,11 +31,15 @@ const RoomPreview: React.FC<IProps> = ({ room }: IProps) => {
: room.aliases
? room.aliases[0]
: room.room_id;
const members =
room.num_joined_members > 0 ? (
<p>{room.num_joined_members.toLocaleString()} members</p>
) : null;
return (
<div className="roomPreview">
<RoomAvatar room={room} />
<h1>{room.name ? room.name : roomAlias}</h1>
<p>{room.num_joined_members.toLocaleString()} members</p>
{members}
<p>{roomAlias}</p>
</div>
);

View File

@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
@import "../color-scheme";
@import '../color-scheme';
.textButton {
background: none;
@ -24,4 +24,8 @@ limitations under the License.
font-weight: normal;
font-size: 14px;
line-height: 24px;
&:hover {
cursor: pointer;
}
}

View File

@ -37,4 +37,8 @@ limitations under the License.
}
}
}
&:hover {
cursor: pointer;
}
}

View File

@ -20,12 +20,11 @@ limitations under the License.
width: 100%;
> .avatar {
margin-top: 20px;
margin-bottom: 16px;
margin-bottom: 8px;
}
h1 {
font-size: 20px;
font-size: 24px;
margin-bottom: 4px;
}

View File

@ -53,7 +53,11 @@ export const InviterPreview: React.FC<InviterPreviewProps> = ({
const avatar = user ? (
<UserAvatar user={user} userId={userId} />
) : (
<Avatar label={`Placeholder icon for ${userId}`} avatarUrl={icon} />
<Avatar
className="avatarNoCrop"
label={`Placeholder icon for ${userId}`}
avatarUrl={icon}
/>
);
const className = classNames('miniUserPreview', {
centeredMiniUserPreview: !user,

View File

@ -22,6 +22,8 @@ import InvitingClientTile from '../components/InvitingClientTile';
import { parseHash } from '../parser/parser';
import { LinkKind } from '../parser/types';
/* eslint-disable no-restricted-globals */
interface IProps {
link: string;
}
@ -36,8 +38,14 @@ const LinkRouter: React.FC<IProps> = ({ link }: IProps) => {
case LinkKind.ParseFailed:
feedback = (
<Tile>
<h1>Invalid matrix.to link</h1>
<p>{link}</p>
<p>
That URL doesn't seem right. Links should be in the
format:
</p>
<br />
<p>
{location.host}/#/{'<'}matrix-resourceidentifier{'>'}
</p>
</Tile>
);
break;