feat: update theme color (#30)

web-infra-dev · Aug 2, 2024 · db46783 · db46783
1 parent 2799ffe
commit db46783
Show file tree

Hide file tree

Showing 8 changed files with 27 additions and 36 deletions.
diff --git a/packages/visualizer/src/component/common.less b/packages/visualizer/src/component/common.less
@@ -1,18 +1,14 @@
-@main-blue: #06B1AB;
-@sub-blue: #A3D6D2;
+@main-text: #3b3b3b;
 
 @main-orange: #F9483E;
 
-@side-bg: #f7f7f7;
-@title-bg: #DDDDDD;
-@border-color: #CCCCCC;
+@side-bg: #F8F8F8;
+@title-bg: @side-bg;
+@border-color: #E5E5E5;
 @heavy-border-color: #888;
 
-@selected-bg: @main-blue;
-@selected-text: #ffffff;
-@hover-bg: @sub-blue;
-@hover-text: #333;
-
+@selected-bg: #bfc4da80;
+@hover-bg: #dcdcdc80;
 
 @weak-text: #777;
 @weak-bg: #F3F3F3;

diff --git a/packages/visualizer/src/component/detail-panel.tsx b/packages/visualizer/src/component/detail-panel.tsx
@@ -98,11 +98,10 @@ const DetailPanel = (): JSX.Element => {
           theme={{
             components: {
               Segmented: {
-                itemSelectedBg: '#D7D7D7',
+                itemSelectedBg: '#bfc4da50',
                 itemSelectedColor: '#000000',
                 // itemHoverColor: '#ffffff',
-                // itemHoverBg: '#A3D6D2', // @sub-blue
-                /* 这里是你的组件 token */
+                // itemHoverBg: '#A3D6D2',
               },
             },
           }}

diff --git a/packages/visualizer/src/component/detail-side.less b/packages/visualizer/src/component/detail-side.less
@@ -25,7 +25,6 @@
       line-height: 1.5;
 
       .meta-key {
-        font-weight: bold;
         width:100px;
         text-align: right;
         padding-right: 16px;

diff --git a/packages/visualizer/src/component/panel-title.less b/packages/visualizer/src/component/panel-title.less
@@ -6,6 +6,5 @@
   background: @title-bg;
   border-top: 1px solid @border-color;
   border-bottom: 1px solid @border-color;
-  // box-shadow: 1px 1px 5px @border-color;
   margin-top: -1px;
 }
diff --git a/packages/visualizer/src/component/sidebar.less b/packages/visualizer/src/component/sidebar.less
@@ -53,9 +53,7 @@
 
   .side-sub-title {
     padding: 0 @side-horizontal-padding;
-    font-weight: bold;
-    // margin-top: @side-vertical-spacing;
-    // color: @strong-text;
+    margin-bottom: 6px;
   }
 
   .side-item {
@@ -66,17 +64,11 @@
 
     &:hover {
       background: @hover-bg;
-      color: @hover-text;
     }
 
     &.selected
     {
       background: @selected-bg;
-      color: @selected-text;
-
-      .status-text {
-        color: @selected-text;
-      }
     }
 
     .side-item-content {
@@ -103,7 +95,7 @@
     }
 
     .status-icon-success {
-      color: rgb(58, 119, 58);
+      color:#2B8243;
     }
 
     .status-icon-fail {

diff --git a/packages/visualizer/src/component/sidebar.tsx b/packages/visualizer/src/component/sidebar.tsx
@@ -201,7 +201,7 @@ const Sidebar = (props: { hideLogo?: boolean; logoAction?: () => void }): JSX.El
         <div className="task-list">{sideList}</div>
         <div className="side-seperator side-seperator-line side-seperator-space-up" />
         <div className="task-meta-section">
-          <div className="task-meta">use Command + ⬆︎ / ⬇︎ to switch</div>
+          <div className="task-meta">switch: Command + Up / Down</div>
         </div>
       </div>
       <div className="bottom-controls">

diff --git a/packages/visualizer/src/component/timeline.tsx b/packages/visualizer/src/component/timeline.tsx
@@ -66,17 +66,18 @@ const TimelineWidget = (props: {
 
   const sizeRatio = 2;
 
-  const titleBg = 0xdddddd; // @title-bg
-  const sideBg = 0xf7f7f7; // @side-bg
+  const titleBg = 0xf8f8f8; // @title-bg
+  const sideBg = 0xffffff;
   const gridTextColor = 0;
   const shotBorderColor = 0x777777;
-  const gridLineColor = 0xcccccc; // @border-color
-  const gridHighlightColor = 0x06b1ab; // @main-blue
+  const gridLineColor = 0xe5e5e5; // @border-color
+  const gridHighlightColor = 0xbfc4da; // @selected-bg
+  const highlightMaskAlpha = 0.6;
   const timeContentFontSize = 20;
   const commonPadding = 12;
   const timeTextTop = commonPadding;
   const timeTitleBottom = timeTextTop * 2 + timeContentFontSize;
-  const highlightMaskAlpha = 0.6;
+  const hoverMaskColor = 0xdcdcdc; // @hover-bg
   const hoverMaskAlpha = 0.3;
 
   const closestScreenshotItemOnXY = (x: number, _y: number) => {
@@ -174,6 +175,11 @@ const TimelineWidget = (props: {
         titleBgSection.drawRect(0, 0, canvasWidth, timeTitleBottom);
         titleBgSection.endFill();
         gridsContainer.addChild(titleBgSection);
+        const titleBottomBorder = new PIXI.Graphics();
+        titleBottomBorder.beginFill(gridLineColor);
+        titleBottomBorder.drawRect(0, timeTitleBottom, canvasWidth, sizeRatio);
+        titleBottomBorder.endFill();
+        gridsContainer.addChild(titleBottomBorder);
 
         const gridHeight = canvasHeight;
         for (let i = 1; i <= gridCount; i++) {
@@ -252,7 +258,7 @@ const TimelineWidget = (props: {
         ) => {
           highlightMaskContainer.removeChildren();
 
-          const mask = (start: number | undefined, end: number | undefined, alpha: number) => {
+          const mask = (start: number | undefined, end: number | undefined, color: number, alpha: number) => {
             if (typeof start === 'undefined' || typeof end === 'undefined' || end === 0) {
               return;
             }
@@ -280,8 +286,8 @@ const TimelineWidget = (props: {
             highlightMaskContainer.addChild(mask);
           };
 
-          mask(start, end, highlightMaskAlpha);
-          mask(hoverStart, hoverEnd, hoverMaskAlpha);
+          mask(start, end, gridHighlightColor, highlightMaskAlpha);
+          mask(hoverStart, hoverEnd, hoverMaskColor, hoverMaskAlpha);
         };
         highlightMaskUpdater(props.highlightMask?.startMs, props.highlightMask?.endMs, 0, 0);
         containerUpdaterRef.current = highlightMaskUpdater;

diff --git a/packages/visualizer/src/index.less b/packages/visualizer/src/index.less
@@ -45,7 +45,7 @@ footer.mt-8{
   display: flex;
   flex-direction: column;
   height: 100%;
-  color: #000;
+  color: @main-text;
   font-family: -apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji";
   font-size: 14px;
   border-top: 1px solid @border-color;
@@ -70,7 +70,7 @@ footer.mt-8{
     flex-direction: row;
     flex-grow: 1;
     overflow: hidden;
-    background: @side-bg;
+    background: #FFF;
   }
 
   &.uploader-wrapper {