updated css for dialogs

Gencaster · Jul 26, 2023 · 2bc4122 · 2bc4122
1 parent 5944222
commit 2bc4122
Show file tree

Hide file tree

Showing 11 changed files with 58 additions and 40 deletions.
diff --git a/caster-editor/src/assets/scss/_elementplus.scss b/caster-editor/src/assets/scss/_elementplus.scss
@@ -12,7 +12,6 @@
 
   --el-button-text-color: #{$black} !important;
   --el-button-hover-text-color: #{$black} !important;
-
 }
 
 .el-button--primary {
@@ -23,14 +22,14 @@
 
 .el-button--danger {
   --el-color-danger: #{$alertRed} !important;
-  --el-button-hover-border-color:  #{$alertRed} !important;
-  --el-button-hover-bg-color:  #{$alertRed} !important;
+  --el-button-hover-border-color: #{$alertRed} !important;
+  --el-button-hover-bg-color: #{$alertRed} !important;
 }
 
 .el-button--info {
-  --el-button-hover-bg-color:  #{$grey-medium} !important;
-  --el-button-hover-border-color:  #{$grey-medium} !important;
-  --el-button-hover-bg-color:  #{$grey-medium} !important;
+  --el-button-hover-bg-color: #{$grey-medium} !important;
+  --el-button-hover-border-color: #{$grey-medium} !important;
+  --el-button-hover-bg-color: #{$grey-medium} !important;
 }
 
 .el-radio-group {
@@ -63,26 +62,30 @@
   .el-dialog {
     border: 2px solid black;
     width: calc(100% - 2 * $mobilePadding);
-    max-width: 600px;
+    max-width: 500px;
     border-radius: $borderRadius;
+
+    &.is-align-center {
+      transform: translateY(-5vh);
+    }
   }
 
   .el-dialog__header {
     margin: 0;
-    padding: 35px 35px 10px 35px;
+    padding: 30px 20px 15px 20px;
   }
 
   .el-dialog--center,
   .el-dialog__body {
-    padding: 15px 35px 10px 35px;
+    padding: 0px 20px 0px 20px;
     width: 100%;
     text-align: center;
     word-break: break-word;
   }
 
   .el-dialog__footer {
     margin-bottom: 15px;
-    padding: 0px 35px 15px 35px;
+    padding: 30px 20px 15px 20px;
   }
 
   label {

diff --git a/caster-editor/src/components/DialogAddGraph.vue b/caster-editor/src/components/DialogAddGraph.vue
@@ -4,6 +4,7 @@
       v-model="showDialog"
       title="Create graph"
       :show-close="false"
+      align-center
     >
       <ElInput
         id="graphNameInput"
@@ -12,14 +13,14 @@
       />
       <template #footer>
         <span class="dialog-footer">
-          <ElButton @click="() => emit('aborted')">Cancel</ElButton>
           <ElButton
-            color="#ADFF00"
+            type="danger"
+            @click="() => emit('aborted')"
+          >Cancel</ElButton>
+          <ElButton
             type="primary"
             @click="createGraph()"
-          >
-            Confirm
-          </ElButton>
+          > Confirm </ElButton>
         </span>
       </template>
     </ElDialog>

diff --git a/caster-editor/src/components/DialogAddNode.vue b/caster-editor/src/components/DialogAddNode.vue
@@ -3,6 +3,7 @@
     <ElDialog
       v-model="showDialog"
       title="Create new node"
+      align-center
       :show-close="true"
       :close-on-click-modal="false"
       :close-on-press-escape="false"
@@ -15,7 +16,10 @@
       />
       <template #footer>
         <span class="dialog-footer">
-          <ElButton @click="() => emit('closed')">Cancel</ElButton>
+          <ElButton
+            type="danger"
+            @click="() => emit('closed')"
+          >Cancel</ElButton>
           <ElButton
             type="primary"
             :disabled="!hasName"

diff --git a/caster-editor/src/components/DialogDeleteNode.vue b/caster-editor/src/components/DialogDeleteNode.vue
@@ -6,21 +6,19 @@
       center
       lock-scroll
       :show-close="false"
+      align-center
     >
       <span> Are you sure to delete Node "{{ node.name }}"? </span>
       <template #footer>
         <span class="dialog-footer">
           <ElButton
-            text
-            bg
+            type="info"
             @click="emit('cancel')"
           >Cancel</ElButton>
           <ElButton
-            color="#FF0000"
+            type="danger"
             @click="deleteNode()"
-          >
-            Delete Node
-          </ElButton>
+          > Delete Node </ElButton>
         </span>
       </template>
     </ElDialog>

diff --git a/caster-editor/src/components/DialogExitGraph.vue b/caster-editor/src/components/DialogExitGraph.vue
@@ -6,6 +6,7 @@
       center
       lock-scroll
       :show-close="false"
+      align-center
     >
       <span>
         Are you sure to exit the graph?
@@ -16,16 +17,15 @@
       <template #footer>
         <span class="dialog-footer">
           <ElButton
-            text
-            bg
+            type="info"
             @click="
               () => {
                 emit('cancel');
               }
             "
           >Cancel</ElButton>
           <ElButton
-            color="#FF0000"
+            type="danger"
             @click="exitGraph()"
           > Exit </ElButton>
         </span>

diff --git a/caster-editor/src/components/DialogExitNode.vue b/caster-editor/src/components/DialogExitNode.vue
@@ -4,6 +4,7 @@
       v-model="showDialog"
       title="Exit node"
       center
+      align-center
       lock-scroll
       :show-close="false"
       :close-on-click-modal="false"
@@ -16,11 +17,19 @@
       <template #footer>
         <span class="dialog-footer">
           <ElButton
-            primary
+            type="info"
             @click="emit('cancel')"
           > Cancel </ElButton>
-          <ElButton @click="emit('noSave')"> Discard changes </ElButton>
-          <ElButton @click="emit('save')"> Save </ElButton>
+          <ElButton
+            type="danger"
+            @click="emit('noSave')"
+          >
+            Discard changes
+          </ElButton>
+          <ElButton
+            type="primary"
+            @click="emit('save')"
+          > Save </ElButton>
         </span>
       </template>
     </ElDialog>

diff --git a/caster-editor/src/components/DialogRenameNode.vue b/caster-editor/src/components/DialogRenameNode.vue
@@ -6,21 +6,22 @@
       :show-close="false"
       :close-on-click-modal="false"
       :close-on-press-escape="false"
+      align-center
     >
       <ElInput
         v-model="newName"
         placeholder="Please input"
       />
       <template #footer>
         <span class="dialog-footer">
-          <ElButton @click="emit('cancel')">Cancel</ElButton>
+          <ElButton
+            type="danger"
+            @click="emit('cancel')"
+          >Cancel</ElButton>
           <ElButton
             type="primary"
-            color="#ADFF00"
             @click="renameNode()"
-          >
-            Confirm
-          </ElButton>
+          > Confirm </ElButton>
         </span>
       </template>
     </ElDialog>

diff --git a/caster-editor/src/components/DialogUpdateAudioFile.vue b/caster-editor/src/components/DialogUpdateAudioFile.vue
@@ -6,6 +6,7 @@
       :show-close="false"
       :close-on-click-modal="false"
       :close-on-press-escape="false"
+      align-center
     >
       <ElForm label-width="120px">
         <ElFormItem label="Name">
@@ -23,14 +24,14 @@
       </ElForm>
       <template #footer>
         <span class="dialog-footer">
-          <ElButton @click="emit('cancel')">Cancel</ElButton>
+          <ElButton
+            type="danger"
+            @click="emit('cancel')"
+          >Cancel</ElButton>
           <ElButton
             type="primary"
-            color="#ADFF00"
             @click="update()"
-          >
-            Confirm
-          </ElButton>
+          > Confirm </ElButton>
         </span>
       </template>
     </ElDialog>

diff --git a/caster-editor/src/components/Landing.vue b/caster-editor/src/components/Landing.vue
@@ -25,7 +25,7 @@
         </ElFormItem>
         <ElFormItem>
           <ElButton
-            :color="variables.greenLight"
+            type="primary"
             class="login-button"
             native-type="submit"
             @click="onSubmit"

diff --git a/caster-editor/src/components/LoginDialog.vue b/caster-editor/src/components/LoginDialog.vue
@@ -53,6 +53,7 @@ const showLoginScreen = ref<boolean>(true);
       :show-close="false"
       :close-on-click-modal="false"
       :close-on-press-escape="false"
+      align-center
     >
       <ElForm
         ref="loginFormRef"

diff --git a/caster-front/src/assets/variables.scss b/caster-front/src/assets/variables.scss
@@ -9,7 +9,7 @@ $spacingXL: 6rem;
 // sizes
 $desktopMaxWidth: 1280px;
 $desktopMaxWidthText: 900px;
-$cardMaxWidth: 600px;
+$cardMaxWidth: 500px;
 $playerBarHeight: 50px;
 
 $mobilePadding: 12px;