Base64

Author: manhtai

src/components/Main.tsx

@@ -45,7 +45,7 @@ const Main = () => {
     <div className="absolute inset-0 flex flex-col overflow-hidden">
       <main className="relative flex flex-1 min-h-0">
         {/* Left sidebar */}
-        <nav className="flex flex-col w-1/4 overflow-x-hidden overflow-y-auto bg-gray-200">
+        <nav className="flex flex-col w-1/4 overflow-x-hidden overflow-y-auto bg-gray-300">
           <div
             className="px-2 my-6"
             role="menu"
@@ -67,7 +67,7 @@ const Main = () => {
         </nav>
 
         {/* Main content */}
-        <section className="relative flex flex-col w-full bg-gray-100">
+        <section className="relative flex flex-col w-full bg-gray-200">
           <div className="h-full overflow-x-hidden overflow-y-auto px-6 my-6">
             {routes.map(({ path, Component }) => (
               <Route key={path} exact path={path}>

src/components/base64/Base64.tsx

@@ -129,7 +129,7 @@ const Base64 = () => {
         />
         <div className="mx-1" />
         <textarea
-          className="flex-1 min-h-full bg-blue-100 p-4 rounded-md"
+          className="flex-1 min-h-full bg-gray-100 p-4 rounded-md"
           value={output}
           readOnly
         />

src/components/html-preview/HtmlPreview.tsx

@@ -47,7 +47,7 @@ const HtmlPreview = () => {
         />
         <div className="mx-1" />
         <section
-          className="flex-1 min-h-full bg-blue-50 p-4 prose rounded-md"
+          className="flex-1 min-h-full bg-gray-100 p-4 prose rounded-md"
           dangerouslySetInnerHTML={{ __html: html }}
         />
       </div>

src/components/md-to-html/MarkdownToHtml.tsx

@@ -76,14 +76,14 @@ const Md2Html = () => {
         <div className="mx-1" />
         {preview ? (
           <section
-            className="flex-1 min-h-full bg-blue-50 p-4 prose w-full rounded-md"
+            className="flex-1 min-h-full bg-gray-100 p-4 prose w-full rounded-md"
             dangerouslySetInnerHTML={{ __html: marked(md) }}
           />
         ) : (
           <textarea
-            className="flex-1 min-h-full bg-blue-100 p-4 rounded-md"
+            className="flex-1 min-h-full bg-gray-100 p-4 rounded-md"
             value={marked(md)}
-            disabled
+            readOnly
           />
         )}
       </div>

src/components/qrcode/QrCode.tsx

@@ -77,7 +77,7 @@ const HtmlPreview = () => {
           value={content}
         />
         <div className="mx-1" />
-        <section className="flex-1 min-h-full flex items-center p-4 prose bg-white rounded-md">
+        <section className="flex-1 min-h-full flex items-center p-4 prose bg-gray-100 rounded-md">
           {qrCode && <img src={qrCode} alt={content} />}
         </section>
       </div>

src/components/unix-timestamp/UnixTimestamp.tsx

@@ -104,7 +104,7 @@ const UnixTimestampConverter = () => {
         </label>
       </section>
 
-      <section className="flex flex-col space-y-4 w-full p-4 pb-8 rounded-md bg-gray-200 border mb-4">
+      <section className="flex flex-col space-y-4 w-full p-4 pb-8 rounded-md shadow-sm bg-gray-100 border mb-4">
         <section className="flex items-center justify-between space-x-4">
           <label htmlFor="local" className="flex-1">
             <span>Local:</span>
@@ -172,9 +172,9 @@ const UnixTimestampConverter = () => {
           </label>
         </section>
       </section>
-      <section className="mt-4 pt-4 space-y-1 flex items-center border-t space-x-2 pb-4">
+      <section className="pt-4 space-y-1 flex items-center space-x-2 pb-4">
         <p>The current Unix epoch time is</p>
-        <span className="bg-blue-200 px-2 py-0.5 rounded font-mono">
+        <span className="bg-gray-100 border shadow-sm px-2 py-0.5 rounded-md font-mono">
           {date.unix()}
         </span>
         <button