Design adjustments

packages/frontend/src/view/components/Button.tsx

@@ -3,24 +3,31 @@ import React, { ComponentPropsWithoutRef, ElementType } from 'react'
 
 type ButtonProps<T extends ElementType> = {
   variant?: ButtonVariant
+  size?: ButtonSize
   className?: string
   as?: T
 } & ComponentPropsWithoutRef<T> &
   // eslint-disable-next-line @typescript-eslint/ban-types
   (T extends 'a' ? { disabled?: boolean } : {})
 
 type ButtonVariant = 'contained' | 'outlined'
-const mainClassNames =
-  'py-2.5 text-sm text-center font-semibold disabled:cursor-not-allowed px-8 rounded transition-colors'
-const classNameMap: Record<ButtonVariant, string> = {
+const variantClassNames: Record<ButtonVariant, string> = {
   contained:
     'bg-brand hover:bg-brand-darker disabled:bg-white disabled:bg-opacity-20',
   outlined:
     'bg-transparent border border-brand hover:bg-brand hover:bg-opacity-20',
 }
 
+type ButtonSize = 'sm' | 'md' | 'lg'
+const sizeClassNames: Record<ButtonSize, string> = {
+  sm: 'h-8 text-sm rounded',
+  md: 'h-10 text-md rounded-lg',
+  lg: 'h-12 text-md rounded-lg',
+}
+
 export function Button<T extends ElementType = 'button'>({
   variant = 'contained',
+  size = 'md',
   className,
   children,
   as,
@@ -29,7 +36,12 @@ export function Button<T extends ElementType = 'button'>({
   const Comp = as ?? 'button'
   return (
     <Comp
-      className={cx(mainClassNames, classNameMap[variant], className)}
+      className={cx(
+        'flex items-center justify-center px-8 py-2.5 font-semibold transition-colors disabled:cursor-not-allowed',
+        variantClassNames[variant],
+        sizeClassNames[size],
+        className
+      )}
       {...rest}
     >
       {children}

packages/frontend/src/view/components/Card.tsx

@@ -6,7 +6,7 @@ export function Card({ className, children, ...rest }: CardProps) {
   return (
     <div
       className={cx(
-        'Card group/card -mx-4 rounded-lg bg-gray-800 p-6 sm:mx-0',
+        'Card group/card -mx-4 rounded-none bg-gray-800 p-6 sm:mx-0 sm:rounded-lg',
         className
       )}
       {...rest}

packages/frontend/src/view/components/InfoBanner.tsx

@@ -17,7 +17,9 @@ export function InfoBanner({ children, className }: Props) {
       )}
     >
       <InfoIcon className="flex-shrink-0" />
-      <p className="ml-2 text-sm text-white">{children}</p>
+      <p className="ml-2 text-center text-sm text-white sm:text-left">
+        {children}
+      </p>
     </div>
   )
 }

packages/frontend/src/view/components/table/TablePreview.tsx

@@ -45,7 +45,7 @@ export function TablePreview(props: TablePreviewProps) {
       )}
       {props.children}
       {props.visible === 0 && (
-        <div className="flex h-20 items-center justify-center rounded bg-gray-900 text-center text-md text-zinc-500">
+        <div className="-mx-6 flex h-20 items-center justify-center rounded bg-gray-900 text-center text-md text-zinc-500 sm:mx-0">
           There are no {props.entryLongNamePlural} to view.
         </div>
       )}

packages/frontend/src/view/components/table/TableWithPagination.tsx

@@ -41,7 +41,7 @@ export function TableWithPagination(props: TableWithPaginationProps) {
       </SectionHeading>
       {props.children}
       {props.visible === 0 && (
-        <div className="flex h-10 items-center justify-center text-center text-md text-zinc-500">
+        <div className="-mx-6 flex h-20 items-center justify-center rounded bg-gray-900 text-center text-md text-zinc-500 sm:mx-0">
           {props.total === 'processing'
             ? `${props.entryLongNamePlural} are being processed...`
             : `There are no ${props.entryLongNamePlural} to view.`}

packages/frontend/src/view/pages/forced-actions/EscapeHatchActionPage.tsx

@@ -69,19 +69,19 @@ function EscapeHatchActionPage(props: Props) {
           <div className="hidden text-xxl font-semibold lg:block">
             Escape your funds
           </div>
-          <span className="text-sm font-semibold text-zinc-500 lg:mt-3">
+          <span className="text-md font-medium text-zinc-500 lg:mt-3">
             The exchange is frozen, preventing it from executing regular
             operations or supporting standard actions.
           </span>
-          <span className="text-sm font-semibold text-zinc-500">
+          <span className="text-md font-medium text-zinc-500">
             You have the option to request a withdrawal of the entire value of
             any position by activating an 'escape hatch.' This process involves
             interacting with an Ethereum contract, which calculates the total
             value of the position, including any open trades and funding rates.
           </span>
           <span>The escape process consists of three steps:</span>
           <OrderedList items={steps} />
-          <span className="text-sm font-semibold text-zinc-500">
+          <span className="text-md font-medium text-zinc-500">
             Please note, the execution of an Escape can be expensive due to
             Ethereum gas cost.
           </span>
@@ -106,7 +106,9 @@ function EscapeHatchActionPage(props: Props) {
                 </span>
               </span>
             </div>
-            <Button className="w-full">Initiate Escape</Button>
+            <Button className="w-full" size="lg">
+              Initiate Escape
+            </Button>
           </form>
         </Card>
       </ContentWrapper>

packages/frontend/src/view/pages/forced-actions/NewSpotForcedWithdrawalPage.tsx

@@ -105,10 +105,13 @@ function NewSpotForcedWithdrawalPage(props: Props) {
               </ForcedActionCard>
             </div>
             <div className="flex flex-col gap-2">
-              <Button className="w-full">Prepare for withdrawal</Button>
+              <Button className="w-full" size="lg">
+                Prepare for withdrawal
+              </Button>
               <Button
                 as="a"
                 className="w-full"
+                size="lg"
                 variant="outlined"
                 href={`/users/${props.starkKey.toString()}`}
               >

packages/frontend/src/view/pages/forced-actions/components/NewPerpetualForcedTradeFormContent.tsx

@@ -52,12 +52,13 @@ export function NewPerpetualForcedTradeFormContent(
         </ForcedActionCard>
       </div>
       <div className="flex flex-col gap-2">
-        <Button className="w-full" id={FormId.SubmitButton}>
+        <Button className="w-full" size="lg" id={FormId.SubmitButton}>
           Create {label} offer
         </Button>
         <Button
           as="a"
           className="w-full"
+          size="lg"
           variant="outlined"
           href={`/users/${props.starkKey.toString()}`}
         >

packages/frontend/src/view/pages/forced-actions/components/NewPerpetualForcedWithdrawalFormContent.tsx

@@ -33,12 +33,13 @@ export function NewPerpetualForcedWithdrawalFormContent(
         </ForcedActionCard>
       </div>
       <div className="flex flex-col gap-2">
-        <Button className="w-full" id={FormId.SubmitButton}>
+        <Button className="w-full" size="lg" id={FormId.SubmitButton}>
           Prepare for withdrawal
         </Button>
         <Button
           as="a"
           className="w-full"
+          size="lg"
           variant="outlined"
           href={`/users/${props.starkKey.toString()}`}
         >

packages/frontend/src/view/pages/home/HomePage.tsx

@@ -147,7 +147,7 @@ function Tables(props: HomePageProps) {
           />
         </TablePreview>
       </Card>
-      <Card className="hidden flex-col gap-[33px] xl:flex">
+      <Card className="hidden flex-col gap-[30px] xl:flex">
         {...secondColumnTables}
       </Card>
       {secondColumnTables.map((table, i) => {

packages/frontend/src/view/pages/home/components/HomeStatistics.tsx

@@ -95,5 +95,5 @@ function formatStatisticsCount(count: number) {
     return count.toString()
   }
 
-  return `${(count / 1000000).toFixed(2).replace('.', ',')}M`
+  return `${(count / 1000000).toFixed(2)}M`
 }

packages/frontend/src/view/pages/tutorial/TutorialPage.tsx

@@ -1,8 +1,6 @@
 import { PageContext } from '@explorer/shared'
 import React from 'react'
 
-import { Card } from '../../components/Card'
-import { ContentWrapper } from '../../components/page/ContentWrapper'
 import { Page } from '../../components/page/Page'
 import { reactToHtml } from '../../reactToHtml'
 
@@ -23,14 +21,10 @@ export function TutorialPage(props: TutorialPageProps) {
       description={`Tutorial explaining ${props.slug}`}
       path={`/tutorials/${props.slug}`}
     >
-      <ContentWrapper>
-        <Card>
-          <article
-            className="prose prose-invert mx-auto lg:prose-xl"
-            dangerouslySetInnerHTML={{ __html: props.articleContent }}
-          ></article>
-        </Card>
-      </ContentWrapper>
+      <article
+        className="prose prose-invert mx-auto mt-16 lg:prose-xl prose-a:text-blue-500 hover:prose-a:text-blue-600 prose-a:prose-headings:text-white prose-a:prose-headings:no-underline hover:prose-a:prose-headings:text-white prose-blockquote:border-slate-800 prose-pre:bg-slate-800 prose-hr:border-slate-800"
+        dangerouslySetInnerHTML={{ __html: props.articleContent }}
+      ></article>
     </Page>
   )
 }

packages/frontend/src/view/pages/user/UserRecoverPage.tsx

@@ -68,7 +68,7 @@ function UserRecoverPage(props: UserRegisterPageProps) {
               <p className="ml-2 font-semibold text-amber-500">Unknown</p>
             </div>
           </div>
-          <p className="mt-6 text-sm font-semibold text-zinc-500">
+          <p className="mt-3 text-sm font-semibold text-zinc-500">
             Ethereum address
           </p>
           <EtherscanLink
@@ -83,7 +83,7 @@ function UserRecoverPage(props: UserRegisterPageProps) {
           </EtherscanLink>
 
           <Button
-            className="mt-3 w-full"
+            className="mt-6 w-full"
             id={RECOVER_STARK_KEY_BUTTON_ID}
             data-instance-name={props.context.instanceName}
             data-chain-id={props.context.chainId}

packages/frontend/src/view/pages/user/UserRegisterPage.tsx

@@ -51,7 +51,7 @@ function UserRegisterPage(props: UserRegisterPageProps) {
           <InlineEllipsis className="mt-1 w-full max-w-[250px] font-semibold text-white sm:max-w-[80%] md:max-w-[100%] lg:max-w-[50%] ">
             {props.context.user.starkKey.toString()}
           </InlineEllipsis>
-          <p className="mt-6 text-sm font-semibold text-zinc-500">
+          <p className="mt-3 text-sm font-semibold text-zinc-500">
             Ethereum address
           </p>
           <EtherscanLink
@@ -65,9 +65,10 @@ function UserRegisterPage(props: UserRegisterPageProps) {
             </InlineEllipsis>
           </EtherscanLink>
           <Button
-            className="mt-3 w-full"
+            className="mt-6 w-full"
             id={REGISTER_STARK_KEY_BUTTON_ID}
             data-exchange-address={props.exchangeAddress.toString()}
+            size="lg"
           >
             Register your Ethereum address
           </Button>

packages/frontend/src/view/pages/user/components/FinalizeEscapeForm.tsx

@@ -54,7 +54,9 @@ export function FinalizeEscapeForm(props: Props) {
       data-props={formPropsJson}
       data-user={userJson}
     >
-      <Button className="ml-auto w-32 !px-0">Finalize escape</Button>
+      <Button className="ml-auto w-32 !px-0" size="sm">
+        Finalize escape
+      </Button>
     </form>
   )
 }

packages/frontend/src/view/pages/user/components/UserAssetTable.tsx

@@ -50,7 +50,11 @@ export function UserAssetsTable(props: UserAssetsTableProps) {
         const isDisabled = entry.balance <= 0n && entry.action === 'WITHDRAW'
         return {
           cells: [
-            <AssetWithLogo type="full" assetInfo={assetToInfo(entry.asset)} />,
+            <AssetWithLogo
+              type="full"
+              assetInfo={assetToInfo(entry.asset)}
+              className="min-w-max"
+            />,
             <div className="flex flex-col">
               <span className="text-lg font-medium text-white">
                 {formatAmount(entry.asset, entry.balance)}
@@ -78,7 +82,8 @@ export function UserAssetsTable(props: UserAssetsTableProps) {
                       entry,
                       isUserRegistered
                     )}
-                    className="block"
+                    className="w-32"
+                    size="sm"
                     disabled={isDisabled}
                   >
                     {getActionButtonLabel(entry.action)}

packages/frontend/src/view/pages/user/components/UserProfile.tsx

@@ -25,11 +25,11 @@ export function UserProfile({
   const isMine = user?.starkKey === starkKey
   return (
     <Card>
-      <p className="text-sm font-semibold text-zinc-500">Stark key</p>
+      <p className="mb-1.5 text-sm font-semibold text-zinc-500">Stark key</p>
       <LongHash className="mt-3 font-semibold text-white" withCopy>
         {starkKey.toString()}
       </LongHash>
-      <p className="mt-6 text-sm font-semibold text-zinc-500 ">
+      <p className="mb-1.5 mt-6 text-sm font-semibold text-zinc-500 ">
         Ethereum address
       </p>
       {ethereumAddress ? (
@@ -45,7 +45,7 @@ export function UserProfile({
         </EtherscanLink>
       ) : (
         <>
-          <div className="mt-3 md:flex md:items-center md:justify-between">
+          <div className="md:flex md:items-center md:justify-between">
             {user?.address && isMine ? (
               <EtherscanLink
                 chainId={chainId}
@@ -65,6 +65,7 @@ export function UserProfile({
                 as="a"
                 href="/users/register"
                 className="mt-3 block md:mt-0"
+                size="sm"
               >
                 Register
               </Button>

packages/frontend/src/view/pages/user/components/UserQuickActionsTable.tsx

@@ -159,7 +159,9 @@ function WithdrawableAssets(
                 starkKey={props.starkKey}
                 exchangeAddress={props.exchangeAddress}
               >
-                <Button className="ml-auto w-32 !px-0">Withdraw now</Button>
+                <Button className="ml-auto w-32 !px-0" size="sm">
+                  Withdraw now
+                </Button>
               </RegularWithdrawalForm>
             )}
           </div>
@@ -216,6 +218,7 @@ function OffersToFinalize(
               as="a"
               href={`/offers/${offer.id}`}
               className="ml-auto w-32 !px-0"
+              size="sm"
             >
               Go to offer
             </Button>