fix(fe/styles): style fixes

public/static/css/white.css

@@ -113,6 +113,7 @@
   background-color: white;
   border-radius: 0.8rem;
   margin-bottom: 2rem;
+  box-shadow: 0 5px 30px 0 rgb(31 38 135 / 10%);  
 }
 
 .container-padding {

src/client/web/src/components/control/tabs.tsx

@@ -14,7 +14,7 @@ import { colorClass } from "../visual/colors";
 const defaultIconProps: IconProps = {
   name: "RiFolder2Fill",
   size: "1.6rem",
-  color: `${colorClass("cyan0")}-font`,
+  color: `${colorClass("1")}-font`,
 };
 
 export interface Props {

src/client/web/src/components/dialog_settings.tsx

@@ -45,12 +45,12 @@ export class SettingsDialog extends React.Component<Props, State, {}> {
               preferencePane: {
                 name: "RiSettings3Fill",
                 size: "1.6rem",
-                color: "cyan0",
+                color: "cyan1",
               },
               managementPane: {
                 name: "RiWindowFill",
                 size: "1.6rem",
-                color: "cyan0",
+                color: "cyan1",
               },
             })}
             login={this.props.login}

src/client/web/src/components/panel_files.tsx

@@ -421,7 +421,7 @@ export class FilesPanel extends React.Component<Props, State, {}> {
         </div>
       ) : (
         <div className="v-mid item-cell">
-          <RiFile2Fill size="3rem" className="cyan0-font" />
+          <RiFile2Fill size="3rem" className="cyan1-font" />
         </div>
       );
 
@@ -481,13 +481,13 @@ export class FilesPanel extends React.Component<Props, State, {}> {
       );
 
       const detailColor = this.state.showDetail.has(item.name)
-        ? "cyan0"
+        ? "cyan1"
         : "grey0";
       const op = item.isDir ? (
         <div className={`v-mid item-cell item-op ${showOp}`}>
           <span onClick={() => this.select(item.name)} className="float-l">
             {isSelected
-              ? getIcon("RiCheckboxFill", "1.8rem", "cyan0")
+              ? getIcon("RiCheckboxFill", "1.8rem", "cyan1")
               : getIcon("RiCheckboxBlankFill", "1.8rem", "black1")}
           </span>
         </div>
@@ -502,7 +502,7 @@ export class FilesPanel extends React.Component<Props, State, {}> {
 
           <span onClick={() => this.select(item.name)} className="float-l">
             {isSelected
-              ? getIcon("RiCheckboxFill", "1.8rem", "cyan0")
+              ? getIcon("RiCheckboxFill", "1.8rem", "cyan1")
               : getIcon("RiCheckboxBlankFill", "1.8rem", "black1")}
           </span>
         </div>
@@ -569,14 +569,14 @@ export class FilesPanel extends React.Component<Props, State, {}> {
         ? `${dirPath}${item.name}`
         : `${dirPath}/${item.name}`;
 
-      const selectedIconColor = isSelected ? "cyan0-font" : "grey0-font";
+      const selectedIconColor = isSelected ? "cyan1-font" : "grey0-font";
       const descIconColor = this.state.showDetail.has(item.name)
-        ? "cyan0-font"
+        ? "cyan1-font"
         : "grey0-font";
       const icon = item.isDir ? (
         <RiFolder2Fill size="1.8rem" className="yellow0-font" />
       ) : (
-        <RiFile2Fill size="1.8rem" className="cyan0-font" />
+        <RiFile2Fill size="1.8rem" className="cyan1-font" />
       );
       const fileType = item.isDir
         ? this.props.msg.pkg.get("item.type.folder")
@@ -786,11 +786,11 @@ export class FilesPanel extends React.Component<Props, State, {}> {
 
     const rowsViewColorClass =
       this.props.ui.control.controls.get(filesViewCtrl) === "rows"
-        ? "cyan0-font"
+        ? "cyan1-font"
         : "black-font";
     const tableViewColorClass =
       this.props.ui.control.controls.get(filesViewCtrl) === "table"
-        ? "cyan0-font"
+        ? "cyan1-font"
         : "black-font";
     const itemListPane = (
       <div>

src/client/web/src/components/root_frame.tsx

@@ -88,17 +88,17 @@ export class RootFrame extends React.Component<Props, State, {}> {
                 filesPanel: {
                   name: "RiFolder2Fill",
                   size: "1.6rem",
-                  color: "cyan0",
+                  color: "cyan1",
                 },
                 uploadingsPanel: {
                   name: "RiUploadCloudFill",
                   size: "1.6rem",
-                  color: "blue0",
+                  color: "cyan1",
                 },
                 sharingsPanel: {
                   name: "RiShareBoxLine",
                   size: "1.6rem",
-                  color: "purple0",
+                  color: "cyan1",
                 },
               })}
               login={this.props.login}

src/client/web/src/components/topbar.tsx

@@ -98,7 +98,7 @@ export class TopBar extends React.Component<Props, State, {}> {
                   className={`margin-r-m ${showSettings}`}
                 >
                   {this.props.msg.pkg.get("settings")}
-                  {/* {getIcon("RiSettings4Line", "1.8rem", "cyan0")} */}
+                  {/* {getIcon("RiSettings4Line", "1.8rem", "cyan1")} */}
                 </button>,
 
                 <button onClick={this.logout} className={`${showLogin}`}>