Merge pull request #144 from gridaco/staging

[Before Release] UI Polishments

Author: softmarshmallow

app/lib/app.css

@@ -1,3 +1,7 @@
+* {
+  font-family: "Helvetica Neue", "Helvetica", "Roboto", "Arial", sans-serif;
+}
+
 #create {
   box-shadow: none;
   background: #18a0fb;
@@ -8,17 +12,6 @@
   box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.3);
 }
 
-h1,
-h2,
-h3,
-h4,
-h5,
-h6,
-sub,
-p {
-  font-family: "Helvetica Neue", "Helvetica", "Roboto", "Arial", sans-serif;
-}
-
 .jss3 {
   background-color: #000 !important;
 }

app/lib/components/icons-loader.tsx

@@ -84,7 +84,7 @@ export function IconsLoader() {
     );
     list = <IconList icons={icons} />;
   } else {
-    list = <LinearProgress />;
+    list = <StyledLinearProgress />;
   }
 
   const handleScroll = () => {
@@ -388,6 +388,10 @@ const Input = styled.input`
   font-weight: 400;
   line-height: 17px;
   color: #adaeb2;
+
+  &::placeholder {
+    color: #adaeb2;
+  }
 `;
 
 const SearchChecker = styled.div`
@@ -424,6 +428,20 @@ const SizeCheck = styled.div`
   padding: 0px 16px;
 `;
 
+const StyledLinearProgress = styled(LinearProgress)`
+  /* for reset body margin */
+  margin: 0 -8px;
+
+  /* reset material-ui style */
+  &.color-primary {
+    background-color: #ecf1ff;
+  }
+
+  &.barColorPrimary {
+    background-color: #2562ff;
+  }
+`;
+
 const GridItem = styled(GridListTile)`
   height: 70px !important;
   display: flex;

app/lib/components/navigation/index.ts

@@ -1,4 +1,5 @@
 export * from "./primary-workmode-select";
+export * from "./secondary-menu-dropdown";
 export * from "./secondary-workmode-choice";
 export * from "./secondary-workmode-menu";
 export * from "./navigator-expansion-control-button";

app/lib/components/navigation/secondary-menu-dropdown.tsx

@@ -0,0 +1,94 @@
+import React from "react";
+import { useHistory } from "react-router-dom";
+import { WorkMode, WorkScreen } from "../../navigation";
+import { SecondaryWorkmodeMenu } from "./secondary-workmode-menu";
+
+type Stage = "production" | "development" | string;
+interface Menu {
+  id: WorkMode | WorkScreen | string;
+  name: string;
+  stage: Stage;
+  onSelect: () => void;
+}
+
+export function signinOrLibraryMenu(): Menu {
+  const history = useHistory();
+  return {
+    id: WorkScreen.signin,
+    name: WorkScreen.signin,
+    stage: "production",
+    onSelect: () => {
+      history.push("/signin");
+    },
+  };
+
+  //
+  // TODO: return library menu when signed in.
+  return {
+    id: WorkMode.library,
+    name: WorkMode.library,
+    stage: "development",
+    onSelect: () => {},
+  };
+}
+
+export function SecondaryMenuDropdown() {
+  const history = useHistory();
+  const menu: Menu[] = [
+    signinOrLibraryMenu(),
+    {
+      id: WorkMode.asset,
+      name: WorkMode.asset,
+      stage: "development",
+      onSelect: () => {},
+    },
+    {
+      id: WorkMode.manage,
+      name: WorkMode.manage,
+      stage: "development",
+      onSelect: () => {},
+    },
+    {
+      id: WorkMode.tools,
+      name: WorkMode.tools,
+      stage: "development",
+      onSelect: () => {},
+    },
+    {
+      id: WorkMode.settings,
+      name: WorkMode.settings,
+      stage: "development",
+      onSelect: () => {},
+    },
+    {
+      id: "feedback-toggle",
+      name: "Feedback",
+      stage: "production",
+      onSelect: () => {
+        open("https://github.com/gridaco/assistant/issues/new/choose");
+      },
+    },
+    {
+      id: WorkMode.about,
+      name: WorkMode.about,
+      stage: "production",
+      onSelect: () => {
+        history.push("/about");
+      },
+    },
+  ].filter((m) => {
+    if (process.env.NODE_ENV == "production") {
+      return m.stage === "production";
+    }
+    return true; /** if not production, return all available menus */
+  });
+
+  return (
+    <SecondaryWorkmodeMenu<WorkMode | WorkScreen | string>
+      menus={menu}
+      onSelect={(id) => {
+        menu.find((m) => m.id === id)?.onSelect();
+      }}
+    />
+  );
+}

app/lib/components/navigation/secondary-workmode-menu.tsx

@@ -12,7 +12,7 @@ export function SecondaryWorkmodeMenu<T extends string>(props: {
 }) {
   return (
     <Wrapper>
-      <Column style={{ marginTop: "4px" }}>
+      <Column style={{ marginTop: "20px" }}>
         <Row style={{ marginBottom: "4px" }}>
           {props.menus.map((menu, index) => {
             if (index < 3) {
@@ -29,7 +29,7 @@ export function SecondaryWorkmodeMenu<T extends string>(props: {
             }
           })}
         </Row>
-        <Row>
+        <Row style={{ marginBottom: "16px" }}>
           {props.menus.map((menu, index) => {
             if (index >= 3) {
               return (

app/lib/main/index.tsx

@@ -47,77 +47,12 @@ import {
   WorkmodeScreenTabs,
   PrimaryWorkmodeSelect,
   NavigatorExpansionControlButton,
-  SecondaryWorkmodeMenu,
+  SecondaryMenuDropdown,
 } from "../components/navigation";
 import styled from "@emotion/styled";
 import { Column, Row } from "../components/style/global-style";
 import { UploadSteps } from "../components/upload-steps";
 
-function MoreMenus() {
-  const history = useHistory();
-  const menu = [
-    {
-      id: WorkScreen.signin,
-      name: WorkScreen.signin,
-      stage: "production",
-      onSelect: () => {
-        history.push("/signin");
-      },
-    },
-    {
-      id: WorkMode.asset,
-      name: WorkMode.asset,
-      stage: "development",
-      onSelect: () => {},
-    },
-    {
-      id: WorkMode.manage,
-      name: WorkMode.manage,
-      stage: "development",
-      onSelect: () => {},
-    },
-    {
-      id: WorkMode.tools,
-      name: WorkMode.tools,
-      stage: "development",
-      onSelect: () => {},
-    },
-    {
-      id: WorkMode.library,
-      name: WorkMode.library,
-      stage: "development",
-      onSelect: () => {},
-    },
-    {
-      id: WorkMode.settings,
-      name: WorkMode.settings,
-      stage: "development",
-      onSelect: () => {},
-    },
-    {
-      id: WorkMode.about,
-      name: WorkMode.about,
-      stage: "production",
-      onSelect: () => {
-        history.push("/about");
-      },
-    },
-  ].filter((m) => {
-    if (process.env.NODE_ENV == "production") {
-      return m.stage === "production";
-    }
-    return true; /** if not production, return all available menus */
-  });
-  return (
-    <SecondaryWorkmodeMenu<WorkMode | WorkScreen>
-      menus={menu}
-      onSelect={(id) => {
-        menu.find((m) => m.id === id)?.onSelect();
-      }}
-    />
-  );
-}
-
 function Screen(props: { screen: WorkScreen }) {
   switch (props.screen) {
     case WorkScreen.about:
@@ -220,10 +155,13 @@ function TabNavigationApp(props: { savedLayout: NavigationStoreState }) {
   const [workmodeSet, setWorkmodeSet] = useState<PrimaryWorkmodeSet>(
     props.savedLayout.workmodeSet
   );
+  const [tabIndex, setTabIndex] = useState<number>(0);
+  const [expansion, setExpansion] = useState<boolean>(true);
 
   const on_workmode_select = (workmode: WorkMode) => {
     setWorkmode(workmode);
     setTabIndex(0);
+    setExpansion(true);
   };
 
   const on_work_select = (index, screen) => {
@@ -235,9 +173,6 @@ function TabNavigationApp(props: { savedLayout: NavigationStoreState }) {
     });
   };
 
-  const [tabIndex, setTabIndex] = useState<number>(0);
-  const [expansion, setExpansion] = useState<boolean>(true);
-
   return (
     <>
       <Wrapper>
@@ -259,7 +194,7 @@ function TabNavigationApp(props: { savedLayout: NavigationStoreState }) {
               onClick={() => setExpansion(!expansion)}
             />
           </Row>
-          {!expansion && <MoreMenus />}
+          {!expansion && <SecondaryMenuDropdown />}
         </Column>
       </Wrapper>
 

app/lib/pages/code/code-screen-footer.tsx

@@ -35,6 +35,7 @@ export function CodeScreenFooter(props: ICodeScreenFooter) {
   return (
     <CodeFooterCtaWrapper>
       <NextStepButton
+        disabled={!props.app}
         onClick={() => {
           // TODO: the button component should be passed from outer side.
         }}
@@ -54,12 +55,12 @@ export function CodeScreenFooter(props: ICodeScreenFooter) {
 }
 
 const CodeFooterCtaWrapper = styled.footer`
-  padding: 12px 8px;
+  /* 16 is body's padding */
+  width: calc(100% - 16px);
+  padding: 12px 16px;
   display: flex;
   background: #fff;
   position: absolute;
-  /* 16 is body's padding */
-  width: calc(100% - 16px);
   left: 0;
   bottom: 0;
 
@@ -79,6 +80,10 @@ const NextStepButton = styled.button`
     color: #fff;
     background: #17181a;
   }
+  &:disabled {
+    color: #bbbbbb;
+    background: #949494;
+  }
 `;
 
 const PreviewButton = styled.button`

app/lib/pages/signin/index.tsx

@@ -217,13 +217,15 @@ function fetchUserProfile(): {
 
 const StyledButton = styled.button`
   ${ButtonStyle}
-  width: calc(100vw - 54px);
+  /* 58 is body margin 8*2 + parent padding 21*2 */
+  width: calc(100vw - 58px);
   font-weight: bold;
   font-size: 14px;
   line-height: 17px;
   color: #ffffff;
   background: #2562ff;
   margin-bottom: 53px;
+  border: 0;
 `;
 
 export default Signin;

app/lib/pages/signin/style.ts

@@ -20,7 +20,11 @@ export const BackIcon = styled.div`
 `;
 
 export const Inner = styled.div`
-  margin-top: 120px;
+  margin-top: 60px;
+
+  @media (min-height: 800px) {
+    margin-top: 120px;
+  }
 `;
 
 export const Title = styled.h2`
@@ -33,9 +37,13 @@ export const Title = styled.h2`
 `;
 
 export const BtnWrapper = styled.div`
-  margin-top: 391px;
+  /* margin-top: 391px; */
   position: absolute;
-  bottom: 120px;
+  bottom: 60px;
+
+  @media (min-height: 800px) {
+    bottom: 120px;
+  }
 `;
 
 export const SignInBtn = styled.button`
@@ -71,7 +79,10 @@ export const Contents = styled.h6`
 `;
 
 export const LinkWrapper = styled(Column)`
-  margin-top: 90px;
+  margin-top: 45px;
+  @media (min-height: 800px) {
+    margin-top: 90px;
+  }
 `;
 
 export const LinkContents = styled.a`