fix: update modal buttons alignments in element dialogs

box · Jun 21, 2023 · c08ce6a · c08ce6a
1 parent 33c8236
commit c08ce6a
Show file tree

Hide file tree

Showing 7 changed files with 22 additions and 19 deletions.
diff --git a/scripts/styleguide.styles.scss b/scripts/styleguide.styles.scss
@@ -2,6 +2,10 @@
     &.bce,
     &.bcp {
         height: 600px;
+
+        .bcu {
+            height: 100%;
+        }
     }
 
     &.bcpr {

diff --git a/src/elements/common/create-folder-dialog/CreateFolderDialog.js b/src/elements/common/create-folder-dialog/CreateFolderDialog.js
@@ -109,9 +109,6 @@ const CreateFolderDialog = ({
                 <input ref={ref} onKeyDown={onKeyDown} required type="text" />
             </label>
             <div className="be-modal-btns">
-                <PrimaryButton data-testid="be-btn-create-folder" isLoading={isLoading} onClick={create} type="button">
-                    <FormattedMessage {...messages.create} />
-                </PrimaryButton>
                 <Button
                     data-testid="be-btn-create-folder-cancel"
                     isDisabled={isLoading}
@@ -120,6 +117,9 @@ const CreateFolderDialog = ({
                 >
                     <FormattedMessage {...messages.cancel} />
                 </Button>
+                <PrimaryButton data-testid="be-btn-create-folder" isLoading={isLoading} onClick={create} type="button">
+                    <FormattedMessage {...messages.create} />
+                </PrimaryButton>
             </div>
         </Modal>
     );

diff --git a/src/elements/common/header/Header.scss b/src/elements/common/header/Header.scss
@@ -1,6 +1,6 @@
 @import '../variables';
 
-.be .be-header {
+.be-header {
     display: flex;
     flex: 0 0 70px;
     align-items: center;
@@ -16,10 +16,4 @@
         flex: 1;
         padding-left: 20px;
     }
-
-    input[type='search'] {
-        width: 100%;
-        font: inherit;
-        -webkit-appearance: none;
-    }
 }
diff --git a/src/elements/common/modal.scss b/src/elements/common/modal.scss
@@ -3,13 +3,18 @@
 .be-modal {
     .be-modal-btns {
         display: flex;
-        justify-content: center;
+        justify-content: flex-end;
         padding: 15px 0 0;
 
         .btn {
             @include bdl-Button--large;
 
-            margin-left: 8px;
+            margin-top: 0;
+            margin-bottom: 0;
+
+            &:last-of-type {
+                margin-right: 0;
+            }
         }
     }
 

diff --git a/src/elements/content-explorer/DeleteConfirmationDialog.js b/src/elements/content-explorer/DeleteConfirmationDialog.js
@@ -50,12 +50,12 @@ const DeleteConfirmationDialog = ({
         >
             <FormattedMessage {...message} values={{ name: item.name }} />
             <div className="be-modal-btns">
-                <PrimaryButton isLoading={isLoading} onClick={onDelete} type="button">
-                    <FormattedMessage {...messages.delete} />
-                </PrimaryButton>
                 <Button autoFocus isDisabled={isLoading} onClick={onCancel} type="button">
                     <FormattedMessage {...messages.cancel} />
                 </Button>
+                <PrimaryButton isLoading={isLoading} onClick={onDelete} type="button">
+                    <FormattedMessage {...messages.delete} />
+                </PrimaryButton>
             </div>
         </Modal>
     );

diff --git a/src/elements/content-explorer/RenameDialog.js b/src/elements/content-explorer/RenameDialog.js
@@ -120,12 +120,12 @@ const RenameDialog = ({
                 <input ref={ref} defaultValue={nameWithoutExt} onKeyDown={onKeyDown} required type="text" />
             </label>
             <div className="be-modal-btns">
-                <PrimaryButton isLoading={isLoading} onClick={rename} type="button">
-                    <FormattedMessage {...messages.rename} />
-                </PrimaryButton>
                 <Button isDisabled={isLoading} onClick={onCancel} type="button">
                     <FormattedMessage {...messages.cancel} />
                 </Button>
+                <PrimaryButton isLoading={isLoading} onClick={rename} type="button">
+                    <FormattedMessage {...messages.rename} />
+                </PrimaryButton>
             </div>
         </Modal>
     );

diff --git a/src/styles/common/_forms.scss b/src/styles/common/_forms.scss
@@ -16,7 +16,7 @@ input[type='tel'],
 input[type='number'],
 div[contentEditable='true'],
 textarea {
-    width: 262px;
+    width: 100%;
 
     @include box-inputs;
 }