From f4d31f9b5a9cd78e1d62b944531cee8375ddc892 Mon Sep 17 00:00:00 2001
From: "Planoetscher Daniel (Student Com20)"
<daniel.planoetscher@stud-inf.unibz.it>
Date: Mon, 21 Jun 2021 11:00:01 +0200
Subject: [PATCH] improved usability of create new team page
---
client/src/components/forms/TeamForm/index.tsx | 8 ++++----
.../components/forms/TeamForm/team-create.scss | 18 ++++++++++++++----
client/src/components/ui/Button/index.tsx | 2 +-
client/src/components/ui/Project/project.scss | 1 +
client/src/pages/Introduction/index.tsx | 2 +-
client/src/pages/Introduction/intro.scss | 14 ++++++++++++++
6 files changed, 35 insertions(+), 10 deletions(-)
diff --git a/client/src/components/forms/TeamForm/index.tsx b/client/src/components/forms/TeamForm/index.tsx
index 409d81f..0bb2ad6 100644
--- a/client/src/components/forms/TeamForm/index.tsx
+++ b/client/src/components/forms/TeamForm/index.tsx
@@ -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>
)
diff --git a/client/src/components/forms/TeamForm/team-create.scss b/client/src/components/forms/TeamForm/team-create.scss
index e8d62bf..e95286d 100644
--- a/client/src/components/forms/TeamForm/team-create.scss
+++ b/client/src/components/forms/TeamForm/team-create.scss
@@ -1,8 +1,18 @@
+@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
diff --git a/client/src/components/ui/Button/index.tsx b/client/src/components/ui/Button/index.tsx
index ae3a5ee..50c5053 100644
--- a/client/src/components/ui/Button/index.tsx
+++ b/client/src/components/ui/Button/index.tsx
@@ -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) {
diff --git a/client/src/components/ui/Project/project.scss b/client/src/components/ui/Project/project.scss
index acb3910..40bf6c2 100644
--- a/client/src/components/ui/Project/project.scss
+++ b/client/src/components/ui/Project/project.scss
@@ -49,6 +49,7 @@
font-size: 16px;
text-align: center;
font-weight: s.$weight-bold;
+ overflow: hidden;
}
.info {
diff --git a/client/src/pages/Introduction/index.tsx b/client/src/pages/Introduction/index.tsx
index 9b10c0a..ad46ecc 100644
--- a/client/src/pages/Introduction/index.tsx
+++ b/client/src/pages/Introduction/index.tsx
@@ -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>
diff --git a/client/src/pages/Introduction/intro.scss b/client/src/pages/Introduction/intro.scss
index 19dc2d2..b88cd22 100644
--- a/client/src/pages/Introduction/intro.scss
+++ b/client/src/pages/Introduction/intro.scss
@@ -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;
--
GitLab