fix zoom in/out css issues for landing page and splash screen (#2887)

finos · Jan 25, 2024 · ddc1b9d · ddc1b9d
1 parent 0c295a3
commit ddc1b9d
Show file tree

Hide file tree

Showing 7 changed files with 216 additions and 15 deletions.
diff --git a/.changeset/kind-mirrors-build.md b/.changeset/kind-mirrors-build.md
@@ -0,0 +1,5 @@
+---
+'@finos/legend-application-studio': patch
+---
+
+Fix zoom in/out css issues for landing page and splash screen
diff --git a/.changeset/rotten-bees-hunt.md b/.changeset/rotten-bees-hunt.md
@@ -0,0 +1,3 @@
+---
+'@finos/legend-art': patch
+---
diff --git a/packages/legend-application-studio/style/components/_workspace-setup.scss b/packages/legend-application-studio/style/components/_workspace-setup.scss
@@ -20,6 +20,111 @@
 @forward 'workspace-setup/workspace-selector';
 @forward 'workspace-setup/project-selector';
 
+.selector-input--dark__option {
+  .workspace-selector__option {
+    height: 100%;
+    display: flex;
+    align-items: center;
+
+    &__icon {
+      @include flexCenter;
+
+      width: 1vh;
+      min-width: 2vh;
+      margin-right: 1vh;
+
+      svg {
+        font-size: 1.5vh;
+      }
+    }
+
+    &__label {
+      width: calc(100% - 1rem);
+      display: flex;
+      align-items: center;
+    }
+
+    &__name {
+      font-size: min(1.5vw, 1.5vh);
+      height: 100%;
+    }
+
+    &__source {
+      margin-right: 1vh;
+
+      &__patch {
+        border-radius: 0.2rem;
+        font-size: 1.25vh;
+        width: 8vh;
+        height: 2vh;
+      }
+    }
+  }
+
+  .project-selector__option {
+    height: 100%;
+    justify-content: space-between;
+
+    &__label {
+      display: flex;
+      width: 100%;
+
+      &__name {
+        font-size: min(1.5vw, 1.5vh);
+      }
+    }
+
+    &__visit-btn {
+      width: 6vh;
+      margin-right: 1vh;
+
+      &__label {
+        width: 4vh;
+        height: 2vh;
+        font-size: 1.25vh;
+      }
+
+      &__icon {
+        height: 2vh;
+        width: 2vh;
+
+        svg {
+          font-size: 1.5vh;
+        }
+      }
+    }
+
+    &__configure-btn {
+      width: 10vh;
+      margin-right: 1vh;
+
+      &__label {
+        width: 6vh;
+        height: 2vh;
+        font-size: 1.25vh;
+      }
+
+      &__warning-icon {
+        height: 2vh;
+        width: 2vh;
+
+        svg {
+          font-size: 1.5vh;
+        }
+      }
+
+      &__icon {
+        height: 2vh;
+        width: 2vh;
+
+        svg {
+          font-size: 1.5vh;
+        }
+      }
+    }
+  }
+}
+
 .workspace-setup {
   height: 100%;
   position: relative;
@@ -147,7 +252,8 @@
       @include flexCenter;
 
       width: 1vh;
-      margin-right: 1rem;
+      min-width: 2vh;
+      margin-right: 1vh;
 
       svg {
         font-size: 1.5vh;
@@ -164,6 +270,17 @@
       font-size: min(1.5vw, 1.5vh);
       height: 100%;
     }
+
+    &__source {
+      margin-right: 1vh;
+
+      &__patch {
+        border-radius: 0.2rem;
+        font-size: 1.25vh;
+        width: 8vh;
+        height: 2vh;
+      }
+    }
   }
 
   &__logo {
@@ -237,6 +354,39 @@
     margin-top: 3rem;
     width: 60vw;
     height: 25%;
+
+    .mui-card {
+      &__media {
+        margin-top: 1vw;
+        margin-left: 1vw;
+      }
+
+      &__header {
+        margin-top: 1.5vh;
+        font-size: min(2vw, 2vh);
+        margin-bottom: 1.5vh;
+      }
+
+      &__content {
+        font-size: min(1.5vh, 1.5vw);
+      }
+
+      &__card-action {
+        margin-bottom: 1.5vh;
+
+        &__label {
+          font-size: min(1.5vw, 1.5vh);
+        }
+      }
+    }
+
+    .MuiCardContent-root {
+      margin-left: 1vw;
+    }
+
+    .MuiCardActions-root {
+      margin-left: 1vw;
+    }
   }
 
   &__content__card {
@@ -312,7 +462,7 @@
 
       &__icon--project,
       &__icon--workspace {
-        font-size: 1.8rem;
+        font-size: 1.5vh;
       }
 
       &__label {
@@ -381,8 +531,8 @@
     }
 
     &__icon {
-      margin-left: 1rem;
-      font-size: 2rem;
+      margin-left: 1vh;
+      font-size: 1.5vh;
     }
   }
 

diff --git a/packages/legend-application-studio/style/components/editor/_editor-group.scss b/packages/legend-application-studio/style/components/editor/_editor-group.scss
@@ -264,6 +264,39 @@
           height: 100%;
           justify-content: space-between;
         }
