From a3f8f7d6bbb46993afa463eb05529360a033798e Mon Sep 17 00:00:00 2001 From: yuval-hazaz Date: Wed, 9 Feb 2022 09:15:30 +0200 Subject: [PATCH 1/3] style(client):mobile view --- packages/amplication-client/src/Layout/MobileMessage.scss | 2 +- packages/amplication-client/src/Layout/MobileMessage.tsx | 2 +- .../amplication-client/src/Workspaces/ApplicationList.tsx | 6 ------ .../amplication-client/src/Workspaces/WorkspaceLayout.tsx | 6 ++++++ 4 files changed, 8 insertions(+), 8 deletions(-) diff --git a/packages/amplication-client/src/Layout/MobileMessage.scss b/packages/amplication-client/src/Layout/MobileMessage.scss index e925aebc38..df43c017a3 100644 --- a/packages/amplication-client/src/Layout/MobileMessage.scss +++ b/packages/amplication-client/src/Layout/MobileMessage.scss @@ -26,7 +26,7 @@ $button-height: 40px; } &__message { - @include body2; + @include body1; padding-right: $content-padding; padding-left: $content-padding; text-align: center; diff --git a/packages/amplication-client/src/Layout/MobileMessage.tsx b/packages/amplication-client/src/Layout/MobileMessage.tsx index 40afeb403e..31300b145a 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"; 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 e9279a9e79..59721a4230 100644 --- a/packages/amplication-client/src/Workspaces/WorkspaceLayout.tsx +++ b/packages/amplication-client/src/Workspaces/WorkspaceLayout.tsx @@ -12,6 +12,8 @@ import WorkspaceSelector from "./WorkspaceSelector"; import WorkspaceForm from "./WorkspaceForm"; import PageContent from "../Layout/PageContent"; import RouteWithAnalytics from "../Layout/RouteWithAnalytics"; +import { isMobileOnly } from "react-device-detect"; +import MobileMessage from "../Layout/MobileMessage"; import "./WorkspaceLayout.scss"; export type ApplicationData = { @@ -31,6 +33,10 @@ type Props = { }; function WorkspaceLayout({ match }: Props) { + if (isMobileOnly) { + return ; + } + return ( From 29aa6051518780f376b49f99ffaba77e13cb3086 Mon Sep 17 00:00:00 2001 From: yuval-hazaz Date: Wed, 9 Feb 2022 10:23:36 +0200 Subject: [PATCH 2/3] style(client):mobile view --- .../amplication-client/src/Layout/MobileMessage.scss | 11 +++++++---- .../amplication-client/src/Layout/MobileMessage.tsx | 3 +-- 2 files changed, 8 insertions(+), 6 deletions(-) diff --git a/packages/amplication-client/src/Layout/MobileMessage.scss b/packages/amplication-client/src/Layout/MobileMessage.scss index df43c017a3..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,13 +16,15 @@ $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 { @@ -30,8 +32,9 @@ $button-height: 40px; 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 31300b145a..fb00b2ad35 100644 --- a/packages/amplication-client/src/Layout/MobileMessage.tsx +++ b/packages/amplication-client/src/Layout/MobileMessage.tsx @@ -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.
From d5c85549f28fc82f35a71462fcee71972c915035 Mon Sep 17 00:00:00 2001 From: yuval-hazaz Date: Wed, 9 Feb 2022 10:58:25 +0200 Subject: [PATCH 3/3] style(client):mobile login page --- .../src/Layout/WelcomePage.scss | 24 ++++++++++++++++--- .../src/Layout/WelcomePage.tsx | 7 ++++++ 2 files changed, 28 insertions(+), 3 deletions(-) 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} + + +