Wizard styles changes

src/client/src/App.tsx

@@ -82,7 +82,6 @@ const App = (props: Props) => {
           className={classnames(appStyles.centerView, {
             [appStyles.centerViewNewProjectPage]: selectedRoute === ROUTE.NEW_PROJECT,
             [appStyles.centerViewMaxHeight]: selectedRoute === ROUTE.PAGE_DETAILS,
-            [appStyles.centerViewAzurePage]: selectedRoute === ROUTE.ADD_SERVICES,
           })}
         >
           {selectedRoute === ROUTE.NEW_PROJECT ? (

src/client/src/appStyles.module.css

@@ -6,7 +6,7 @@
 
 .centerView {
   display: block;
-  padding: 6vh;
+  padding: 4vh 6vh;
   overflow: auto;
   width: 100%;
   box-sizing: border-box;
@@ -17,10 +17,6 @@
   flex: 1 1 auto;
 }
 
-.centerViewAzurePage {
-  padding: 0;
-}
-
 .centerViewNewProjectPage {
   padding: 0;
 }
@@ -32,10 +28,7 @@
 
 @media (max-width: 825px) {
   .centerView {
-    padding: 1vh 2vh;
-  }
-  .centerViewAzurePage {
-    padding: 0;
+    padding: 1em;
   }
 }
 

src/client/src/components/CollapsibleInfoBox/index.tsx

@@ -1,26 +1,32 @@
 import * as React from "react";
-import { ReactComponent as Down } from "../../assets/i-collapsibleDown.svg";
-import { ReactComponent as Up } from "../../assets/i-collapsibleUp.svg";
+import { InjectedIntlProps, injectIntl } from "react-intl";
+
+import { ReactComponent as DownSVG } from "../../assets/i-collapsibleDown.svg";
+import { ReactComponent as UpSVG } from "../../assets/i-collapsibleUp.svg";
 
-import styles from "./styles.module.css";
 import { KEY_EVENTS } from "../../utils/constants/constants";
 
+import styles from "./styles.module.css";
+import messages from "./messages";
+
 interface IProps {
   question: string;
   answer: string;
   initialAnswerShownState?: boolean;
 }
 
-type Props = IProps;
+type Props = IProps & InjectedIntlProps;
+
+const CollapsibleInfoBox = ({ question, answer, initialAnswerShownState = false, intl }: Props) => {
+  const { formatMessage } = intl;
 
-const CollapsibleInfoBox = ({ question, answer, initialAnswerShownState = false }: Props) => {
   const [isAnswerShown, setAnswerShown] = React.useState(initialAnswerShownState);
 
   const toggleAnswerShown = () => {
     setAnswerShown(!isAnswerShown);
   };
 
-  const keyDownHandler = (event: React.KeyboardEvent<SVGSVGElement>) => {
+  const keyDownHandler = (event: React.KeyboardEvent<HTMLDivElement>) => {
     if (event.key === KEY_EVENTS.ENTER || event.key === KEY_EVENTS.SPACE) {
       event.preventDefault();
       event.stopPropagation();
@@ -30,12 +36,26 @@ const CollapsibleInfoBox = ({ question, answer, initialAnswerShownState = false
 
   return (
     <div>
-      <div className={styles.questionTitle}>
+      <div
+        role="button"
+        tabIndex={0}
+        onClick={toggleAnswerShown}
+        onKeyDown={keyDownHandler}
+        className={styles.questionTitle}
+      >
         {question}
         {isAnswerShown ? (
-          <Up tabIndex={0} className={styles.toggleIcon} onClick={toggleAnswerShown} onKeyDown={keyDownHandler} />
+          <UpSVG
+            className={styles.toggleIcon}
+            title={formatMessage(messages.up)}
+            aria-label={formatMessage(messages.up)}
+          />
         ) : (
-          <Down tabIndex={0} className={styles.toggleIcon} onClick={toggleAnswerShown} onKeyDown={keyDownHandler} />
+          <DownSVG
+            className={styles.toggleIcon}
+            title={formatMessage(messages.down)}
+            aria-label={formatMessage(messages.down)}
+          />
         )}
       </div>
 
@@ -44,4 +64,4 @@ const CollapsibleInfoBox = ({ question, answer, initialAnswerShownState = false
   );
 };
 
-export default CollapsibleInfoBox;
+export default injectIntl(CollapsibleInfoBox);

src/client/src/components/CollapsibleInfoBox/messages.ts

@@ -0,0 +1,13 @@
+import { defineMessages } from "react-intl";
+
+const messages = defineMessages({
+  up: {
+    id: "collapsibleInfoBox.up",
+    defaultMessage: "Hide answer",
+  },
+  down: {
+    id: "collapsibleInfoBox.down",
+    defaultMessage: "Show answer",
+  },
+});
+export default messages;

src/client/src/components/CollapsibleInfoBox/styles.module.css

@@ -1,20 +1,25 @@
 .questionTitle {
-  margin-top: 35px;
-  font-size: 1.3em;
+  font-size: 1em;
   font-weight: 600;
+  margin-top: 2em;
+  cursor: pointer;
+}
+
+.questionTitle:focus {
+  outline: 1px solid var(--vscode-contrastActiveBorder);
 }
 
 .question {
-  font-size: 15px;
   line-height: 1.75em;
+  margin-bottom: 2em;
   padding-top: 5px;
 }
 
 .toggleIcon {
-  cursor: pointer;
-  height: 13px;
-  width: 13px;
-  margin-left: 6px;
+  height: 1em;
+  width: 1em;
+  margin-left: 0.5em;
+  vertical-align: middle;
 }
 
 .toggleIcon path {
@@ -23,4 +28,4 @@
 
 .toggleIcon:focus {
   outline: 1px solid var(--vscode-contrastActiveBorder);
-}
+}

src/client/src/components/Dropdown/dropdownstyles.tsx

@@ -17,17 +17,26 @@ export default {
     ...base,
     color: "var(--vscode-menu-foreground)",
   }),
+  valueContainer: (base:any)=>({
+    ...base,
+    padding: "0 0.2em",
+  }),
+  indicatorContainer: (base:any)=>({
+    ...base,
+    padding: "0",
+  }),
   control: (base: any, state: any): any => ({
     ...base,
-    color: "white",
+    minHeight:"2.5em",
+    maxHeight:"2.5em",
     border: state.isFocused ? "1px solid var(--vscode-contrastActiveBorder)" : "none",
     borderRadius: 0,
     boxShadow: "none",
     background: "var(--vscode-editorWidget-border)",
     "&:hover": {
       outline: "0.5px solid rgba(0,0,0,0.5)",
     },
-    padding: "5px",
+    padding: "0 0.2em",
     cursor: "pointer",
   }),
   option: (provided: any, state: any) => ({

src/client/src/components/Dropdown/styles.module.css

@@ -1,5 +1,5 @@
 .icon {
-  height: 13px;
+  height: 1em;
   transform: rotate(180deg);
   margin-left: 3px;
   margin-right: 4px;

src/client/src/components/Footer/Footer.test.tsx

@@ -5,7 +5,7 @@ import { getInitialState, setSelectedRoute } from "../../mockData/mockStore";
 import { RenderResult } from "@testing-library/react";
 import { renderWithStore } from "../../testUtils";
 import styles from "./styles.module.css";
-import buttonStyles from "../../css/buttonStyles.module.css";
+import buttonStyles from "../../css/button.module.css";
 import { ROUTE } from "../../utils/constants/constants";
 import { AppState } from "../../store/combineReducers";
 
@@ -55,7 +55,6 @@ describe("Footer", () => {
 
       const backButton = wrapper.getByText("Back");
       expect(backButton).toBeDefined();
-      expect(backButton).toHaveClass(styles.buttonBack);
 
       const createProjectButton = wrapper.getByText("Create Project");
       expect(createProjectButton).toBeDefined();
@@ -71,7 +70,6 @@ describe("Footer", () => {
 
       const backButton = wrapper.getByText("Back");
       expect(backButton).toBeDefined();
-      expect(backButton).toHaveClass(styles.buttonBack);
 
       const createProjectButton = wrapper.getByText("Create Project");
       expect(createProjectButton).toBeDefined();
@@ -87,7 +85,6 @@ describe("Footer", () => {
 
       const backButton = wrapper.getByText("Back");
       expect(backButton).toBeDefined();
-      expect(backButton).toHaveClass(styles.buttonBack);
 
       const createProjectButton = wrapper.getByText("Create Project");
       expect(createProjectButton).toBeDefined();
@@ -100,7 +97,6 @@ describe("Footer", () => {
 
       const backButton = wrapper.getByText("Back");
       expect(backButton).toBeDefined();
-      expect(backButton).toHaveClass(styles.buttonBack);
 
       const createButton = wrapper.getByText("Create Project");
       expect(createButton).toBeDefined();

src/client/src/components/Footer/index.tsx

@@ -5,11 +5,9 @@ import { InjectedIntlProps, injectIntl } from "react-intl";
 import { AppState } from "../../store/combineReducers";
 import { AppContext } from "../../AppContext";
 
-import { ReactComponent as NextArrow } from "../../assets/nextarrow.svg";
-import nextArrow from "../../assets/nextarrow.svg";
-import { ROUTE } from "../../utils/constants/constants";
 import { sendTelemetry } from "../../utils/extensionService/extensionService";
 import { EXTENSION_COMMANDS } from "../../utils/constants/commands";
+import { ROUTE } from "../../utils/constants/constants";
 
 import { IVSCodeObject } from "../../types/vscode";
 import { IRoutesNavItems } from "../../types/route";
@@ -25,7 +23,7 @@ import { setRoutesAction } from "../../store/navigation/routesNavItems/actions";
 import { setDetailPageAction } from "../../store/config/detailsPage/action";
 
 import classnames from "classnames";
-import buttonStyles from "../../css/buttonStyles.module.css";
+import buttonStyles from "../../css/button.module.css";
 import styles from "./styles.module.css";
 import messages from "./messages";
 
@@ -88,7 +86,7 @@ const Footer = (props: Props) => {
           <div className={styles.buttonContainer}>
             <button
               tabIndex={!isFirstStep ? 0 : -1}
-              className={classnames(buttonStyles.buttonDark, styles.button, styles.buttonBack, {
+              className={classnames(buttonStyles.buttonDark, {
                 [styles.disabledOverlay]: isFirstStep || !isEnableGenerateButton,
               })}
               onClick={() => {
@@ -108,17 +106,10 @@ const Footer = (props: Props) => {
               }}
             >
               {formatMessage(messages.next)}
-              {nextArrow && (
-                <NextArrow
-                  className={classnames(styles.nextIcon, {
-                    [styles.nextIconNotDisabled]: isEnableNextPage,
-                  })}
-                />
-              )}
             </button>
             <button
               disabled={!isEnableGenerateButton}
-              className={classnames(styles.button, {
+              className={classnames({
                 [buttonStyles.buttonDark]: !isEnableGenerateButton,
                 [buttonStyles.buttonHighlighted]: isEnableGenerateButton,
                 [styles.disabledOverlay]: !isEnableGenerateButton,

src/client/src/components/Footer/styles.module.css

@@ -1,6 +1,6 @@
 .footer {
   position: absolute;
-  background-color: var(--vscode-badge-background);
+  background-color: var(--vscode-input-background);
   border-top: 1px solid var(--vscode-editorGroup-border);
   padding: 10px;
   bottom: 0;
@@ -13,53 +13,14 @@
   z-index: 1100;
 }
 
-.button {
-  margin-right: 1em;
-  text-align: center;
-}
-
-.button:hover {
-  color: #ffffff;
-}
-
-.buttonNext {
-  min-width: 80px;
-}
-
-.buttonBack {
-  background: var(--vscode-editor-background);
-}
-
-.button:focus {
-  outline: 1px solid var(--vscode-contrastActiveBorder);
-}
-
 .buttonContainer {
   display: flex;
   align-items: center;
 }
 
-.nextIcon {
-  margin-left: 10px;
-  height: 16px;
-}
-
-.nextIcon path {
-  fill: var(--vscode-editor-foreground);
-}
-
-.nextIconNotDisabled path {
-  fill: #ffffff;
-}
-
 .disabledOverlay {
   opacity: 0.5;
   background: var(--vscode-editor-background);
+  color: var(--vscode-editor-foreground);
   cursor: default;
 }
-
-@media (min-width: 730px) {
-  .button {
-    font-size: 1.4em;
-  }
-}

src/client/src/components/Header/index.tsx

@@ -4,8 +4,8 @@ import styles from "./styles.module.css";
 const Header = () => {
   return (
     <div className={styles.header}>
-      <div className={styles.headerTitle}>Web Template Studio</div>
-      <div className={styles.headerTitleSmall}>WebTS</div>
+      <h1 className={styles.headerTitle}>Web Template Studio</h1>
+      <h1 className={styles.headerTitleSmall}>WebTS</h1>
     </div>
   );
 };