Merge branch 'master' of https://github.com/amplication/amplication

Spotrix · Feb 9, 2022 · 3e0e5b6 · 3e0e5b6
2 parents f5f78c5 + a23f763
commit 3e0e5b6
Show file tree

Hide file tree

Showing 6 changed files with 44 additions and 17 deletions.
diff --git 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,30 +16,33 @@ $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;
     color: var(--black60);
     .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
@@ -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
       </div>
       <div className={`${CLASS_NAME}__message`}>
-        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.
       </div>
       <div className={`${CLASS_NAME}__action`}>
         <a href="https://docs.amplication.com">

diff --git 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
@@ -102,6 +102,13 @@ function WelcomePage({
         </Panel>
         <div className={`${CLASS_NAME}__form__open-source-message`}>
           {openSourceMessage}
+          <a
+            href="https://discord.gg/Z2CG3rUFnu"
+            target="discord"
+            className="discord-button"
+          >
+            <DiscordButton />
+          </a>
         </div>
       </div>
     </div>

diff --git 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 <MobileMessage />;
-  }
-
   return (
     <div className={CLASS_NAME}>
       <div className={`${CLASS_NAME}__header`}>

diff --git 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 <MobileMessage />;
+  }
+
   return (
     <MainLayout className={CLASS_NAME}>
       <MainLayout.Menu>