improved usability of create new team page

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>
     )

client/src/components/forms/TeamForm/team-create.scss

+@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

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) {

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 {

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>

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;