fix: updating css and Copy Logs orientation

Signed-off-by: Antonio Sonis <[email protected]>
platformatic · Dec 22, 2023 · fc277be · fc277be
1 parent 24b1093
commit fc277be
Show file tree

Hide file tree

Showing 5 changed files with 27 additions and 20 deletions.
diff --git a/src/renderer/src/components/steps/CreateApplication.jsx b/src/renderer/src/components/steps/CreateApplication.jsx
@@ -111,7 +111,7 @@ const CreateApplication = React.forwardRef(({ onNext }, ref) => {
               onClick={async () => handleOpenFolder()}
               color={WHITE}
               backgroundColor={TRANSPARENT}
-              classes={`${commonStyles.buttonPadding} cy-action-open-folder`}
+              classes={`${commonStyles.buttonPaddingBordered} ${typographyStyles.desktopBody} ${typographyStyles.textWhite} cy-action-open-folder`}
             />
             <Forms.Input
               placeholder='Select the destination folder of your application using the Button'

diff --git a/src/renderer/src/components/steps/GeneratingApplication.jsx b/src/renderer/src/components/steps/GeneratingApplication.jsx
@@ -77,7 +77,7 @@ const GeneratingApplication = React.forwardRef(({ onRestartProcess }, ref) => {
   }
 
   return !restartInProgress && (
-    <div className={`${commonStyles.largeFlexBlock} ${commonStyles.fullWidth}`} ref={ref}>
+    <div className={`${commonStyles.mediumFlexBlock} ${commonStyles.fullWidth}`} ref={ref}>
       <div className={commonStyles.mediumFlexBlock}>
         <Title
           title={`Generating ${formData.createApplication.application}`}
@@ -89,6 +89,16 @@ const GeneratingApplication = React.forwardRef(({ onRestartProcess }, ref) => {
           We are generating your app. <br />Once all the steps are done you will be able to complete and use your new application.
         </p>
       </div>
+      <div className={`${commonStyles.smallFlexRow} ${commonStyles.fullWidth} ${commonStyles.justifyEnd}`}>
+        <Button
+          disabled={!appGenerated}
+          label='Copy Logs'
+          onClick={() => onClickCopyLogs()}
+          color={WHITE}
+          backgroundColor={RICH_BLACK}
+          classes={`${commonStyles.buttonPadding} cy-action-donwload-logs`}
+        />
+      </div>
       <BorderedBox classes={`${commonStyles.fullWidth} ${styles.content}`} backgroundColor={TRANSPARENT} borderColorOpacity={OPACITY_30} color={WHITE}>
         <div className={`${commonStyles.flexBlockNoGap} `}>
           {npmLogs.map((log, index) => renderLog(log, index))}
@@ -98,14 +108,6 @@ const GeneratingApplication = React.forwardRef(({ onRestartProcess }, ref) => {
         <CountDown status={countDownStatus} />
       </div>
       <div className={`${styles.buttonContainer} ${commonStyles.fullWidth}`}>
-        <Button
-          disabled={!appGenerated}
-          label='Copy Logs'
-          onClick={() => onClickCopyLogs()}
-          color={WHITE}
-          backgroundColor={RICH_BLACK}
-          classes={`${commonStyles.buttonPadding} cy-action-donwload-logs`}
-        />
         <Button
           disabled={!appGenerated}
           label='Continue'

diff --git a/src/renderer/src/components/steps/GeneratingApplication.module.css b/src/renderer/src/components/steps/GeneratingApplication.module.css
@@ -2,7 +2,7 @@
   @apply overflow-x-hidden overflow-y-auto max-h-[calc(100vH-22rem)] min-h-[calc(100vH-22rem)] lg:max-h-[calc(100vH-32rem)] lg:min-h-[calc(100vH-32rem)];
 }
 .buttonContainer {
-  @apply flex justify-between;
+  @apply flex justify-end;
 }
 
 .paddingStep {

diff --git a/src/renderer/src/components/steps/PrepareFolder.jsx b/src/renderer/src/components/steps/PrepareFolder.jsx
@@ -79,7 +79,7 @@ const PrepareFolder = React.forwardRef(({ onNext, onBack }, ref) => {
 
   return (
     <div className={styles.container} ref={ref}>
-      <div className={commonStyles.largeFlexBlock}>
+      <div className={commonStyles.mediumFlexBlock}>
         <div className={`${commonStyles.mediumFlexBlock} ${commonStyles.fullWidth}`}>
           <Title
             title={formData.createApplication.application}
@@ -91,6 +91,16 @@ const PrepareFolder = React.forwardRef(({ onNext, onBack }, ref) => {
             We are preparing your folder.<br /> Once all the steps are done you will be able to configure your services.
           </p>
         </div>
+        <div className={`${commonStyles.smallFlexRow} ${commonStyles.fullWidth} ${commonStyles.justifyEnd}`}>
+          <Button
+            disabled={!folderPrepared}
+            label='Copy Logs'
+            onClick={() => onClickCopyLogs()}
+            color={WHITE}
+            backgroundColor={RICH_BLACK}
+            classes={`${commonStyles.buttonPadding} cy-action-donwload-logs`}
+          />
+        </div>
         <BorderedBox classes={`${commonStyles.fullWidth} ${styles.content}`} backgroundColor={TRANSPARENT} borderColorOpacity={OPACITY_30} color={WHITE}>
           <div className={`${commonStyles.flexBlockNoGap} `}>
             {npmLogs.map((log, index) => renderLog(log, index))}
@@ -111,14 +121,6 @@ const PrepareFolder = React.forwardRef(({ onNext, onBack }, ref) => {
             backgroundColor={TRANSPARENT}
             classes={`${commonStyles.buttonPadding} cy-action-back`}
           />
-          <Button
-            disabled={!folderPrepared}
-            label='Copy Logs'
-            onClick={() => onClickCopyLogs()}
-            color={WHITE}
-            backgroundColor={RICH_BLACK}
-            classes={`${commonStyles.buttonPadding} cy-action-donwload-logs`}
-          />
         </div>
         {folderPreparedError
           ? <Button

diff --git a/src/renderer/src/styles/CommonStyles.module.css b/src/renderer/src/styles/CommonStyles.module.css
@@ -52,6 +52,9 @@
 .itemsEnd {
   @apply items-end;
 }
+.buttonPaddingBordered {
+  @apply px-4 py-[7px] !important
+}
 .buttonPadding {
   @apply px-4 py-2 !important
 }