chores: ui improvements

SocketDotTech · Feb 4, 2024 · 58c7001 · 58c7001
1 parent 9b54ba6
commit 58c7001
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 14 deletions.
diff --git a/src/components/TokenInput/TokenSelect.tsx b/src/components/TokenInput/TokenSelect.tsx
@@ -111,7 +111,7 @@ export const TokenSelect = (props: Props) => {
         <button
           onClick={() => setOpenTokenList(!openTokenList)}
           className={`skt-w skt-w-input skt-w-button skt-w-flex skt-w-items-center skt-w-flex-1 skt-w-bg-widget-interactive skt-w-flex-shrink-0 skt-w-flex-nowrap skt-w-w-auto skt-w-overflow-hidden skt-w-p-2 skt-w-text-widget-on-interactive`}
-          style={{ borderRadius: `calc(1.2rem * ${borderRadius})` }}
+          style={{ borderRadius: `calc(1rem * ${borderRadius})` }}
         >
           <img
             src={activeToken?.logoURI}

diff --git a/src/components/Widget.tsx b/src/components/Widget.tsx
@@ -186,19 +186,18 @@ const SingleTxMessage = () => {
     dispatch(setIsSettingsModalOpen(true));
   }
 
+  if (singleTxOnlyFromDev) return null;
   if (!singleTxOnly || sourceChainId === destChainId)
     return <p className="skt-w skt-w-h-5"></p>; // to prevent the layout shift
   return (
     <p className="skt-w skt-w-text-sm skt-w-text-widget-secondary skt-w-pr-3 skt-w-pl-3.5 skt-w-flex skt-w-items-center skt-w-h-5">
-      Showing single transaction routes only{" "}
-      {!singleTxOnlyFromDev && (
-        <button
-          onClick={openSettingsModal}
-          className="skt-w skt-w-button skt-w-input skt-w-ml-1.5 skt-w-flex"
-        >
-          <Edit className="skt-w skt-w-w-3.5 skt-w-h-3.5 skt-w-text-widget-accent" />
-        </button>
-      )}
+      <span>Showing single transaction routes only</span>
+      <button
+        onClick={openSettingsModal}
+        className="skt-w skt-w-button skt-w-input skt-w-ml-1.5 skt-w-flex"
+      >
+        <Edit className="skt-w skt-w-w-3.5 skt-w-h-3.5 skt-w-text-widget-accent" />
+      </button>
     </p>
   );
 };
diff --git a/src/components/common/Button.tsx b/src/components/common/Button.tsx
@@ -28,11 +28,11 @@ export const Button = (props: ButtonProps) => {
     <button
       onClick={onClick}
       disabled={disabled}
-      className={`skt-w skt-w-input skt-w-button skt-w-h-14 skt-w-px-3 skt-w-flex skt-w-items-center skt-w-justify-center skt-w-transition-all skt-w-duration-100 skt-w-ease-linear skt-w-w-full skt-w-bg-widget-accent skt-w-text-widget-onAccent hover:skt-w-bg-opacity-90 disabled:skt-w-border-widget-primary/50 skt-w-border-transparent skt-w-font-medium
-      disabled:skt-w-opacity-70
+      className={`skt-w skt-w-input skt-w-button skt-w-h-14 skt-w-px-3 skt-w-flex skt-w-items-center skt-w-justify-center skt-w-transition-all skt-w-duration-100 skt-w-ease-linear skt-w-w-full skt-w-bg-widget-accent skt-w-text-widget-onAccent hover:skt-w-bg-opacity-90 disabled:skt-w-border-widget-primary/50 skt-w-border-transparent skt-w-font-semibold
+      disabled:skt-w-opacity-50
       skt-w-border 
       ${classNames || ""}`}
-      style={{ borderRadius: `calc(0.625rem * ${borderRadius})` }}
+      style={{ borderRadius: `calc(1rem * ${borderRadius})` }}
     >
       {isLoading && <Spinner size={4} />}{" "}
       <span className="skt-w-ml-2">{children}</span>

diff --git a/src/stories/Test.stories.tsx b/src/stories/Test.stories.tsx
@@ -123,9 +123,22 @@ const Customize = {
   onInteractive: "rgb(240,240,240)",
   text: "rgb(255,255,255)",
   secondaryText: "rgb(200,200,200)",
+  borderRadius: 1
   // fontFamily: '"Comic Sans MS", cursive'
   // width: 400
 };
+const darkTheme = {
+  secondary: 'rgb(37,42,46)',
+  primary: 'rgb(24,28,31)',
+  accent: 'rgb(120,79,254)',
+  onAccent: 'rgb(255, 255, 255)',
+  interactive: 'rgb(37,42,46)',
+  onInteractive: 'rgb(255,255,255)',
+  text: 'rgb(255,255,255)',
+  secondaryText: 'rgb(199,210,218)',
+  fontFamily: "'Inter', sans-serif",
+  borderRadius: 1,
+};
 
 function showAlert(value) {
   console.log("showing alert", value);
@@ -141,7 +154,7 @@ Default.args = {
   enableSameChainSwaps: true,
   // title: [displayName],
   // includeBridges: ['hyphen'],
-  // singleTxOnly: true,
+  singleTxOnly: true,
   // excludeBridges: ['hop', 'polygon-bridge'],
   enableRefuel: true,
   // onBridgeSuccess: showAlert,