refactor: reusable dialog management

apps/client/src/features/operator/Operator.module.scss

@@ -20,12 +20,12 @@
 
 .editPrompt {
   position: fixed;
-  z-index: 1;
+  z-index: $zindex-dialog;
   left: 50%;
   transform: translate(-50%, 0);
   text-align: center;
 
-  background: rgba(0,0,0, 0.7);
+  background: $backdrop-color;
   border-radius: 2px;
   padding: 0.5em 2em;
   color: $orange-500;

apps/client/src/features/operator/edit-modal/EditModal.module.scss

@@ -3,7 +3,7 @@
   top: 10%;
   left: 50%;
 
-  z-index: 2;
+  z-index: $zindex-dialog;
   transform: translateX(-50%);
 
   padding-inline: 1rem;
@@ -45,9 +45,6 @@
   padding-block: 1rem;
   display: flex;
   align-items: center;
+  justify-content: end;
   gap: 1rem;
-
-  button {
-   width: 100%;
-  }
 }

apps/client/src/features/operator/follow-button/FollowButton.module.scss

@@ -4,7 +4,7 @@
   bottom: calc(1.5rem + env(safe-area-inset-bottom));
   left: 50%;
   transform: translateX(-50%);
-  z-index: 1;
+  z-index: $zindex-floating;
 
   display: flex;
   align-items: center;

apps/client/src/features/operator/status-bar/StatusBar.module.scss

@@ -2,7 +2,7 @@
   position: sticky;
   top: 0;
   width: 100%;
-  z-index: 2;
+  z-index: $zindex-floating;
 
   background-color: $gray-1350;
   border-bottom: 1px solid $white-10;