design nitpicks
This commit is contained in:
Jorik Schellekens
parent
0a8685360f
commit
1352feca21
14 changed files with 69 additions and 33 deletions
|
|
@ -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) {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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} />
|
||||
</>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -37,4 +37,8 @@ limitations under the License.
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
Loading…
Reference in a new issue