+
+        .mui-card {
+          &__media {
+            margin-top: 1vw;
+            margin-left: 1vw;
+          }
+
+          &__header {
+            margin-top: 1.5vh;
+            font-size: min(2vw, 2vh);
+            margin-bottom: 1.5vh;
+          }
+
+          &__content {
+            font-size: min(1.5vh, 1.5vw);
+          }
+
+          &__card-action {
+            margin-bottom: 1.5vh;
+
+            &__label {
+              font-size: min(1.5vw, 1.5vh);
+            }
+          }
+        }
+
+        .MuiCardContent-root {
+          margin-left: 1vw;
+        }
+
+        .MuiCardActions-root {
+          margin-left: 1vw;
+        }
       }
 
       &__divider {
@@ -331,10 +364,13 @@
       &__key {
         color: var(--color-light-grey-400);
         background: var(--color-dark-grey-200);
+        font-size: min(1.5vh, 1.5vw);
+        height: min(2vh, 2vw);
       }
 
       &__plus svg {
         color: var(--color-light-grey-400);
+        font-size: min(1vh, 1vw);
       }
     }
   }

diff --git a/packages/legend-art/style/base/_common.scss b/packages/legend-art/style/base/_common.scss
@@ -63,9 +63,15 @@
     font-family: 'Roboto Mono', monospace;
   }
 
-  &__plus svg {
-    font-size: 1rem;
-    margin: 0 0.2rem;
+  &__plus {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    svg {
+      font-size: 1rem;
+      margin: 0 0.2rem;
+    }
   }
 }
 

diff --git a/packages/legend-art/style/components/_selector-input.scss b/packages/legend-art/style/components/_selector-input.scss
@@ -315,6 +315,7 @@
     background: var(--color-dark-grey-100);
     border: 0.1rem solid var(--color-dark-grey-100);
     color: var(--color-light-grey-200);
+    margin: 0 !important;
   }
 
   &__option {

diff --git a/packages/legend-art/style/reset/_mui.scss b/packages/legend-art/style/reset/_mui.scss
@@ -113,24 +113,24 @@
   border-radius: 1rem;
 
   &__media {
-    margin-top: 1vw;
-    margin-left: 1vw;
+    margin-top: 2rem;
+    margin-left: 2rem;
     size: 2rem;
   }
 
   &__header {
-    margin-top: 1.5vh;
+    margin-top: 1rem;
     font-weight: 500;
     height: 20%;
-    font-size: min(2vw, 2vh);
+    font-size: 2rem;
     color: white;
-    margin-bottom: 1.5vh;
+    margin-bottom: 1rem;
     display: flex;
     align-items: center;
   }
 
   &__content {
-    font-size: min(1.5vh, 1.5vw);
+    font-size: 1.5rem;
     color: white;
     height: 80%;
     overflow-y: scroll;
@@ -215,11 +215,11 @@
   flex-direction: column;
   flex: 1 auto;
   padding: 0;
-  margin-left: 1vw;
+  margin-left: 2rem;
 }
 
 .MuiCardActions-root {
   height: 20%;
-  margin-left: 1vw;
+  margin-left: 1rem;
   padding: 0;
 }