Merge pull request #2654 from ethereum/spt

Style improvements

apps/remix-ide/src/assets/css/themes/bootstrap-flatly.min.css

@@ -34,6 +34,7 @@
 	--dark:#7b8a8b;
 	--body-bg: #fff;
 	--text-bg-mark: #fcf8e3;
+	--custom-select: #fff;
 	--breakpoint-xs:0;
 	--breakpoint-sm:576px;
 	--breakpoint-md:768px;

apps/remix-ide/src/assets/css/themes/bootstrap-spacelab.min.css

@@ -35,6 +35,7 @@
     --dark:#333;
     --body-bg:#fff;
     --text-bg-mark: #fcf8e3;
+    --custom-select: #fff;
     --breakpoint-xs:0;
     --breakpoint-sm:576px;
     --breakpoint-md:768px;

apps/remix-ide/src/assets/css/themes/remix-black_undtds.css

@@ -23,6 +23,7 @@
   --dark: #1a1a1a;
   --text: #babbcc;
   --body-bg: #1a1a1a;
+  --custom-select: #252525;
   --text-bg-mark: #a5a5a5;
   --breakpoint-xs: 0;
   --breakpoint-sm: 576px;
@@ -3639,7 +3640,7 @@ input[type="submit"].btn-block {
 .nav-tabs .nav-item.show .nav-link,
 .nav-tabs .nav-link.active {
   color: #d5d5d5;
-  background-color: #252525;
+  background-color: #var(--custom-select);
   border-color: #37373B;
   font-weight: bolder;
 }

apps/remix-ide/src/assets/css/themes/remix-candy_ikhg4m.css

@@ -23,6 +23,7 @@
   --text: #11556c;
   --body-bg: #d5efff;
   --text-bg-mark: #fcf8e3;
+  --custom-select: #ffffff;
   --breakpoint-xs: 0;
   --breakpoint-sm: 576px;
   --breakpoint-md: 768px;
@@ -3652,7 +3653,7 @@ input[type="button"].btn-block {
   line-height: 1.5;
   color: #495057;
   vertical-align: middle;
-  background-color: #fffff6;
+  background-color: var(--custom-select);
   background-image: url("data:image/svg+xml,%3Csvg width='8' height='14' viewBox='0 0 8 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M7.02426 9.48731C7.18128 9.29086 7.04141 9 6.78992 9L1.21005 9C0.958559 9 0.818689 9.29086 0.975709 9.48731L3.76564 12.9778C3.88574 13.1281 4.11423 13.1281 4.23433 12.9778L7.02426 9.48731Z' fill='%238A93B0'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M7.02426 4.51269C7.18128 4.70914 7.04141 5 6.78992 5L1.21005 5C0.958559 5 0.818689 4.70914 0.975709 4.51269L3.76564 1.02218C3.88574 0.871926 4.11423 0.871926 4.23433 1.02218L7.02426 4.51269Z' fill='%238A93B0'/%3E%3C/svg%3E%0A");
   background-repeat: no-repeat;
   background-size: 8px;

apps/remix-ide/src/assets/css/themes/remix-dark_tvx1s2.css

@@ -24,6 +24,7 @@
   --text: #babbcc;
   --text-background: #222336;
   --text-bg-mark: #8388b2;
+  --custom-select: #35384c;
   --body-bg: #222336;
   --breakpoint-xs: 0;
   --breakpoint-sm: 576px;
@@ -1619,7 +1620,8 @@ pre code {
   font-weight: 400;
   line-height: 1.25;
   color: #dfe1ea !important;
-  background-color: #35384C !important;
+  background-color: var(--custom-select)
+ !important;
   background-clip: padding-box;
   border: none !important;
   border-radius: 2px !important;
@@ -1638,7 +1640,8 @@ pre code {
 }
 .form-control:focus {
   color: #dfe1ea;
-  background-color: #35384c;
+  background-color: var(--custom-select)
+;
   border-color: #27c6ff;
   outline: 0;
   box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075),
@@ -1655,7 +1658,8 @@ pre code {
 }
 select.form-control:focus::-ms-value {
   color: #dfe1ea;
-  background-color: #35384c;
+  background-color: var(--custom-select)
+;
 }
 .form-control-file,
 .form-control-range {
@@ -3357,7 +3361,8 @@ input[type="submit"].btn-block {
 }
 .custom-select:focus::-ms-value {
   color: #dfe1ea;
-  background-color: #35384c;
+  background-color: var(--custom-select)
+;
 }
 .custom-select[multiple],
 .custom-select[size]:not([size="1"]) {
@@ -3425,7 +3430,8 @@ input[type="submit"].btn-block {
   font-weight: 400;
   line-height: 1.25;
   color: #dfe1ea;
-  background-color: #35384c;
+  background-color: var(--custom-select)
+;
   border: 1px solid transparent;
   border-radius: 2px;
 }

apps/remix-ide/src/assets/css/themes/remix-light_powaqg.css

@@ -23,6 +23,7 @@
   --text: #3b445e;
   --body-bg: #eef1f6;
   --text-bg-mark: #fcf8e3;
+  --custom-select: #fff;
   --breakpoint-xs: 0;
   --breakpoint-sm: 576px;
   --breakpoint-md: 768px;

apps/remix-ide/src/assets/css/themes/remix-midcentury_hrzph3.css

@@ -23,6 +23,7 @@
   --text: #11556c;
   --body-bg: #DBE2E0;
   --text-bg-mark: #fcf8e3;
+  --custom-select: #eeede9;
   --breakpoint-xs: 0;
   --breakpoint-sm: 576px;
   --breakpoint-md: 768px;
@@ -1790,7 +1791,7 @@ pre code {
   font-weight: 400;
   line-height: 1.5;
   color: #495057;
-  background-color: #dddddd;
+  background-color: #var(--custom-select);
   background-clip: padding-box;
   border: 1px solid #ced4da;
   border-radius: 2px !important;
@@ -3654,7 +3655,7 @@ input[type="button"].btn-block {
   line-height: 1.5;
   color: #495057;
   vertical-align: middle;
-  background-color: #dddddd;
+  background-color: #var(--custom-select);
   background-image: url("data:image/svg+xml,%3Csvg width='8' height='14' viewBox='0 0 8 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M7.02426 9.48731C7.18128 9.29086 7.04141 9 6.78992 9L1.21005 9C0.958559 9 0.818689 9.29086 0.975709 9.48731L3.76564 12.9778C3.88574 13.1281 4.11423 13.1281 4.23433 12.9778L7.02426 9.48731Z' fill='%238A93B0'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M7.02426 4.51269C7.18128 4.70914 7.04141 5 6.78992 5L1.21005 5C0.958559 5 0.818689 4.70914 0.975709 4.51269L3.76564 1.02218C3.88574 0.871926 4.11423 0.871926 4.23433 1.02218L7.02426 4.51269Z' fill='%238A93B0'/%3E%3C/svg%3E%0A");
   background-repeat: no-repeat;
   background-size: 8px;
@@ -3775,13 +3776,13 @@ input[type="button"].btn-block {
   outline: none;
 }
 .custom-range:focus::-webkit-slider-thumb {
-  box-shadow: 0 0 0 1px #dddddd, 0px 0px 5px #00bbff;
+  box-shadow: 0 0 0 1px #var(--custom-select), 0px 0px 5px #00bbff;
 }
 .custom-range:focus::-moz-range-thumb {
-  box-shadow: 0 0 0 1px #dddddd, 0px 0px 5px #00bbff;
+  box-shadow: 0 0 0 1px #var(--custom-select), 0px 0px 5px #00bbff;
 }
 .custom-range:focus::-ms-thumb {
-  box-shadow: 0 0 0 1px #dddddd, 0px 0px 5px #00bbff;
+  box-shadow: 0 0 0 1px #var(--custom-select), 0px 0px 5px #00bbff;
 }
 .custom-range::-moz-focus-outer {
   border: 0;

libs/remix-ui/panel/src/lib/plugins/panel-header.tsx

@@ -26,9 +26,9 @@ const RemixUIPanelHeader = (props: RemixPanelProps) => {
 
   return (
     <header className='d-flex flex-column'>
-      <div className="swapitHeader px-3 pt-3 pb-0 d-flex flex-row">
-        <h6 className="mb-3" data-id='sidePanelSwapitTitle'>{plugin?.profile.displayName || plugin?.profile.name}</h6>
-        <div className="d-flex flex-row">
+      <div className="swapitHeader px-3 pt-2 pb-0 d-flex flex-row">
+        <h6 className="mb-2" data-id='sidePanelSwapitTitle'>{plugin?.profile.displayName || plugin?.profile.name}</h6>
+        <div className="mt-2 d-flex flex-row">
           <div className="d-flex flex-row">
             {plugin?.profile?.maintainedBy?.toLowerCase() === "remix" && (<i aria-hidden="true" className="text-success mt-1 px-1 fas fa-check" title="Maintained by Remix"></i>)}
           </div>
@@ -37,7 +37,7 @@ const RemixUIPanelHeader = (props: RemixPanelProps) => {
           </div>
         </div>
       </div>
-      <div className={`bg-light p-3 pt-1 border-bottom flex-column ${toggleExpander ? "d-flex" : "d-none"}`}>
+      <div className={`bg-light mx-3 mb-2 p-3 pt-1 border-bottom flex-column ${toggleExpander ? "d-flex" : "d-none"}`}>
         {plugin?.profile?.author && <span className="d-flex flex-row align-items-center">
           <label className="mb-0 pr-2">Author:</label>
           <span> { plugin?.profile.author } </span>
@@ -49,7 +49,7 @@ const RemixUIPanelHeader = (props: RemixPanelProps) => {
         {plugin?.profile?.documentation && <span className="d-flex flex-row align-items-center">
           <label className="mb-0 pr-2">Documentation:</label>
           <span>
-            <a href={plugin?.profile?.documentation} className="titleInfo mb-2" title="link to documentation" target="_blank" rel="noreferrer"><i aria-hidden="true" className="fas fa-book"></i></a>
+            <a href={plugin?.profile?.documentation} className="titleInfo p-0 mb-2" title="link to documentation" target="_blank" rel="noreferrer"><i aria-hidden="true" className="fas fa-book"></i></a>
           </span>
         </span>}
         {plugin?.profile?.description && <span className="d-flex flex-row align-items-baseline">

libs/remix-ui/search/src/lib/components/Search.tsx

@@ -13,7 +13,7 @@ export const SearchTab = props => {
 
   return (
     <>
-      <div className="search_plugin_search_tab px-2 pb-4">
+      <div className="search_plugin_search_tab pr-4 px-2 pb-4">
         <SearchProvider plugin={plugin}>
           <FindContainer></FindContainer>
           <Include></Include>

libs/remix-ui/workspace/src/lib/css/remix-ui-workspace.css

@@ -88,7 +88,7 @@
   .custom-dropdown-items {
     padding: 0.25rem 0.25rem;
     border-radius: .25rem;
-    background: var(--light);
+    background: var(--custom-select);
   }
   .custom-dropdown-items a {
     border-radius: .25rem;

libs/remix-ui/workspace/src/lib/remix-ui-workspace.tsx

@@ -188,7 +188,7 @@ export function Workspace () {
   }
 
   return (
-    <div className='remixui_container'>
+    <div className='px-2 remixui_container'>
       <div className='remixui_fileexplorer' data-id="remixUIWorkspaceExplorer" onClick={resetFocus}>
         <div>
           <header>