Merge pull request #1104 from Microsoft/jwilaby/fix-new-bot-dialog-st…

…yles fixed various css issues
microsoft · Nov 19, 2018 · 7c868b1 · 7c868b1
2 parents 9ba8f7d + 9a0e7f0
commit 7c868b1
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 12 deletions.
diff --git a/packages/app/client/src/ui/dialogs/botCreationDialog/botCreationDialog.scss b/packages/app/client/src/ui/dialogs/botCreationDialog/botCreationDialog.scss
@@ -11,12 +11,14 @@
 }
 
 .multi-input-row {
-  width: 420px;
   justify-content: space-between;
 }
 
-.small-input input {
-  width: 200px;
+.input-container {
+  width: 100%;
+  & + div {
+    margin-left: 8px;
+  }
 }
 
 .bot-create-form {
@@ -53,21 +55,20 @@
 .key {
   width: 175px;
   margin: 16px 145px 0 32px;
+  > label[aria-disabled] {
+    color: initial;
+  }
 }
 
 .encrypt-key-check-box {
   margin-top: 30px;
-
-  span {
-    width: auto;
-  }
 }
 
 .actions-list {
   list-style: none;
   position: absolute;
   right: 106px; // when re-enabling 'Generate new secret' link, original value: 0;
-  bottom: 3px;
+  bottom: 12.5px;
   padding: 0;
   margin: 0;
 

diff --git a/packages/app/client/src/ui/dialogs/botCreationDialog/botCreationDialog.scss.d.ts b/packages/app/client/src/ui/dialogs/botCreationDialog/botCreationDialog.scss.d.ts
@@ -1,7 +1,7 @@
 // This is a generated file. Changes are likely to result in being overwritten
 export const main: string;
 export const multiInputRow: string;
-export const smallInput: string;
+export const inputContainer: string;
 export const botCreateForm: string;
 export const checkboxAnchorContainer: string;
 export const link: string;

diff --git a/packages/app/client/src/ui/dialogs/botCreationDialog/botCreationDialog.tsx b/packages/app/client/src/ui/dialogs/botCreationDialog/botCreationDialog.tsx
@@ -120,14 +120,14 @@ export class BotCreationDialog extends React.Component<{}, BotCreationDialogStat
           { endpointWarning && <span className={ styles.endpointWarning }>{ endpointWarning }</span> }
           <Row className={ styles.multiInputRow }>
             <TextField
-              className={ styles.smallInput }
+              inputContainerClassName={ styles.inputContainer }
               data-prop="appId"
               label="Microsoft App ID"
               onChange={ this.onInputChange }
               placeholder="Optional"
               value={ endpoint.appId }/>
             <TextField
-              className={ styles.smallInput }
+              inputContainerClassName={ styles.inputContainer }
               label="Microsoft App password"
               data-prop="appPassword"
               onChange={ this.onInputChange }
@@ -150,7 +150,7 @@ export class BotCreationDialog extends React.Component<{}, BotCreationDialogStat
           </Row>
 
           <TextField
-            className={ styles.key }
+            inputContainerClassName={ styles.key }
             label="Secret "
             value={ secret }
             placeholder="Your keys are not encrypted"