fix: tweak styles

koba04 · Jul 8, 2021 · 5b98fed · 5b98fed
1 parent 4c85441
commit 5b98fed
Showing 1 changed file with 17 additions and 9 deletions.
diff --git a/packages/swr-devtools/src/SWRDevTool.tsx b/packages/swr-devtools/src/SWRDevTool.tsx
@@ -7,32 +7,40 @@ const devToolWindowStyle: CSS.Properties = {
   display: "grid",
   gridTemplateColumns: "1fr 1fr",
   bottom: 0,
-  overflow: "scroll",
   width: "100%",
   height: "200px",
   backgroundColor: "#EEE",
 };
 
 const titleStyle: CSS.Properties = {
-  position: "sticky",
-  top: 0,
-  margin: "0.5rem",
-  backgroundColor: "#EEE",
+  fontSize: "1.2rem",
+  margin: "0.3rem",
 };
 
 const panelStyle: CSS.Properties = {};
 
+const logsStyle: CSS.Properties = {
+  overflow: "scroll",
+  height: "calc(200px - 1.8rem - 0.4rem)",
+  margin: "0.2rem",
+  border: "solid 1px #CCC",
+};
+
+const logLineStyle: CSS.Properties = {
+  borderBottom: "solid 1px #CCC",
+};
+
 const LatestCachePanel = () => {
   const [cacheData] = useSWRCache();
   return (
     <section style={panelStyle}>
       <h2 style={titleStyle}>Current Cache</h2>
-      <ul>
+      <ul style={logsStyle}>
         {cacheData.map(
           ({ key, data, timestampString, isValidating, error }) => (
             <li key={key}>
               {key} ({timestampString})
-              <ul>
+              <ul style={logLineStyle}>
                 <li>data: {JSON.stringify(data)}</li>
                 <li>isValidating: {isValidating.toString()}</li>
                 <li>error: {error || "null"}</li>
@@ -50,12 +58,12 @@ const LogsPanel = () => {
   return (
     <section style={panelStyle}>
       <h2 style={titleStyle}>Cache Logs</h2>
-      <ul>
+      <ul style={logsStyle}>
         {cacheData.map(
           ({ id, key, data, timestampString, isValidating, error }) => (
             <li key={id}>
               {key} ({timestampString})
-              <ul>
+              <ul style={logLineStyle}>
                 <li>data: {JSON.stringify(data)}</li>
                 <li>isValidating: {isValidating.toString()}</li>
                 <li>error: {error || "null"}</li>