fix(orga): correct manage-authentication-method-modal input size

and center copy button
1024pix · May 17, 2024 · 203f87c · 203f87c
1 parent 75f30b7
commit 203f87c
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 34 deletions.
diff --git a/orga/app/components/sco-organization-participant/manage-authentication-method-modal.hbs b/orga/app/components/sco-organization-participant/manage-authentication-method-modal.hbs
@@ -44,12 +44,7 @@
                     }}</:label>
                 </PixInput>
                 {{#if (is-clipboard-supported)}}
-                  <PixTooltip
-                    @id="copy-email-tooltip"
-                    @position="top"
-                    @isInline={{true}}
-                    class="manage-authentication-window__tooltip"
-                  >
+                  <PixTooltip @id="copy-email-tooltip" @position="top" @isInline={{true}}>
                     <:triggerElement>
                       <CopyButton
                         @text={{@student.email}}
@@ -59,7 +54,7 @@
                           'pages.sco-organization-participants.manage-authentication-method-modal.section.email.copy'
                         }}"
                         aria-describedby="copy-email-tooltip"
-                        class="pix-icon-button pix-icon-button--small pix-icon-button--dark-grey manage-authentication-window__clipboard-button"
+                        class="pix-icon-button pix-icon-button--small pix-icon-button--dark-grey"
                       >
                         <FaIcon @icon="copy" @prefix="far" />
                       </CopyButton>
@@ -103,12 +98,7 @@
                       }}</:label>
                   </PixInput>
                   {{#if (is-clipboard-supported)}}
-                    <PixTooltip
-                      @id="copy-username-tooltip"
-                      @position="top"
-                      @isInline={{true}}
-                      class="manage-authentication-window__tooltip"
-                    >
+                    <PixTooltip @id="copy-username-tooltip" @position="top" @isInline={{true}}>
                       <:triggerElement>
                         <CopyButton
                           @text={{@student.username}}
@@ -118,7 +108,7 @@
                             "pages.sco-organization-participants.manage-authentication-method-modal.section.username.copy"
                           }}
                           aria-describedby="copy-username-tooltip"
-                          class="pix-icon-button pix-icon-button--small pix-icon-button--dark-grey manage-authentication-window__clipboard-button"
+                          class="pix-icon-button pix-icon-button--small pix-icon-button--dark-grey"
                         >
                           <FaIcon @icon="copy" @prefix="far" />
                         </CopyButton>
@@ -147,12 +137,7 @@
                       }}</:label>
                   </PixInput>
                   {{#if (is-clipboard-supported)}}
-                    <PixTooltip
-                      @id="copy-password-tooltip"
-                      @position="top"
-                      @isInline={{true}}
-                      class="manage-authentication-window__tooltip"
-                    >
+                    <PixTooltip @id="copy-password-tooltip" @position="top" @isInline={{true}}>
                       <:triggerElement>
                         <CopyButton
                           @text={{this.generatedPassword}}
@@ -162,7 +147,7 @@
                             "pages.sco-organization-participants.manage-authentication-method-modal.section.password.copy"
                           }}
                           aria-describedby="copy-password-tooltip"
-                          class="pix-icon-button pix-icon-button--small pix-icon-button--dark-grey manage-authentication-window__clipboard-button"
+                          class="pix-icon-button pix-icon-button--small pix-icon-button--dark-grey"
                         >
                           <FaIcon @icon="copy" @prefix="far" class="fa-inverse" />
                         </CopyButton>

diff --git a/orga/app/styles/components/manage-authentication-method-modal.scss b/orga/app/styles/components/manage-authentication-method-modal.scss
@@ -32,25 +32,19 @@
   }
 
   &__clipboard {
+    display: flex;
+    gap: var(--pix-spacing-4x);
+
+    .pix-input {
+      width: 100%;
+    }
+
     input {
       box-sizing: border-box;
-      width: 85%;
       background-color: var(--pix-neutral-20);
     }
   }
 
-  &__clipboard-button {
-    margin: -10px 6px 0 6px;
-  }
-
-  &__tooltip {
-    display: inline-block;
-
-    .pix-tooltip__content {
-      margin-bottom: 6px;
-    }
-  }
-
   &__warning {
     display: flex;
     color: var(--pix-neutral-0);