diff --git a/packages/amplication-client/src/Layout/MobileMessage.scss b/packages/amplication-client/src/Layout/MobileMessage.scss
index e925aebc38..30f525556c 100644
--- a/packages/amplication-client/src/Layout/MobileMessage.scss
+++ b/packages/amplication-client/src/Layout/MobileMessage.scss
@@ -1,5 +1,5 @@
@import "../style/index.scss";
-$title-margin-top: 20px;
+$title-margin-top: 40px;
$content-padding: 24px;
$button-width: 90vw;
$button-height: 40px;
@@ -16,22 +16,25 @@ $button-height: 40px;
flex-direction: column;
&__title {
- @include sectionTitle;
+ @include pageTitle;
@include semiBold;
+
padding-right: $content-padding;
padding-left: $content-padding;
text-align: center;
margin-top: $title-margin-top;
color: var(--black100);
+ line-height: 1.2;
}
&__message {
- @include body2;
+ @include body1;
padding-right: $content-padding;
padding-left: $content-padding;
text-align: center;
- color: var(--black60);
+ color: var(--black90);
margin-bottom: var(--large-spacing);
+ margin-top: var(--large-spacing);
}
&__action {
padding-top: $content-padding;
@@ -39,7 +42,7 @@ $button-height: 40px;
.amp-button {
width: $button-width;
height: $button-height;
- border-radius: $button-height * 0.5 !important;
+ // border-radius: $button-height * 0.5 !important;
}
}
}
diff --git a/packages/amplication-client/src/Layout/MobileMessage.tsx b/packages/amplication-client/src/Layout/MobileMessage.tsx
index 40afeb403e..fb00b2ad35 100644
--- a/packages/amplication-client/src/Layout/MobileMessage.tsx
+++ b/packages/amplication-client/src/Layout/MobileMessage.tsx
@@ -1,5 +1,5 @@
import React from "react";
-import { ReactComponent as MobileImage } from "../assets/images/mobile-message.svg";
+import { ReactComponent as MobileImage } from "../assets/images/mobile-message-white.svg";
import { Button, EnumButtonStyle } from "../Components/Button";
import "./MobileMessage.scss";
@@ -14,8 +14,7 @@ function MobileMessage() {
We are working on giving you the best experience
- Soon, you will be able to create low-code applications on your mobile.
- Meanwhile, please switch to a computer or a tablet.
+ To work with Amplication, please switch to a computer or a tablet.
diff --git a/packages/amplication-client/src/Layout/WelcomePage.scss b/packages/amplication-client/src/Layout/WelcomePage.scss
index 3c1c792f4d..6b8a298ef5 100644
--- a/packages/amplication-client/src/Layout/WelcomePage.scss
+++ b/packages/amplication-client/src/Layout/WelcomePage.scss
@@ -1,13 +1,13 @@
@import "../style/index.scss";
$stripe-top-height: 120px;
-$stripe-top-height-small: 90px;
+$stripe-top-height-small: 45px;
$stripe-side-width: 550px;
$stripe-side-padding: 75px;
$form-min-width: 550px;
$form-mobile-max-width: 400px;
$panel-min-width: 400px;
-$panel-padding: 64px 48px;
+$panel-padding: 48px 32px;
$button-padding: 24px;
$title-font-size: 30px;
@@ -37,10 +37,11 @@ $sub-title-font-size: 28px;
.discord-button {
margin-top: calc(var(--large-spacing) * 2);
+ display: none;
}
&__logo {
- margin-bottom: calc(var(--large-spacing) * 2);
+ // margin-bottom: calc(var(--large-spacing) * 2);
img,
svg {
width: 150px;
@@ -90,6 +91,17 @@ $sub-title-font-size: 28px;
max-width: $form-mobile-max-width;
&__open-source-message {
+ padding: var(--double-spacing);
+ background-color: var(--panel-background);
+
+ display: block;
+
+ .open-source-message {
+ color: var(--black100);
+ }
+ }
+ .discord-button {
+ margin-top: calc(var(--large-spacing) * 2);
display: block;
}
}
@@ -100,6 +112,8 @@ $sub-title-font-size: 28px;
text-align: center;
padding: $panel-padding !important;
border: $border-black10;
+ margin-left: var(--double-spacing);
+ margin-right: var(--double-spacing);
label {
text-align: left;
@@ -148,6 +162,10 @@ $sub-title-font-size: 28px;
.open-source-message {
display: block;
}
+
+ .discord-button {
+ display: block;
+ }
}
&__form {
min-width: $form-min-width;
diff --git a/packages/amplication-client/src/Layout/WelcomePage.tsx b/packages/amplication-client/src/Layout/WelcomePage.tsx
index 2e32bceb67..db0b4a9be8 100644
--- a/packages/amplication-client/src/Layout/WelcomePage.tsx
+++ b/packages/amplication-client/src/Layout/WelcomePage.tsx
@@ -102,6 +102,13 @@ function WelcomePage({
{openSourceMessage}
+
+
+
diff --git a/packages/amplication-client/src/Workspaces/ApplicationList.tsx b/packages/amplication-client/src/Workspaces/ApplicationList.tsx
index 874df2374b..f192dc3f63 100644
--- a/packages/amplication-client/src/Workspaces/ApplicationList.tsx
+++ b/packages/amplication-client/src/Workspaces/ApplicationList.tsx
@@ -3,7 +3,6 @@ import { gql, Reference, useMutation, useQuery } from "@apollo/client";
import { Link } from "react-router-dom";
import { isEmpty } from "lodash";
import { formatError } from "../util/error";
-import { isMobileOnly } from "react-device-detect";
import { useTracking } from "../util/analytics";
import {
@@ -16,7 +15,6 @@ import { SvgThemeImage, EnumImages } from "../Components/SvgThemeImage";
import * as models from "../models";
import ApplicationListItem from "./ApplicationListItem";
-import MobileMessage from "../Layout/MobileMessage";
import "./ApplicationList.scss";
type TData = {
@@ -96,10 +94,6 @@ function ApplicationList() {
});
}, [trackEvent]);
- if (isMobileOnly) {
- return ;
- }
-
return (
diff --git a/packages/amplication-client/src/Workspaces/WorkspaceLayout.tsx b/packages/amplication-client/src/Workspaces/WorkspaceLayout.tsx
index 06e6076ae5..d26cfbf569 100644
--- a/packages/amplication-client/src/Workspaces/WorkspaceLayout.tsx
+++ b/packages/amplication-client/src/Workspaces/WorkspaceLayout.tsx
@@ -15,6 +15,8 @@ import WorkspaceForm from "./WorkspaceForm";
import PageContent from "../Layout/PageContent";
import CompleteInvitation from "../User/CompleteInvitation";
import RouteWithAnalytics from "../Layout/RouteWithAnalytics";
+import { isMobileOnly } from "react-device-detect";
+import MobileMessage from "../Layout/MobileMessage";
import "./WorkspaceLayout.scss";
export type ApplicationData = {
@@ -34,6 +36,10 @@ type Props = {
};
function WorkspaceLayout({ match }: Props) {
+ if (isMobileOnly) {
+ return ;
+ }
+
return (