Skip to content
Snippets Groups Projects
Commit f4d31f9b authored by Planoetscher Daniel (Student Com20)'s avatar Planoetscher Daniel (Student Com20)
Browse files

improved usability of create new team page

parent 803075c8
No related branches found
No related tags found
No related merge requests found
......@@ -42,15 +42,15 @@ export default function TeamForm({ onSubmit, onBack, team }: Props) {
defaultText={name}
/>
<div className="button-container">
<Button type="submit" className={!onBack ? 'expanded' : ''}>
{team ? 'Update' : 'Create'}
</Button>
{
onBack &&
<Button onClick={onBack} className="hollow">
<Button onClick={onBack} className="dark">
Go Back
</Button>
}
<Button type="submit" className={!onBack ? 'expanded' : ''}>
{team ? 'Update' : 'Create'}
</Button>
</div>
</form>
)
......
@use 'styles/mixins.scss'as mx;
.team-form {
.button-container {
display: flex;
justify-content: space-around;
}
}
margin: -10px;
.button {
margin: 10px;
width: calc(100% - 20px);
}
@include mx.breakpoint(medium) {
display: flex;
justify-content: space-around;
flex-direction: row-reverse;
}
}
}
\ No newline at end of file
......@@ -7,7 +7,7 @@ interface Props {
children: ReactNode;
type?: "button" | "submit" | "reset";
className?: string;
onClick?: MouseEventHandler
onClick?: MouseEventHandler;
}
export default function Button({children, type, className, onClick}: Props) {
......
......@@ -49,6 +49,7 @@
font-size: 16px;
text-align: center;
font-weight: s.$weight-bold;
overflow: hidden;
}
.info {
......
......@@ -57,7 +57,7 @@ export default function Introduction() {
<div className="lead-text">
You are one step away from getting started with ryoko.
</div>
<div className="possibility">
<div className="possibility framed">
Ask one of your colleagues to add you to their team. <br />
Your username is: <strong>{username}</strong>
</div>
......
......@@ -25,6 +25,12 @@
padding: 60px;
border-radius: 25px;
}
.introduction-container {
display: flex;
flex-direction: column;
align-items: center;
}
.lead-text {
font-size: 24px;
......@@ -33,12 +39,20 @@
.possibility {
margin: 20px 0;
font-size: 18px;
&.framed {
padding: 20px 40px;
background: s.$background-white;
display: inline-block;
border-radius: 15px;
}
}
}
.logout-btn {
color: s.$primary;
font-weight: s.$weight-bold;
cursor: pointer;
margin-top: 30px;
text-decoration: underline;
&:hover {
color: s.$primary-dark;
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment