fix: changed styles (#253)

* fix: changed styles * fix: changed styles overlay * fix: changed styles overlay * fix: "dev" badges have gone right; spaces around on/off button should be equal; if there is no "dev" badge, title should use all the space --------- Co-authored-by: Nikita Teremovskiy <[email protected]>
dapplets · Dec 11, 2023 · 410b61d · 410b61d
1 parent 99512d3
commit 410b61d
Show file tree

Hide file tree

Showing 15 changed files with 470 additions and 565 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -1,23 +1,20 @@
 {
-    "editor.codeActionsOnSave": {
-        "source.fixAll": true
-    },
-    "editor.formatOnSave": true,
-    "editor.defaultFormatter": "esbenp.prettier-vscode",
-    "css.validate": false,
-    "less.validate": false,
-    "scss.validate": false,
-    "stylelint.validate": [
-        "css",
-        "scss"
-    ],
-    "[css]": {
-        "editor.defaultFormatter": "stylelint.vscode-stylelint"
-    },
-    "[scss]": {
-        "editor.defaultFormatter": "stylelint.vscode-stylelint"
-    },
-    "stylelint.customSyntax": "postcss-scss",
-    "files.eol": "\n",
-    "editor.tabSize": 2
-}
+  "editor.codeActionsOnSave": {
+    "source.fixAll": "explicit"
+  },
+  "editor.formatOnSave": true,
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "css.validate": false,
+  "less.validate": false,
+  "scss.validate": false,
+  "stylelint.validate": ["css", "scss"],
+  "[css]": {
+    "editor.defaultFormatter": "stylelint.vscode-stylelint"
+  },
+  "[scss]": {
+    "editor.defaultFormatter": "stylelint.vscode-stylelint"
+  },
+  "stylelint.customSyntax": "postcss-scss",
+  "files.eol": "\n",
+  "editor.tabSize": 2
+}
diff --git a/src/contentscript/overlay/root/components/Dapplet/Dapplet.module.scss b/src/contentscript/overlay/root/components/Dapplet/Dapplet.module.scss
@@ -11,8 +11,6 @@
   margin-bottom: 16px;
   padding: 10px 17px;
 
-
-
   background: #fff;
   border-radius: 10px;
   box-shadow: 0 1px 2px rgb(225 225 225 / 20%), 0 -1px 2px rgb(225 225 225 / 20%),
@@ -23,20 +21,21 @@
   display: flex;
   flex: 1 1 auto;
   flex-direction: column;
+  justify-content: space-between;
+
+  width: 325px;
   padding: 0 0 0 13px;
 }
 
+.header {
+  width: 100%;
+}
+
 .blockTop {
   display: flex;
   align-items: center;
+  width: 100%;
   transition: all 0.2s ease;
-
-  .blockIcons {
-    display: flex;
-    justify-content: space-between;
-    width: 34px;
-    margin: 0 57px 0 13px;
-  }
 }
 
 .errorIcon {
@@ -51,15 +50,8 @@
 }
 
 .errorTitle {
-  .blockIcons {
-    display: flex;
-    justify-content: space-between;
-    width: 3px;
-    margin: 0 57px 0 13px;
-  }
-
   h2 {
-    color: $error!important;
+    color: $error !important;
   }
 }
 
@@ -69,7 +61,6 @@
   width: 277px;
   padding: 5px 0 13px;
 
-
   font-size: 12px;
   font-weight: 400;
   line-height: 120%;
@@ -170,8 +161,8 @@
   width: 25px;
   height: 20px;
   margin-left: 10px;
+  padding: 5px;
 
-
   font-size: 10px;
   font-weight: 500;
   line-height: 100%;
@@ -190,12 +181,22 @@
   height: 24px;
 }
 
+.loaderOrSwitchContainer {
+  position: relative;
+
+  display: flex;
+  justify-content: center;
+
+  width: 32px;
+  margin: 0 0 0 17px;
+}
+
 .loader {
-  display: inline-block;
+  display: block;
 
   width: 20px;
   height: 20px;
-  margin-left: 12px;
+  margin: 0 6px;
 
   background-image: url('../../assets/svg/loaderSettings.svg');
   background-repeat: no-repeat;
@@ -206,7 +207,6 @@
 
   padding-bottom: 5px;
 
-
   font-size: 12px;
   font-weight: 400;
   line-height: 120%;

diff --git a/src/contentscript/overlay/root/components/Dapplet/adaptive.scss b/src/contentscript/overlay/root/components/Dapplet/adaptive.scss
@@ -10,19 +10,8 @@
     width: calc(100% - 50px);
   }
 
-  .blockIcons {
-    margin: 0;
-  }
-
   .blockTop {
     display: flex;
-
-    .blockIcons {
-      display: flex;
-      justify-content: space-between;
-      width: 34px;
-      margin: 0 8.5% 0 4.5%;
-    }
   }
 
   .blockText {

diff --git a/src/contentscript/overlay/root/components/Dapplet/index.tsx b/src/contentscript/overlay/root/components/Dapplet/index.tsx
@@ -110,15 +110,12 @@ export const Dapplet: FC<DappletProps> = (props: DappletProps) => {
               </span>
             ) : null}
             <DappletTitle isShowDescription={false} title={title}>
-              {dapplet.sourceRegistry.isDev && <span className={styles.isDev}>dev</span>}
+              {dapplet.sourceRegistry.isDev ? <div className={styles.isDev}>dev</div> : null}
             </DappletTitle>
-
-            <div className={cn(styles.blockIcons)}></div>
-
             {!isUnderConstruction && (
-              <>
+              <div className={styles.loaderOrSwitchContainer}>
                 {loadHome ? (
-                  <span className={styles.loader}></span>
+                  <div className={styles.loader}></div>
                 ) : (
                   <Switch
                     className={isActive ? 'active-switch' : 'not-active-switch'}
@@ -129,7 +126,7 @@ export const Dapplet: FC<DappletProps> = (props: DappletProps) => {
                     }}
                   />
                 )}
-              </>
+              </div>
             )}
           </div>
           {error ? <span className={styles.moduleError}>{'Dapplet error'}</span> : null}

diff --git a/src/contentscript/overlay/root/components/DappletTitle/DappletTitle.module.scss b/src/contentscript/overlay/root/components/DappletTitle/DappletTitle.module.scss
@@ -1,11 +1,11 @@
-@import "../../assets/styles/color.variables";
-@import "../../assets/styles/null";
-@import "./adaptive";
+@import '../../assets/styles/color.variables';
+@import '../../assets/styles/null';
+@import './adaptive';
 
 .BlockTitleCard {
   display: flex;
+  flex-grow: 1;
   align-items: center;
-  width: 193px;
 
   .titleCard {
     font-size: 14px;
@@ -33,4 +33,3 @@
     }
   }
 }
-
diff --git a/src/contentscript/overlay/root/components/DappletTitle/index.tsx b/src/contentscript/overlay/root/components/DappletTitle/index.tsx
@@ -6,15 +6,16 @@ export interface DappletTitleProps {
   title: string
   isShowDescription?: boolean
   children?: ReactChild | ReactNode
-  className?: any
+  className?
 }
 export const DappletTitle: FC<DappletTitleProps> = (props: DappletTitleProps) => {
   const { title, children, className } = props
 
   return (
     <div className={cn(styles.BlockTitleCard)} data-testid="dapplet-title">
-      <h2 className={cn(styles.titleCard, className)}>{title}</h2>
-
+      <div>
+        <h2 className={cn(styles.titleCard, className)}>{title}</h2>
+      </div>
       {children}
     </div>
   )

diff --git a/src/contentscript/overlay/root/components/DevModulesList/DevModulesList.module.scss b/src/contentscript/overlay/root/components/DevModulesList/DevModulesList.module.scss
@@ -252,6 +252,7 @@
   position: relative;
   top: -15px;
   right: 0;
+  background: inherit;
 }
 
 .noneVisible {

diff --git a/src/contentscript/overlay/root/components/Overlay/Overlay.module.scss b/src/contentscript/overlay/root/components/Overlay/Overlay.module.scss
@@ -41,8 +41,6 @@
   overflow: -moz-scrollbars-none;
 
   height: 100%;
-  padding: 0 0 5px;
-
   background: $overlay-bg;
 
   -ms-overflow-style: none;
@@ -114,7 +112,6 @@
 .amount {
   margin-left: 5px;
 
-
   font-size: 10px;
   font-weight: 700;
   line-height: 100%;

diff --git a/src/contentscript/overlay/root/components/Switch/Switch.module.scss b/src/contentscript/overlay/root/components/Switch/Switch.module.scss
@@ -1,8 +1,9 @@
-@import "../../assets/styles/color.variables";
-@import "../../assets/styles/null";
+@import '../../assets/styles/color.variables';
+@import '../../assets/styles/null';
 
 .wrapper {
   position: relative;
+  margin-left: auto;
 }
 
 .input {
@@ -32,7 +33,7 @@
   transition: all 0.3s ease 0s;
 
   &::before {
-    content: "";
+    content: '';
 
     position: absolute;
     top: 50%;