Remove SplashScreenComponentAdapter (#440)

Merge SplashScreenComponentAdapter and SplashScreenComponent into one SplashScreen React component.
2025-12-27 12:51:41 +00:00 · 2021-02-23 11:15:57 -08:00
parent f0c82a430b
commit e8e5eb55cb
8 changed files with 153 additions and 207 deletions
--- a/src/Explorer/SplashScreen/SplashScreen.less
+++ b/src/Explorer/SplashScreen/SplashScreen.less
@@ -0,0 +1,178 @@
+@import "../../../less/Common/Constants";
+
+.splashScreenContainer {
+  width: 100%;
+  overflow-y: auto;
+  overflow-x: hidden;
+
+  .splashScreen {
+    .flex-display();
+    .flex-direction();
+    text-align: left;
+    margin: auto;
+    padding-left: 21px;
+    padding-right: 16px;
+    max-width: 1168px;;
+
+    >* {
+      justify-content: space-between;
+    }
+
+    >.title {
+      position: relative; // To attach FeaturePanelLauncher as absolute
+      color: @BaseHigh;
+      font-size: 48px;
+      padding-left: 0px;
+      margin: 16px auto;
+      text-align: center;
+    }
+
+    >.subtitle {
+      color: @BaseHigh;
+      font-size: 18px;
+      padding-left: 0px;
+      margin: 0px auto;
+      text-align: center;
+    }
+
+    .mainButtonsContainer {
+      .flex-display();
+      text-align: center;
+      cursor: pointer;
+      margin: 40px auto;
+
+      >.mainButton {
+        min-width: 124px;
+        max-width: 296px;
+        padding: 32px 16px;
+        display: flex;
+        background-color: @BaseLight;
+        border: 1px solid #949494;
+        box-sizing: border-box;
+        box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+        border-radius: 4px;
+
+        >.legendContainer {
+          margin-left: 16px;
+          text-align: left;
+
+          .legend {
+            font-family: @SemiboldFont;
+            margin-bottom: @DefaultSpace;
+            font-size: 18px;
+          }
+
+          .description {
+            font-size: 10px;
+          }
+        }
+      }
+
+      >:nth-child(n+2) {
+        margin-left: 32px;
+      }
+    }
+
+    .moreStuffContainer {
+      .flex-display();
+      justify-content: space-between;
+
+      .moreStuffColumn {
+        flex-grow: 1;
+        flex-basis: 0;
+        min-width: 124px;
+        max-width: 296px;
+
+        >.title {
+          font-size: 18px;
+          font-family: @SemiboldFont;
+          color: @BaseDark;
+          padding: 0px;
+          margin-bottom: 16px;
+        }
+
+        >ul {
+          list-style: none;
+          padding-left: 0px;
+          margin-bottom: 0px;
+
+          li {
+            padding: @DefaultSpace;
+            .flex-display();
+            align-items: flex-start;
+
+            >img {
+              margin-right: @DefaultSpace;
+              width: 24px;
+              height: 24px;
+            }
+
+            .oneLineContent {
+              margin-top: 4px;
+            }
+
+            .twoLineContent {
+              margin-top: -5px;
+
+              :nth-child(2) {
+                font-size: 9px;
+              }
+            }
+
+            .description {
+              font-size: 10px;
+              color: @BaseMediumHigh;
+            }
+          }
+        }
+
+        .tipContainer {
+          padding: 8px 16px;
+          width: 100%;
+          cursor: pointer;
+          .flex-display();
+          .flex-direction();
+
+          >.title {
+            color: @BaseDark;
+            padding: 0px;
+            font-size: 12px;
+          }
+          >.description {
+            color: @BaseDark;
+          }
+
+          &:not(:hover):not(:focus) {
+            background-color: @BaseLow;
+          }
+        }
+
+        &.commonTasks {
+          li {
+            cursor: pointer;
+          }
+        }
+
+        &.tipsContainer {
+          li {
+            margin: 2px 0px;
+          }
+        }
+      }
+    }
+
+    .focusable {
+      &:hover {
+        .hover();
+      }
+
+      &:focus {
+          .focus();
+      }
+
+      &:active {
+          .active();
+      }
+    }
+  }
+}