refactor: increase table font size

azat-io · Oct 19, 2024 · f6d8f09 · f6d8f09
1 parent 1a5f45c
commit f6d8f09
Show file tree

Hide file tree

Showing 8 changed files with 17 additions and 15 deletions.
diff --git a/preview/blocks/footer.svelte b/preview/blocks/footer.svelte
@@ -7,11 +7,11 @@
   <Container>
     <div class="wrapper">
       <div>
-        <Typography size="s">Released under the MIT License</Typography>
-        <Typography size="s">Copyright © 2024 Azat S.</Typography>
+        <Typography size="m">Released under the MIT License</Typography>
+        <Typography size="m">Copyright © 2024 Azat S.</Typography>
       </div>
       <a href="https://github.com/azat-io/todoctor" target="_blank">
-        <Typography size="s">Source code on GitHub</Typography>
+        <Typography size="m">Source code on GitHub</Typography>
       </a>
     </div>
   </Container>

diff --git a/preview/blocks/header.svelte b/preview/blocks/header.svelte
@@ -42,7 +42,7 @@
 
 <style>
   .header {
-    padding-block: var(--space-xl) var(--space-xs);
+    padding-block: var(--space-m) var(--space-xs);
     margin-block-end: var(--space-xl);
   }
 

diff --git a/preview/elements/table-code.svelte b/preview/elements/table-code.svelte
@@ -13,8 +13,10 @@
 
 <style>
   .code {
-    margin: 0;
-    font-size: var(--font-size-2xs);
+    display: block;
+    margin: calc(var(--space-2xs) + 2px) 0;
+    font-family: Courier, monospace;
+    font-size: var(--font-size-m);
     color: var(--color-content-brand);
     text-decoration: underline;
     cursor: help;
@@ -26,7 +28,7 @@
     --tooltip-font-family: var(--font-family-base);
     --tooltip-color: var(--color-content-primary);
     --tooltip-border-radius: var(--border-radius);
-    --tooltip-font-size: var(--font-size-xs);
-    --tooltip-line-height: 1.35rem;
+    --tooltip-font-size: var(--font-size-m);
+    --tooltip-line-height: 1.75rem;
   }
 </style>
diff --git a/preview/elements/table-comment.svelte b/preview/elements/table-comment.svelte
@@ -7,7 +7,7 @@
   let formattedValue = value.replace(new RegExp(kind, 'i'), '<i>$&</i>')
 </script>
 
-<Typography size="s">
+<Typography size="m">
   <!-- eslint-disable-next-line svelte/no-at-html-tags -->
   {@html formattedValue}
 </Typography>
diff --git a/preview/elements/table-date.svelte b/preview/elements/table-date.svelte
@@ -11,10 +11,10 @@
 </script>
 
 <div class="date">
-  <Typography size="s">
+  <Typography size="m">
     {`${relativeValue} ago`}
   </Typography>
-  <Typography color="secondary" size="xs">
+  <Typography color="secondary" size="s">
     {formattedValue}
   </Typography>
 </div>

diff --git a/preview/elements/table-path.svelte b/preview/elements/table-path.svelte
@@ -7,5 +7,5 @@
 </script>
 
 <a href={`${currentPath}/${value}`}>
-  <Typography size="s">{`${value}:${line}`}</Typography>
+  <Typography size="m">{`${value}:${line}`}</Typography>
 </a>
diff --git a/preview/elements/table-user.svelte b/preview/elements/table-user.svelte
@@ -9,9 +9,9 @@
 <div class="user">
   <Avatar data={`${email}__${author}`} />
   <div class="info">
-    <Typography size="s" noWrap>{author}</Typography>
+    <Typography size="m" noWrap>{author}</Typography>
     <a href="mailto:{email}">
-      <Typography size="xs" color="inherit" noWrap>{email}</Typography>
+      <Typography size="s" color="inherit" noWrap>{email}</Typography>
     </a>
   </div>
 </div>

diff --git a/preview/elements/table.svelte b/preview/elements/table.svelte
@@ -155,7 +155,7 @@
 
   .th {
     padding: var(--space-s) var(--space-2xs);
-    font: var(--font-s);
+    font: var(--font-m);
     font-weight: 700;
     text-align: start;
     background: var(--color-background-secondary);